﻿/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/* ===========
	GENERAL
	=========== */
	html, body ,.page{
    width:100%;
    height:100%;
}
html, button, input, select, textarea {color: #444; font-family: 'arial', sans-serif; }
html {font-size:13px; line-height: 20px; }
img { border: 0; }

body{padding:0;}
hr {display: block; height: 0px; border: 0; border-top: 3px solid #444; padding: 0; margin:0; }
h1, h2, h3, h4, h4 a .header{margin:0; padding:0; font-weight:700; line-height:1.5em; font-family: 'Montserrat', sans-serif;}

.inlogform .col{ color:white; padding-bottom:50px;}
.inlogform .standard{ color:white; padding-bottom:50px;}
/* ===========
	GLOBAL
	=========== */
	.page{ overflow:scroll;}
	.center{width:960px; margin:auto;}
	nav ul{padding:0; margin:0;}
	nav li a, h4 a {text-decoration:none; color:#444;}
	.clearfloat{clear:both;}
	.fncolor{color:#00a3e4;}
	.bgcolor{background:#00a3e4;}
	.selected a{color:#00a3e4;}
	.button, .OrderButton, .OrderLink, .LoginFormSubmit, input[type=submit],input[type=button]{ font-family: 'Montserrat', sans-serif; display:inline-block; background:#00a3e4; padding:10px 20px; border-radius:4px; color:white; cursor:pointer; font-size:15px; border: solid 0px #00a3e4;text-decoration:none;}
	.altbutton{background:none; border:1px solid #999; color:#444; padding:9px 20px}
	.button.altbutton:hover{border:1px solid #ccc; background:none; color:#00a3e4;}
	.button.basket{background:#FDBD0B;}
	.buttonfake{display:inline; font-style:italic; color:#999;}
	.button:hover{background:#b2ddf5;}
	.breadcrumb{margin:7px 0 20px;  color:#999;}
	.breadcrumb li{float:left; margin-right:5px;}
	.breadcrumb a{color:#999; }
	.breadcrumb a:hover{color:#999; text-decoration:underline;}
	.breadcrumb li:after{content:"  ›› ";}
	.breadcrumb li:last-child:after{content:"";}
	.breadcrumb li:last-child{color:#00a3e4;}
	

/* ===========
	FORM
	=========== */
textarea {resize: vertical; }
input[type=text], input[type=e-mail], textarea{padding:10px; background:white; border:1px solid #ccc; border-radius:2px;}
.content input[type=text], .content input[type=e-mail]{width:80%;}

.divtext {min-height:400px;}

.inlogform input[type=password],
.inlogform input[type=text],
.inlogform input[type=e-mail]{width:80%;}
.inlogform .factuur td{display:none;}
.inlogform .close a{position:absolute; top:10px; right:0px; background:url(../img/close.png); width:40px; height:40px;}
.inlogform .center{position:relative;}

/* ===========
	SPECIALS
	=========== */
.browsehappy {margin: 0.2em 0; background: #ccc; color: #444; padding: 0.2em 0; }
.steps div{ padding:20px 0 20px 60px; background:#ddd url(../img/order.png) no-repeat; color:#888;}
.steps .basket{cursor:pointer;}
.steps .address{cursor:pointer; background-position:0 -60px;}
.steps .payment{background-position:0 -120px;}
.steps .finished{cursor:pointer; background-color:#00a3e4; color:white;}

.orderinfo{background:#f8f8f8; padding:40px;}
.orderinfo h2{padding-bottom:10px;}
.orderinfo td{padding:10px 3px; border-top:1px solid #ddd; vertical-align:top;}
.orderinfo td.right{text-align:right;}
.orderinfo tr:first-child td{border:0;}
.orderinfo tr:last-child td{border:0;}
.orderinfo input[type="text"].number{width:20px;}
.orderinfo .price{font-size:25px; padding:20px 3px;}
/* ===========
	HEADER
	=========== */
header.homepage{margin-bottom:50px;}
header{ margin-bottom:0px; height:auto;}

header .top{ background:white; height:30px; width:100%;}
header .topnav li{float:right; display:block; margin-left:20px; padding-top:3px; }
header .topnav li a:hover{text-decoration:underline;}
header .shortlogo{float:left; display:none;}
header .menu{ border-top:3px solid #444; font-family: 'Montserrat', sans-serif; width:100%; background:white; padding:10px 0;}
.nohome header .menu{border-bottom:1px solid #444;}
header .menu nav li {float:left; margin-right:10px; padding-top:5px; }
header .menu nav li a{ display:block; font-weight:600;  text-transform:uppercase; font-weight:100; padding:5px 10px; border-radius:4px;}

header .basket{background:url(../img/basket.png) no-repeat 0 3px; padding-left:40px; position:relative;}
header .basket .num{background:url(../img/num.png); height:20px; width:20px; position:absolute; left:15px; top:2px; text-align:center; color:white; font-weight:bold;}
 
header .slider{ position:relative;}
.bxslider {margin:0; padding:0; list-style:none;}
.bxslider li .content{max-width:960px; margin:auto; position:relative;}
.bxslider li{text-align:center; text-transform:uppercase; padding:0; margin:0;}
.bxslider .cap{position:absolute; top:107px; right:150px; text-align:left; color:white; background:rgba(0,0,0,0.7); padding:20px; display:none;}
.bxslider h1, .bxslider h2, .bxslider h3{ line-height:1em; font-size:1.5em;}
.bxslider .button{margin-top:10px;}
.bx-prev, .bx-next{position:absolute; bottom:200px;  width:32px; height:32px;  font-size:0;}
.bx-prev{left:20px; background:url(../img/slider_arrow-left.png);}
.bx-next{right:20px; background:url(../img/slider_arrow-right.png);} 
 
 .searchform {padding:5px; border:1px solid #ddd; position:relative; background:#fff;}
 .searchform input[type=text]{padding:5px; margin:0; border:0; ;}
 .searchform button{border:0; background:url(../img/search.png) no-repeat 2px 2px; height:25px; width:25px; top:5px; right:5px; position:absolute;}
 
.main{margin-top:30px;}

/* ===========
	SUBMENU
	=========== */
.submenu{float:left;}
.submenu h2{padding-bottom:20px;}
.submenu h3{padding-top:10px;}
.submenu a{display:inline-block; padding:2px;}
.submenu li.selected a{ font-weight:bold;}
.submenu li.selected a:before{content:"› ";}
.submenu a:hover{text-decoration:underline;}

/* ===========
	CONTENT
	=========== */
.content.short{ float:right; }
.content.wide{float:none;}

.prodgroup{text-align:center; padding:5px; cursor:pointer;transition:0.5s; float:left; margin-right:10px; margin-bottom:20px; min-height: 230px;}
.prodgroup figure, .product figure{background:white; padding:5px; min-height: 160px;min-width:150px;}
.product img{vertical-align: middle;max-height:140px;max-width:140px;}
.prodgroup h4{font-size:14px; padding-top:15px;}
.no-touch .prodgroup:hover{  transition: 0.5s; box-shadow:0px 0px 5px rgba(0,0,0,0.2); background:#fff;}
.prodgroup:hover .button{opacity:1; transition:0.5s;}
.prodgroup .button{background:none; border:1px solid #ccc; color:#444; margin-top:10px; opacity:0;}
.prodgroup .button:hover{ background:#b2ddf5;}

.groupsvisual{position:relative;}
.groupsvisual img{width:100%; margin-bottom:20px;}
.groupsvisual .header{position:absolute; top:10px; left:10px; color:white; width:50%; text-transform:uppercase;}

.products{padding-top:20px;}
.products.others{border-top:1px solid #eee; margin-top:30px;}
.product{width:150px; text-align:center; cursor:pointer; padding:5px; float:left; margin-right:24px; margin-top:10px; min-height: 350px;}
/*.product img { width:50%; border:solid 1px #cecece;}*/
.short /*.product:nth-child(4)*/{margin-right:0;margin-left:5px;}
.product h4{font-size:14px; padding-bottom:5px;min-height:50px;}
.product .oldprice{text-decoration:line-through;}
.product figcaption{padding:5px 0;}
.no-touch  .product:hover{  transition: 0.5s; box-shadow:0px 0px 5px rgba(0,0,0,0.2); background:#fff;}
.product:hover .button{opacity:1; transition:0.5s;}
.product .button{background:none; border:1px solid #ccc; color:#444; margin-top:10px; opacity:0;}
.product .button:hover{ color:#00a3e4; border-color:#999;}

.productdetail figure{text-align:center; padding:20px; border:1px solid #eee;}

.productdetail th{text-align:left;}
.productdetail input[name=number], .productdetail .number{width:20px !important; text-align:center;}
.productdetail input.focus{border:2px solid #fdbd0b;}
.productdetail td{padding:5px 20px 5px 0;}
.productdetail #price{font-weight:bold; font-size:15px;}
.productdetail #priceSymbol{font-weight:bold; font-size:15px;}
.productdetail .button{/*display:block;*/ margin-top:10px; /*float:left;*/ background: #FDBD0B;}
.productdetail .order { display:none;}
.productdetail .buttonfake{margin-top:10px; float:left;}

.newprice {
    font-weight: normal;
    font-size: 13pt;
    padding-left: 5px;
}

.pplabel {
	font-weight: bold;
}

.OrderTopTable .button{margin:10px 10px 0 0;}
#TopTable{width:100%;border:0px;border-color:#fff;}
#TopTable tr, #TopTable TR {border:0px;border-color:#fff;}
#TopTable td, #TopTable TD {border:0px;border-color:#fff;}
.OrderTopTable{width:100%;border:0px;border-color:#fff;}
.OrderTableTable{width:100%;border:0px;border-color:#fff;}
	
#tabs{ margin-top:30px; color:white;}
#tabs div { clear:both;  padding:30px; background:#00a3e4; box-shadow:1px 1px 3px rgba(0,0,0,0.2);}
#tabs ul{}
#tabs nav li a{float:left; padding:10px; border-top-left-radius:4px; border-top-right-radius:4px; background:#ccc; margin-right:10px;}
#tabs nav li.active a{ background:#00a3e4; color:white;}
#tabs .tab{margin-top:20px;}

#tabs .sendtofriend td, .inlogform td{padding:5px 0;}
#tabs td:first-child, .inlogform td:first-child{text-align:right; padding-right:10px;}
#tabs .button, .inlogform .button, .inlogform .LoginFormSubmit {background:none; border:1px solid white;}
#tabs .button:hover, .inlogform .button:hover, .inlogform .LoginFormSubmit:hover{background:none; border:1px solid rgba(255,255,255,0.5);}
#tabs input, .inlogform input{border:0; box-shadow:0px 1px 1px rgba(0,0,0,0.2);}
#tabs textarea{height:150px; width:300px;}
#tabs span{margin-bottom:5px; display:block;}

#InstructieRes {color:black;}

/*table #vervolg{width:100% !important;}*/
/* ===========
	FILTER
	=========== */
.results h3{padding-bottom:10px; font-weight:normal;}
#resultsMainHolder div:nth-child(2) a,
#resultsMainHolderBottom div:nth-child(2) a
{color:#00a3e4;}
#resultsMainHolder div:nth-child(2),
#resultsMainHolderBottom div:nth-child(2)
 {font-family:"Montserrat",sans-serif;}

.filter{ padding:10px 15px; box-shadow:0 1px 2px rgba(0,0,0,0.2);}
.filter .col{margin-right:10px; float:left;}
.filter select{width:135px;}
.filter .label{font-weight:bold; background:url(../img/filter.png) no-repeat 0 2px; padding-left:20px; cursor:pointer;}
.filter .label.hide{background-position:0 -14px;}
.filter li, .filter ul{list-style:none; padding:0; margin:0;}
.filterButtonContainer{border-top:1px #eee solid; margin-top:10px; padding-top:10px; display:none;}
.filter .resetbutton{clear:both; padding-top:10px;}
.filter .results{padding-bottom:10px;}

footer{border-top:1px solid #eee; padding:20px; margin-top:30px; }
footer .center{width:960px; }
footer h2{padding:10px 0; font-size:16px;}
footer nav a{}
footer nav a:hover{text-decoration:underline;}


input.inputfield{padding:5px; border-radius:4px; background:none; border:1px solid #ccc;}
td.LoginFormInput input{padding:10px;border-radius:2px;background:white;border:0px;}
td.EmailFormField input{padding:10px;border-radius:2px;background:#eee;border:0px;}
td.EmailFormField select{padding:10px;border-radius:2px;background:#eee;border:0px;}
.selector {padding:10px;border-radius:2px;background:white;border:1px solid #ccc;}

.inlogform input[type=submit], .inlogform input[type=button]{background:none; border:1px solid white;}

table input[type=radio], table input[type=checkbox]{margin:5px;}
form[name=NAW] table {margin-top:20px;}
form[name=NAW] table td:first-child{padding-right:10px;}


/* productviewer */

figure .large{display:none;}
figure .large a{ width:100%;}
/* figure .large img{width:100%;} */
figure .large.f1{display:block;}
figure .thumb{float:left; border:1px solid #ccc; margin-left: 10px; margin-top:10px; width:50px; height:50px; padding:10px; cursor:pointer;}
figure .thumb:hover{border-color:#eee;}
figure .thumb img{margin:auto; max-height:50px;  max-width:50px;}


/* agenda*/
#blockAgenda .number{background:url(../_images/ic-agenda.jpg) no-repeat 7px 10px; height:60px; padding:0 0 0 18px;}
#blockAgenda td{vertical-align:middle;}
#tableAgenda {width:50%;}
.agendaDay{color:white;}
.agendaDay, .agendaMonth{font-size:10px; line-height:8px;}
.agendaNum{font-weight:bold; padding-top:4px;}
a, .agendaNum{color:#228eb2;}


/* =============
	EXTRA INFO
	============= */
	
	.homepage .extrainfo{background:#00a3e4; margin-top:50px; color:white; }
	.homepage .extrainfo .col{width:50%; float:right;  padding:20px; }
	.homepage .extrainfo .newsletter{width:30%; margin-left:30px; padding:20px; float:left;background:black; margin:-20px 0 30px 30px; }
	.homepage .extrainfo nav a{color:white;}
	/*.homepage .extrainfo nav a:before{content:"› "; }*/
	.homepage .extrainfo nav a:hover{text-decoration:underline;}
	
	.homepage .tabContainer{background:none; margin-top:0px; color:white;}
	
	
/* ==============
	NEWS ON HOME 
	============= */
	
	.newsarticle{padding:50px 0;}
	
	/* ==============
	STANDARD
	============= */
	.standard{max-width:700px;}
    .ordersys{width:100%;}
	/*.standard table{box-shadow: 0 0 2px rgba(0,0,0,0.2);}*/
	.standard table td, .standard th{padding:8px 12px;  }
	/* .standard table td{border-bottom:1px solid #eee;} */
	.standard tr:last-child td{border:0;}
	.standard table th{text-align:left; background:#00a3e4;  color:white;}

.LoginFormTable{width:90%;}
.LoginFormLabel{width:12%; text-align:right;}
.LoginFormInput{width:40%; text-align:left;}
.LoginFormLink {color:white;}


@media (min-width:320px) { 
/* smartphones, iPhone, portrait 480x320 phones */ 
.center,
footer .center{width:300px;}
footer .col{margin-bottom:30px;}
.content.wide{width:320px; }
.submenu{ display:none;}
.filter .label{font-size:20px; margin-top:10px;}
header .logo{float:left; margin:20px 0 20px 0; z-index:200; position:relative;}
.productdetail figcaption{padding:30px 0;}
.groupsvisual .header{font-size:20px; line-height:18px;}
header .menu .search{float:left;}
.prodgroup{width:280px;}

}

@media (min-width:320px) and (max-width:480px) { 
.productdetail{width:300px;}
.product{width:95%;}
.product .button{opacity:1; display:block;}	
.homepage .extrainfo .newsletter {width: 80%;}
.homepage .extrainfo .col {width: 80%;}
.selector{width:60px;}
.large img{width:260px;}

/* .productdetail table td:last-child{display:none;} */
/* .productdetail table th:last-child{display:none;} */
.standard table td{display:inline-block; float:left;}

.orderinfo td {border:none;}
.OrderTableTable .OrderSysTR:first-child td{display:none;}
.OrderTableTable .OrderSysTR:last-child td{border-top:0px solid #ccc; }
.OrderTableTable .OrderSysTR td:first-child{color:#ccc;}
.OrderTableTable .OrderSysTR td:first-child{color:#ccc;}
.OrderTableTable .OrderSysTR td:first-child::after{content:" -"}

.OrderTableTable .OrderSysTR td:first-child,
.OrderTableTable .OrderSysTR td:nth-child(2) {border-top:1px solid #ccc;}
.OrderTableTable .OrderSysTR td:nth-child(2) {width:180px;}
.OrderTableTable .OrderSysTR td:nth-child(3) {font-weight:bold;}
.OrderTableTable .OrderSysTR td:nth-child(6) {font-weight:bold; float:right;}
.OrderTableTable .OrderSysTR td{display:inline-block; float:left;}
.OrderTopTable a{margin-bottom:20px; float:left; text-align:center;}




}

@media (min-width:481px) { 
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
.center, footer .center, .content.wide{width:590px;}
footer .col{width:40%; float:left; padding:20px;}
.steps div{width:132px; float:left;}
.steps div:last-child{width:134px; float:left;}
.content.short{ width:400px;}
.submenu{ width:150px; display:block;}
.prodgroup{width:165px;}
.short .prodgroup:nth-child(2n){margin-right:0;}
.filter .label{font-size:14px; margin-top:0;}
header .logo{float:left; margin:0 0 20px 0; z-index:200; position:relative;}
header .top{ background:white; height:30px; position:fixed; z-index:200; width:100%; }
header .top.border{ box-shadow:0px 2px 2px rgba(0,0,0,0.1);}
.inlogform .col{width:50%;  float:left; }
.bxslider h1, .bxslider h2, .bxslider h3{ line-height:0.8em; font-size:1.4em;}
.bxslider .cap{position:absolute; top:0px; right:80px; text-align:left; color:white; background:rgba(0,0,0,0.7); padding:20px; display:block;}
.inlogform .close a{right:80px;}
.groupsvisual .header{font-size:30px; line-height:25px;}
.button {font-size:12px;}
article.vereniginggrlist{display:none;}
/* 2015 */


}
@media (min-width:320px) and (max-width:960px) { 
.button{display:block; text-align:center;}
button.button{width:98%;}
.OrderTopTable a{margin-bottom:10px;}
.OrderTopTable .button {margin:0px;}
}

@media (min-width:961px) { 
	figure .large{margin:auto;}
/* tablet, landscape iPad, lo-res laptops ands desktops */ 
.center, footer .center, .content.wide{width:960px; }
.content.short{ width:740px;}
header .top.border{box-shadow:none;}
.prodgroup, .short .prodgroup:nth-child(2n){width:205px; margin-right:30px;}
.short .prodgroup:nth-child(3n){margin-right:0;}
header .menu.fixedheader{position:fixed; background:#fff; transition:background 0.25s;  top:30px; box-shadow:0px 2px 2px rgba(0,0,0,0.2); border-top:1px solid #eee; border-bottom:0;  z-index:200;}
.toppad{padding-top:60px;}
.submenu{ width:210px;}
.homepage .extrainfo .col{width:50%; float:right;  padding:50px 30px; }
.homepage .extrainfo .newsletter{width:30%; margin-left:30px; padding:30px; float:left;background:black; margin:-20px 0 30px 30px; }
.steps {overflow:auto;}
.steps div, .steps div:last-child{width:260px; float:left;}
.textcenter{text-align:center;}
footer .col{width:192px; float:left; padding:0} 
.bxslider h1, .bxslider h2, .bxslider h3{ line-height:0.8em; font-size:3.0em;}
.bxslider .cap{position:absolute; top:15px; right:100px; text-align:left; color:white; background:rgba(0,0,0,0.7); padding:20px;}
.groupsvisual .header{font-size:50px; line-height:40px; background:rgba(0,0,0,0.5); padding:20px;}
header .menu .search{float:right;}
article.vereniginggrlist{display:none;}
}


@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }