html { margin: 0 auto; }
body { margin: 0 auto; font-family: 'Open Sans', sans-serif; color: #000; font-size: 14px; font-weight: 300;
	background: url(images/symphony.png) #4d4d4d; }
img { border: 0px; }
.clear { clear: both; }
a.link { color: #BE0000; text-decoration: none; box-shadow: inset 0px -2px 0px 0px #FFB200; font-weight: 300; font-size: 14px;
-moz-transition: all 0.10s ease-in-out; -ms-transition: all 0.10s ease-in-out; -o-transition: all 0.10s ease-in-out; transition: all 0.10s ease-in-out; }
a.link:hover { box-shadow: inset 0px -20px 0px 0px #FFB200; }
h2 { font-weight: 300; color: #BE0000; margin: 0; font-size: 26px; margin-bottom: 20px; }
h3 { font-weight: 300; color: #BE0000; margin: 0; font-size: 24px; margin-bottom: 20px; }
h4 { font-weight: 700; color: #BE0000; margin: 0; font-size: 18px; margin-bottom: 5px; }
ul.list { list-style: none; padding:0; margin:0; }
ul.list li { padding-left: 1em; text-indent: -.7em; margin-top: 10px; }
ul.list li span { font-size: 12px; color: #aaa; }
ul.list li:before { content: "■ "; color: #BE0000; }


.call { width: 100%; max-width: 950px; margin: 0 auto; background: #b01a00; height: 44px; padding: 10px 40px 10px 10px; font-weight: 500; color: #FFF;
	font-size: 16px; text-align: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.call a { color: #fff; text-decoration: none; }
.call a:hover { text-decoration: underline; }


#head { width: 100%; margin: 0 auto; }
.in-head { width: 100%; max-width: 950px; margin: 0 auto; height: 162px; background: #fff; }
.logo { float: left; height: 162px; margin: 0px 0px 0px 0px; overflow: hidden; }
.logo a { box-shadow: none; }
.logo a img { height: 100%; }
.menu { float: right; height: 20px; margin: 35px 0px 0px 0px; width: 420px; }
.menu a { display: block; float: left; border-radius: 0px; font-size: 14px; color: #BE0000; text-decoration: none; padding: 8px 15px 8px 15px; 
	text-transform: uppercase; margin: 0px 20px 20px 0px; box-shadow: inset 0px -3px 0px #FFB200; font-weight: 700;
	-moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.menu a:hover { box-shadow: inset 0px -40px 0px #FFB200; } 
.menu a img { margin: -1px 0px 1px 6px; }

.menu-resp { float: right; height: 60px; margin: 25px 20px 0px 0px; width: 40px; display: none; }
.icon-1 { width: 30px; height: 4px; background: #BE0000; position: absolute; 
-moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.icon-2 { width: 30px; height: 4px; background: #BE0000; position: absolute; margin-top: 12px; 
-moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.icon-3 { width: 30px; height: 4px; background: #BE0000; position: absolute; margin-top: 12px; 
-moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.icon-4 { width: 30px; height: 4px; background: #BE0000; position: absolute; margin-top: 24px; 
-moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.menu-resp.active .icon-1 { opacity: 0; }
.menu-resp.active .icon-2 { transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.menu-resp.active .icon-3 { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.menu-resp.active .icon-4 { opacity: 0; }

.resp-nav { display: none; }
.menu-resp-nav { display: none; width: 100%; padding: 20px; position: absolute; background: #fff;  z-index: 15; box-shadow: 0px 5px 0px #BE0000;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.menu-resp-nav a { display: block;  border-radius: 0px; background: #fff; font-size: 14px; color: #BE0000; text-decoration: none; padding: 15px 15px 10px 15px; 
	text-transform: uppercase; margin: 0px 30px 20px 0px; box-shadow: inset 0px -3px 0px #ffd200; font-weight: 700; text-align: center;
	-moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.menu-resp-nav a:hover { box-shadow: inset 0px -40px 0px #ffd200; }
.menu-resp-nav a img { margin: -1px 0px 1px 6px; }

#banner { max-width: 950px; margin: 0 auto; position: inherit; text-align: center; overflow: hidden; }
#banner img { width: 100%; }

#home { width: 100%; max-width: 950px; margin: 0 auto; margin-top: 0px; min-height: 100px; background: #fff; padding: 30px 25px 30px 25px; 
	position: relative; z-index: 10; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#inhoud { width: 100%; max-width: 950px; margin: 0 auto; margin-top: 0px; min-height: 100px; background: #fff; padding: 30px 25px 30px 25px; 
	position: relative; z-index: 10; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 24px; }
#inhoud.top-border { border-top: 1px solid #e4e4e4;}
.foto-project { width: 150px; height: 150px; margin: 20px; text-align: center; float: left;  }
.foto-project img { max-width: 150px; max-height: 150px; border: 1px solid #e4e4e4; padding: 5px; }

#projecten { width: 100%; max-width: 950px; margin: 0 auto; margin-top: 0px; min-height: 100px; background: #fff; padding: 30px 25px 30px 25px; 
	position: relative; z-index: 10; border-top: 1px solid #e4e4e4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
	line-height: 24px; }
#projecten a { color: #0096ff; box-shadow: none; }
#projecten a:hover .project { text-decoration: underline; float: left; }
#projecten .grid { margin: 0 auto; }
.product { width: 200px; margin: 0px 25px 35px 0px; float: left; text-align: center; display: inline-block; }
.product .foto { width: 200px; height: 150px; margin-bottom: 10px; text-align: center; }
.product .foto img { max-width: 200px; max-height: 150px; }
.product a { color: #0096ff; box-shadow: none; }
.product a:hover .project { text-decoration: underline; }



#pagina { width: 100%; max-width: 950px; margin: 0 auto; margin-top: 0px; min-height: 100px; background: #fff; padding: 30px 25px 30px 25px; 
	position: relative; z-index: 10; border-top: 1px solid #e4e4e4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
	line-height: 24px; }
#pagina .grid { margin: 0 auto; }

.projecten { width: 100%; max-width: 950px; margin: 0 auto; margin-top: 0px; min-height: 100px; background: #fff; padding: 30px 25px 30px 25px;
	 border-top: 1px solid #e4e4e4;	position: relative; z-index: 10; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.rail-box { width: 100%; }
.rail { width: 930px; height: 210px; }
.project { width: 200px; margin: 0px 25px 0px 0px; float: left; text-align: center; display: inline-block; }
.project .foto { width: 190px; height: 140px; margin-bottom: 10px; text-align: center; border: 1px solid #eee; padding: 5px; }
.project .foto img { max-width: 190px; max-height: 140px; }
.projecten a { color: #0096ff; box-shadow: none; }
.projecten a:hover .project { text-decoration: underline; }

.bericht { width: 100%; max-width: 600px; border-bottom: 1px solid #e4e4e4; padding: 20px 0px 20px 0px;  }
.bericht a { color: #0096ff; text-decoration: none; box-shadow: inset 0px -2px 0px 0px #eee; font-weight: 700; font-size: 18px; font-weight: 400;
-moz-transition: all 0.10s ease-in-out; -ms-transition: all 0.10s ease-in-out; -o-transition: all 0.10s ease-in-out; transition: all 0.10s ease-in-out; }
.bericht a:hover { box-shadow: inset 0px -25px 0px 0px #eee; }
.bericht-img { margin-right: -160px; width: 150px; height: auto; padding: 0px 10px 0px 0px; text-align: center; float: left; position: relative; z-index: 10; } 
.bericht-img img { max-width: 150px; max-height: 150px; } 
.bericht-txt { max-width: 600px; padding-left: 160px; box-sizing: border-box; font-size: 14px; line-height: 21px; float: left; } 
.bericht-txt span { color: #BBB; }

.producten { width: 100%; max-width: 860px; padding: 20px 0px 20px 0px;  }
.producten a { color: #BE0000; text-decoration: none; box-shadow: inset 0px -2px 0px 0px #FFB200; font-weight: 700; font-size: 14px; line-height: 34px;
-moz-transition: all 0.10s ease-in-out; -ms-transition: all 0.10s ease-in-out; -o-transition: all 0.10s ease-in-out; transition: all 0.10s ease-in-out; }
.producten a:hover, .producten a.active { box-shadow: inset 0px -20px 0px 0px #FFB200; }
.producten-side { margin-right: -240px; width: 230px; height: auto; padding: 0px 10px 0px 0px; text-align: left; float: left; position: relative; z-index: 10; }  
.producten-txt { max-width: 855px; padding-left: 230px; box-sizing: border-box; font-size: 14px; line-height: 21px; float: left; } 
.producten-txt span { color: #BBB; }

.prod-link { display: none; float: left; background: #FFB200; color: #BE0000; font-size: 16px; padding: 8px 15px 8px 15px; text-align: left; width: 200px; 
	font-weight: bold; }
.prod-link img { float: right; margin-top: 8px; }
.prod-in { position: absolute; border: 2px solid #FFB200; background: #fff; z-index: 20; box-sizing: border-box; width: 230px;
	margin-top: 40px; display: none; }
.prod-in a { display: block; padding: 8px 10px 8px 15px; color: #BE0000; border-bottom: 2px solid #FFB200; text-decoration: none; font-weight: bold; }
.prod-in a:hover { background: #FFB200; }

.item-img { width: 150px; height: auto; padding: 0px 10px 0px 0px; text-align: center; float: left; } 
.item-img img { max-width: 150px; max-height: 150px; } 


.footer { width: 100%; max-width: 950px; margin: 0 auto; margin-top: 0px; min-height: 10px; margin-bottom: 0px; background: #fff; padding: 30px 25px 30px 25px;
	 border-top: 1px solid #e4e4e4; position: relative; z-index: 10; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.footer a { margin-right: 30px; color: #BE0000; }
.footer span { float: right; color: #BE0000; height: 32px; display:inline-block; }

#content { width: 100%; max-width: 950px; margin: 0 auto; margin-top: 0px; margin-bottom: 0px; min-height: 100px; 
	position: relative; z-index: 10; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.nieuws-box { width: 100%; overflow: hidden; }
.nieuws-box a { color: #0096ff; box-shadow: none; font-size: 14px; margin-bottom: 10px; height: 20px; overflow: hidden; display: block; text-decoration: none; }
.nieuws-box a:hover { text-decoration: underline; }
.nieuws-box tr td { height: 20px; overflow: hidden; }

.blok { width: 50%; padding: 20px; background: #fff; float: left; height: 280px; font-size: 14px; color: #000; line-height: 24px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: hidden; }
.blok.hoog { height: 350px; font-size: 16px; }
.blok.hoog a { color: #0096ff; box-shadow: none; }
.blok.hoog a:hover { box-shadow: inset 0px -2px 0px 0px #ccc; }
.blok:nth-child(3n+1) { margin: 0px 0px 0px 0px; border-right: 1px solid #e4e4e4; }
.blok:nth-child(3n+2) { margin: 0px 0px 0px 0px; }

.blok-wide { width: 100%; padding: 20px; background: #fff; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #e4e4e4; }
.blok-wide .imagebox { margin: 8px 24px; padding: 8px; border: 1px solid #e4e4e4; display: inline-block; }
.blok-wide .imagebox .logo-keur { height: 80px; display: inline-block; }

@media all and (max-width: 950px) {

	.rail-box { overflow-x: scroll; }
	.rail-box { -webkit-overflow-scrolling: touch; }
	.rail-box::-webkit-scrollbar { display: none; }
	.grid { width: 675px; }
}

@media all and (max-width: 740px) {

	.resp-nav { display: block; }
	.in-head { height: 100px; }
	.logo { height: 100px; margin: 0px 0px 0px 0px; }
	.logo img { height: 100px; }
	.menu { display: none; }
	.menu-resp { display: block; }

	.producten { width: 100%; max-width: 860px; padding: 20px 0px 20px 0px;  }
	.producten-side { display: none; }  
	.producten-txt { max-width: 860px; padding-left: 0px; } 

	.prod-link { display: block;  } 
}

@media all and (max-width: 760px) {

	#content { margin: 0px 0px 0px 0px; }
	.blok { width: 100%; padding: 20px; background: #fff; float: left; height: auto;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	.blok.hoog { height: auto; }
	.blok:nth-child(3n+1) { margin: 0px 0px 0px 0px; }
	.blok:nth-child(3n+2) { margin: 1px 0px 0px 0px; }
	.footer { margin-top: 0px; }
}

@media all and (max-width: 700px) {

	.grid { width: 451px; }
}

@media all and (max-width: 475px) {

	.grid { width: 226px; }
	.bericht-img { margin-right: -90px; width: 80px; } 
	.bericht-img img { max-width: 80px; max-height: 80px; } 
	.bericht-txt { padding-left: 90px; }

	.item-img { width: 100%; height: auto; padding: 0px 10px 10px 0px; text-align: center; float: left; } 
	.item-img img { max-width: 150px; max-height: 150px; } 
}

a.link { color: #BE0000; text-decoration: none; box-shadow: inset 0px -2px 0px 0px #FFB200; font-weight: 700; font-size: 14px;
-moz-transition: all 0.10s ease-in-out; -ms-transition: all 0.10s ease-in-out; -o-transition: all 0.10s ease-in-out; transition: all 0.10s ease-in-out; }
a.link:hover { box-shadow: inset 0px -20px 0px 0px #FFB200; }

.jolande {
	width: 200px;
	float: right;	
}