@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600);
@import url(https://fonts.googleapis.com/css?family=Clicker+Script);


@font-face {
font-family: 'icon';
src: url('../font/icon.eot?68410494');
src: url('../font/icon.eot?68410494#iefix') format('embedded-opentype'),
   url('../font/icon.woff?68410494') format('woff'),
   url('../font/icon.ttf?68410494') format('truetype'),
   url('../font/icon.svg?68410494#icon') format('svg');
font-weight: normal;
font-style: normal;
}

*{
margin:0;
padding:0;
}

html, body{
width:100%;
height:100%;
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}

html{
background:#F0E9DB;
}


#wrapper{
width:1000px;
height:auto;
margin:50px auto;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
overflow:hidden;
box-shadow: 7px 7px 22px rgba(50, 50, 50, 0.66);
-webkit-box-shadow: 7px 7px 22px rgba(50, 50, 50, 0.66);
-moz-box-shadow: 7px 7px 22px rgba(50, 50, 50, 0.66);
}

#panorama{
background-image: url("panorama.jpg" );
background-position: center;
background-size: cover;
height:190px;
}

#panorama p{
font-weight:600;
display:inline;
float:right;
line-height:70px;
font-size:70px;
margin:120px 0 0 0;
color:#F0E9DB;
text-transform:uppercase;
opacity:.7;
}

#menu{
width:100%;
height:45px;
position:relative;
background:#962020;
}

#menu #button{
display:none;
font-size:30px;
width:100%;
line-height:45px;
font:"arial";
color:white;
text-align:right;
padding-right:10px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}


#menu ul{
width:100%;
height:100%;
margin:0;
font-size: 0;
display:inline;
}

#menu ul li{
display: inline-block;
list-style-type: none;
font-size: 0;
}

#menu ul li a{
display:block;
width: auto;
height:45px;
line-height:45px;
padding:0 10px;
margin:0;
color:white;
font-size:19px;
text-decoration:none;
font-weight: 300;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}

#menu ul li a:hover, #menu ul li.active > a{
background:white;
color:#962020;
}

#menu ul li:hover > ul{
display: block;
z-index:2;
}

#menu ul li.active > ul{
display: block;
z-index:1;
}

#menu ul li ul:hover > ul{
display: block;
z-index:2;
}

#menu ul li ul{
display: none;
position: absolute;
left:0;
height:25px;
width:100%;
background:white;
list-style-type: none;
}

#menu ul li ul li{
display: inline-block;
color:#962020;
font-size:14px;
}

#menu ul li ul li:not(:last-child):after { content: "-";}


#menu ul li ul li a{
display: inline-block;
width: auto;
height:25px;
line-height:25px;
padding:0 10px;
color:#962020;
font-size:14px;
text-decoration:none;
font-weight: 400;
}

#menu ul li ul li a:hover, #menu ul li ul li.active > a{
text-decoration:underline;
}

#content{
width:100%;
min-height:500px;
padding:30px 15px;
background:white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

img.welkom, img.Roy_Nathalie{
width:200px !important;
height:180px;
margin:0 0 10px 10px;
float:right;
}

img.Roy_Nathalie{
float:left;
}

#agenda{
min-height:200px;
min-width:250px;
background:#F0E9DB;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
overflow:hidden;
-webkit-box-shadow: 5px 5px 21px 0 rgba(50, 50, 50, 0.55);
-moz-box-shadow: 5px 5px 21px 0 rgba(50, 50, 50, 0.55);
box-shadow: 5px 5px 21px 0 rgba(50, 50, 50, 0.55);
-webkit-overflow-scrolling: touch;
}

#agenda h1{
width:100%;
height:30px;
line-height:28px;
font-size:23px;
color:white;
background:#962020;
text-align:center;
font-weight:400;
}

#agenda ul{
margin:5px 2px 5px 3px;
max-height:500px;
overflow-y:auto;
list-style-type:none;
}

#agenda ul::-webkit-scrollbar{width: 4px; }

#agenda ul::-webkit-scrollbar-thumb{background-color:rgb(110, 110, 110); border-radius:2px;}
#agenda ul::-webkit-scrollbar-thumb:hover{background-color:#962020;}

#agenda ul::-webkit-scrollbar-track{background-color:none;}

#agenda ul li{
padding:3px;
height:43px;
}

#agenda ul li:not(:last-child){
border-bottom:1px solid #CDC2AB;
}


#agenda ul li .agenda_left{
display:block;
float:left;
width:84px;
}

#agenda ul li .agenda_right{
display:block;
float:right;
width:138px;
}


#agenda ul li h3{
font-weight:400;
color:#962020;
font-size:15px;
display: block;
width:100%;
}

#agenda ul li h4{
font-weight:400;
color:black;
font-size:11px;
display: block;
width:100%;
}

#agenda ul li p{
font-weight:400;
color:black;
font-size:15px;
display: block;
width:100%;
}

.left{
float:left;
width:700px;
}

.right{
float:right;
width:250px;
}

.right img{
display:block;
width:250px;
}

.right ul.contact{
list-style-type:none;
font-size:15px;
width:185px;
margin:10px;
}

.right ul.contact a{
text-decoration:none;
color:black;
}

.right ul.contact a:hover{
text-decoration:underline;
}

.right  ul.contact li.header{
font-weight:600;
}

.showcase_wrapper{
width:100%;
display: block;
margin: 30px 0;
text-align:center;
}


.showcase_wrapper .showcase{
text-align:left;
display: inline-block;
width:30%;
margin:1%;
background:#F0E9DB;
vertical-align: top; /* added */
position: relative;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
overflow:hidden;
-webkit-box-shadow: 7px 7px 22px rgba(50, 50, 50, 0.66);
-moz-box-shadow: 7px 7px 22px rgba(50, 50, 50, 0.66);
box-shadow: 7px 7px 22px rgba(50, 50, 50, 0.66);
}

.showcase_wrapper .showcase h1{
width:100%;
height:35px;
line-height:35px;
font-size:25px;
color:white;
background:#962020;
text-align:center;
font-weight:400;
}

.showcase_wrapper .showcase img{
width:100%;
height:170px;
}

.showcase_wrapper .showcase h1, .showcase_wrapper .showcase img{
cursor:pointer;
}

.showcase_wrapper.eten_drinken .showcase h1, .showcase_wrapper.eten_drinken .showcase img{
cursor:auto;
}

.showcase_wrapper .showcase ul{
margin:30px;
margin-bottom:100px;
}

.showcase_wrapper.eten_drinken .showcase ul{
margin:30px;
margin-bottom:10px;
}

.showcase_wrapper .showcase ul li{
list-style-type:none;
font-size:16px;
padding:5px 0;
}

.showcase_wrapper .showcase ul li:not(:last-child){
border-bottom:1px solid #CDC2AB;
}

.showcase_wrapper .showcase ul li:before {
font-family: 'icon';
content: '\e800';
margin-right:5px;
font-size:18px;
color:#20914D;
}

.showcase_wrapper .showcase ul li.sub_ul:before{
content: '';
}

.showcase_wrapper .showcase ul li.sub_ul{
margin-left:15px;
font-style:italic;
}


.showcase_wrapper .showcase ul li ul.sub_ul{
padding:0 3px;
margin:0;
font-style:normal;
}

.showcase_wrapper .showcase ul li ul.sub_ul li{
color:black;
font-size:14px;
font-weight:100;
}

.showcase_wrapper .showcase ul li.sub_ul li:before{
content: '-';
color:black;
}

.showcase_wrapper .showcase a.button{
padding:2px 17px;
float:right;
bottom:20px;
right:10px;
position:absolute;
border:0;
text-decoration:none;
cursor:pointer;
background:#962020;
color:#F0E9DB;
font-size:18px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}

.showcase_wrapper .showcase a.button:hover{
background:#B82D2D;
}

/*Foto-viewer*/
#foto_viewer{
width:250px;
height:auto;
display:block;
}

#foto_viewer #current{
height:190px;
}

#foto_viewer #current img.current_1, #foto_viewer #current img.current_2{
width:250px;
height:200px; /*wordt auto?*/
position:absolute;
display:block;
cursor:pointer;
}

#foto_viewer .img_list{
margin:30px 0 0 -10px;
width:260px;
}

#foto_viewer .img_list img.small{
height:50px;
margin: 0 0 10px 10px;
border:0;
width:55px;
cursor:pointer;
float:left;
}

#fullscreen{
height:100%;
width:100%;
top:0;
z-index:2;
position:fixed;
background-color: rgba(0, 0, 0, 0.95);
overflow: hidden;
}

#fullscreen #fullscreen_wrapper{
display: table;
height:100%;
table-layout: fixed;
width:95%;
margin:0 auto;
border-spacing:10px;
}

#fullscreen #fullscreen_wrapper .img{
display:table-cell;
width:80%;
height:100%;
vertical-align:middle;
position:relative;
}

#fullscreen #fullscreen_wrapper .img span.pager{
color:white;
position:absolute;
bottom:0;
width:100%;
text-align:center;
}


#fullscreen #fullscreen_wrapper .img img{
max-width:90%;
max-height:80%;
display: block;
margin:0 auto;
}

#fullscreen #fullscreen_wrapper .left_arrow, #fullscreen #fullscreen_wrapper .right_arrow{
color:white;
display:table-cell;
font-size:50px;
vertical-align:middle;
cursor:pointer;
opacity:1;
font-family: 'icon';
}

#fullscreen #fullscreen_wrapper .left_arrow{
text-align:left;
}

#fullscreen #fullscreen_wrapper .right_arrow{
text-align:right;
}


/*Checklist*/
ul#checklist{
background:#F0E9DB;
padding:15px;
margin:30px 0;
width:220px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow: 5px 5px 21px 0 rgba(50, 50, 50, 0.55);
-moz-box-shadow: 5px 5px 21px 0 rgba(50, 50, 50, 0.55);
box-shadow: 5px 5px 21px 0 rgba(50, 50, 50, 0.55);
}


ul#checklist li{
list-style-type:none;
font-size:16px;
padding:5px 0;
}

ul#checklist li:not(:last-child){
border-bottom:1px solid #CDC2AB;
}

ul#checklist li:before {
font-family: 'icon';
content: '\e800';
margin-right:5px;
font-size:18px;
color:#20914D;
}

.panorama_embed{
width:100%;
height:500px;
z-index:1;
visibility:visible;
}

/*Footer*/

#footer{
width:100%;
height:220px;
background:#962020;
position:relative;
}

#footer .maps{
height:180px;
width:290px;
margin:20px;
float:right;
}

#footer ul.contact{
list-style-type:none;
font-size:15px;
width:200px;
margin:55px;
float:left;
color:white;
}

#footer ul.contact a{
text-decoration:none;
color:white;
}

#footer ul.contact a:hover{
text-decoration:underline;
}

#footer ul.contact li.header{
font-weight:600;
}

#footer #webdesigner{
position:absolute;
left:5px;
bottom:5px;
font-size:13px;
font-weight:100;
color:white;
}

#footer #webdesigner a{
color:white;
text-decoration:none;
}

#footer #webdesigner a:hover{
text-decoration:underline;
}


/*Contact_formulier*/

form#contact{
width:410px;
margin:30px auto;
}

form#contact label{
width:100px;
text-align: right;
color:#962020;
font-weight:600;
clear: both;
float:left;
margin: 4px 0;
padding:0 7px 0 0;
height:32px;
line-height:30px;
font-size:17px;
}

form#contact input, form#contact select, form#contact textarea {
margin:0;
padding:0;
width:300px;
float: left;
padding:0 4px;
margin: 4px 0;
height:32px;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 3px #ddd;
-moz-box-shadow: inset 0 1px 3px #ddd;
box-shadow: inset 0 1px 3px #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
font-family: 'Open Sans', sans-serif;
}

form#contact input[type="submit"] {
background:#962020;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
cursor:pointer;
color:white;
font-size:18px;
font-weight:100;
-webkit-transition: background 0.4s ease 0s;
-moz-transition: background 0.4s ease 0s;
-o-transition: background 0.4s ease 0s;
transition: background 0.4s ease 0s;
}

form#contact input[type="submit"]:hover {
background:#B82D2D;
}

form#contact textarea {
height:100px;
resize:vertical;
}

form#contact #recaptcha{
margin:20px 0;
padding:0;
width:300px;
float: left;
height:76px;
overflow:hidden;
border-right: 1px solid #d3d3d3;
border-radius: 3px;
box-sizing:border-box;
}

#alert_ok{
text-align:center;
color:#329E26;
font-weight:400;
margin-top:10px;
}

#alert_prob{
text-align:center;
color:#C22D2D;
font-weight:400;
margin-top:10px;
}

h1{
color:#962020;
font-weight:400;
}

h2{
font-size:17px;
width:100%;
height:30px;
line-height:30px;
color:white;
background:#962020;
text-align:left;
font-weight:400;
padding: 0 5px;
cursor:pointer;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

small{
color:white;
font-size:13px;
font-weight:100;
padding:0 10px;
}

small.etenendrinken{
color:black;
font-size:14px;
font-weight:100;
padding:0 20px;
display:block;
}

p{
font-size:15px;
}

a{
color:#962020;
}

p.handwriting{
font-size:35px;
color:#962020;
margin-left:10px;
font-family: 'Clicker Script', cursive;
text-align:center;
display:block;
-webkit-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}

#clear{
clear:both;
}

ul.lijst{
margin:10px 20px;
}

#foto_kolom_3{
width:100%;
text-align:center;
margin:100px 0 50px 0;
}

#foto_kolom_3 img{
width:31%;
margin:1%;
}

/*media queries*/

@media (max-width: 1000px) {
	#wrapper{
	width:100%;
	margin:0;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	}

	.left, .right{
	margin:10px auto 30px auto;
	float:none;
	width:100%;
	}

	img.welkom{
	float:none;
	margin:10px auto;
	}




	#foto_kolom_3 img{
	width:47%;
	margin:1%;
	}

	#agenda{
	max-width:290px;
	margin:30px auto;
	text-align:left;
	}

	#agenda ul li .agenda_right{
	display:block;
	float:right;
	width:190px;
	}

	#foto_viewer{
	float:left;
	margin:30px 20px;
	}

	ul#checklist{
	float:right;
	margin:30px 20px;
	}

	.right ul.contact, img.Roy_Nathalie{
	display:none;
	}
}

@media (max-width: 767px) {
	#menu{
	min-height:45px;
	height:auto;
	}

	#menu ul {
	display: none; /*Change!*/
	}

	#menu #button{
	display:block;
	}

	#menu ul li {
	display:block;
	padding-left:10px;
	width:100%;
	padding:0;
	border-bottom:1px solid rgb(166, 83, 83);
	}

	#menu ul li a{
	background:#962020;
	}
	#menu ul li a:hover, #menu ul li.active > a{
	background:rgb(166, 83, 83);
	color:white;
	}

	#menu ul li ul{
	position: relative;
	display:block;
	height:auto;
	background:none;
	padding:0 0 0 30px;
	margin: 0 0 10px 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;

	}

	#menu ul li ul li{
	display: inline-block;
	width: auto;
	background:#962020;
	color:white;
	border:0;
	}

	#menu ul li ul li.active, #menu ul li ul li:hover {
	background:#962020;
	color:white;
	}

	#menu ul li ul li a:hover, #menu ul li ul li.active > a{
	background:none;
	}

	#menu ul li ul li:after { content: none !important;}


	#menu ul li ul li a{
	background:#962020;
	color:white;
	padding:0 0 0 10px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	}

	#panorama p{
	font-size:40px;
	padding-right:10px;
	}

	.showcase_wrapper .showcase{
	width:47%;
	margin:1%;
	}

	.panorama_embed{
	height:400px;
	}



}

@media (max-width: 655px) {

	#footer{
	height:auto;
	min-width:250px;
	position:absolute;
	}

	#footer .maps, #footer ul.contact{
	margin:30px auto;
	float:none;
	display:block;
	font-size:16px;
	}

	.showcase_wrapper .showcase{
	width:98%;
	margin:1%;
	max-width:370px;
	display:block;
	margin: 20px auto;
	}

	.panorama_embed{
	height:300px;
	}
	#foto_kolom_3 img{
	width:98%;
	margin:1%;
	}


	ul#checklist, #foto_viewer{
	display:block;
	margin: 50px auto;
	float:none;
	}

	form#contact{
	width:90%;
	margin:5%;
	}

	form#contact label{
	width:100%;
	text-align:left;
	margin:5px 0 0 0;
	padding:0;
	height:20px;
	line-height:20px;
	}

	form#contact input, form#contact select, form#contact textarea{
	width:100%;
	}

	form#contact #recaptcha {
	border:none;
	margin: 0 auto;
	width:302px;
	float:none;
	}


}