@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	/*font: inherit;*/
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
/*ol, ul { list-style: none; }*/
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }


/* CLEARFIX HACK : http://nicolasgallagher.com/micro-clearfix-hack/ */
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before, .clearfix:after { 
    content: " "; /* 1 */
    display: table; /* 2 */
	line-height:0;
}
.clearfix:after { clear: both; }

/*********************** start sitegebonden css ***********************/

/* Google webfonts */

/*
    font-family: 'Cabin Condensed', sans-serif;
	font-family: 'Muli', sans-serif;
*/

* {	box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */ margin: 0; padding: 0; }

html {	/*basis voor baseline grid*/ font-size: 100%; line-height: 1; }
body { 	font-size: 1em; line-height: 1.6em; font-family: 'Muli', sans-serif; }

a:link, a:active, a:visited { color:			#095aa6;	}
a:hover {	color:			#ff9900; }
a img {	border:			0px;	}

img { max-width: 100%; height: auto; }
p { max-width: 1220px; margin: 0 auto; padding: 0 0 1.5em 1em;  }
table { max-width: 1220px; margin: 0 1em; }
	table.lblauw td { background-color : #CDDEED; border: 1px solid #fff; }

hr { border: 0;	color: #77A7CC; background-color:#77A7CC; height: 1px; margin: 1em 0em; }

h1 { font-family: 'Cabin Condensed', sans-serif; font-weight: normal; font-size: 2.1em; color: #095AA6; margin: 1em 0; padding: 0 .5em; line-height: 1em; }
h2 { font-family: 'Cabin Condensed', sans-serif; font-weight: normal; font-size: 1.6em; color: #000; margin:	0 0 1em 0; padding: 0 .65em; line-height: 1em; }
h3 { font-family: 'Cabin Condensed', sans-serif; font-weight: normal; font-size: 1.4em; color: #095AA6; margin: 0 0 1em 0; padding: 0 .65em; line-height: 1em; }
h4 { font-family: 'Cabin Condensed', sans-serif; font-weight: normal; font-size: 1em; color: #000; margin: 0; padding: 0 0 .25em 1em; line-height: 1em; }
h1 { max-width: 1220px; margin: 1em auto; }


.nobreak { white-space: nowrap; } 

ul { margin-left: 1em; }

td { vertical-align: top; padding: 4px; }
td.lblauw {	background-color : #CDDEED; padding: .25em .5em; border: 1px solid #fff;	}
td.wit {	background-color : #f2f2f2; }

.sitecontainer {	position: relative; max-width: 1220px; margin: 0 auto; padding: 20px; }
#kop { position: relative; max-width: 1220px; margin: 0 auto; padding: 1em 40px; height: 100px;	 }
#logo { position: absolute; top: 16px; z-index: 999;  }
#logo img { max-width: 80%; }

.reviews { position: relative; top: 1em; left: 360px; font-size: .9em; }
@media screen and (max-width: 760px) {
.reviews { position: relative; top: 4em; left: 0px; font-size: .9em; }
}
.reviews .fa-star { color: #F9BD10; padding: .1em; }

#content { margin: 0 0 2em 0; }

.grijs {	margin: 2em 0; padding: 2em 1em 4em; background: url(../images/bg_intro.jpg) bottom center no-repeat; background-size:cover; }
/*.blauw {	margin: 2em 0; padding: 2em 1em; color:#fff; 		
	background: #4CA5D2 url(../img/bg_bollen.png) top -1em left no-repeat;
	background: url(../img/bg_bollen.png) top -1em left no-repeat, -webkit-linear-gradient(to right,#4CA5D2,#6FB7DB); /* For Safari 5.1 to 6.0 */
/*	background: url(../img/bg_bollen.png) top -1em left no-repeat, -o-linear-gradient(to right,#4CA5D2,#6FB7DB); /* For Opera 11.1 to 12.0 */
/*	background: url(../img/bg_bollen.png) top -1em left no-repeat, -moz-linear-gradient(to right,#4CA5D2,#6FB7DB); /* For Firefox 3.6 to 15 */
/*	background: url(../img/bg_bollen.png) top -1em left no-repeat, linear-gradient(to right,#4CA5D2,#6FB7DB); /* Standard syntax */ 
/*}
	.blauw ul.opmaak li,
	.groen ul.opmaak li { color:#333; }

.lblauw {	margin: 2em 0; padding: 1em; background: #C9E4F1; }
*/

/*menu: zie menu.css*/

/*zoekfunctie*/
#hoofdnav form { margin: 0; padding: 0; }
#zoeken {
	display:			inline-block;
	background:			#095AA6;
	line-height:		35px;
	padding-left:		12px;
}
#zoeken input {
	width:				105px;
	/*height:				21px; /*18px;*/
	border:				0px;
	position:			relative;
	margin:				.5em 0;
	padding: .25em;
}
#zoeken .btn {
	/*vertical-align:		top;*/
	background:			#095AA6;
	color:				#fff;
	margin-top:			.5em;
	border: 			none;
	padding: 0 .5em;
	cursor: pointer;
}

/* btn taxatierapport */
#btn_tax { position: absolute; bottom: -3em; right: 2.5em; z-index: 999; /*transition: all .2s;*/ }
@media screen and (max-width: 760px) {
	#btn_tax { max-width: 80px; max-height: auto; right: 1em; }
}
/*#btn_tax:hover { transform: scale(1.03); }*/

@keyframes scale {
	0%  { transform: scale(1); -webkit-transform: scale(1); }
	100% { transform: scale(1.04); -webkit-transform: scale(1.04); }	
}
#btn_tax { animation: scale 1s ease-in-out infinite alternate; -webkit-animation: scale 1s ease-in-out infinite alternate; }
#btn_tax:hover {
	-webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

	
/*tekstpagina*/
#beeldstrook_container {
	position: relative;
	background: #3A7AB7;
	background: -webkit-linear-gradient(#3A7AB7, #B4CCE4); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#3A7AB7, #B4CCE4); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#3A7AB7, #B4CCE4); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#3A7AB7, #B4CCE4); /* Standard syntax */ 
 }
#beeldstrook {	position: relative; max-width: 1220px; margin: 0 auto; padding: 0; }
#beeldstrook_container #schuin { display: block; position: absolute; bottom: 0; height: 150px; width: 100%; background:url(../images/schuin.png) bottom left no-repeat;  }
#beeldstrook img { width: 100%; }

#kol1 {
	width:				340px;
	float:				left;
	font-size:			1.3em;
	/*padding-top:		7.7em;	*/
	line-height:		1.6em;
}

#kol2 {
	width:				580px;
	float:				left;
	margin-left:		20px;
	font-size:			1.3em;
	line-height:		1.6em;
}
.clear {
	clear:				both;	
}


/*zoekresultaten*/
.zm_paginering a {
	padding:			2px 5px;
	border:				1px solid #095AA6;	
	text-decoration:	none;
	color:				#095AA6;
}
.zm_paginering a:hover {
	background:			#ff9900;
	color:				#fff;	
	border:				1px solid #ff9900;	
}
.zm_paginering a.here {
	background:			#095AA6;
	color:				#fff;	
}

.categorie {
	font-size:			0.9em;
	color:				#999;
}

.zm_kol1 {
	border-top:			1px solid #cddeed;
	width:				25px;
}
.zm_kol2 {
	border-top:			1px solid #cddeed;
}
.zm_kol3 {
	padding-bottom:		1em;
}
.zm_kol4 {
	padding-bottom:		1em;
}

/*bereken brandstof (berekenkmprijs.php) */
.bereken_bs_results td {
	background:			#CDDEED;
	font-size: .85em;
}
fieldset legend
{
	font-weight: bold;
}

/*webshop*/
.label {
	display:			inline-block;
	width:				300px;	
	padding:			3px;
	margin:				3px;
	vertical-align:		top;
}
.right {
	text-align:			right;	
}
.field {
	display:			inline-block;
	width:				200px;
	padding:			3px;
	margin:				3px;
	vertical-align:		top;	
}
.error {
	border:				2px solid #C3002E;	
}
.errormsg {
	border:				2px solid #C3002E;	
	padding:			3px;
	color:				#C3002E;
	font-weight:		bold;
}
#bestelform input, #bestelform select {
	width:				200px;
	padding:			3px;
}
#bestelform textarea {
	width:				520px;
	padding:			3px;	
}

fieldset {
	margin:				0 0 1em 0;
	border:				2px solid #cddeed;	
}
legend {

}
#bestelform input.radio {
	width:				20px;	
}

/*quiz*/
#voortgangsbalk {
	width:				580px;
	margin:				2em 0;
	border-left:		1px solid #fff;
}
.vraagnummer {
	display:			inline-block;
	/*height:				10px;*/
	padding:			1px 0;
	text-align:			center;
	border-right:		1px solid #fff;
	/*border-bottom:		1px solid #666;
	border-top:			1px solid #666;*/
	margin:				0;
	background:			#e2e2e2;
	font-size:			.8em;
}
.answered {
	background:			#095AA6;
	color:				#fff;	
}

.keuzediv {
	float:				left;
	display:			inline-block;
	width:				30px;
}
.keuzeomschrijving {
	float:				left;
	display:			inline-block;
	width:				450px;	
}

.results_vraag {
	background:			#e2e2e2;
	padding:			10px;
	border:				1px solid #ccc;
	margin:				0 0 .5em 0;	
}
.juist {
	background:			url(../images/goedicon.png) right center no-repeat;
}
.onjuist {
	background:			url(../images/fouticon.png) right center no-repeat;	
}

.score {
	background:			#CDDEED;
	padding:			10px;	
}

/* formulieren - algemeen */
fieldset { padding: 1em; }
legend { background:#fff; padding: 0 1em; }
input[type=text], select { padding: .25em;  }
input[type=submit] { padding: .25em; }


/***** hoofdtekst *****/
/*kolomstructuur*/
/* basis opmaak tekstpagina */
.grid { width: 100%; max-width: 1220px; margin: 0 auto; position: relative; /*display: table;*/  }
.grid:after { content: ''; display: table; clear: both;  }
.grid-pad { padding: 0 20px; }

[class*='col-'] { float: left; padding: 0 20px 0 0; margin-bottom: 40px; position: relative; vertical-align: top; width: 100%;   }
[class*='col-'] .grid-pad { padding: 1em 0;}
	#titelbalk [class*='col-'] { margin-bottom: 0; }

.grid-pad .grid-pad { padding: 0; }
.grid-pad .grid-pad [class*='col-'] { padding: 0 20px 0 0; }

[class*='col-'] p { padding: .6em 0px; }
[class*='col-'] h1, [class*='col-'] h2, [class*='col-'] h3, [class*='col-'] h4, [class*='col-'] h5,[class*='col-'] h6, [class*='col-'] p, [class*='col-'] table, [class*='col-'] ul, [class*='col-'] ol, [class*='col-'] form { padding-left: 0px; padding-right: 0px; }
[class*='col-'] table { margin: 0; }
/*[class*='col-']:last-of-type {  padding-right: 0; }
.grid-pad > [class*='col-']:last-of-type { padding-right: 0px; }*/


.col-1-2 { width: 100%; }
.col-1-5 { width: 50%; }

.cols-four { max-width: 1700px; display: -ms-flex; display: -webkit-flex; display: flex; justify-content: space-around; flex-wrap:wrap; }
	.cols-four div { /*border: 1px dotted #000;*/ background: rgba(255,255,255,.8); padding: 1em;  }
	
	.cols-four .col1 { 	border-top: 5px solid #C3002E; }
	.cols-four .col2 { 	border-top: 5px solid #FF9900; }
	.cols-four .col3 { 	border-top: 5px solid #77A7CC; }
	.cols-four .col4 { 	border-top:	5px solid #000; }


@media screen and (min-width : 48em)  {	/* 768px */

	#logo img { max-width: 100%; }

	[class*='col-'] { float: left; padding: 0 40px 0 0; margin-bottom: 40px; position: relative; vertical-align: top;   }
	/*.grid-pad > [class*='col-']:last-of-type { padding-right: 40px; }*/
	/*[class*='col-'] .grid-pad  { padding: 1em 0 ;}*/
	.grid-pad .grid-pad [class*='col-'] { padding: 0 40px 0 0; }

	.col-1-2 { width: 50%;  }
	.col-1-4 { width: 50%;  }
	.col-1-5 { width: 33.3333%; }
	.cols-four div { width: 48%; margin-right: 2%;   }
}

@media screen and (min-width : 64em)  {	/* 768px */
	.col-1-3 { width: 33.3333%; }
	.col-1-4 { width: 25%; }
	.col-1-5 { width: 20%; }
	.col-1-6 { width: 16.6667%; }
	.col-1-7 { width: 14.2857%; }
	.col-1-8 { width: 12.5%; }
	
	.col-2-3 { width: 66.6666%;  }
	.col-3-4 { width: 75%; }
	.col-5-6 { width: 83.3333%; }

	.cols-four div { width: 23%; }
}




/*footer*/
#footer {
	background:			#095AA6;	
	color:				#fff;
	font-family: 		'Cabin Condensed', sans-serif;font-weight:		400;
	padding:			2em 10px 2em 34px;
	margin-top:			20px;
	position:			relative;
}
#footer a { color:#fff; }

#arrow-to-top { display: none; position: fixed; bottom: 1em; right: 1em; z-index: 99999; background:rgba(111,167,226,.7); text-decoration: none; color:#fff; font-size: 1em; text-align:center; width: 40px; height: 40px; line-height: 36px; border: 2px solid #fff; border-radius: 50%;   }
#arrow-to-top:hover { background: rgba(111,167,226,1); }
#arrow-to-top .fa { padding: 0; padding-top: .5em; margin: 0; color:#fff; }