@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: 12pt; font-family: 'Exo 2', Arial, Helvetica, sans-serif; background-color: #fff; text-align: center; color: #333; padding: 0; overflow-y: scroll;}
h1 {margin: 0 0 0.5em 0; font-size: 170%; color: #d4af70; font-weight: 400;}
h2 {margin: 0 0 0.3em 0; font-size: 240%; color: #d4af70; font-weight: 400; text-align: center; text-transform: uppercase;}
h3 {margin: 0; font-size: 146.5%; color: #000; font-weight: 400; }
h4 {margin: 0; font-size: 123.1%; color: #000; font-weight: 400; }
a {color: #747474; text-decoration: underline;}
a:HOVER, a:ACTIVE {color: #000; text-decoration: none;}
p {margin: 0 0 1em 0;}
abbr {border: 0;}
img {max-width: 100%; height: auto;}
strong {font-weight: 700;}

table {width: 100%; padding: 0; border-collapse: collapse;}
th {background-color: #531e00; color: #fff; padding: 5px; text-align: left; font-weight: bold;}
td {padding: 5px;}
table p {margin: 0;}

form {margin: 0;}
label {float: left; width: 22%; font-weight: normal; text-transform: uppercase; text-align: right;}
label.inline {float: none; width: auto; font-weight: normal;}
label.inline.next {float: none; width: auto; margin-left: 20px;}
.formrow {margin-bottom: 10px;}
.formrow.inline label {float: none; width: auto;}
.formrow.inline input {margin-left: 25%; width: auto; float: none;}
input, select, textarea {border: 1px solid #ccc; font-size: 100%; padding: 5px; font-family: Titillium Web, Arial, Helvetica, sans-serif; float: right; width: 75%;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
input:FOCUS, select:FOCUS, textarea:FOCUS {border: 1px solid #666;}
input.spinner:FOCUS {border: 0;}
select {width: 75%;}
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;}
input.inline {float: none; width: auto;}
fieldset {}
legend {font-weight: 700; font-size: 116%;}

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: 16px 0 0 0;}
.submitknop input, a.button {
	border: 1px solid #d4af70;
	background: #d4af70; /* Old browsers */
	font-weight: 700;
	color: #fff;
	padding: 7px 20px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	margin: 0 0 0 25%;
	width: auto;
	float: none;
	}

.submitknop input:HOVER, a.button:HOVER {

	}

/*
#slideshow, img.bgM {
	width: 100%;
	top: 53px;
	left: 0;
	z-index:-9999;
	position: absolute;
	}
*/

/*
#slideshow {
	top: 53px;
	left: 0;
	z-index:-9999;
	position: absolute;
	width: 100%;
	}
*/


/*.inner {max-width: 980px; width:95%; margin: 0; text-align: left;}*/
.inner {width:100%; margin: 0; text-align: left;}

/*CORRECT (UN)ORDERED LISTS */
#maincontent ul {list-style-type: disc; padding: 0 0 0 24px; margin: 16px 0;}
#maincontent ol {list-style-type: decimal; padding: 0 0 0 36px; margin: 16px 0;}
#maincontent ul li {}

#header {background-color: #000; padding: 15px 0; }
#menu {font-size: 131%; text-transform: lowercase; margin: 0; text-align: center;}
#menu ul li {display: inline-block; margin-right: 24px;}
#menu ul li:last-child {margin-right: 0;}
#menu ul li a {display: inline-block; color: #747474; text-decoration: none;}
#menu ul li.selected a, #menu ul li a:HOVER {color: #d4af70;}
#menu ul li ul {display: none;}
#logo {text-align: center; margin: 24px 0;}


#col_menu {float: left; width: 25%; background-color: #333; color: #fff; line-height: 1.3; font-size: 123.1%; min-height: 1800px;}
#col_menu a {color: #fff;}
#col_menu a:HOVER {color: #fff;}

#maincontent {float: right; width: 70%; line-height: 1.5; background: url("img/trans_fff_60.png"); padding: 2% 2% 0 0;}
body#home #maincontent {background: none; padding: 0;}
#content {width: 100%;}

#productcats {padding: 0 30px; margin: 0 0 60px 0;}
#productcats ul {text-align: right; font-size: 131%;}
#productcats ul li {display: block; text-transform: uppercase; margin: 0 0 16px 0;}
#productcats ul li a {color: #fff; text-decoration: none;}
#productcats ul li a:HOVER, #productcats ul li.selected a {color: #d4af70;}

#nieuws {margin: 0 0 36px 0;}
#nieuws ul {list-style-type: none; margin: 0; padding: 0;}
#nieuws ul li {margin: 0 0 24px 0; text-align: right;}
#nieuws ul li a {display: inline-block; padding: 0; color: #d4af70;}
#nieuws ul li a:HOVER {color: #000; text-decoration: underline;}
/*
#nieuws ul li.opvallend {background-color: #aaa2a4; padding: 10px 0;}
#nieuws ul li.opvallend a {color: #000; font-weight: 600;}
*/

#aanbiedingen {padding: 0; text-align: right;}
#aanbiedingen a {display: inline-block; background-color: #d4af70; color: #fff; text-decoration: none; padding: 5px; text-align: right;}

#socialmedia {padding: 0 30px; margin: 0 0 36px 0;}
#socialmedia ul li {text-align: right;}
.facebook {display: inline-block; background: url("img/bg_facebook.png") no-repeat center right; padding: 24px 60px 24px 0; color: #fff; text-decoration: none;}

#credits {padding: 0 30px; font-size: 55%; text-align: right;}
#credits a {text-decoration: none;}

#intro {background: url("img/trans_fff_60.png"); font-size: 116%; width: 340px; padding: 20px; text-align: right;}

#maincontent ul.productsubcats {list-style-type: none; margin: 0 0 20px 0; padding: 10px; border: 1px solid #ccc; }
.productsubcats li {display: inline; margin-right: 15px;}
.productsubcats li:last-child {margin-right: 0;}
.productsubcats li a {text-decoration: none;}
.productsubcats li a:HOVER, .productsubcats li a:ACTIVE, .productsubcats li a:FOCUS {text-decoration: underline;}
.productsubcats li.active {font-weight: bold;}

.productsubcat {width: 23%; margin-right: 2.66%; float: left; margin-bottom: 24px; height: 160px;}
.productsubcat:nth-child(4n+0) {margin-right: 0;}
.productsubcatimg {z-index: 1;}
.productsubcattitel {margin: 0;}
.productsubcattitel a {color: #fff; text-decoration: none; text-transform: uppercase; background: url("img/trans_000_60.png"); display: inline-block; width: 100%; text-align: center; padding: 4px 0;}

#products {float: left; width: 60%;}
#subcats {float: right; width: 35%;}
#subcats a {color: #d4af70;}
#subcats ul {list-style-type: none; margin: 0; padding: 0; text-align: right;}
#subcats ul li {}
#subcats ul li.selected a, #merken ul li a:HOVER {color: #d4af70;}
#subcats ul li a {color: #747474;}



#maincontent ul.productlist {list-style-type: none; margin: 0; padding: 0;}
.productlist li {margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 3px solid #d4af70; position: relative;}
.productimg {float: left; width: 40%;}
.productbody {float: right; width: 55%;}
.producttitel {font-size: 123.1%; margin: 0 0 30px 0; color: #747474;}
.producttitel a {color: #747474; text-decoration: none;}
.productprice {position: absolute; bottom: 10px; left: 45%;}
.productprice p {margin: 0;}
.productprice span, span.prijs {background-color: #d4af70; color: #fff; display: inline-block; padding: 0 12px; font-size: 131%;}
.productdescription {margin: 0;}
.productdescription p {margin: 0 0 0.5em 0;}

.merkenlijst {}
.merkenlijst ul {list-style-type: none; margin: 0; padding: 0; text-align: center;}
.merkenlijst ul li {display: inline-block; margin: 0 24px 0 0; font-size: 123.1%;}
.merkenlijst ul li a {text-decoration: underline; color: #747474; white-space: nowrap;}

.nieuws {}
.nieuwsitem {margin: 0 0 20px 0;}
.nieuwsimage {float: left; width: 30%;}
.nieuwstxt {float: right; width: 65%;}
.nieuwstxt p.titel {margin: 0; font-weight: bold;}

table#contactdetails td:first-child {}
table#contactdetails td:last-child {text-align: right;}


.mapson {display: none;}

#mobile_header {display: none; background-color: #000; color: #fff; padding: 10px;}
/*#home_content {position: absolute;}*/
#home_slider {float: left; width: 65%;}
#home_text {float: right; width: 30%; padding: 0; font-size: 123.1%; margin-right: 5%; margin-top: 20px;}
#home_text a {color: #333;}
#home_text h2 {color: #333; font-size: 100%;}
#home_text_intro {background-color: #d4af70; padding: 15px; text-align: center; margin-bottom: 10px;}
#home_text hr {border: 1px solid #333; background-color: #333;}

.contact_body           {background-color: rgb(51, 51, 51); color: white;}
.contact_content        {width: 100%; max-width: 800px;position: absolute;  left: 0; right: 0; margin: auto; background-color: rgb(51, 51, 51); padding-top: 30px; margin}
.contact_row            {width: 94%; overflow: hidden; margin: 0 3% 3% 3%;}
.contact_col_left       {width: 25%; float: left; margin-right: 5%; text-align: right;}
.contact_col_left img   {width: 55%;}
.contact_col_left ul    {margin-top: 10px;}
.contact_col_left ul li {display: block; text-transform: uppercase; margin: 0 0 16px 0; font-size: 130%;}
.contact_col_right      {width: 65%; float: left; margin-left: 5%; text-align: left;}
.contact_title          {font-size: 130%;}
.contact_form           {background-color: rgb(212, 175, 112); padding: 10px 0;}
.contact_formrow        {overflow: hidden; margin: 1% 5%; width: 90%}
.contact_formrow input  {background-color: rgb(212, 175, 112); border: 1px solid rgb(51, 51, 51);;}
.contact_formrow label  {color: rgb(51, 51, 51); margin-top: 7px;}
.contact_button         {background-color: rgb(212, 175, 112); margin-top: 15px; width: 30%; text-transform: uppercase; color: #ffffff; cursor: pointer;}
.contact_errors         {background-color: #B21212; width: 100%; padding: 10px;}
.contact_succes         {background-color: #16B212; width: 100%; padding: 10px;}


.carousel-control.right,.carousel-control.left{background:none;}
#myCarousel {margin-bottom: 15px; margin-top: 40px; margin-left: auto; margin-right: auto;}
#myCarousel .productimg {width: 100%;}
#myCarousel .item {}
.glyphicon-chevron-right:before, .glyphicon-chevron-left:before {content: "";}
.carousel-control .glyphicon-chevron-right, .carousel-control .glyphicon-chevron-left {width: 40px; height: 40px;}
.carousel-control span {background-color: #fff; border-radius: 25px;}

/*
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {left: 0;}
.left.carousel-control {left: 30%;}
.right.carousel-control {right: 40%;}
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {top: -30px;}
*/
/*.carousel-control.left {left: -140px;}*/

#homeCarousel {width: 90%; margin-top: 20px;}
#homeCarousel .item img {width: 100%;}

.nolink {cursor: default;}

label.inline {max-width: auto; width: auto; text-align: left; display: inline;}
input[type="checkbox"] {width: auto; display: inline; float: none;}





@media screen and (min-width: 2000px) {
	#home_content { width: 75%; margin-left: auto; margin-right: auto;}
}

@media screen and (min-width: 1400px) {
	#col_menu { width: 20%;}
	#maincontent {width: 75%;}
	.productsubcat {height: 280px;}
	}

@media screen and (min-width: 1024px) {
	#myCarousel {width: 50%;}
}


@media screen and (min-width: 801px) and (max-width: 1024px) {
	.productsubcat {width: 30%; margin-right: 5%; height: 160px;}
	.productsubcat:nth-child(3n+0) {margin-right: 0;}
	.productsubcat:nth-child(4n+0) {margin-right: 5%;}
	#myCarousel {width: 50%; margin-left: auto; margin-right: auto;}
}

@media screen and (min-width: 601px) and (max-width: 800px) {
	.submitknop input {width: 30%;}
	
	#col_menu {font-size: 100%;}
	#logo img {max-width: 90%;}
	#productcats, #aanbiedingen, #socialmedia, #credits, #nieuws ul li a {padding: 0 15px;}
	.productsubcat {width: 48%; margin-right: 4%; height: 160px;}
	.productsubcat:nth-child(2n+0) {margin-right: 0;}
	}
	

@media screen and (min-width: 481px) and (max-width: 600px) {
	label {float: none; width: 100%; font-weight: normal; display: block; text-align: left;}
	input, select, textarea {width: 100%; float: none;}
	.submitknop input {width: 50%;}
	
	body#home #maincontent, #maincontent {width: 100%; float: none;}
	#col_menu {float: none; width: 100%; display: none;}
	#logo img {max-width: 90%; margin-bottom: 10px;}
	#productcats {font-size: 85%;}
	#productcats, #aanbiedingen, #socialmedia, #credits, #nieuws ul li a {padding: 0 15px;}
	
	#products {float: none; width: auto;}
	#subcats {float: none; width: auto; display: none;}
	#subcats ul {text-align: left;}
	#subcats ul li {display: inline-block; margin: 0 36px 10px 0;}
	
	body, body#home {padding: 0;}
	#mobile_header {display: block;}
	#mobile_header #logo {margin: 0; text-align: left; width: 30%;}
	#header {display: none;}
	#home_content {position: static;}
	#mobile_menu {text-align: left;}
	#menu ul li ul {display: block;}
	
	.fancybox_canvas img {padding: 0;}

	#home_slider {float: none; width: 100%;}
	#home_text {float: none; width: 100%;}
	#homeCarousel {width: 100%;}

	.productsubcat {width: 48%; margin-right: 4%; height: 160px;}
	.productsubcat:nth-child(2n+0) {margin-right: 0;}
	}



@media screen and (max-width: 480px) {
	label {float: none; width: 100%; font-weight: normal; display: block; text-align: left;}
	input, select, textarea {width: 100%; float: none;}
	.submitknop input {width: 100%;}
	
	body#home #maincontent, #maincontent {width: 100%; float: none;}
	#col_menu {float: none; width: 100%; display: none;}
	#logo img {max-width: 90%; margin-bottom: 10px;}
	#productcats {font-size: 85%;}
	#productcats, #aanbiedingen, #socialmedia, #credits, #nieuws ul li a {padding: 0 15px;}
	
	#products {float: none; width: auto;}
	#subcats {float: none; width: auto; display: none;}
	#subcats ul {text-align: left;}
	#subcats ul li {display: inline-block; margin: 0 36px 10px 0;}
	
	body, body#home {padding: 0;}
	#mobile_header {display: block;}
	#mobile_header #logo {margin: 0; text-align: left; width: 30%;}
	#header {display: none;}
	#home_content {position: static;}
	#mobile_menu {text-align: left;}
	#menu ul li ul {display: block;}
	
	table#contactdetails td {display: block; width: 100%;}
	table#contactdetails td:nth-child(1) {margin-bottom: 10px;}
	table#contactdetails td:nth-child(2) {text-align: left; margin-bottom: 16px;}
	
	.fancybox_canvas img {padding: 0;}
	.fancybox_canvas .productdescription {display: none;}
	
	#intro {width: 260px; font-size: 108%;}
	.productimg {width: 100%; float: none; margin-bottom: 10px; text-align: center;}
	.productimg img {width: 90%;}
	.productbody {width: 100%; float: none;}
	.producttitel {margin: 0;}
	.productprice {position: static;}

	.productsubcat {width: 100%; margin-right: 0; float: none; height: auto;}

	#home_slider {float: none; width: 100%;}
	#home_text {float: none; width: 100%;}
	#homeCarousel {width: 100%;}
	}


	
	









