html { margin: 0 auto; }
body { margin: 0 auto; font-family: 'Josefin Slab', serif;
	background: url(images/3.jpg) no-repeat center center fixed #4d4d4d; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
img { border: 0px; }
.clear { clear: both; }

#header { width: 100%; margin-top: 50px; margin-bottom: 65px; height: 60px; background: rgba(255,255,255,1); 
	font-family: 'Open Sans', sans-serif; color: #4d4d4d; font-size: 16px; font-weight: 300; -webkit-box-shadow: 0px 0px 30px 0px rgba(10, 10, 10, 0.71);
-moz-box-shadow:    0px 0px 30px 0px rgba(10, 10, 10, 0.71);
box-shadow:         0px 0px 30px 0px rgba(10, 10, 10, 0.71); }
.in-header { width: 1000px; margin: 0 auto; }
.nav-left { width: 375px; float: left; height: 60px; }
.nav-right { width: 375px; float: left; height: 60px; }
.nav-right a, .nav-left a { text-transform: uppercase; color: #000; font-size: 14px; font-weight: 700; box-shadow: inset 0px -3px 0px #fa9500;
	display: block; height: 30px; padding: 15px 0px 0px 0px; margin: 0px 35px 0px 35px; float: left; text-decoration: none;
	-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; }
.nav-right a:hover, .nav-left a:hover { box-shadow: inset 0px -6px 0px #fa9500; }
.logo-center { width: 248px; float: left;  height: 60px; }
.logo-center img { margin-top: -50px; }
.logo-center a { box-shadow: none; }
.nav-left a.m-home { margin-left: 25px; margin-right: 20px; }
.nav-left a.m-menu { margin-right: 0px; margin-left: 20px; }

#head { width: 100%; max-width: 1000px; margin: 0 auto; background: #fff; display: none; }
.in-head { width: 100%; max-width: 960px; margin: 0 auto; height: 90px; background: #fff; /* border-bottom: 5px solid #ed583a; */ }
.logo { float: left; height: 90px; margin: 0px 0px 0px 0px; width: 250px; overflow: hidden; }
.logo a { box-shadow: none; }
.logo img { margin-top: 0px; height: 95px; }
.menu-resp { float: right; height: 40px; margin: 20px 20px 0px 0px; width: 40px; display: block; }
.icon-1 { width: 40px; height: 5px; background: #fa9500; 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: 40px; height: 5px; background: #fa9500; position: absolute; margin-top: 15px; 
-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: 40px; height: 5px; background: #fa9500; position: absolute; margin-top: 15px; 
-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: 40px; height: 5px; background: #fa9500; position: absolute; margin-top: 30px; 
-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 10px 10px #AAA;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.menu-resp-nav a { display: block; border-radius: 0px; font-size: 14px; color: #000; text-decoration: none; padding: 15px 15px 15px 15px; 
	text-transform: uppercase; margin: 0px 20px 20px 0px; box-shadow: inset 0px -3px 0px #fa9500; 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; }
.resp-nav { display: none; }
.menu-resp-nav { display: none; width: 100%; padding: 20px; position: absolute; background: #fff;  z-index: 15; box-shadow: 0px 10px 10px #AAA;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.menu-resp-nav a { display: block; border-radius: 0px; font-size: 14px; color: #000; text-decoration: none; padding: 15px 15px 15px 15px; 
	text-transform: uppercase; margin: 0px 20px 20px 0px; box-shadow: inset 0px -3px 0px #fa9500; 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; }

.plaat { margin: 0 auto; width: 100%; max-width: 980px; 
	-webkit-box-shadow: 0px 0px 30px 0px rgba(10, 10, 10, 0.71);
-moz-box-shadow:    0px 0px 30px 0px rgba(10, 10, 10, 0.71);
box-shadow:         0px 0px 30px 0px rgba(10, 10, 10, 0.71);  }
.plaat img { width: 100%; max-width: 980px; margin: 0 auto; }

.home-txt { width: 100%; max-width: 980px; margin: 0 auto; box-sizing: border-box; padding: 20px; font-size: 14px; color: #000; line-height: 24px; 
	background: #fff; margin-top: 30px; font-family: 'Open Sans', sans-serif;
	-webkit-box-shadow: 0px 0px 30px 0px rgba(10, 10, 10, 0.71);
-moz-box-shadow:    0px 0px 30px 0px rgba(10, 10, 10, 0.71);
box-shadow:         0px 0px 30px 0px rgba(10, 10, 10, 0.71);  }
.home-txt h2{ color: #fa9500; font-size: 36px; font-weight: 400; }

.tikker { width: 100%; background: #ff7400; height: 30px; }
.tik { margin: 0 auto; max-width: 950px; padding: 5px; color: #000; font-size: 18px; letter-spacing: 1px; text-align: center; font-weight: 500; }

.grid-1 { max-width: 980px; margin: 0 auto; }
.blok-1 { float: left; width: 475px; margin: 30px 29px 0px 0px;
	-moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.black {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    cursor: pointer;
}

.black:hover {
	filter: none; /* IE6-9 */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    cursor: pointer;
}

.blok-2 { float: left; width: 475px; margin: 30px 0px 0px 0px;
	-moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.mini-blok { width: 222px; height: 123px; box-sizing: border-box; -webkit-box-shadow: 0px 0px 30px 0px rgba(10, 10, 10, 0.71);
-moz-box-shadow:    0px 0px 30px 0px rgba(10, 10, 10, 0.71);
box-shadow:         0px 0px 30px 0px rgba(10, 10, 10, 0.71); }
.mini-blok.bike { font-size: 28px; font-weight: 700; color: #000; padding: 18px 0px 0px 10px; line-height: 45px; background: url(images/e-bike.png) right bottom no-repeat #ff7200; }
.mini-blok.strand { background: #ffe7cb; margin-top: 31px; padding: 10px 0px 0px 0px; text-align: center; font-size: 16px; line-height: 20px; font-weight: bold;}
.mini-blok.strand img { margin: 0 auto; margin-top: 0px; margin-bottom: 5px; display: block; }
.mini-blok.weer { background: #5db5ff; font-size: 24px; font-weight: 400; color: #000; padding: 10px 0px 0px 0px; line-height: 40px; text-align: center; }
.mini-blok.aed {  background: url(images/aed.png) right bottom no-repeat #1f6939; margin-top: 31px; padding: 20px 0px 0px 10px; font-size: 38px; line-height: 35px; 
	font-weight: 700; color: #fff; }
.mini-blok.aed span { font-size: 24px; }
.half-blok { width: 222px; height: 277px; float: right; text-align: center; font-size: 32px; padding: 10px; 
	box-sizing: border-box; font-weight: 400; color: #ff5a00; -webkit-box-shadow: 0px 0px 30px 0px rgba(10, 10, 10, 0.71);
-moz-box-shadow:    0px 0px 30px 0px rgba(10, 10, 10, 0.71);
box-shadow:         0px 0px 30px 0px rgba(10, 10, 10, 0.71); }
.half-blok.cappuccino { background: url(images/cappuccino.png); }
.half-blok.zeehond { background: url(images/zeehond.png); font-size: 24px; font-weight: bold; color: #000; }

.content { max-width: 950px; margin: 0 auto; font-size: 18px; line-height: 24px; box-sizing: border-box; padding: 0px 20px;}
.content h2 { font-size: 32px; color: #000; font-weight: 300;  }

.menukaart { width: 100%; border-top: 2px solid #fa9500; margin-bottom: 30px; }
.menukaart tr:nth-child(2n+1) { background: #fef6f5; }
.menukaart tr td { padding: 10px 10px 10px 10px; }
.menukaart tr td.prijs { font-weight: 700; }

.footer { width: 100%;  height: 30px; margin-top: 30px; }
.foot { margin: 0 auto; background: #ffffff; max-width: 950px; padding: 5px; color: #000; font-size: 18px; letter-spacing: 1px; text-align: center; }

.foto-cont { float: left; width: 160px; height: 160px; margin: 15px; }
.foto-cont a { display: block; margin: 0 auto; border: 1px solid #000; padding: 5px; }
.foto-cont a img { max-width: 150px; max-height: 150px; }

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

	.blok-1 { float: none; margin: 0 auto; margin-bottom: 30px; margin-top: 30px; }
	.blok-2 { float: none; margin: 0 auto; }

	.plaat { width: 100%; max-width: 980px; margin-top: 0px; box-shadow: none; }
	.home-txt { margin-top: 0px; box-shadow: none; border-top: 1px solid #ccc; }
	#header { display: none; }
	#head { display: block; }
	.resp-nav { display: block; }
	
}

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

	.tikker { display: none; }
	.menu { display: none; }
	.menu-resp { display: block; }
	.resp-nav { display: block; }
	
}

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

	.blok-1.black, .blok-1.black img { width: 100%; }
	.blok-2.black, .blok-2.black img { width: 100%; }
	.blok-1.los { width: 222px; }
	.blok-2.los { width: 222px; }
	.half-blok { float: none;  clear: both; margin-bottom: 30px;}

	
}