/* ----- HTML5 Boilerplate normalize ----- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: Verdana, 'Liberation Sans', sans-serif; color: #333; }

::-moz-selection { background: #ddd; color: #000; text-shadow: none; }
::selection { background: #ddd; color: #000; text-shadow: none; }

a { color: #005aaa; text-decoration: none;}
a:hover { text-decoration: none;}
a:focus { outline: thin dotted; text-decoration: underline;}
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #fff2c3; color: #000; text-decoration: none; }
mark { background: #ffd94d; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 0.5em 0 1.333em; padding: 0 0 0 23px; }
ol {padding-left: 31px;}
dd { margin: 0 0 0 40px; }
nav ul, nav ol, .nav ul, .nav ol, ul.nav, ol.nav { list-style: none; list-style-image: none; margin: 0; padding: 0; }
.nav li, .nav li:before {background: none; padding: 0;}

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f2dada; }

table { border-collapse: collapse; border-spacing: 0; width: 100%;}
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/* ----- Let’s make the box model all nice, shall we…? ----- */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

/* ----- basic styles ----- */
html {
	overflow-y: scroll;
}

body {
	background: #fff;
	font: normal 0.75em/1.333em Arial, Helvetica, 'Liberation Sans', sans-serif;
	color: #333;
	margin: 0 0 1em;
}

h1 {
	font-size: 1.5em;
	margin: 1.375em 0 0.750em;
}

h2 {
	font-size: 1em;
	margin: 0;
}

h3, h4, h5 {
	font-size: 1em;
	margin: 0;
}

p {
	margin: 0 0 1.333em;
}



/* ----- wrapper ----- */
.wrapper {
	margin: 0 auto;
	width: 980px;
}



/* ----- header ----- */
.header {
	background: #3472c5;
	background: -moz-linear-gradient(top, #3472c5 0%, #005aaa 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3472c5), color-stop(100%,#005aaa));
	background: -webkit-linear-gradient(top, #3472c5 0%,#005aaa 100%);
	background: -o-linear-gradient(top, #3472c5 0%,#005aaa 100%);
	background: -ms-linear-gradient(top, #3472c5 0%,#005aaa 100%);
	background: linear-gradient(to bottom, #3472c5 0%,#005aaa 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3472c5', endColorstr='#005aaa',GradientType=0 );

	border-bottom: solid 1px #33383c;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);
	min-width: 980px;
	height: 6.750em;
	color: #fff;
	position: relative;
	z-index: 1;
}
		


/* ----- content ----- */	
.content {
	background: #ccdeee;
	color: #005aaa;
	font-size: 1.333em;
	line-height: 1.25em;
	padding: 2.125em 0;
}

	.content .wrapper {
		padding: 0 28px;
	}
	
		.content h1 {
			margin-right: 300px;
		}

		.content .item .img-item {
			margin: -4.375em 32px 0;
		}

		.content .item p {
			max-width: 510px;
		}



/* ----- cards ----- */	
.content-cards {
	margin: 3em 0 0 -3.921%;
	padding: 0;
	list-style: none;
}

	.card {
		width: 29.412%;
		margin: 0 0 3.333em 3.921%;
		float: left;		
	}

		.card a {
			display: block;
			color: #333;
			padding: 0 8.333%;
			border: solid 1px #ddd;
			border-top-color: #efefef;
			border-bottom-color: #bbb;
			min-height: 39em;
		}
		.card a:focus, .card a:hover {
			border-color: #aaa;
		}

			.card-img {
				width: 100%;
				height: 239px;
				padding: 2em 0;
				border-bottom: solid 1px #ddd;
				margin: 0 0 2em;
				position: relative;
			}

				.card-img img {
					max-width: 100%;
					max-height: 190px;
					width: auto;
					height: auto;
					display: block;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}

			.card h2 {
				color: #005aaa;
				font-size: 1.333em;
			}
			
			/* little reset */
			.card-data, .card-data dt, .card-data dd {
				margin: 0;
				padding: 0;
			}

			.card-data {
				margin: 1.25em 0 1em;
			}

				.card-data dt {
					border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
				}

				.card-name {
					font-weight: bold;
				}

				.card-data .card-address {
					margin-bottom: 1em;
				}

				.card-phone:before, .card-fax:before {
					display: inline-block;
					width: 1em;
					content: "T";
					font-weight: bold;
				}
				.card-fax:before {
					content: "F";
				}
				
				.card-www, .card-email {
					color: #005aaa;
				}

				.card .card-www, .card .card-email {
					float: left;
					width: 100%;
					clear: both;
					margin-top: 1em;
				}

				.card .card-email {
					margin-top: 0.333em;
				}

					.card-www:before, .card-email:before {
						background: url(/assets/img/sprite-advocaten-amersfoort.png) 0 0 no-repeat;
						display: inline-block;
						content: "";
						width: 16px;
						height: 16px;
						margin: 0 8px 0 1px;
						vertical-align: text-bottom;
					}
					.card-email:before { 
						background-position: -20px 0;
						height: 13px;
					}


	
/* ----- Bloxz ----- */


/* --- items --- */
.item {
	clear: both;	
}


/* --- images --- */
.img-item h2 {width: 100%; text-align: left;}
.img-item a {display: block;}


/* keep it responsive - prevents the image to be out of proportion */
.img-item:not(.item) {
	max-width: 50%;	
}
	.img-item a, .img-item img {	
		max-width: 100%;
		width: auto;
		height: auto;
		display: block;
	}


/* align left */
.img-align-left, .item.img-align-left {
	float: left;
	margin: 0.278em 20px 1em 0;
}
.aside .img-align-left, .aside .item.img-align-left {
	margin-right: 8px;
	margin-bottom: 0.5em;
}

.item.img-align-left {
	float: none;
}

	.item.img-align-left a, .item.img-align-left img {
		display: inline-block;
	}

/* align right */
.img-align-right, .item.img-align-right {
	float: right;
	margin: 0.278em 0 1em 20px;
}
.aside .img-align-right, .aside .item.img-align-right {
	margin-left: 8px;
	margin-bottom: 0.5em;
}

.item.img-align-right {
	float: none;
	text-align: right
}

	.item.img-align-right a, .item.img-align-right img {
		display: inline-block;
	}

/* align center */
.img-align-center {
	text-align: center;
}
	.img-align-center img {
		margin-left: auto;
		margin-right: auto;
	}

.item.img-align-left, .item.img-align-right {
	margin: 0;
}

.item.img-item {
	margin-bottom: 1.333em;	
}

	.item.img-item a {
		display: inline-block;
	}
	
		.item.img-item img {
			margin-top: 0.333em;
		}


/* --- video-item --- */
.vdi-item {
	margin-bottom: 1.333em;	
	text-align: center;
}

	.vdi-item h2 {
		margin-bottom: 0.444em;
		text-align: left;
	}
	
	.vdi-item iframe {
		max-width: 100%;
	}



/* ----- media queries ----- */

/* --- < 980 --- */
@media only screen and (max-width: 980px) {
	
	/* --- fluid wrapper --- */
	.wrapper, .content .wrapper, .header {
		margin: 0 auto;
		width: 100%;
		min-width: 320px;
		padding: 0 6.25%;	
	}


	/* --- cards --- */
	.card {
		width: 46.078%;
	}
	
} /* end mediaquery < 980 */



/* --- < 620 --- */
@media only screen and (max-width: 620px) {
	
	/* --- header --- */
	.header {
		height: 4.750em;
	}


	/* --- content --- */
	.content h1 {
		margin-right: 0;
		margin-top: 0.75em;
	}

	.content .item .img-item {
		margin-right: 0;
		margin-top: 0;
	}
	.img-item:not(.item) {
		max-width: 33%;
	}

	.content .item p {
		max-width: none;
	}


	/* --- cards --- */
	.content-cards {
		margin-left: 0;
	}

		.card {
			width: 100%;
			margin-left: 0;	
		}

} /* end mediaquery < 700 */



/* --- < 420 --- */
@media only screen and (max-width: 420px) {
	
	/* --- header --- */
	.header {
		height: 2.750em;
	}


	/* --- content --- */
	.content {
		padding-bottom: 1em;
	}

	.content h1 {
		margin-top: 0em;
	}		
	
} /* --- end mediaquery < 420  --- */



/* --- image retina display -- divide position and size by 2 for retina displays --- */
@media 
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 3/2),
only screen and (        min-device-pixel-ratio: 1.5),
only screen and (                min-resolution: 144dpi),
only screen and (                min-resolution: 1.5dppx) {
	
	attr {}

	.card-www:before, .card-email:before
	{
		background-image: url(/assets/img/sprite-advocaten-amersfoort-2x.png);
		background-size: 60px 20px;
	}

}


.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden, .verberg, .offScreen { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }