@charset "utf-8";
/* CSS Document */

html {font-family: 'Open Sans', sans-serif; font-size:10px;}
body {margin:0px; padding:0px;}

.clear 		{clear:both; width:100%; height:20px;}
.clearNH 	{clear:both; width:100%;}
.clear05 	{clear:both; width:98%; height:5px; background-color:#FFF; margin:0px auto 0px auto; border-radius:2px;}

.bg_images {
	position:absolute;
	top:80px;
	width:100%;
	height:640px;
	overflow:hidden;	
}

.bg_images .bigImage {
	position:relative;
	width:100%;
	min-width:1024px;
	height:auto;
}

.bg_images .qrcode {
	position:absolute;
	bottom:0px;
	left:50px;
	width:250px;
	height:auto;
}

.navigatie {
	position:fixed;
	top: 0px;
	width:100%;
	min-width:240px;
	height:80px;
	background:#FFF;
	box-shadow:10px 0px 20px rgba(0,0,0,.5);
	z-index:200;
	line-height:80px;
}

.navigatie .top {
	width:100%;
	max-width:924px;
	min-width:240px;
	margin:0px auto 0px auto;
	border:0px solid #CCC;
}

.navigatie .top .logo {
	float:left;
	width:20%;
	border:0px solid #CCC;
}

.navigatie .top .logo img {
	position:relative;
	width:100%;
	height:auto;
	margin:15px 0px 0px 0px ;
	bottom:0px;
}

.navigatie .top .keuze {
	width:80%;
	float:right;
	border:0px solid #CCC;
}

.navigatie .top .navButton {
		display:none;
	}
	
.navigatie .top .keuze .navKeuze {
	float:right;
	margin-left:7.5px;
	text-align:right;
	border:0px solid #F00;
	padding:0px 1% 0px 1%;
}

.navigatie .top .keuze .navKeuze a 			{text-decoration:none; color:#666; font-family: 'Open Sans', sans-serif; font-size:14px; letter-spacing:1px; font-variant:small-caps; font-weight:bold;}
.navigatie .top .keuze .navKeuze a:hover 	{color:#000; border-bottom:4px solid #900;}

.container {
	position:relative;
	top: 			80px;
	width:			auto;
	max-width: 		1024px;
	min-width: 		 240px;
	margin:			0px auto 0px auto;
	border:			0px solid #CCC;
	height:			auto;
	font-family: 'Open Sans', sans-serif;
	z-index:100;
	text-align:center;
}

.container .heading, .container .subHeading {
	width:100%;
	height:auto;
	text-align:center;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:90px;
	line-height:90px;
	color:#FFF;
	margin:8% 0px 0px 0px;
	text-shadow:2px 2px #333333;
	letter-spacing:-3px;
}

.container .subHeading {
	font-family: 'Merienda One', cursive;
	font-size:60px;
	line-height:40px;
	margin:4% 0px 0px 0px;
	letter-spacing:normal;
}

.container .button {
	display:inline-block;
	background-color:#F00;
	border-radius:10px;
	padding:1% 5% 1% 5%;
	color:#FFF;
	margin:5% auto 0px auto;
	text-align:center;
	
	font-weight:bold;
	border:	2px solid #900;
	box-shadow:10px 10px 30px rgba(0,0,0,.25);
	letter-spacing:2px;
	transition:all .5s;
	font-size:18px;
}

.container .button:hover {
	cursor:pointer;
	background-color:#900;
	border:	2px solid #F00;
	letter-spacing:4px
}
	
.container .body {
	font-size:16px;
	line-height:32px;
}

.container .body .welkom {
	text-align:center;
	margin:7.5% 15% 0px 15%;
	font-weight:bold;
	color:#FFF;
	background-image:url(../images/BG_30.png);
	background-size: 100% 100%;
	background-repeat:no-repeat;
}

.container .body .page_item {
	position:relative;
	margin:0% 0px 0px 0px;
	color: #666;
}

.container .body .page_item .heading {
	color:#900;
	font-size:34px;
	letter-spacing:normal;
	text-shadow:none;
}

.container .body .page_item p {
	width:80%;
	text-align:center;
	margin:0px auto 0px auto;
	border:0px solid #CCC;
	line-height:50px;
}

.sfeer {
	position: relative;
	margin:80px auto 0px auto;
	width:100%;
	height:auto;
	min-width:240px;
	overflow:hidden;
	border:0px solid #F00;
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
    
	/* on Ipad aan, op PC uit */
	
	 	
	
	-webkit-overflow-scrolling: touch;
}

@media only screen and (device-width: 768px) {
  .sfeer {overflow-x:scroll;}
  .sfeerNav { display:none;}

}

.sfeer .beelden {
	position:relative;
	width:2760px;
	height:770px;
	overflow:hidden;
	transition:all 1s;
	margin-left:0px;
	
}

.sfeerNav {
	position:absolute;
	width:100%;
	margin:-385px 0px 0px 0px;
	z-index:1000;
	border:0px solid #F00;
}

.sfeer img {
	margin:0%;
	width:100%;
	max-width:1024px;
	min-width:240px;
	height:auto;
}

.sfeer .beelden img {
	margin:0px 10px 0px 0px;
	width:450px;
	height:770px;
}

.sfeerNav .links {
	float:left;
	
}

.sfeerNav .rechts {
	float:right;
}

.sfeerNav .links img, .sfeerNav .rechts img {
	width: 28px;
	height:40px;
	margin:0px 20px 0px 20px;
	background: rgba(0,0,0,.5);
	border-radius: 15px;
	padding:10px 20px 10px 20px;
}











	/* Menu items en wijnkaart */

.menu {
	width:		100%;
	border:		0px solid #CCC;
	margin-top:	0%;
	display:	none;
	height:		0px;
	opacity:	0;
	padding:	0px;
	
	transition:all 1s;
	overflow:hidden;
}

.menu_navigatie {
	width:100%;
	max-width:1024px;
	min-width:240px;
	margin:10px auto 10px auto;
	border:0px solid #F00;
}

.menu_navigatie .nav_item {
	float:left;
	margin:10px 0px 10px 0px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	width:7%;
	text-align:center;
	cursor:pointer;
	transition:all .5s;
	padding:1% 1.5% 1% 1.5%;
	border-radius:10px;
	margin:0px .385% 0px .385%;
	background:#F00;
	border:1px solid #900;
	color:#FFF;
}

.menu_navigatie .nav_item:hover {
	border:1px solid #F00;
	background-color:#900;
	letter-spacing:1px;
}

.menu .item {
	position:relative;
	width:90%;
	max-width:1024px;
	min-width:240px;
	margin:0px auto 0px auto;
	background: url(../images/paper_BG.jpg) no-repeat;
	background-size: 100% 100%;
	border:1px solid #f7efe7;
	box-shadow: 5px 5px 20px rgba(0,0,0,.25);
	transform:rotate(-.5deg);"
	
	font-family: 'Open Sans', sans-serif;
	color:#666;	
}

.menu .item .closeMenu {
	position:absolute;
	top: 10px;
	left:10px;
	cursor:pointer;
}


.menu .item .menuNaam {
	width:auto;
	max-width:1024px;
	min-width:240px;
	margin:10px auto 10px auto;
	
	font-family: 'Merienda One', cursive;
	color:#900;
	text-align:center;
	font-size:24px;
}

.menu .item .links {
	text-align:left;
	margin-left:1%;
	margin-top:20px;
	font-size:18px;
}

.menu .item .menuItem {
	float:left;
	width:81%;
	font-size:19px;
	line-height:20px;
	text-align:left;
	margin:1%;
	font-family: 'PT Sans Narrow', sans-serif;
	font-style:italic;
	letter-spacing:.25px;
}

.menu .item .menuItem .wijnRight {
	float:right;
	margin-right:0px;
	text-align:right;
}


.menu .item .center {
	text-align:center;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

.menu .item .prijs, .menu .item .euroTeken {
	float:right;
	width:6%;
	text-align:right;
	margin:1% 2%;
	font-size:19px;
	line-height:20px;
	font-family: 'Open Sans', sans-serif;
	border:0px solid #333;
	color:#333;
	font-weight:bold;
}

.menu .item .euroTeken {
	width:1%
}


.menu #gerecht_1, .menu #gerecht_2, .menu #gerecht_3, .menu #gerecht_4, .menu #gerecht_5, .menu #gerecht_6, .menu #gerecht_7, .menu #gerecht_8, .menu #gerecht_9 {
	display:none;
}

	/* Einde Menu items en wijnkaart */

	iframe {
		position:relative;
		width:100%;
		height:400px;
		margin:auto;
		overflow:hidden;
		margin-top:-55px;
		z-index:10;	
	}
	
	.mapWrapper {
		position:relative;
		width:130px;
		height:auto;
		margin:80px auto 0px auto;
		border:0px solid #F00;
		z-index:40;
	}
	
	.mapWrapper .mapper {
		border:1px solid #666;
		padding:2px 5px 2px 5px;
		border-radius:4px;
		cursor:pointer;
		width:100px;
		font-size:14px;
		background:#FFF;
		float:left;
		text-align:center;
		z-index:60;
		box-shadow:10px 10px 20px rgba(0,0,0,.5);
	}
	
	.mapWrapper .mapper:hover {
		background-color:#EFEFEF;
		color:#000;
	}
	
	#gMapPijl {
		transition:all .5s;
	}


.cBlok {
	width:23%;
	float:left;
	font-family: 'Open Sans', sans-serif;
	margin:1%;
	font-size:13px;
	text-align:left;
}

.cBlok .naw {
	background: url(../images/site/locatie_map-marker.png) no-repeat left top 10px;
	padding-left: 70px;
	min-height: 60px;
	}


.cBlok .cBlokHeading {
	margin:0px 0px 20px 0px;
	font-weight:bold;
	font-size:20px;
	color:#000;
	background-color:#F0F0F0;
	border-radius:10px;
	padding:2% 2% 2% 6%;
	z-index:100;
}

.footer {
	background-color:#900;
	height:150px;
	width:100%;
	margin:25px auto 50px auto;
	text-align:center;
}

.footer img {
	margin:4% 1% 2% 1%;
	transition:all .5s;
}

.footer img:hover {
	transform:scale(1.1,1.1);
}

.payOff {
	width:90%;
	font-size:10px;
	text-align:center;
	margin:5%;
}

.reserveren {
	position:			fixed;
	bottom:				10px;
	left: 				10px;
	z-index: 			500;
	width:				340px;
	height:				300px;
	border-radius: 		10px;
	background-color: 	#333;
	font-size:			14px;
	color:				#FFF;
	
	 
	display:			none;
	opacity:			0;
	
	transition:			all 1s;
	box-shadow: 0px 0px 20px rgba(255,0,0,.5);
}

.reserveren .heading {
	width:90%;
	padding:5%;
	color:#FFF;
	text-align:center;
	font-size:16px;
	letter-spacing:2px;
}

.reserveren .keuze, .reserveren .keuzeButton {
	width:90%;
	background-color: #292929;
	border-radius:5px;
	height:40px;
	margin:0px auto 10px auto;
	line-height:40px;
	border:0px solid #FFF;
	cursor:pointer;
	transition:all 1s;
}

.reserveren .keuzeButton:hover {
	background-color:#090;
	color:#FFF;
}


.reserveren .keuze .itemTekst {
	font-style:italic;
	float:left;
	color:#CCC;
	width:25%;
	padding-left: 2%;
	margin-bottom:5px;
}

.reserveren .keuze .aantal {
	float:left;
	width:10%;
	font-weight:bold;
	text-align:left;
	font-size:16px;
}

.reserveren .keuze .tekst {
	float:left;
	width:45%;
	font-size:16px;
	font-weight:bold;
	letter-spacing:1px;
}

.reserveren .keuze .arrow {
	width:10%;
	text-align:center;
	float:right;
	margin-top:5%;
}

.reserveren .keuzeButton {
	position: absolute;
	background-color:#FFF;
	color:#666;
	line-height:40px;
	text-align:center;
	font-weight:bold;
	letter-spacing:2px;
	bottom:10px;
	left:18px;
}

.reserveren .close {
	position:absolute;
	top:15px;
	left:15px;
	z-index:1000;
	cursor:pointer;
}

.reserveren .cijfers, .reserveren .kalender {
	height:0px;
	width:90%;
	background-color:#FFF;
	margin:0px auto 10px auto;
	border-radius:5px;
	display:none;
	overflow:hidden;
	transition:all 1s;
	opacity:0;
}

.reserveren .cijfers .cijfer, .reserveren .kalender .dag, .reserveren .kalender .dicht {
	float:left;
	width:14%;
	margin:2.25%;
	border:2px solid #CCC;
	color:#000;
	text-align:center;
	font-size:18px;
	line-height:40px;
	font-weight:bold;
	border-radius:5px;
	transition:all 1s;
}

.reserveren .kalender .dag, .reserveren .kalender .dicht {
	width:10.5%;
	margin:1.2%;
	line-height:30px;
	cursor:pointer;
}

.reserveren .kalender .dicht {
	background-color:#CCC;
	cursor:default;
	color:#666;
}

.reserveren .kalender .weekDag {
	width:10.5%;
	margin:1.2%;
	line-height:30px;
	border:2px solid #FFF;
	float:left;
	font-size:12px;
	color:#333;
	text-align:center;
}

.reserveren .cijfers .cijfer:hover {
	border: 2px solid #000;
	box-shadow:0px 0px 10px rgba(0,0,0,.25);
	cursor:pointer;
}

.reserveren .kalender {
	opacity: 0;
	height: 0px;
	display:none;
}

.reserveren .kalender .maand {
	width:auto;
	text-align:center;
	margin:5% auto 5% auto;
	color:#000;
	font-size:18px;
	font-weight:bold;
}

.reserveren .tijden {
	height:0px;
	width:90%;
	background-color:#FFF;
	border-radius:10px;
	margin:0px auto 0px auto;
	opacity:0;
	display:none;
	overflow:hidden;
	transition:all 1s;
	overflow:auto;
}

.reserveren .tijden .tijd {
	width:90%;
	border:2px solid #CCC;
	border-radius:5px;
	margin:4px auto 4px auto;
	color:#000;
	height:40px;
	line-height:40px;
	padding-left:5px;
	font-weight:bold;
}

.reserveren .tijden .tijd:hover {
	border:2px solid #000;
	box-shadow:0px 0px 10px rgba(0,0,0,.5);
	cursor:pointer;
}

.reserveren .tijden .tijd .beschikbaar {
	color:#0C0;
	float:right;
	margin-right:10px;
	font-style:italic;
	font-weight:normal;
	letter-spacing:1px;
}


.mobileNav {
	position:fixed;
	display:none;
	top:80px;
	right:0px;
	width:0px;
	background-color:#FFF;
	z-index:100;
	overflow:hidden;
	transition:all 1s;
	height:auto;
	border-bottom-left-radius:10px;
	border-left:1px solid #CCC;
	box-shadow:-5px 5px 10px rgba(0,0,0,.33);
	opacity:0;
}

.mobileNav .keuzeMN {
	width:95%;
	height:60px;
	border-bottom:1px solid #CCC;
	line-height:60px;
	padding-left:5%;
	font-size:20px;
	text-decoration:none;
	color:#666;
}

.mobileNav a 		{color: #666; text-decoration:none;}
.mobileNav a:hover 	{color: #000; text-decoration:underline;}


.resFormulier {
	position:fixed;
	height:580px;
	padding:10px;
	width:100%;
	bottom:60px;
	z-index:150;
	overflow:hidden;
	transition:all 1s;
	height:0px;
	opacity:0;
	display:none;
	}

.resFormulier .formulier {
	position:relative;
	width:80%;	
	min-width:240px;
	margin:auto;
	height:auto;
	border-radius:10px;
	box-shadow: 0px 0px 20px rgba(0,0,0,.5);
	background-color:#FFF;
	z-index:180;
}

.resFormulier .formulier .top {
	background-color:#333;
	color:#FFF;
	height:50px;
	line-height:50px;
	text-align:center;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	letter-spacing:1px;
	font-size:16px;
}

.resFormulier .formulier .introForm {
	width:90%;
	padding:30px 5% 30px 5%;
	font-size:24px;
	line-height:34px;
	text-align:center;
}

.resFormulier .formulier .vraag, .resFormulier .formulier .radioButtons, .resFormulier .formulier .afsluiter {
	font-size:18px;
	font-weight:bold;
	width:100%;
	padding:15px 0% 15px 0%;
	text-align:center;
}

.resFormulier .formulier .afsluiter {
	font-weight:normal;
	font-size:12px;
	text-align:center;
	margin-bottom:30px;
}

.resFormulier .formulier .invullen {
	width:100%;
}

.resFormulier .formulier .invullen input {
	width:37%;
	margin:1%;
	padding:5px;
	height:30px;
	line-height:30px;
	border-radius:5px;
	border:2px solid #CCC;
	font-size:16px;
}

.resFormulier .formulier .invullen input:focus, .resFormulier .formulier .fBericht:focus {
	box-shadow:0px 0px 20px rgba(0,0,0,.5);
	color:#000;
	border:2px solid #000;
}

.resFormulier .formulier .invullen .links {
	float:left;
	margin:10px 0% 10px 10%;
}

.resFormulier .formulier .invullen .rechts {
	float:right;
	margin:10px 10% 10px 0%;
}

.resFormulier .formulier .fBericht {
	border-radius:5px;
	border:2px solid #CCC;
	font-size:16px;
	padding:10px;
	width:78%;
	margin:10px 10% 10px 10%;
	font-family: 'Open Sans', sans-serif;
}


.resFormulier .formulier .fButton {
	width:20%;
	margin:10px 40% 10px 40%;
	background-color:#333;
	color:#FFF;
	height:40px;
	line-height:40px;
	border-radius:5px;
	box-shadow:5px 5px 10px rgba(0,0,0,.5);
	border:1px solid #333;
	font-size:14px;
	text-align:center;
	letter-spacing:1px;
	padding:0px;
	cursor:pointer;
}

.resFormulier .formulier .fClose {
	position:absolute;
	top:15px;
	left:10px;
	z-index:400;
	cursor:pointer;
}

#topcontrol {
	z-index:1000;
}


/* Formulier CSS */

	.form {
		width:70%;
		float:right;
	}
	
	.cForm .formTekst {
		text-align:left;
	}
	
	.cForm .formInput {
		width:100%;
	}
	
	.cForm .formInput input, .cForm .formInput textarea {
		width:100%;
		height:30px;
		line-height:30px;
		padding:0px 0px 0px 8px;
		font-size:15px;
		border:1px solid #CCC;
		color:#333;
		border-radius:6px;
		font-family:Arial, Helvetica, sans-serif;
	}
	
	.cForm .formInput textarea {
		height:auto;
		min-height:100px;
		overflow:auto;
	}
	
	.cForm .formInput input:focus {
		border:1px solid #000;
		box-shadow:0px 0px 10px rgba(0,0,0,.25);
	}
	
	.cForm .formTekst .fButton {
		width:25%;
		margin:10px 0px;
		background-color:#333;
		color:#FFF;
		height:40px;
		line-height:40px;
		border-radius:5px;
		box-shadow:5px 5px 10px rgba(0,0,0,.5);
		border:1px solid #333;
		font-size:14px;
		text-align:center;
		letter-spacing:1px;
		padding:0px;
		cursor:pointer;
		float:right;
	}
	

@media screen and (max-width: 1024px) {
	.navigatie .top .keuze {
		display:none;
	}
	
	.navigatie .top .navButton {
		display: block;
		float:right;
		height:20px;
		margin:27px 25px;
		cursor:pointer;
	}
	
	.navigatie .top .navButton .balkje {
		width:30px;
		height:3px;
		border-radius:1px;
		background-color:#000;
		margin:5px;
		transition:all 1s;
	}
	
	.mobileNav {
		
	}
	
	
}

@media screen and (max-width: 512px) {
	.container .body {
		font-size:20px;
		line-height:24px;
	}
}

@media screen and (max-width: 1024px) {
	.cBlok {
		width:48%;
		min-height:350px;
	}
}


@media screen and (max-width: 768px) {
	.cBlok {
		width:90%;
		float:none;
		padding:4%;
		height:auto;
		min-height:50px;
	}
}