@charset "utf-8";
/* CSS Document */

/* CLEARFIX */
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

body {margin: 0; font-size: 100%; font-family: "Titillium Web", Arial, Helvetica, sans-serif; background-color: #fff; text-align: center; color: #1d1d1b; padding-top: 98px; overflow-y: scroll;}
h1 {margin: 0 0 0 0; font-size: 197%; color: #d6c900; font-weight: 400;  text-transform: uppercase; letter-spacing: 2px;}
h2 {margin: 0 0 0 0; font-size: 161.6%; color: #d6c900; font-weight: 400; text-transform: uppercase;}
h3 {margin: 0 0 0 0; font-size: 153.9%; color: #000; font-weight: 400; text-transform: uppercase; }
h4 {margin: 0 0 0 0; font-size: 123.1%; color: #d6c900; font-weight: 400;  text-transform: uppercase;}
a {color: #d6c900; text-decoration: underline;}
a:HOVER, a:ACTIVE {color: #d6c900; text-decoration: none;}
p {margin: 0 0 1em 0;}
abbr {border: 0;}
strong {font-weight: bold;}
hr {border: 1px solid #e5e5e5; background-color: #e5e5e5;}
img {max-width: 100%; height: auto;}
iframe {max-width: 100%;}

table {}
table th {background-color: #63a512; color: #fff; padding: 5px; text-align: left; font-weight: bold;}
table td {padding: 5px; border-bottom: 1px solid #ccc;}
table p {margin: 3px 0 0 0;}

form {margin: 0;}
label {float: left; width: 18%; font-weight: normal;}
label.inline {float: none; width: auto; font-weight: normal;}
label.inline.next {float: none; width: auto; margin-left: 20px;}
.formrow {margin-bottom: 10px;}
input, select, textarea {border: 1px solid #ccc; font-size: 100%; padding: 3px; font-family: "Titillium Web", Arial, Helvetica, sans-serif; float: right; width: 75%;}
input:FOCUS, select:FOCUS, textarea:FOCUS {border: 1px solid #666;}
select {}
textarea {height: 140px;}
.formhint {margin-left: 25%; margin-top: 3px; font-style: italic; background: url("img/icon_info.png") no-repeat center left; padding-left: 20px; color: #0062C8;}
.formerror, .formerror:FOCUS {border: 1px solid #e00; border-right: 2px solid #e00; border-bottom: 2px solid #e00;}
.formblock {float: left; width: 75%;}
.mandatory:BEFORE {content: "* "; font-weight: normal;}
legend {font-weight: bold; color: #ee1c25;}
fieldset {margin-bottom: 16px; border: 1px solid #ee1c25;}

img, a img {border: 0;}

.error {background: #ce0100 url("img/bg_error.png") repeat-x; color: #fff; font-weight: bold; padding: 5px; border: 1px solid #bb0500; margin-bottom: 10px;}
.error p {background: url("img/icon_error.png") no-repeat; padding-left: 20px; margin: 0;}

.success {background: #028d00 url("img/bg_success.png") repeat-x; color: #fff; font-weight: bold; padding: 5px; border: 1px solid #047700; margin-bottom: 10px;}
.success p {background: url("img/icon_success.png") no-repeat; padding-left: 20px; margin: 0;}

.warning {background: #fec006 url("img/bg_warning.png") repeat-x; color: #666; font-weight: bold; padding: 5px; border: 1px solid #cc9900; margin-bottom: 10px;}
.warning p {background: url("img/icon_warning.png") no-repeat; padding-left: 20px; margin: 0;}

.info {background: #c9d8dd url("img/bg_info.png") repeat-x; color: #666; font-weight: normal; padding: 5px; border: 1px solid #ccc; margin-bottom: 10px;}
.info p {background: url("img/icon_info.png") no-repeat; padding-left: 20px; margin: 0;}

.error a, .success a {color: #fff;}
.warning a, .info a {color: #666;}

.submitknop {margin: 3% 0 0 0; text-align: right;}
.submitknop input {
	background-color: #d6c900; /* for non-css3 browsers */
	font-weight: normal;
	color: #fff;
	font-size: 123.1%;
	float: none;
	width: 20%;
	padding: 0px 0;
	border: 1px solid #d6c900;
	}



/*CORRECT (UN)ORDERED LISTS */
#content ul {list-style-type: disc; padding: 0 0 0 36px; margin: 16px 0;}
#content ol {list-style-type: decimal; padding: 0 0 0 36px; margin: 16px 0;}

.inner {max-width: 980px; width:95%; margin: 0 auto; text-align: left; font-size: 85%;}
#content .inner {padding: 16px 0 48px 0; font-size: 123%;}

#header {padding: 16px 0 12px 0; background-color: #000; position: fixed; top: 0; left: 0; z-index: 2000; width: 100%;}

#foto {position: relative; z-index: 0;}
#foto .intro {position: absolute; top: 0; left: 65%; width: 250px; background-color: #d6c900; color: #fff; padding: 10px; z-index: 100; text-align: left; line-height: 1.5; font-size: 93%;}
body.slaapadvies #foto .intro {text-align: center; color: #fff; font-size: 153.9%; background-color: transparent; padding: 0; font-family: "Times New Roman", Times, serif;
	left: 0; right: 0; margin-left: auto; margin-right: auto; margin-top: 24px; width: 700px;}
	
#logo {float: left; width: 25%;}
#menu {float: right; width: 70%; text-align: left; margin: 26px 0 0 0; font-weight: 400;}
#menu ul {list-style-type: none; margin: 0; padding: 0; font-size: 167%; text-transform: uppercase;}
#menu ul li {display: inline; margin: 0 20px 0 0;}
#menu ul li a {color: #fff; text-decoration: none;}
#menu ul li a:HOVER, #menu ul li.actief a {color: #d6c900; text-decoration: none;}
#menu ul li:last-child {margin-right: 0;}
a#pull {display: none;}  

#submenu {font-weight: bold; margin: 0 0 16px 0; border-bottom: 1px solid #b2c8dd; padding-bottom: 6px;}
#submenu ul {list-style-type: none; margin: 0; padding: 0; font-size: 116%; text-transform: uppercase;}
#submenu ul li {display: inline-block; margin: 0 24px 0 0;}
#submenu ul li a {color: #004990; text-decoration: none;}
#submenu ul li a:HOVER {color: #63a512; text-decoration: underline;}
#submenu ul li.actief a {color: #63a512; text-decoration: none;}
#submenu ul li:last-child {margin-right: 0;}
	
#content {line-height: 1.7;}


.slogan {font-style: italic; font-size: 500%; font-family: "Times New Roman", Times, serif; color: #b2b2b2; text-align: center; margin: 0 0 24px 0; padding: 0; line-height: 1.2;}

.nieuwsitem {margin: 0 0 24px 0;}
.nieuwsfoto {width: 25%; float: left;}
.nieuwsbody {width: 72%; float: right;}
.nieuwstitel {margin: 0; text-transform: uppercase; color: #878787; text-decoration: none; font-size: 116%;}
.nieuwstitel a {color: #878787; text-decoration: none;}

#footer {background-color: #000; color: #fff; padding: 24px 0; line-height: 1.7; text-transform: uppercase; font-size: 131%;}
#footer h2 {font-size: 131%; margin: 0 0 1em 0;}
#footer p#facebook {margin: 0 0 14px 0;}
#footer p {margin: 0;}
#contact {float: left; width: 48%;}
#contact_1 {float: left; width: 48%;}
#contact_2 {float: right; width: 48%; padding-top: 8px;}
#openingsuren {float: right; width: 40%;}

#carnieuws {float: left; width: 70%;}
#related {float: right; width: 28%;}
#related h2 {line-height: 1.3;}

#realisatie p {margin: 10px 0; font-size: 85%;}
#realisatie p a {text-decoration: none; color: #1d1d1b;}


.stepcarousel{
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 600px; /*Width of Carousel Viewer itself*/
	height: 1300px; /*Height should enough to fit largest content's height*/
	}

.stepcarousel .belt{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
	}

.stepcarousel .panel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 0 10px; /*margin around each panel*/
	width: 600px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	}

.paneltxt {background-color: #dadada; padding: 20px;}
.panel p {margin: 0;}
.paneltitel {font-size: 131%; text-transform: uppercase; color: #000;}

.productcat {list-style-type: none; margin: 0; padding: 0; text-align: center;}
.productcat li {display: inline-block; margin: 0 12px 20px 0;}
.productcat li a {display: inline-block; background-color: #d6c900; color: #fff; font-size: 161.6%; padding: 4px 30px; text-align: center; text-decoration: none; text-transform: uppercase; line-height: 1;}

.merken {list-style-type: none; margin: 0; padding: 0;}
.merken li {display: inline-block; margin: 0 16px 16px 0;}
.merken li:nth-child(4n+0) {margin-right: 0;}

.text_times {font-family: "Times New Roman", Times, serif; font-size: 197%; text-align: center; line-height: 1.4;}
#contactadres {text-transform: uppercase; float: left; width: 45%;}
#contactadres a {color: #000; text-decoration: none;}
#contactadres a.button {background-color: #d6c900; color: #fff; font-size: 123%; padding: 1px 30px;}
#contactform {float: right; width: 48%;}
#contactform .submitknop {text-align: left; margin-left: 35%;}
#contactform .submitknop input {width: 50%; text-transform: uppercase;}
#contactform input, #contactform textarea {width: 65%;}
#contactform label {width: 30%; text-transform: uppercase; text-align: right;}
#contactform .formrow {margin-bottom: 30px;}


#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: 88%;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(img/up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

#contactform input[type="checkbox"] {width: auto; display: inline; float: none;}
label.inline {max-width: auto; width: auto; text-align: left; display: inline;}