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

html {
  scroll-behavior: smooth;
}

body {	
  	font-size: 1.4em;
   font-family: 'Poppins', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
	background-color: #eef0f1;
	color: #000000;
    line-height: 1.6em;
	overflow-wrap: break-word;
}

a:link {  color: #56626e; text-decoration: none;}
a:visited {  color: #56626e}
a:hover {  color: #bbcf09 }
a:active {  color: #56626e; }

h1 { font-size: 2.0em;  font-family: "Boogaloo", sans-serif; font-weight: 400;  font-style: normal;  }
h2 { font-size: 1.6em;  font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal;  }
h3 { font-size: 1.2em;  font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal;  }

.afb100, .afb125, .afb150, .afb175, .afb200, .afb250, .afb300, .afb350, .afb400, .afb500, .afb600 {  width: 100%;  height: 300px;  overflow: hidden;} .afb100 img, .afb125 img, .afb150 img, .afb175 img, .afb200 img, .afb250 img, .afb300 img, .afb350 img, .afb400 img, .afb500 img, .afb600 img {  width: 100%;  height: 100%;  object-fit: cover;}
@media screen and (min-width: 768px) { .afb100, .afb125, .afb150, .afb175, .afb200, .afb250, .afb300, .afb350, .afb400, .afb500, .afb600 {height: 150px;} }
@media screen and (min-width: 992px) {   .afb100 {height: 100px;} .afb125 {height: 125px;} .afb150 {height: 150px;} .afb175 {height: 175px;} .afb200 {height: 200px;} .afb250 {height: 250px;} .afb300 {height: 300px;} .afb350 {height: 350px;} .afb400 {height: 400px;} .afb500 {height: 450px;} .afb600 {height: 500px;} }

.vijftien {margin-left:-15px; margin-right:-15px;}

.afb425 {  width: 100%;  height: 300px;  overflow: hidden;} 
.afb425 img {  width: 100%;  height: 100%;  object-fit: cover;}
@media screen and (min-width: 768px) { .afb425 {height: 300px;} }
@media screen and (min-width: 992px) { .afb425 {height: 350px;} }
@media screen and (min-width: 1200px) { .afb425 {height: 450px;} }



.knoppenbalk ul {
	display: block;
	list-style: none;
    margin: 0px;
    padding: 0px;
}


.knoppenbalk {
    display: none;
           background-color: #8fb038;
        padding-top: 45px;
        padding-bottom: 25px;
font-family: "Mouse Memoirs", sans-serif;  font-weight: 400;  font-style: normal; 
     transition: background-color 0.3s ease; /* Vloeiende overgang */
    position: sticky;
    top: 0; /* Gecorrigeerd: Voeg 'px' toe of laat het weg voor de waarde 0 */
z-index: 99;
   transition: all 0.3s ease-in-out; /* Maakt de overgang soepel */ 

    }

.knoppenbalk.scrolled {
            padding-top: 10px;
        padding-bottom: 10px;
    border-bottom: 2px solid white;
}

@media screen and (min-width: 768px) {  
    .knoppenbalk {
   display: block;
        }
 }   

.knopzij {	font-size: 2em; padding: 2px; color: #ffffff; width: auto; text-align: center; font-family: "Boogaloo", sans-serif; font-weight: 400;  font-style: normal; }

@media screen and (min-width: 768px) {
.knopzij {
font-weight: 200;
	text-decoration: none;
	color: #0064ad;
    padding-top: 0px;
    padding-bottom: 0px;
	padding-left: 40px;
	padding-right: 40px;
	font-size: 2em;
	pointer-events: all;	
    

}
    
.knopzij:link {	color: #ffffff;	text-decoration: none;}
.knopzij:visited {	color: #ffffff;	text-decoration: none;}
.knopzij:active {	color: #ffffff;	text-decoration: none;}
.knopzij:hover {	color: #001c2a;}
}

@media screen and (min-width: 768px) {
.knopzij {	padding-left: 8px;	padding-right: 8px;	font-size: 1.0em;}
}

@media screen and (min-width: 992px) {
.knopzij {	padding-left: 15px;	padding-right: 15px;	font-size: 1.2em;}
}

@media screen and (min-width: 1200px) {
.knopzij {	padding-left: 25px;	padding-right: 25px;	font-size: 1.4em;}
}

    .logolos {
    background-color: #8fb038;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
         font-family: "Boogaloo", sans-serif; font-weight: 400;  font-style: normal;
        line-height: 1.2em;
        text-align: center;
    }

@media screen and (min-width: 768px) {  
.logolos {   display: none;    } } 

.logo {position: absolute; top: -20px; left: 10px; width: 100%; height: auto; max-width: 225px;  */}

.logo a {
    position: relative;
    z-index: 2; /* Zorgt ervoor dat de link boven de andere afbeelding ligt */
    display: inline-block; /* Belangrijk voor het toepassen van breedte/hoogte en z-index */
   
}


.logo {
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 1s; /* duur van de animatie */
  animation-delay: 0s; /* vertraging van 2 seconden */
  animation-fill-mode: forwards; /* behoudt de laatste staat (opacity: 1) */
}

@keyframes fade-in {   from {    opacity: 0.3;  }  to {    opacity: 1;  }}

.logo {transition: max-width 0.3s ease; /* Maakt de overgang soepel */}

.logo.scrolledlogo { max-width: 100px;  padding-top: 14px; }

.overlay-afbeelding {
    display: none;} 
    
@media screen and (min-width: 1600px) {
.overlay-afbeelding {
    position: absolute; /* Of 'absolute' als je wilt dat de afbeelding meescrolt met de pagina */
    padding-top: 540px;
    padding-left: 40px;
     padding-right: 0px;
    width: 16vw;
    margin-left: 84vw;
    float: right;
    height: auto;
    object-fit: contain; /* Behoudt de beeldverhouding en vult het venster */
    z-index: 99; /* Zorgt ervoor dat de afbeelding boven de content ligt (content heeft standaard z-index: 0) */
   opacity: 1;  
    display: block;
}}




.slider{
    	background-color: #eef0f1;
    background-image: url(images/browser/slider1.jpg);
	background-position: center;  
	background-size: cover;
    height: 350px;
}
@media screen and (min-width: 768px) { .slider {height: 450px;  }}
@media screen and (min-width: 992px) { .slider {height: 500px;  }}
@media screen and (min-width: 1200px) { .slider {height: 650px;  }}

.slidertxt {
    display: none;
    background-color: rgba(0, 79, 55, 0.5);
 
    color: #ffffff;
    padding: 0px;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2em;
    margin-top: 0px;
    font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal; 
    text-shadow: 1px 1px 2px black;
    text-align: center;
}

@media screen and (min-width: 768px) { 
.slidertxt {margin-top: 250px; font-size: 1.5em; display: block;}}
@media screen and (min-width: 992px) { 
.slidertxt {margin-top: 275px; font-size: 2.1em;  }}
@media screen and (min-width: 1200px) { 
.slidertxt {margin-top: 125px; font-size: 3.5em; }}

.slidertxt {
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 4s; /* duur van de animatie */
  animation-delay: 0s; /* vertraging van 2 seconden */
  animation-fill-mode: forwards; /* behoudt de laatste staat (opacity: 1) */
}

@keyframes fade-in {   from {    opacity: 0;  }  to {    opacity: 1;  }}

.welkom {
        background-color: #adcde2;
        padding-top: 60px;
        padding-bottom: 60px;
        text-align: center;
    color: #001c2a;
            background-image: url(images/browser/wolken.jpg);
	background-position: center;  
	background-size: cover;
}


.overzicht {
        background-color: #004f37;
        padding-top: 60px;
        padding-bottom: 20px;
     background-image: url(images/browser/buiten.jpg);
    	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;

}


.vakkeus {
    background-color: #ffffff;
      padding-bottom: 5px;
    margin-bottom: 20px;
     border-bottom: 6px solid #ed6d37;
}

.titelkeus {
    background-color: #ed6d37;
    font-size: 1.2em;
    text-align: center;
    color: #ffffff;
    border-bottom: 6px solid #adcde2;
    padding: 10px;

      font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal; 
}
@media screen and (min-width: 768px) { 
.titelkeus {font-size: 1.0em;  }}
@media screen and (min-width: 992px) { 
.titelkeus {font-size: 1.2em;  }}

.titelkeus:link {	color: #ffffff;	text-decoration: none;}
.titelkeus:visited {	color: #ffffff;	text-decoration: none;}
.titelkeus:active {	color: #ffffff;	text-decoration: none;}
.titelkeus:hover {	color: #BBCF09;}


.txtkeus {
    font-size: 0.8em;
    color: #000000;
padding: 15px;
line-height: 1.4em;
text-align: center;
min-height: auto;    
}

@media screen and (min-width: 992px) { 
.txtkeus {min-height: 500px;   }}
@media screen and (min-width: 120px) { 
.txtkeus {min-height: 100px;   }}

.fotokeus {
}

.samen {text-align: center;
color: #adcde2;
margin-top: 20px;

}

.knopwit {	float: left;	text-decoration: none;    background-color: #ffffff;	color: #001c2a;    width: 100%;	text-align: center;	pointer-events: all;    border: 4px solid #ed6d37;    margin-top: 30px;    padding-top: 10px;    padding-bottom: 10px;	font-weight: bold; border-radius: 10px; font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal; }
.knopwit:link {	color: #001c2a;	text-decoration: none; background-color: #ffffff;}
.knopwit:visited {	color: #001c2a;	text-decoration: none; background-color: #ffffff;}
.knopwit:active {	color: #001c2a;	text-decoration: none; background-color: #ffffff;}
.knopwit:hover {	color: #000000; background-color: #8fb038;}

.quote{
        background-color: #adcde2;
        padding-top: 60px;
        padding-bottom: 60px;
    color: #001c2a;
    text-align: center;
    font-size: 1.3em;
    font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal; 
                background-image: url(images/browser/wolken.jpg);
	background-position: center;  
	background-size: cover;
}

.fotos{
   background-color: #001c2a;
        padding-top: 35px;
        padding-bottom: 35px;
    
}

.fotolos {
    border-top: 10px solid #FFFFFF;
    border-bottom: 10px solid #FFFFFF;
    border-left: 5px solid #FFFFFF;
    border-right: 5px solid #FFFFFF;
    box-sizing: border-box;
    width: 100%;

}

.footer{
   
        padding-top: 20px;
        padding-bottom: 20px;
    color: #001c2a;
    margin-top: 0px;
    font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal; 
        background-image: url(images/browser/footer2.jpg);
	background-position: center;  
	background-size: cover;
}
.staartlogo {
    margin-top: -80px;
}
@media screen and (min-width: 768px) { 
.staartlogo  {margin-top: 0px;}}

@media screen and (min-width: 992px) { 
.staartlogo  {margin-top: 0px;}}



.staarttxt {

  font-size: 1.2em;
    line-height: 1.4em;
text-align: center;
}
@media screen and (min-width: 768px) { 
.staarttxt  {text-align: left;}}


.staartknop:link {	color: #004f37;	text-decoration: none;}
.staartknop:visited {	color: #004f37;	text-decoration: none;}
.staartknop:active {	color: #004f37;	text-decoration: none;}
.staartknop:hover {	color: #ed6d37;}

.footer2{
        background-color: #adcde2;
        padding-top: 10px;
        padding-bottom: 10px;
        color: #001c2a;
        text-align: right;
    font-size: 0.6em;

}

.knopfooter2 {text-decoration: none; color: #000000;}
.knopfooter2:link  { text-decoration: none; color: #000000; }
.knopfooter2:visited { text-decoration: none; color: #000000; }
.knopfooter2:active { text-decoration: none; color: #000000; }
.knopfooter2:hover  {	text-decoration: none; color: #ed6d37;} 


/* vervolgpagina */

.vervolgoverzicht{
        background-color: #eef0f1;
        padding-top: 35px;
        padding-bottom: 10px;
    font-size: 0.9em;
    line-height: 1.6em;
}

.vervolgimg {
margin-bottom: 25px;  
    display: none;
}
@media screen and (min-width: 768px) { 
.vervolgimg  {margin-top: 0px; display: block;}}

.vervolgimgonder {
margin-bottom: 25px;  
    display: block;
}
@media screen and (min-width: 768px) { 
.vervolgimgonder  {margin-top: 0px; display: none;}}

.vervolgtxt { margin-top: 15px; margin-left: 15px;}
@media screen and (min-width: 768px) { 
    .vervolgtxt { margin-top: 50px; margin-left: 50px; }}
    
    
/* MENU */

.hoofdvakmenu {

        padding-top: 60px;
        padding-bottom: 60px;
        text-align: center;

}

.menu {  padding-top: 50px; padding-bottom: 50px; line-height: 1.2em;}

@media screen and (min-width: 768px) { .menu { padding-left: 100px; padding-right: 100px;}}

.losgerecht {   padding-bottom: 10px;  padding-top: 10px;text-align: left; font-size: 1em; color: #001c2a; border-bottom: 2px dotted #8aaac3;}
.gerecht {padding-left: 0px; padding-right: 0px; text-align: left; font-size: 1em;font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: bold; color: #001c2a;}
.omschrijving {padding-left: 0px; padding-right: 0px;text-align: left; font-size: 0.7em; line-height: 1.4em; color: #001c2a;  font-family: 'Poppins', sans-serif;, serif;  font-optical-sizing: auto;  font-weight: 400;  font-style: normal;}
.prijs {padding-left: 0px; padding-right: 0px;text-align: right; font-size: 1em;font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: bold; color: #937a65;}

.menudrie { background-color: #adcde2 ;         padding-top: 50px;
        padding-bottom: 50px;
                background-image: url(images/browser/wolken.jpg);
	background-position: center;  
	background-size: cover;}

.kolommen-3 {
  column-count: 3;
  column-gap: 20px; /* Optioneel: voeg ruimte toe tussen de kolommen */
}
.slider-vervolg {
    	background-color: #eef0f1;
    background-image: url(images/browser/slider.jpg);
	background-position: center;  
	background-size: cover;
    height: 350px;
}
@media screen and (min-width: 768px) { .slider {height: 400px;  }}
@media screen and (min-width: 992px) { .slider {height: 450px;  }}
@media screen and (min-width: 1200px) { .slider {height: 550px;  }}

.overlay-afbeelding-vervolg {
    display: none;} 
    
@media screen and (min-width: 1600px) {
.overlay-afbeelding-vervolg {
    position: absolute; /* Of 'absolute' als je wilt dat de afbeelding meescrolt met de pagina */
    padding-top: 300px;
    padding-left: 40px;
     padding-right: 0px;
    width: 16vw;
    margin-left: 84vw;
    float: right;
    height: auto;
    object-fit: contain; /* Behoudt de beeldverhouding en vult het venster */
    z-index: 1; /* Zorgt ervoor dat de afbeelding boven de content ligt (content heeft standaard z-index: 0) */
   opacity: 1;  
    display: block;
}}

/* RESERVEREN */

.reserverenachter {     background-image: url(images/browser/buiten.jpg);
    	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
    padding-top: 0px;
     padding-bottom: 0px;
}

.zaaltransparant {   padding: 50px; background-color: rgba(255, 255, 255, 0.8);}

/* CONTACT */

.contact {
   text-align: center; 
   font-size: 1.2em;  font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal;
    color:#004f37;
    padding-top: 75px;
   padding-bottom: 75px;
    
 
}

.kaartje {
padding-bottom: 25px;
    padding-top: 25px;
    background-color: #ed6d37;
}


/* ZAALHUUR */

.overlay-afbeelding-zaalhuur {
    display: none;} 
    
@media screen and (min-width: 1600px) {
.overlay-afbeelding-zaalhuur {
    position: absolute; /* Of 'absolute' als je wilt dat de afbeelding meescrolt met de pagina */
    margin-top: -80px;
    padding-left: 40px;
     padding-right: 0px;
    width: 16vw;
    margin-left: 84vw;
    float: right;
    height: auto;
    object-fit: contain; /* Behoudt de beeldverhouding en vult het venster */
    z-index: 99; /* Zorgt ervoor dat de afbeelding boven de content ligt (content heeft standaard z-index: 0) */
   opacity: 1;  
    display: block;
}}

.zaalhuurkop {
font-family: "Boogaloo", sans-serif;  font-weight: 400;  font-style: normal;
}

.zaalmidden { text-align: left; font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
font-size: 0.8em;
    margin-top: 100px;
}

.zaalachter {     background-image: url(images/browser/binnenachter.jpg);
    	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
    padding-top: 0px;
     padding-bottom: 0px;
}

.zaaltransparant {   padding: 50px; background-color: rgba(255, 255, 255, 0.8);}


.image-speciaalpannenkoek {
background-image: url(images/browser/speciaalpannenkoek.jpg);
  background-size: cover;
  background-position: center;
    min-height: 200px;
  /* Optioneel: voeg een overlay toe */
  /* position: relative; */
  /* z-index: 1; */
}
.image-pannenkoek {
background-image: url(images/browser/nutella.jpg);
  background-size: cover;
  background-position: center;
    min-height: 200px;
  /* Optioneel: voeg een overlay toe */
  /* position: relative; */
  /* z-index: 1; */
}


/* HOOVER EFFECT */

.hovereffect {
width:100%;
height:100%;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all 1s ease-in-out;
transition:all 1s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all 1s linear;
transition:all 1s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}