@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

/* Normalizes margin, padding */
body, div,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0; padding: 0;
}

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 { font-size: 100%; }

/* Removes list-style form lists */
ol, ul { list-style: none; }


html, body { margin: 0px auto; height: 100%; }
body {
	width: 92%;
	max-width: 660px;
	height: auto;
	min-height: 100%; 
	margin-top: 50px;
	margin-bottom: 100px; 
	text-align: left;
	font-family: Georgia, Times new Roman, serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	color: #06203D;
}



/* FONTS EN KLEUREN */
h1 { font-weight: 700; padding-bottom: 1em; }
h2 { font-family: "Roboto", sans-serif; text-transform: uppercase; font-weight: 500; margin-bottom: 3px; }
	.content > h2 { margin-top: 1em; }
h3 { text-decoration: underline; font-weight: normal; }
h4 { font-family: "Roboto", sans-serif; text-transform: uppercase; font-weight: 500; font-size: 0.9em; margin-bottom: 0px; }
h5 { font-size: 0.8em; line-height: 1em; padding-bottom: 1em; font-weight: normal;}
.subkop { font-family: "Roboto", sans-serif; text-transform: uppercase; font-weight: 500; }
p { padding-bottom: 16px; }
p.kleiner { font-size: 0.8em; }
.geenpad { padding-bottom: 0px; }
a { color: #06203D; text-decoration: none; }
a:hover { color: #AC8145; }
a.bestel { text-decoration: underline; }
a.bestel:hover { color: #AC8145; }

hr { border: none; border-top: 1px dashed #06203D; color: #FFF; background-color: #FFF; height: 2px; width: 100%; }

.blauw a:hover, .blauw.actief { color: #2D9FD9 !important; }
.bruin a:hover, .bruin.actief { color: #AC8145 !important; }
.geel a:hover, .geel.actief { color: #DCC130 !important; }
.grijs a:hover, .grijs.actief { color: #4D6679 !important; }
.groen a:hover, .groen.actief { color: #90B38D !important; }
.rood a:hover, .rood.actief { color: #CE2027 !important; }
.zand a:hover, .zand.actief { color: #B6A393 !important; }

.tekstlink { color: #06203D; text-decoration: underline; }
.blauw:hover { color: #2D9FD9; }
.bruin:hover { color: #AC8145; }
.geel:hover { color: #DCC130; }
.grijs:hover { color: #4D6679; }
.groen:hover { color: #90B38D; }
.rood:hover { color: #CE2027; }

.dunner { font-weight: 300; }
.kader { width: 70%; max-width: 460px; height: auto; min-height: 345px; border: 1px solid #06203D; }
.tint { background: #D3C7A6; }
.pad20 { padding: 20px; }


/* ALGEMENE REGELS */
.clear { float: none; clear: both; }
#check { position: relative; padding: 20px; /*border: 1px solid #EEE;*/ color: #CCC; font-size: 0.8em; }
.prev, .next { cursor: pointer; }



/* HOOFDONDERDELEN */
header { position: relative; margin-bottom: 6px; }
#logo { position: relative; top: 0px; left: -10px; width: 280px; height: 70px; margin-bottom: 7px; background: url('../images/woolfiller_logo.gif') no-repeat; background-size: 280px 70px; overflow: hidden; text-indent: -999px; }

#taalwissel { position: absolute; top: 50px; left: 260px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.7em; text-transform: uppercase; color: #A6B2BD; }
#taalwissel a { color: #A6B2BD; } /* 50% .grijs */
#taalwissel a:hover, #taalwissel .actief { color: #06203D; }

/* NAVIGATIE */
#nav { position: relative; width: 80%; max-width: 450px; }
#nav ul { position: relative;  font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.1em; text-transform: uppercase; }
#nav a { color: #06203D; text-decoration: none; }
#nav li { position: relative; float: left; margin-right: 7px; height: 19px; }
#nav li::after { content: "/"; margin-left: 7px; font-weight: 400; color: #06203D; }

/* SUBNAVIGATIE */
#subnav { position: absolute; top: 120px; /*170px */ margin-left: -114px; text-align: right;}
#subnav ul { position: relative; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 0.9em; height: 1.9em; text-transform: uppercase; }
#subnav .actief, #subnav .actief a { color: #AC8145; }

.content { position: relative; width: 100%; margin-bottom: 20px; }
.content.laatste { margin-bottom: 80px; }

.beeld { position: relative; display: block; float: left; width: 70%; }
.beeld-vb { position: relative; display: block; float: left; width: 70%; height: 690px; }
.beeld-vb > div { /*position: absolute; right: 0px; */ max-width: 460px; }
.beeld img, .beeld-vb img { width: 100%; height: auto; }
.beeld video { width: 100%; max-width: 460px; background: #FFF; }
.beeld.tint { min-height: 345px; }
.tekstkolom { position: relative; top: -2px; display: block; float: right; width: 28.5%; height: 345px; }
.tekstkolom-vb { position: relative; top: -2px; display: block; float: right; width: 28.5%; height: 690px; }
.tekstkolom.geenh { height: auto !important; }
.tekstkolom-bijschrift { position: absolute; bottom: 0px; }

.contentkolommen { position: relative; display: block; float: none; width: 70%; top: 1em; margin-bottom: 2em; }
.kolom { position: relative; float: left; width: 48%; margin-right: 4%; }
.kolom.laatste { margin-right: 0; }

/* SOCIAL */
.social { float: left; width: 28px; height: 28px; overflow: hidden; margin: 0 4px 6px 0; text-indent: -999px; }
.social-fb { width: 28px; height: 28px; background: url('../images/logo_fb.png'); background-size: 100% auto; }
.social-insta { width: 28px; height: 28px; background: url('../images/logo_insta.png'); background-size: 100% auto; }
.social-fb-fans { width: 28px; height: 28px; background: url('../images/logo_fb-fans.png'); background-size: 100% auto; }
.social-insta-fans { width: 28px; height: 28px; background: url('../images/logo_insta-fans.png'); background-size: 100% auto; }
.social:hover { background-position: bottom; }

/* ZOOM FOTO'S*/
.selectors { display: none; }
button.geenknop { padding: 0; border: none; background: none; cursor: pointer; outline: none; }
.mz-caption { display: none !important; }


/* KITS */
ul.opskits { position: relative; width: 472px; height: 173px; display: block; }

ul.opskits li { position: relative; float: left;
	width: 108px;
	margin-right: 10px;
	height: 174px;
	display: inline;
	float: left;
	font-family: Georgia, Times new Roman, serif;
	color: #06203D;
	text-align: left;
}
ul.opskits a:hover { color: #AC8245; }

#kleurentabel { position: relative; top: 2px; left: 0px; height: 44px; margin-bottom: 1em; }
#kleurentabel td { width: 28px; height: 44px; }
#kleurentabel td img { width: 28px; height: 44px; }
.tabellijn { border: solid 1px #06203D; }

.tekstkolom-intas { position: absolute; bottom: 0px; max-width: 140px; }
#tas { position: relative; top: 4px; left: 2px; width: 59px; height: 73px; overflow: hidden; background: url('/images/tas.gif') no-repeat; background-size: 100%; }
#tas p { display: none; }
a:hover #tas, #tas.actief { background-position: bottom; }


.melee { position: absolute; bottom: 8px; right: 15px; font-size: 0.85em; }

/* BESTELLEN*/
.besteloverzicht { position: relative; margin-top: 40px; left: 50%; margin-left: -105px; width: 210px; min-height: 236px; }
.besteloverzicht2 { position: relative; margin-top: 40px; left: 50%; margin-left: -200px; width: 400px; min-height: 236px; }
.bestelknoppen { position: relative; margin-top: 20px; width: 100%; min-height: 3.2em; }
.bestelknoppen > div { position: relative; width: 40%; }
.bestelknop-terug { margin-left: 16px; float: left; }
.bestelknop-verder { margin-right: 16px; float: right; text-align: right; }
.besteloverzicht img { width: auto !important; }

ul.opskleur { position: relative; top: 16px; left: 16px; width: 450px; height: 68px; display: block; }
ul.opskleur li { width: 43px; height: 68px; display: inline; float: left; }
.opskleur-vlak { width: 28px; height: 42px; }
.opskleur-vlak > img { width: 100%; height: 100%; }
.opskleur-code { padding-top: 3px; }
.opskleur-code p { font-family: Georgia, Times new Roman, serif; font-size: 0.7em; line-height: 0.7em; }

/* BESTELLEN - FORMULIER */
.formel { position: relative; width: 100%; padding-bottom: 0.4em; }
.formlabel { float: left; width: 22%; text-align: right; margin-right: 3%; }
.forminput { float: right; width: 74%; }
.formbestel { width: 100%; max-width: 250px; background-color: #AC8245; border: 0px; color: #000000; padding: 2px; }
.formbestel.fout { background-color: #FF0000; }
select.formbestel { width: 100%; max-width: 254px; }
.formbestelcheck { border: 1px solid #AC8245; color: #000000; padding: 2px; }






/* SUBMENU UIT LINKER MARGE */
@media screen and (max-width: 900px) {
	#subnav { position: relative; top: 0px; margin-top: 1em; margin-left: 0px; width: 80%; max-width: 450px; text-align: right;}
	#subnav ul { }
	#subnav li { position: relative; float: left; margin-right: 6px; height: 16px; }
	#subnav li::after { content: "/"; margin-left: 7px; font-weight: 400; color: #06203D; } 
}

/* RECHTERKOLOM ONDER BEELD */
@media screen and (max-width: 717px) { /* 660/92% */
	body { margin-top: 20px; }
	#nav, #subnav { width: 100%; }
	.beeld, .beeld-vb { position: relative; display: block; float: none !important; width: 100%; max-width: 462px; height: auto !important; margin-bottom: 10px; }
	.contentkolommen { width: 100%; max-width: 462px; }
	.tekstkolom, 
	.tekstkolom-vb { position: relative; display: block; float: none; width: 100%; max-width: 462px; height: auto !important; }
	.tekstkolom .tekstkolom-bijschrift { position: relative !important; float: right; width: 36%; height: 4em; text-align: right; }
	.tekstkolom-vb .tekstkolom-bijschrift { position: relative !important; float: right; width: 50%; height: 4em; text-align: right; }
	.tekstkolom-intas { position: relative !important; float: right; width: 33%; text-align: right; }
	.links { float: left; width: 60%; }
	.tekstkolom .bijschrift-nrs,
	.tekstkolom-vb .bijschrift-nrs { position: absolute; top: 0px; right: 0px;}
	.tekstkolom .bijschrift-tekst,
	.tekstkolom-vb .bijschrift-tekst { position: absolute; top: 2em; right: 0px; }
	#tas { position: relative; float: right; margin-right: 2px; }
	
}


@media screen and (max-width: 472px) {
	.geenmob { display: none; }
	ul.opskits { width: 100%; }
	ul.opskleur { float: left; width: 63px; height: auto; margin-bottom: 20px; }
	ul.opskleur li { float: none; }
	.opskleur-vlak { height: 28px; width: 42px; }
	.opskleur-code { height: 15px; }
	.besteloverzicht2 { position: relative; margin-top: 30px; left: 0; margin-left: 0; width: 100%; text-align: center; }
	.formel { width: 80%; margin-left: 10%; text-align: left; }
	.formlabel, .forminput { float: none; width: 100%; text-align: left; }
}