/* Referenties slider
============================================== */
div#refSlider.refWrapper .referentie .refContent .refFoot::after,
div#refSlider.refWrapper .referentie::after,
div#refSlider.refWrapper .referentie .refContent::after {
	clear: both;
	content: " ";
	display: block;
}
div#refSlider.refWrapper,
div#refSlider.refWrapper div.refContainer,
div#refSlider.refWrapper .referentieWrapper {
	width: 100%;
}

div#refSlider.refWrapper .referentie .foto{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;	

	width: 30%;
	height: 350px;
	height: 300px;
	display: inline-block;
	float: left;
}
div#refSlider.refWrapper .referentie .refContent {
	width: 100%;
	display: inline-block;
	float: left;
	padding: 20px 0 40px 0;
	position: relative;
}

div#refSlider.refWrapper .referentie .foto + .refContent {
	margin-left: 20px;
	width: calc(70% - 20px);
}
div#refSlider.refWrapper .referentie .refContent .refHead {
	width: 100%;

	color: #e07000;
}

div#refSlider.refWrapper .referentie .refContent .refHead .titel{
	float: right;
	text-transform: uppercase;
	font-weight: bold;
}
div#refSlider.refWrapper .referentie .refContent .refText::before,
div#refSlider.refWrapper .referentie .refContent .refText::after {
	color: #000;
	display: inline-block;
	font-family: viv;
	font-size: 26px;
	position: absolute;
	vertical-align: middle;
}
div#refSlider.refWrapper .referentie .refContent .refText::before {
	content: "\e902";	
	padding-right: 3px;
	top: 0px;
	left: 0px;
}
div#refSlider.refWrapper .referentie .refContent .refText::after {	
	content: "\e900";
	padding-left: 3px;
	right: 0px;
	bottom: 10px;
}
div#refSlider.refWrapper .referentie .refContent .refText {
	padding: 7px 35px 1px;
	position: relative;
}
div#refSlider.refWrapper .referentie .refContent .refText h3{
	font-size: 17px;
	line-height: 22px;	
	font-weight: bold;
}
div#refSlider.refWrapper .referentie .refContent .refText p,
div#refSlider.refWrapper .referentie .refContent .refText .refExcerpt {
	font-size: 15px;
	line-height: 30px;
}
div#refSlider.refWrapper .referentie .refContent .refText .refLink {
	font-weight: bold;
	text-decoration: none;
	line-height: 35px;
	color: #000;
}
div#refSlider.refWrapper .referentie .refContent .refText .refLink i{
	color: #004b8d;
}
div#refSlider.refWrapper .referentie .refContent .refFoot {
	padding: 0px 0px 0px 35px;
	position: absolute;
	bottom: 20px;
	width: 100%;

}
div#refSlider.refWrapper .referentie .refContent .refFoot span{
	color: #3385ca;
	font-size: 17px;
}
.referentie .refContent .refFoot .score{}

div#refSlider.refWrapper { background-color: #f2f2f2; }

div#refSlider.refWrapper .referentie{
	/* width: 1160px; */
	width: 970px;
	margin: auto;
}
div#refSlider.refWrapper .referentie .refContent {
	height: 300px;	
}

	/* Media Queries - bs3: 
	================================================== */
	/* Large Devices, Wide Screens */
	@media only screen and (max-width: 1200px) {
		div#refSlider.refWrapper div.referentie{ width: calc(100% - 100px); }
	}
	@media only screen and (max-width: 767px) {
		div#refSlider.refWrapper div.refContainer.slick-slider button.slick-arrow{ display: none!important; }
		div#refSlider.refWrapper div.referentie { width: calc(100% - 10px); }

		div#refSlider.refWrapper .referentie .foto{ display: none; }
		div#refSlider.refWrapper .referentie .foto + .refContent { 
			width: 100%; 
			margin: 0px;
		}		
		div#refSlider.refWrapper .referentie .refContent {			
			height: 350px;
			width: 100%;
			margin: 0px;
		}
		div#refSlider.refWrapper .referentie .refContent .refText p, 
		div#refSlider.refWrapper .referentie .refContent .refText .refExcerpt {
			text-align: justify;
		}	
		div.refWrapper .referentie .refContent .refFoot {
			padding: 0 0 0 25px;
		}		
	}
	@media only screen and (max-width: 479px) {
		div#refSlider.refWrapper { display: none; }		

		div#refSlider.refWrapper .referentie .refContent { height: 400px; }

		div#refSlider.refWrapper .referentie .refContent { height: 420px; }
	}


/* buttons 
================================================== */

div#refSlider.refWrapper div.refContainer.slick-slider button.slick-arrow {
	position: absolute;
	top: 50px;
}

div#refSlider.refWrapper div.refContainer.slick-slider button.slick-arrow::before {
	-moz-osx-font-smoothing: grayscale;
	color: #fff;
	font-family: FontAwesome;
	font-size: 36px;
	font-weight: bold;
	line-height: 1;
	opacity: 0.75;
	text-shadow: 1px 0 2px rgba(0, 0, 0, 0.2), -1px 0 2px rgba(0, 0, 0, 0.2);  
}
div#refSlider.refWrapper div.refContainer.slick-slider button.slick-arrow {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;

	background: transparent none repeat scroll 0 0;
	border: medium none;
	color: transparent;
	cursor: pointer;
	display: block;
	font-size: 0;	
	line-height: 0;	
	outline: medium none;
	padding: 0;
	position: absolute;
	top: 50%;
	margin-top: -18px;
	height: 36px;
	width: 20px;
	z-index: 100;
}
	/* left */
	div#refSlider.refWrapper div.refContainer.slick-slider button.slick-prev.slick-arrow {
		left: 20px;
	}
	div#refSlider.refWrapper div.refContainer.slick-slider button.slick-prev::before {
		/* content: '\f104'; */
		content: '\f0d9';
	}
	/* right */
	div#refSlider.refWrapper div.refContainer.slick-slider button.slick-next.slick-arrow {
		right: 20px;
	}	
	div#refSlider.refWrapper div.refContainer.slick-slider button.slick-next::before {
		/* content: '\f105'; */
		content: '\f0da';
	}

/* Referenties Overview 
============================================== */
div#overview.refWrapper .referentie .refContent::after,
div#overview.refWrapper .referentie .refLeft::after,
div#overview.refWrapper .referentie::after,
div#overview.refWrapper::after {
	clear: both;
	content: " ";
	display: block;
}
div#overview.refWrapper .referentie {
	margin-bottom: 20px;
	border-bottom: 1px solid #e07000;
	position: relative;
}

/* --- left --- */
div#overview.refWrapper .referentie .refLeft{
	width: 25%;
	float: left;
	padding-bottom: 5px;
}
div#overview.refWrapper .referentie .refLeft p {
	display: inline-block;
	float: left;
	font-size: 11px;
	line-height: 14px;
	margin: 0;
	width: 100%;
}
div#overview.refWrapper .referentie .refLeft p span{
	text-decoration: underline;
}

div#overview.refWrapper .referentie .noFoto,
div#overview.refWrapper .referentie .foto {
	float: left;
	display: inline-block;
	width: 80%;
	padding-top: 80%;
	border-radius: 50%;
	/*border: 1px solid #004b8d;*/
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.75);
	margin-bottom: 10px;
}


div#overview.refWrapper .referentie .foto {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;	
}

div#overview.refWrapper .referentie .noFoto{
	position: relative;
	border: 1px solid #004b8d;
}
div#overview.refWrapper .referentie .noFoto:before {
	content: '\f007';
	font-family: FontAwesome;
	color: #004b8d;
	font-size: 70px;
	height: 0;
	left: 0;
	line-height: 0;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
}

/* --- right --- */

div#overview.refWrapper .referentie .refContent{
	width: 72%;
	float: right;
	margin-bottom: 35px;
}

/* --- foot --- */
div#overview.refWrapper .referentie .refFoot{
	position: absolute;
	bottom: 0px;
	z-index: 20;
	right: 0;
	width: 72%;
}
div#overview.refWrapper .referentie .refFoot .rechtsgebieden{
	display: inline-block;
	float: left;
}
div#overview.refWrapper .referentie .refFoot .rechtsgebieden > a {
  background-color: #004b8d;
  color: #fff;
  display: inline-block;
  float: left;
  font-size: 17px;
  margin-right: 3px;
  min-width: 35px;
  padding: 2px 5px;
  text-align: center;
}
	div#overview.refWrapper .referentie .refFoot .rechtsgebieden > a:hover {
		background-color: #000;
	}

div#overview.refWrapper .referentie .refFoot .score{
	float: right;
}


	/* Media Queries - bs3: 
	================================================== */
	/* Large Devices, Wide Screens */
	@media only screen and (max-width: 1200px) {
	}
	@media only screen and (max-width: 767px) {

	}
	@media only screen and (max-width: 479px) {
		div#overview.refWrapper .referentie .refLeft,
		div#overview.refWrapper .referentie .refContent,
		div#overview.refWrapper .referentie .refFoot{
			width: 100%;
		}
		div#overview.refWrapper .referentie .noFoto{ display: none; }
		div#overview.refWrapper .referentie .foto {
			width: 100%;
			padding-top: 100%;
		}

	}

/* Referentie Single page Styles
============================================== */

body.single-quote header.entry-header p.sub-title::after {
	clear: both;
	content: " ";
	display: block;
}
body.single-quote header.entry-header p.sub-title {
	width: 100%;
}
body.single-quote header.entry-header p.sub-title h2{
	display: inline-block;
	float: left;
}
body.single-quote header.entry-header p.sub-title span.score{
	display: inline-block;
	float: right;
	color: #3385ca;
}
body.single-quote section#main div.entry-content div.foto {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;	
	
	border: 1px solid #dadada;
	display: inline-block;
	float: left;
	margin: 0 10px 5px 0;
	padding-top: 40%;
	width: 40%;
}

/* Random Referenties
============================================== */

.referentie.random::after {
	clear: both;
	content: " ";
	display: block;;
}
.referentie.random{ width: 100%; }



.referentie.random .foto{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;	

	width: 33.3333%;
	height: 300px;
	display: inline-block;
	float: right;
}
.referentie.random .refContent {
	width: calc(100% - 20px);
	min-height: 300px;
	display: inline-block;
	float: left;
	padding: 20px 0 40px 0;
	position: relative;
	margin-right: 20px;
}

.referentie.random .foto + .refContent {
	width: calc(66.6666% - 20px);
}
.referentie.random .refContent .refHead{}
.referentie.random .refContent .refHead .score{ 
	color: #004b8d; 
	color: #e07000; 
	line-height: 27px;
}
.referentie.random .refContent .refHead h3{
	display: inline-block;
	float: right;
	text-transform: uppercase;
	margin: 0px;
	font-weight: bold;
}
.referentie.random .refContent .refText{}
.referentie.random .refContent .refText h4{
	font-weight: bold;
	font-size: 13px;
	margin: 20px 0;
}
.referentie.random .refContent .refExcerpt{
	line-height: 28px;
}
.referentie.random .refContent .refExcerpt:before{
	content: "\201C";
	display: inline-block;
	float: left;
}
.referentie.random .refContent .refExcerpt:after{
	content: "\201D";
	display: inline-block;
}
.referentie.random .refContent .refFoot{
	position: absolute;
	bottom: 10px;
	width: 100%;
}
.referentie.random .refContent .refFoot a{
	color: #000;
	text-decoration: underline;
	font-size: 12px;
	font-weight: bold;
}
	.referentie.random .refContent .refFoot a:hover{ color: #004b8d; }
	/* Media Queries - bs3: 
	================================================== */
	/* Large Devices, Wide Screens */
	@media only screen and (max-width: 1200px) {		
		.referentie.random .refContent .refExcerpt {
			line-height: 24px;
		}
	}
	@media only screen and (max-width: 992px) {
		.referentie.random .foto{
			float: left;
		}
		.referentie.random .foto{
			height: 300px;
			width: 100%;
		}
		.referentie.random .refContent,
		.referentie.random .foto + .refContent {
			width: 100%;
			height: auto;
		}
	}
	@media only screen and (max-width: 767px) {
		.referentie.random .foto{
			height: 220px;
		}
	}
	@media only screen and (max-width: 479px) {
		.referentie.random .foto {
			height: 150px;
		}
	}


/* klantenvertellen Sidebar
============================================== */
.klantenvertellenSidebar {
	background-color: #ebebeb;
}
.klantenvertellenSidebar .klantenvertellen{
	width: 100%;
	display: inline-block;
	text-align: center;
	background-color: #dadada;
	padding: 10px;
	margin-bottom: 10px;
}
.klantenvertellenSidebar .klantenvertellen iframe{}
.klantenvertellenSidebar .kvReview {
	display: inline-block;
	width: 100%;
	background-color: #dadada;
	margin-bottom: 10px;
}
.klantenvertellenSidebar .kvReview .left {
	display: inline-block;
	float: left;
	width: calc(100% - 50px);
	padding: 0 5px 0 10px;
}
.klantenvertellenSidebar .kvReview .right {
	display: inline-block;
	float: right;
	width: 50px;
	height: 40px;
	background-color: #fff;
	line-height: 40px;
	font-weight: bold;
	font-size: 23px;
	text-align: center;
}
.klantenvertellenSidebar .kvReview .full {
	display: inline-block;
	float: left;
	width: 100%;
	padding: 0 10px;
}
.klantenvertellenSidebar a.leesMeer {
	display: inline-block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	background-color: #000;
	border: 1px solid #000;
	padding: 5px 10px;
	margin-bottom: 10px;
	transition: all 0.3s ease;
}
	.klantenvertellenSidebar a.leesMeer:hover {
		background-color: #fff;
		color: #000;
	}