/*

* CSS De Waterkant

* Date: 2016 11 16

*/



/* RESET*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block;}

body{ line-height: 1;}

blockquote, q{	quotes: none;}

blockquote:before, blockquote:after,q:before, q:after{ content: ''; content: none;}

table{	border-collapse: collapse; border-spacing: 0;}

ol, ul{ list-style: none;}

a{ text-decoration:none; color:#fff;}

.nospam{ display:none;}

/* END RESET */



* { margin: 0; padding: 0; }

html{ margin:0px; height:100%;}

body{ margin:0px; height:100%; background:#fff;  font-family: 'Titillium Web', sans-serif; font-size:25px; color:#383838; line-height:34px;}



.w{ position:relative; overflow:hidden; width:1200px; margin:0 auto; text-align:center; }



h2{ text-transform:uppercase; font-weight:bold;}

h3{ display:block; width:860px; background:#e0ded9; line-height:42px; color:#424241; text-align:center; margin:35px auto 15px auto; font-size:25px;}

h3 strong, h3 b{ font-weight:bold; font-size:30px;}



h4{ color:#5e544d; font-style:italic; margin:10px 0px;}

b, strong{ font-weight:bold;}



p{ margin:34px 0px;}

.kaushan{ /*font-family: 'Kaushan Script', cursive;*/ font-style:italic; font-size:45px; margin-top:64px;}

.klein{ font-size:21px; margin-top:-30px;}



section{width:100%; min-height:100%; position:relative; overflow:hidden; margin:0 auto; }

.sec{ }



header, #header{ height:100%;}

main, #main{ height:100%;}



/* ---------------  TOP ---------------  */

#logo{ text-align:center; background:#3f403f; opacity: 0.9; filter: alpha(opacity=90); height:216px; position:relative;  z-index:10;}

#logo img{ margin-top:100px;}



#slideshow{ z-index:9; position:absolute; width:100%; height:100%;}

#myGallery1 img{ min-height:100%;}

header form{ z-index:99 !important; position:absolute; top:350px; left:50%; margin-left:-50px;}

#slideshow br{ display:none;}



#menu{ height:88px; position:relative;  z-index:10;}

#menubg{background:#3f403f; opacity: 0.6; filter: alpha(opacity=60); height:88px; width:100%; position:absolute; margin-top:0px;}



.menu-link { display: none;}

.menu-link img{ display:block; float:left;}

.menu-link span{ display:block; float:left; margin-top:1px; font-size:120%;}



.menunav{ position:relative;  z-index:10; text-align:center;}

.menunav ul{ margin:0 auto; display:inline-block;}

.menunav ul li{ display:block; float:left;}



.menunav ul li a{ display:block; color:#fff; margin-right:40px; line-height:80px;}

.menunav ul li.last a{ margin-right:0px;}

.menunav ul li a:hover, .menunav ul li.active a{ border-bottom:8px solid #999280;}



#tmpbalk{ position:absolute; bottom:88px; background:rgba(102,102,102,0.5); width:100%; z-index:99; text-align:center; color:#fff; min-height55px; line-height:55px;}



#balkbg{ position:absolute; bottom:0px; width:100%; background:#3f403f; opacity: 0.6; filter: alpha(opacity=60); height:88px; z-index:99;}

#balk{ position:absolute; bottom:0px; width:100%; height:88px;  font-size:28px; text-transform:uppercase; text-align:center;}

#balktxt{color:#fff; line-height:88px; font-weight:600; z-index:999; position:relative;}



#openingsuren{ margin-right:100px;}

#balktxt img{ margin:0px 10px 0px 20px;}







/* ---------------  WELKOM ---------------  */

#welkom #h1bg{ background:#3f403f;  opacity: 0.5; filter: alpha(opacity=50); color:#424241; height:88px;}

#welkom h1{ position:relative; margin-top:-88px; line-height:88px; font-size:38px; text-transform:uppercase; text-align:center; font-weight:600;}





/* ---------------  MENUKAART ---------------  */

#menukaart #h1bg{ background:#999280; opacity: 0.5; filter: alpha(opacity=50); height:88px;}

#menukaart h1{ position:relative; margin-top:-88px; line-height:88px; font-size:38px; text-transform:uppercase; text-align:center; font-weight:600;}





#menus{ overflow:hidden; position:relative; margin:0px 0px 70px 0px; width:1200px;}

.menuitem{ display:block; float:left; margin-right:9px;}

.menuitem .last{ display:block; float:left; margin-right:0px;}

.menuitem h2{ text-transform:uppercase; font-size:24px; line-height:45px;}

.menuitem .overlay{ position:absolute; margin-top:45px; }

.menuitem img{ width:229px; max-height:312px;}

.groepen{ position:relative; left:50%; margin-left:-124px; border:4px solid #666; padding:10px 20px; width:182px; height:182px;}

.groepen h2{ line-height:182px;}

.groepen img{ display:none;}



/* ---------------  SFEER ---------------  */

#sfeer{ height:700px; min-height:700px; background:#fff; overflow:hidden;}

#sfeer h1{ background:#585751; color:#fff; text-align:center;line-height:88px; font-size:38px; text-transform:uppercase; text-align:center; font-weight:100;}

#sfeer h1 img{ margin:0px 60px;}

#sfeerupload form{ z-index:99 !important; position:absolute; top:300px; left:50%; margin-left:-50px; margin-top:-50px;}

#sfeerframe{ height:100%; overflow:hidden;}

#sfeerupload br{ display:none; height:0px;}

#sfeerupload{ margin-top:-50px; position:relative;}



/* ---------------  RESERVEREN ---------------  */

#reserveren h1{ background:#999280; color:#fff; text-align:center;line-height:88px; font-size:38px; text-transform:uppercase; text-align:center; font-weight:100;}



#formulier{ margin:0px 0px 100px 0px;}

#reserveren .rows{ overflow:hidden; width:1020px; margin:0 auto;}

#reserveren .rowsleft{ display:block; float:left; width:490px;}

#reserveren .rowsmiddle{ display:block; float:left; width:500px; margin-left:10px;}

#reserveren .rowsright{ display:block; float:none; width:650px; margin-left:10px;}



#reserveren input{ background:#ebe9e6; border:none; width:470px; height:50px; margin:5px 0px; padding:4px 10px; font-family: 'Titillium Web', sans-serif; font-size:24px;}

#reserveren textarea{ background:#ebe9e6; border:none; width:380px; height:187px; margin:5px 0px; font-family: 'Titillium Web', sans-serif; font-size:24px; padding:4px 10px;}


#reserveren input#cfContact:disabled{ background:#ebe9e6; color:#fff; width:100%; height:70px; margin:5px 0px; margin-left:300px; cursor:default; display:none !important;}
#reserveren input#cfContact{ display:block; background:#6f6f6b; color:#fff; width:100%; height:70px; margin:5px 0px; margin-left:300px; cursor:pointer;}



.errors{ color:red; font-size:21px;}



/* ---------------  NIEUWS ---------------  */

#nieuws h1{ background:#7b7b76; color:#fff; text-align:center;line-height:88px; font-size:38px; text-transform:uppercase; text-align:center; font-weight:100;}

#nieuws h1 img{ margin:0px 60px;}



#nieuws .w{ margin-top:30px; margin-bottom:50px; background:url(../images/nieuwsitem.png) no-repeat bottom right; width:1100px;}



.nieuwsitem{ background:url(../images/nieuwsitem.png) no-repeat top right; text-align:left; overflow:hidden; width:100%; margin: 5px auto;}

.nieuwsitem .overlay{ position:absolute; z-index:999;  margin-top:5px;}

.nieuwsitem .imgbl{ display:block; float:left; width:192px; margin-right:20px; margin-top:5px; overflow:hidden; height:129px; z-index:1; position:relative; }

.nieuwsitem img{ width:192px; }

.nieuwsitem h3{ display:block; float:left; max-width:800px; background:url(../images/pijl2.png) no-repeat top right; padding:0px 50px 0px 20px; line-height:40px; margin:0px; margin-top:50px; text-align:left; }

.nieuwsitem h3:hover{ cursor:pointer;}





.nieuwsitem a{ color:#3f403f;}

.nieuwsitem a:hover{ color:#5d5d5d;}



div.toggle{ font-size:18px; line-height:24px; margin-left:232px; display:block; width:800px; padding-bottom:50px; }

.hidden>div.toggle {  display: none}

.visible>div.toggle {  display: block;  }

div.toggle p{ margin:0px 0px;}



/* ---------------  CONTACT ---------------  */

#contact{ color:#fff; line-height:45px;}



#contact #h1bg{ position:absolute; height:88px; width:100%; background:#999280; color:#fff; text-align:center;line-height:88px; font-size:38px; text-transform:uppercase; text-align:right; font-weight:100; overflow:hidden;}



#contact h1{ background:#999280; color:#fff; text-align:center;line-height:88px; font-size:38px; text-transform:uppercase; text-align:right; font-weight:100; overflow:hidden; margin:0px 0px 40px 0px;}

#contact h1.openingsuren{ text-align:left; /*margin-bottom:85px;*/ }



#contact .w{ margin:0px auto;}



#contact .left{ width:550px; display:block; float:left; text-align:right;}

#contact .right{ width:550px; display:block; float:left; text-align:left; margin-left:100px;}



#contact .left img{ margin:0px 30px;}

#contact .right img{ margin:20px 0px 0px 0px;}







/* ---------------  MENUKAARTEN ---------------  */

#menukaarten{ padding-bottom:100px; font-size:24px;}

#menukaarten #h1bg{ background:#787978;  color:#424241; height:104px;}

#menukaartenmenu{ position:relative; margin-top:-104px; line-height:104px; font-size:38px; text-transform:uppercase; text-align:center; font-weight:600;  border-top:16px solid #424342;}



#menukaartenmenu nav{ position:relative;  z-index:1; text-align:center;}

#menukaartenmenu nav ul{ margin:0 auto; display:inline-block;}

#menukaartenmenu nav ul li{ display:block; float:left;}



#menukaartenmenu nav ul li a{ display:block; color:#fff; margin-right:40px; line-height:90px; font-size:25px; text-transform:none; font-weight:normal;}

#menukaartenmenu nav ul li.last a{ margin-right:0px;}

#menukaartenmenu nav ul li a:hover, 

#menukaartenmenu nav ul li.active a{ border-bottom:0px solid #999280; color:#dcdcdc;}



#menukaartenmenu nav ul li a.terugknop{ font-size:18px; position:absolute; margin-left:-120px; text-transform:uppercase; color:#dcdcdc;}



#menukaarten table{ width:860px; margin:0 auto;}

#menukaarten td{ text-align:left; vertical-align:text-top; line-height:40px; }

#menukaarten td + td{ text-align:left; width:22px; }

#menukaarten td + td + td{ text-align:right; width:60px; }

#menukaarten td span{ margin:0px; line-height:40px;}

#menukaarten td p{ margin:0px;}







/* ---------------- POP UP ------------ */
#fvpp-blackout {
  display: none;
  z-index: 99998;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

#popup {
  display: none;
  z-index: 99999;
  position: absolute;
  width: 36%;
  left: 30%;
  top: 20%;
  padding: 20px 2%;
  background: #FFF;
  font-size:16px; line-height:20px;
}

#fvpp-close {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color:#333;
}


#fvpp-dialog p { margin: 0; }











/* TABLET */

@media screen and (min-width: 768px) and (max-width: 1199px){	

body{ margin:0px; height:100%; background:#fff;  font-family: 'Titillium Web', sans-serif; font-size:18px; color:#383838; line-height:34px;}

.w{ position:relative; overflow:hidden; width:760px; margin:0 auto; text-align:center; }

#balk{ position:absolute; bottom:0px; width:100%; height:88px;  font-size:22px; text-transform:uppercase; text-align:center;}


p{ margin:26px 0px;}

.kaushan{font-size:30px; margin-top:64px;}

.klein{ font-size:16px; margin-top:-30px;}



/* ---------------  MENUKAART ---------------  */

#menukaart h1{ position:relative; margin-top:-88px; line-height:88px; font-size:26px; text-transform:uppercase; text-align:center; font-weight:600;}



#menus{ overflow:hidden; position:relative; margin:0px auto 70px auto; width:740px;}

.menuitem{ display:block; float:left; margin-right:9px;}

.menuitem .last{ display:block; float:left; margin-right:0px;}

.menuitem h2{ text-transform:uppercase; font-size:20px; line-height:45px;}

.menuitem .overlay{ position:absolute; margin-top:45px; }

.menuitem img{ width:229px; max-height:312px;}



.groepen{ position:relative; left:auto; margin-left:0px; border:4px solid #666; padding:0px; width:220px; margin-top:43px; height:306px;}

.groepen h2{ line-height:312px;}

.groepen img{ display:none;}



/* ---------------  SFEER ---------------  */

#sfeer h1{ background:#585751; color:#fff; text-align:center;line-height:88px; font-size:26px; text-transform:uppercase; text-align:center; font-weight:100;}

#sfeer h1 img{ max-width:100px; margin:0px 30px;}



/* ---------------  RESERVEREN ---------------  */

#reserveren h1{ font-size:26px; }



#formulier{ margin:0px 0px 100px 0px;}

#reserveren .rows{ overflow:hidden; width:520px; margin:0 auto;}

#reserveren .rowsleft{ display:block; float:left; width:490px; margin-left:10px;}

#reserveren .rowsmiddle{ display:block; float:left; width:400px; margin-left:10px;}

#reserveren .rowsright{ display:block; float:left; width:100px; margin-left:10px;}



/* ---------------  NIEUWS ---------------  */

#nieuws h1{ font-size:26px; }

#nieuws h1 img{ max-width:100px; margin:0px 30px;}



#nieuws .w{ width:740px;}



.nieuwsitem h3{ max-width:400px; padding:0px 50px 0px 20px; line-height:40px; margin:0px; margin-top:50px; text-align:left; font-size:20px; }



div.toggle{ font-size:18px; margin-left:232px; display:block; width:400px; padding-bottom:50px; }



/* ---------------  CONTACT ---------------  */

#contact{ color:#fff; line-height:45px;}



#contact h1{ font-size:26px; text-align:center;}

#contact h1.openingsuren{ text-align:center; }



#contact .left{ width:100%; text-align:center;}

#contact .right{ width:100%; text-align:center; margin-left:0px;}





/* ---------------  MENUKAARTEN ---------------  */

#menukaartenmenu{ position:relative; margin-top:-104px; line-height:104px; font-size:26px; text-transform:uppercase; text-align:center; font-weight:600;  border-top:16px solid #424342;}





#menukaartenmenu nav ul li a{ display:block; color:#fff; margin:0px 10px; line-height:90px; font-size:16px; text-transform:none; font-weight:normal;}



#menukaartenmenu nav ul li a.terugknop{ font-size:14px; position:relative; margin-left:20px; text-transform:uppercase; color:#dcdcdc;}



#menukaarten table{ width:740px; margin:0 auto;}

#menukaarten td{ text-align:left; vertical-align:text-top; line-height:40px; }

#menukaarten td + td{ text-align:left; width:22px; }

#menukaarten td + td + td{ text-align:right; width:60px; }

#menukaarten td span{ margin:0px; line-height:40px;}

#menukaarten td p{ margin:0px;}





h3{ display:block; width:740px; background:#e0ded9; line-height:42px; color:#424241; text-align:center; margin:35px auto 15px auto; font-size:25px;}

h3 strong, h3 b{ font-weight:bold; font-size:20px;}

}









/* SMARTPHONE */

@media screen and (max-width: 767px) {	

body{ margin:0px; height:100%; background:#fff;  font-family: 'Titillium Web', sans-serif; font-size:16px; color:#383838; line-height:22px;}

.w{ position:relative; overflow:hidden; width:90%; margin:0 auto; text-align:center; }





section{width:100%; min-height:100%; position:relative; overflow:scroll; margin:0 auto; }



#slideshow{ z-index:9; position:absolute; width:100%; height:100%;}
#myGallery1{  max-width:100%; overflow:hidden;}
#myGallery1 img{ min-height:100%;}



#balkbg{ position:absolute; bottom:0px; width:100%; background:#3f403f; opacity: 0.3; filter: alpha(opacity=30); height:40px; z-index:2;}

#balk{ position:absolute; bottom:0px; width:100%; height:40px;  font-size:14px; text-transform:uppercase; text-align:center;}

#balktxt{color:#fff; line-height:18px; font-weight:600; z-index:999; position:relative;}

#balktxt span{ display:block; text-align:center; float:left; background-color: rgba(0, 0, 0, 0.7); padding: 0 20px; margin:5px;}

#balktxt span a{ height:40px; line-height:40px;}



#logo{ text-align:center; background:#3f403f; opacity: 0.6; filter: alpha(opacity=60); height:130px; position:relative;  z-index:10;}

#logo img{ margin-top:50px; max-width:75%;}



p{ margin:26px 0px;}

.kaushan{font-size:20px; margin-top:64px;}

.klein{ font-size:16px; margin-top:-30px;}





#menu{ min-height:88px;  position:absolute; top:0px;  z-index:9999;}

#menubg{background:none; }

a.menu-link { display: block; color: #fff; background-color:#87888a; float: left; text-decoration: none; padding: 10px 10px; z-index:999; position:relative;}

.menunav { clear: both; min-width: inherit; float: none; z-index:9999;}

.menunav, .menunav > ul ul { overflow: hidden; max-height: 0; background-color: #87888a; }

.menunav > li > ul.sub-menu { padding: 0px; border: none; }

.menunav.active, .menunav > ul ul.active { max-height: 55em; }

.menunav ul { display: inline; }

.menunav > ul {  }

.menunav li, .menunav > ul > li { display: block;  width:100%; float:left; border:none;}

.menunav ul li a { color: #000; display: block; position: relative; font-size:12px;color: #fff; font-family:Verdana, Geneva, sans-serif; width:90%; float:none; }

.menunav ul li a:hover, .menunav ul li.active a{ color:#000; border-bottom:none;}

.menunav ul li > a { line-height:14px; padding: 2px 0px; margin:5px 10px; }

.menunav li.has-submenu > a:after {

content: '+';

position: absolute;

top: 0;

right: 0;

display: block;

font-size: 1.5em;

padding: 0.55em 0.5em;

}

.menunav li.has-submenu > a.active:after {content: "-";}

.menunav ul ul{ display:none;}

.menunav ul ul > li a { background-color: #e4e4e4; height:58px; padding: 19px 18px 19px 30px; }

.menunav ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }





#openingsuren{ margin-right:10px;}



/* ---------------  WELKOM ---------------  */

#welkom h1{ position:relative; margin-top:-88px; line-height:88px; font-size:22px; text-transform:uppercase; text-align:center; font-weight:600;}



/* ---------------  MENUKAARTEN ---------------  */

#menukaart h1{ position:relative; margin-top:-88px; line-height:88px; font-size:26px; text-transform:uppercase; text-align:center; font-weight:600;}



#menus{ overflow:hidden; position:relative; margin:0px auto 70px auto; width:100%;}

.menuitem{ display:block; float:left; margin-right:9px;}

.menuitem .last{ display:block; float:left; margin-right:0px;}

.menuitem h2{ text-transform:uppercase; font-size:20px; line-height:45px;}

.menuitem .overlay{ position:absolute; margin-top:45px; }

.menuitem img{ width:229px; max-height:312px;}



.groepen{ position:relative; left:auto; margin-left:0px; border:4px solid #666; padding:0px; width:220px; margin-top:43px; height:306px;}

.groepen h2{ line-height:312px;}

.groepen img{ display:none;}



/* ---------------  SFEER ---------------  */

#sfeer{ background:#585751;}

#sfeer h1{ background:#585751; color:#fff; text-align:center;line-height:88px; font-size:22px; text-transform:uppercase; text-align:center; font-weight:100;}

#sfeer h1 img{ max-width:30px; margin:0px 5px;}



/* ---------------  RESERVEREN ---------------  */

#reserveren h1{ font-size:22px; }



#formulier{ margin:0px 0px 100px 0px;}

#reserveren .rows{ overflow:hidden; width:100%; margin:0 auto;}

#reserveren .rowsleft{ display:block; float:left; width:80%; margin-left:10px;}

#reserveren .rowsmiddle{ display:block; float:left; width:80%; margin-left:10px;}

#reserveren .rowsright{ display:block; float:left; width:80%; margin-left:10px;}



#reserveren input{ background:#ebe9e6; border:none; width:80%; height:50px; margin:5px 0px; padding:4px 10px; font-family: 'Titillium Web', sans-serif; font-size:16px;}

#reserveren textarea{ background:#ebe9e6; border:none; width:80%; height:187px; margin:5px 0px; font-family: 'Titillium Web', sans-serif; font-size:16px; padding:4px 10px;}

#reserveren input#cfContact{ background:#6f6f6b; color:#fff; width:80%; height:40px; margin:5px 0px;}



.errors{ color:red; font-size:21px;}



/* ---------------  NIEUWS ---------------  */

#nieuws h1{ font-size:22px; }

#nieuws h1 img{ max-width:20px; margin:0px 30px;}



#nieuws .w{ width:100%;}



.nieuwsitem h3{ max-width:90%; padding:0px 30px 0px 15px; line-height:40px; margin:0px; margin-top:50px; text-align:left; font-size:16px; float:none; }



div.toggle{ font-size:14px; margin-left:20px; display:block; width:90%; padding-bottom:50px; }



/* ---------------  CONTACT ---------------  */

#contact{ color:#fff; line-height:45px;}



#contact h1{ font-size:22px; text-align:center;}

#contact h1.openingsuren{ text-align:center; }



#contact .left{ width:100%; text-align:center;}

#contact .right{ width:100%; text-align:center; margin-left:0px;}





/* ---------------  MENUKAARTEN ---------------  */

#menukaartenmenu{ position:relative; margin-top:-104px; line-height:104px; font-size:14px; text-transform:uppercase; text-align:center; font-weight:600;  border-top:16px solid #424342;}

#menukaarten p{ font-size:14px;}



#menukaartenmenu nav ul li a{ display:block; color:#fff; margin:5px; line-height:30px; font-size:14px; text-transform:none; font-weight:normal;}



#menukaartenmenu nav ul li a.terugknop{ font-size:14px; position:relative; margin-left:20px; text-transform:uppercase; color:#dcdcdc;}



#menukaarten table{ width:90%; margin:0 auto; font-size:14px;}

#menukaarten td{ text-align:left; vertical-align:text-top; line-height:40px; }

#menukaarten td + td{ text-align:left; width:22px; }

#menukaarten td + td + td{ text-align:right; width:20px; }

#menukaarten td span{ margin:0px; line-height:40px;}

#menukaarten td p{ margin:0px;}





h3{ display:block; width:90%; background:#e0ded9; line-height:42px; color:#424241; text-align:center; margin:35px auto 15px auto; font-size:18px;}

h3 strong, h3 b{ font-weight:bold; font-size:18px;}

h4{ font-size:16px;}



}