/* CSS RESET */
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;}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;}

/* COLORS */
/* Red:  #a00000 */
/* Gray: #9b9b9b */


html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: background: url('../img/achtergrond.jpg') right bottom no-repeat #ffffff;
	background-attachment: fixed;
	font: 16px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 200;
	color: #333333;
}

.clear { clear: both; }

a, a:visited {
	color: #a00000;
	text-decoration: underline;
}
a:hover {
	color: #000000;
	text-decoration: none;
}

p {
	margin-bottom: 25px;
}

img {
	max-width: 100%;
}

.red { color: #a00000; }

b, strong {
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000000;
	margin-bottom: 10px;
}
h1 { font-size: 26px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }
.nomargin { margin-bottom: 0; }

i, .italic { font-style: italic; }
.smallfont { font-size: 12px; }

#wrapper {
	width: 100%;
	max-width: 960px;
	display: block;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.85);
	-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	-ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}


/***************************************************************************** HEADER */
#header {
	width: 100%;
	display: block;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
}

#header img {
	width: 100%;
	max-width: 400px;
}

@media (max-width: 768px) {
	#header img {
		width: 66%;
	}
}

/***************************************************************************** MENU */
#menu {
	width: 100%;
	margin-bottom: 10px;
}

#menu ul {
	list-style: none;
}

#menu li a {
	width: 160px;
	height: 96px;
	display: block;
	padding-top: 55px;
	background: url('../img/button.png') left top no-repeat;
	float: left;
	font: 22px/20px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
}
#menu li a:hover {
	background-position: -160px 0;
}
#menu li a span {
	font: 14px/14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input#menuchecker {
	display: none;
}
label#menulabel {
	width: 100%;
	display: block;
	font-size: 20px;
	text-align: center;
	color: #a00000;
}
label#menulabel span {
	width: 25%;
	height: 1px;
	margin: 0 10px;
	display: inline-block;
	background: #a00000;
	vertical-align: middle;
}
input#menuchecker:checked ~ ul {
	display: block;
}

@media (max-width: 768px) {
	#menu ul {
		display: none;
	}
	#menu ul li a {
		width: 100%;
		height: unset;
		padding: 10px;
		box-sizing: border-box;
		float: none;
		background: #a00000;
	}
}

/***************************************************************************** TAGCLOUD */
#tagcloud {
	width: 100%;
	padding-bottom: 34%;
	display: block;
	position: relative;
	margin-bottom: 15px;
}
#tagcloud-fout {
	width: 100%;
	display: block;
	padding-bottom: 34%;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../img/cloud_fout.jpg');
	z-index: 10;
}
#tagcloud-goed {
	width: 100%;
	padding-bottom: 34%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../img/cloud_goed.jpg');
	z-index: 9;
}

#klachtnaarveerkracht {
	width: 100%;
	display: block;
	margin-bottom: 20px;
	font: 36px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 100;
	font-style: italic;
	text-align: center;
}


/***************************************************************************** CONTENT */
#content {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: block;
	position: relative;
}

.contentblock {
	width: 100%;
	margin: 0 0 10px 0;
	padding: 10px;
	display: block;
	border: 1px solid #eeeeee;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08), 0 -5px 20px rgba(0, 0, 0, 0.08) inset;
}
.halfwidth {
	width: calc((100% - 50px) / 2);
	display: inline-block;
	vertical-align: top;
}
.fullwidth { width: 100%; }

@media (max-width: 768px) {
	.halfwidth {
		width: calc(100% - 20px);
	}
}


/***************************************************************************** PMT */
ul.opsomming {
    list-style-type: circle;
    margin-left: 50px;
    color: #a00000;
}
ul.opsomming span { color: #000000; }


/***************************************************************************** PMT & SE*/
/* .leukefoto gaat later weg! */
.leukefoto {
	width: 290px;
	display: block;
	position: relative;
	float: right;
	margin: 0 10px 10px 10px;
	padding: 8px;
	text-align: center;
	border: 1px solid #999999;
	-o-box-shadow: 0 -5px 60px rgba(160, 0, 0, 0.15) inset;
	-ms-box-shadow: 0 -5px 60px rgba(160, 0, 0, 0.15) inset;
	-moz-box-shadow: 0 -5px 60px rgba(160, 0, 0, 0.15) inset;
	-webkit-box-shadow: 0 -5px 60px rgba(160, 0, 0, 0.15) inset;
	box-shadow: 0 -5px 60px rgba(160, 0, 0, 0.15) inset;
}
.leukefoto img {
	width: 100%;
	margin: 3px 0;
	padding: 0;
}

@media (max-width: 768px) {
	.leukefoto {
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		float: none;
	}
}


.hor_fotobalk {
	height: 205px;
	margin-bottom: 20px;
}
.hor_fotobalk img {
	height: 100%;
	margin: 0 5px 0 0;
}

/***************************************************************************** TARIEVEN */
table.tarieven {
	border: 0;
	border-collapse: collapse;
	margin-bottom: 30px;
}
table.tarieven th {
	padding: 6px 12px;
	font-weight: bold;
	color: #a00000;
	border-bottom: 2px solid #a00000;
}
table.tarieven td {
	padding: 6px 12px;
}
table.tarieven tr {
	border-bottom: 1px solid #999999;
}

#accordion h3 {
	width: 600px;
	padding: 4px;
	margin: 0 0 1px 20px;
	border: 1px solid #dddddd;
	border-radius: 3px;
	font-size: 16px;
	box-shadow: 0 -2px 15px rgba(160, 0, 0, 0.1) inset;
}
#accordion h3:hover {
	cursor: pointer;
}
#accordion h3:focus {
	outline: none;
}
#accordion div {
	margin-left: 20px;
	padding-bottom: 10px;
}
#accordion table {
	width: 600px;
}
#accordion table th {
	padding: 2px 4px;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	border-bottom: 2px solid #a00000;
}
#accordion table td {
	padding: 2px 4px;
	font-size: 14px;
	font-weight: 200;
	border-bottom: 1px solid #c06060;
}

/***************************************************************************** JOELCA */
.bigblue {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
}



/***************************************************************************** CONTACT */
#contactblock {
	width: 435px;
	display: block;
	box-sizing: border-box;
	float: left;
	margin: 5px;
	padding: 10px;
	border: 1px solid #dddddd;
	border-radius: 10px;
}
#contactblock td {
	padding: 4px 8px;
	vertical-align: middle;
}
/*#contactblock input {
	width: 240px;
	height: 20px;
	padding: 3px 6px;
	border: 1px solid #aaaaaa;
}
#contactblock textarea {
	width: 240px;
	height: 80px;
	padding: 3px 6px;
}*/

@media (max-width: 768px) {
	#contactblock {
		width: 100%;
		margin: 0 0 10px 0;
		float: none;
	}
}


.newcontactform input, .newcontactform textarea {
	width: 390px;
	display: block;
	margin: 0 0 6px 0;
	padding: 10px;
	border-radius: 3px;
	border: 1px solid #bbbbbb;
	outline: 0;
	font-family: inherit;
}
.newcontactform input:focus, .newcontactform textarea:focus {
	box-shadow: 0 0 5px rgba(100, 0, 0, 0.2);
	transition: all 0.4s;
}

a.sendcontactform {
	padding: 10px 20px;
	display: inline-block;
	background: #a00000;
	color: #ffffff;
	border-radius: 3px;
	border: 1px solid #a00000;
	text-decoration: none;
	transition: all 0.4s;
}
a.sendcontactform:hover {
	background: #ffffff;
	color: #a00000;
	transition: all 0.4s;
}

@media (max-width: 768px) {
	.newcontactform input, .newcontactform textarea {
		width: 100%;
		box-sizing: border-box;
	}
}

/***************************************************************************** FOOTER */
#footer {
	width: 100%;
	padding: 5px 0;
	display: block;
	background: #9b9b9b;
	font-size: 13px;
	text-align: center;
	color: #eeeeee;
}
#footer a {
	color: #eee;
}


/***************************************************************************** RETINA DEVICES */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
    
    body {
    	background: url('../img/achtergrond@2x.jpg') right bottom no-repeat #ffffff;
    	background-attachment: fixed;
    	background-size: 30%;
    }
    
    #menu li a {
    	background: url('../img/button@2x.png');
    	background-size: 200%;
    }
    
    #tagcloud-fout {
		background: url('../img/cloud_fout@2x.jpg');
		background-size: 100%;
    }
    #tagcloud-goed {
		background: url('../img/cloud_goed@2x.jpg');
		background-size: 100%;
    }
}