/* Qarpa
 Copyright 2011 All rights reserved
 Qarpa Solutions BV
 info@qarpa.nl
 http://qarpa.nl
 08 December 2014 
   */
/* CSS global reset for all browsers */ 
* {
	padding: 0;
	margin: 0;
	}

/* #######################  GENERAL SETTINGS ############################ */

html,body {
	font-family: Verdana;
	font-size: 14px;
	margin-top: 0px;
	padding-top: 0px;
	background: #fff;
	color: #404040;
	height:100%;
	overflow-x: hidden;
	}


/*  Global Formatting */
h1 {font-size:16px;line-height: 1em;font-weight: 900; text-transform:uppercase}
h2 {font-size:16px;line-height: 1em;font-weight: 900;}
h3 {font-size:14px;line-height: 1em;font-weight: 900;padding: 30px 0 20px;}
h4 {font-size:13px;line-height: 1em;font-weight: 900;}
h5 {font-size:13px;line-height: 1em;font-weight: 900;}
h6 {font-size:12px;line-height: 1em;font-weight: 900;}
td{}
th{}
a {color: #005750;;}
a:hover {color: #404040; text-decoration:none}
a:visited {color: #005750;}
a.image, a.image:hover  {border:none;}
p {margin: 0 0 9px;}

h1 {
	position: relative;
	margin-bottom: 13px;
	}
h1:after {
	display: block;
	content: "";
	width: 120px;
	position: absolute;
	top: 0;
	left: 0;
	height: 1em;
	border-bottom: 3px solid #e2b600;
	padding-bottom: 10px;
	}

li
{
/* line-height: 14px; */
padding-left: 0px;
padding-top: 0px;
background-repeat: no-repeat;
background-position: 0px 2px;
}

ul { list-style: disc; padding-left: 15px;}

ol { padding-left: 23px;}

/* #######################  END GENERAL SETTINGS ############################ */

.menuvoorbeeld li {
	display: inline;
	background: #fff;
	margin: 0 20px 0;
	padding: 1px 10px 2px;
	font-size: 18px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}

.mainbody h2 {
	margin-bottom: 30px;
	color: #fff;
	}
.mainbody h2 a {
	color: #fff;
	text-decoration: none;
	}

.imgside {
	margin-right: -110px;
	margin-left: 20px;
	float: right;
	}
.imgright {
	margin-right: -290px;
	float: right;
	}

.menucontainer li {
	margin-right: 30px;
    font-size: 16px;
    font-weight: bold;
	color: #005750;
    float: left;
	}
.menucontainer li a {
	color: #005750;
	text-decoration: none;
	}
.menucontainer li:first-child {
	list-style-type: none;
    margin-left: -5px;
	}
.menucontainer li:hover {
	color: #e2b600;
	}

.trainingmenucontainer li {
    font-size: 16px;
    font-weight: bold;
	color: #0244b8;
	margin-left: 8px;
    line-height: 28px;
	}
.trainingmenucontainer li a {
	color: #0244b8;
	text-decoration: none;
	}
.trainingmenucontainer li:hover {
	color: #ff6600;
	}

.trainingmenucontainer .newsflash {
	border: 1px solid #0244B8;
    padding: 12px 10px 10px;
    margin-top: 20px;
    color: #0244B8;
	font-size: 12px;
	}
	.trainingmenucontainer .newsflash h4 {
		padding: 5px 0;
		}

.trainingmenucontainer h3 {
	color: #0244B8;
    background: #fff;
    float: right;
    margin: -6px 6px;
    padding: 0 3px;
	}

.meerreferenties {
	text-align: right;
    color: #0244B8;
    border-bottom: 1px solid #0244B8;
    border-left: 1px solid #0244B8;
    border-right: 1px solid #0244B8;
    padding: 4px 10px;
	position: relative;
	}
	.schrijfreferentie {
		position: absolute;
		top: 4px;
		left: 7px;
		width: 20px;
		height: 20px;
		}

.referentiescontainer {
	padding: 0 10px;
	overflow: auto;
	}
	.referentiescol1 {
		float: left;
		width: 300px;
		margin-right: 20px;
		}
		.referentiescol1 h3 {
			background: #0244B8;
			padding: 7px 0 7px 10px;
			margin: 0 0 0 -10px;
			color: #fff;
			}
	.referentiescol2 {
		float: left;
		width: 300px;
		margin-right: 20px;
		}
		.referentiescol2 h3 {
			background: #0244B8;
			padding: 7px 0 7px 10px;
			margin: 0 0 0 0;
			color: #fff;
			}
	.referentiescol3 {
		float: left;
		width: 300px;
		}
		.referentiescol3 h3 {
			background: #0244B8;
			padding: 7px 0 7px 10px;
			margin: 0 -10px 0 0;
			color: #fff;
			}
	.referentiescontainer .newsflash {
		padding-right: 10px;
		text-align: justify;
		}
	.referentiescontainer .newsflash h4 {
		margin: 20px 0 5px;
		}

.dp-upcoming-calendar-background {
	background-color: #e2b600 !important;
	}
.dp-upcoming-text-day {
	color: #e2b600 !important;
	}

/* ### CTA buttons Ravisie ### */

.cta-nlp {
	float: right;
    margin-top: 20px;
	}

.arrowRavisie {
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	}
  .arrowRavisie svg {
	height: 16px;
	width: 20px;
	fill: #fff;
	}
    .arrowRavisie svg:last-of-type {
		margin-left: 20px;
		}
  
.arrowRavisie-clip {
	align-items: center;
	display: flex;
	overflow: hidden;
	transform: translateX(-40px);
	width: 230px;
	}

@keyframes arrowRavisie {
	to {
		transform: translateX(0);
		}
	}

.cta-button:hover .arrowRavisie-clip {
	animation-delay: 150ms;
	animation-duration: 0.8s;
	animation-name: arrowRavisie;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.55, 0, 0.21, 1);
	}

.cta-button {
	border-radius: 4px;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-size: 1rem;
	font-weight: 500;
	height: 64px;
	width: fit-content;
	line-height: 1;
	padding-left: 1rem;
	padding-right: 2rem;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: all 150ms cubic-bezier(0.61, 1, 0.88, 1);
	white-space: nowrap;
	-webkit-box-shadow: 3px 3px 4px 0px #000000; 
	box-shadow: 3px 3px 4px 0px #000000;
	}
	.cta-button:hover,
	.cta-button:focus {
		/* box-shadow: 0 3px 7px 1px rgba(50, 50, 50, 0.25); */
		-webkit-box-shadow: 3px 3px 4px -1px #000000; 
		box-shadow: 3px 3px 4px -1px #000000;
		transform: translate(1px, 1px);
		}

.cta-button span {
	display: block;
	line-height: 1;
	padding-right: 1.5rem;
	}
.cta-button span:first-of-type {
	font-size: 0.90rem;
	line-height: 1.5;
	}
  
/* kleuren CTA buttons */

.cta-nlp .cta-button {
	background-color: #e2b600;
	color: #000;
	}
.cta-nlp .cta-button span:first-of-type {
	color: white;
	}

/* ### End CTA buttons Ravisie ### */

.metctabutton {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
.infoblok {
	-webkit-box-shadow: 3px 3px 5px 0px #000000; 
	box-shadow: 3px 3px 5px 0px #000000;
	background: #fff;
	padding: 10px 20px;
	margin-right: 20px;
	}

.maincontent ul {
	margin: 10px;
	}
	.maincontent li {
		line-height: 1.5em;
		}
		.maincontent li::marker {
			color: #005750;
			}
	
/* ##### DPCalendar ###### */

#dpc-event-view {
	margin-left: 0 !important;
	}

.dp-upcoming p {
	margin: 0 0 9px 50px;
	}

.dp-upcoming-calendar {
	background-image: none !important;
	}

.map-responsive {
    overflow: hidden;
    position: relative;
    height: 250px;
    width: 100%;
    right: 0;
	}
	.map-responsive iframe {
		width: 100%;
		}

.bfClearfix:first-of-type>div:last-of-type span {
	display: none;
	}

.bfElemWrap label {
	margin: 5px 0;
	margin-right: 10px;
	}
.bfElemWrap input {
	padding: 5px 10px;
    margin: 5px 0;
	}
button {
	padding: 5px 10px;
    background: #941214;
    border: none;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 5px 0;
	}

/* ######################  LAYOUT SETTINGS       ############################## */

.bodywrapper {
	width:960px;
	margin: 0px auto;
	background: #fff;
	/*background: url('../images/pptheader2.png') no-repeat 0 0;*/
	min-height:100%;
	position:relative;
	}

.topwrapper { 
	height: 275px;
	width:960px;
	margin: 0;
	padding: 0;
	position: relative;
	}
	.topcontainer {  
		width:960px;
		height: 220px;	
		position: relative;
		}
		.topheader { 
			height: 230px;
			overflow: hidden;
			width: 100vw;
			position: absolute;
			margin-left: calc(-100vw / 2 + 960px / 2);
			margin-right: calc(-100vw / 2 + 960px / 2);
			}
			.topheader img { 
				width: 100%;
				height: 230px;
				object-fit: cover;
				object-position: top;
				}
		@media only screen 
		  and (min-width: 1600px) {

			.topheader { 
				margin: 0;
				left: 50%;
				transform: translateX(-50%);
				max-width: 1600px;
				}
			}
		@media only screen 
		  and (max-width: 960px) {

			.topheader { 
				margin: 0;
				}
			}


		.toplogo { 
			width: 150px;
			height: 150px;
			top: 17px;
			right: 60px;
			position: absolute;
			z-index: 10;
			background: #fff;
			padding: 20px;
			-webkit-border-radius: 15px;
			-moz-border-radius: 15px;
			border-radius: 15px;
			}
		.topsocial { 
			width:100px;
			height:120px;
			float:right;
			text-align: right;
			margin-top: 47px;
			}
	.menucontainer {
		width: 632px;
		height: 25px;
		text-align: left;
		position: absolute;
		top: 240px;
		left: 0;
		}
	.trainingmenucontainer {
		width: 238px;
		height: 80px;
		text-align: left;
		position: absolute;
		top: 188px;
		right: 0;
		}

.mainwrapper { 
	width: 960px;
	margin: 0px auto;
	padding-bottom: 60px;
	}
	.maincontainer {
		overflow: auto;
		margin-top: 10px;
		}
		.mainbody {
			float: left;
			width: 620px;
			margin-bottom: 20px;
			padding: 0 0 0 10px;
			text-align: justify;
			}
			.maincontent {
				clear: both;
				}
		.mainright {
			float: right;
			width: 250px;
			min-height: 200px;
			}
		.mainright ul.menu {
			list-style: none;
			padding-left: 0;
			border-bottom: 1px solid #0066b2;
			padding-bottom: 30px;
			}
			.mainright ul.menu li {
				padding-bottom: 3px;
				}
				.mainright ul.menu li a {
					text-decoration: none;
					font-weight: 400;
					font-size: 14px;
					}
		.mainright h3 {
			font-size: 16px;
			}

/* #######################  END LAYOUT SETTINGS ############################ */

/* Footer & bottom area */

.footercontainer { 
	width: 100vw;
	margin: 0px 0 0;
	background: #656767;
	overflow: auto;
    position: relative;
    z-index: 1001;
	left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
	}
	.footerwrapper {  
		width: 90vw;
		max-width: 960px;
		margin: 0px auto;
		min-height: 300px;
		padding-top: 40px;
		}
		.footer { 
			color: #fff;
			padding: 10px 20px 50px 0;
			font-size: 14px;
			box-sizing: border-box;
			float: left;
			padding: 0 15px;
			min-height: 100px;
			width: 25%;
			}
			.footer a {
				color: #fff;
				font-weight: 400;
				text-decoration: none;
				}
			.footer a:hover {
				text-decoration: underline;
				}
			.footer h3 {
				padding-bottom: 20px;
				color: #fff;
				text-align: left;
				}
			.footer ul {
				padding-left: 20px;
				}
			.footer1 {
				padding-left: 0;
				}
			.footer2 {
				
				}
			.footer3 {
				
				}
			.footer4-5 {
				padding-right: 0;
				}
				.footer4 {
					min-height: 40px;
					}
				.footer5 {
					min-height: 50px;
					}

.footer a.aanmelden-nieuwtjes {
	background: #fff;
    padding: 5px 10px 8px;
    color: #404040;
	font-family: 'Open Sans', sans-serif !important /* main-font */;
    font-size: 13px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}

/* social */

.social {
	
	}

.social .fab {
    font-size: 40px;
    width: 40px;
    text-decoration: none;
    color: white;
}

.social .fab:hover {
    opacity: 0.85;
}

/* end social */

@media only screen 
  and (max-width: 930px) {
	
	.footer {
		width: 33%;
		}
		.footer3 {
			padding-right: 0;
			}
		.footer4-5 {
			clear: both;
			width: 100%;
			padding: 0;
			margin-bottom: 20px;
			}
			.footer4 {
				width: 33%;
				float: left;
				}
	}

@media only screen /* voor menu */
  and (max-width: 600px) {

	/* inklapbare div's in de footer op mobiel */
	.footerwrapper {
		width: 100%;
		padding-top: 20px;
		min-height: 0;
		}

	.footer,
	.footer4,
	.footer5 {
		clear: both;
		width: 100%;
		padding: 0;
		}
		.footer {
			padding: 0 5vw;
			min-height: 0;
			}
		.footer h3 {
			border-top: 1px solid #ccc;
			margin: 0 -5vw 10px;
			padding: 10px 5vw;
			font-size: calc(16px + 0.3vw);
			margin-bottom: 0;
			}
			.footer h3::after {
				float: right;
				font-size: 14px;
				margin-top: 4px;
				font-family: "Font Awesome 5 Free"; 
				font-weight: 900; 
				content: "\f078";
				}
			.footer5 h3 {
				border-bottom: 1px solid #ccc;
				transition: border-width 0s ease-out 0.4s;
				}
		.ftoggle .custom,
		.ftoggle ul {
			max-height: 0;
			transition: all 0.5s ease;
			overflow: hidden;
			margin-bottom: 0;
			}
		
		.footertoggle h3 {
			cursor: pointer; 
			}
		
		.ftoggle.open ul,
		.ftoggle.open .custom {
			max-height: 500px;
			margin-bottom: 10px;
			}
			.footer5.open h3 {
				border-bottom-width: 0;
				transition: border-width 0s ease-out 0s;
				}
		.ftoggle.open h3::after {
			content: "\f077";
			}
	/* end inklapbare div's in de footer op mobiel */
	
	.wieImgWrapper {
		display: block; 
		}
		.wieImg {
			width: 100%;
			}

	}

.bottomcontainer { 
	color: #fff;
    width: 100vw;
    margin: 0px 0 0;
    background: #656767;
    overflow: auto;
    position: relative;
    z-index: 1001;
    left: 50%;
    transform: translateX(-50%);
	}
	.bottom {  
		width: 90vw;
		max-width: 960px;
		margin: 0px auto 10px;
		font-size: calc(10px + 0.3vw);
		overflow: auto;
		}
		.bottom-links {
			float: left;
			margin-top: 0;
			}		
		.bottom-rechts {
			float: right;
			margin-top: 20px;
			}
	.bottom a {
		font-weight: 400;
		text-decoration: none;
		}
	.bottom a:hover {
		text-decoration: underline;
		}
	.bottom-links a h1 {
		color: #fff;
		font-weight: 100;
		font-size: 20px;
		}
		.bottom .bottom-links a:hover h1,
		.bottom .bottom-links a:hover {
			text-decoration: none !important;
			color: #ff6600;
			}

@media only screen 
  and (max-width: 414px) {

	.bottom {
		font-size: 18px;
		}

	.bottomcontainer {
		padding: 20px 0 80px;
		}
}

/* End Footer & bottom area */