/*WAT-WIL-JE-ETEN.CSS*/

/* INFOBALK TOP WAT WIL JE ETEN*/
.infobalkTopWatWilJeEten{
height:33px;
width:100%;
margin-top:100px;
padding:0 0 0 0;
border-radius:0;
background:linear-gradient(to right, rgba(250,250,210,0.4), rgba(218,165,32.9)90%);
background-color:#fafad2 ;
}
/* MEDIA */
/*@media only screen and (max-width:507px){.infobalkTopWatWilJeEten{margin-top:-80px}}
*//*@media only screen and (max-height:414px){.EETinfobalkTopWatWilJeEten{margin-top:-80px}}
*/
/*@media only screen and (max-width:428px){.infobalkTopWatWilJeEten{margin-top:-80px}}
@media only screen and (max-width:414px){.infobalkTopWatWilJeEten{margin-top:-80px}}
*/
.infobalkTopWatWilJeEten a:link,
.infobalkTopWatWilJeEten a:visited{color:#fff;text-decoration:none}
.infobalkTopWatWilJeEten a:hover,
.infobalkTopWatWilJeEten a:active{color:#fff;text-decoration:none}

/* INFOBALK WAT WIL JE ETEN*/
.infobalkBottomWatWilJeEten{
height:36px;
width:100%;
margin:-4px 0 0 0 !important;
padding:6px 0 0 0;
font-size:1.0em;
color:#fff;
text-align:center;
border-radius:0 0 10px 0;
background:linear-gradient(to right, rgba(250,250,210,0.4), rgba(218,165,32.9)90%);
}

.WWJEdezeEvenNiet{}
/* MEDIA */
@media only screen and (max-width:1280px){.WWJEdezeEvenNiet{display:none}}

/* receptOverlay */
.receptOverlay{
position:fixed;
top:550px;
left:50%;
transform:translate(-50%, -50%);
width:600px;
height:500px; 
background-color:transparent;
justify-content:center;
align-items:center;
border-radius:0 0 10px 10px;
z-index:4
}
/* MEDIA */
@media only screen and (max-width:1265px){.receptOverlay{left:757px;top:487px;height:466px;width:1046px;}}
@media only screen and (max-width:1194px){.receptOverlay{left:714px;top:550px;height:541px;width:960px;}}
@media only screen and (max-width:1180px){.receptOverlay{left:707px;top:546px;height:532px;width:946px}}
@media only screen and (max-width:1080px){.receptOverlay{left:657px;top:551px;height:539px;width:846px}}
@media only screen and (max-width:1024px){.receptOverlay{left:629px;top:503px;height:444px;width:791px}}
@media only screen and (max-width:834px){.receptOverlay{left:530px;width:594px;}}
@media only screen and (max-width:820px){.receptOverlay{left:517px;width:568px;}}
@media only screen and (max-width:810px){.receptOverlay{left:513px;width:562px;}}
@media only screen and (max-width:800px){.receptOverlay{left:507px;width:545px;}}
@media only screen and (max-width:768px){.receptOverlay{left:496px;width:524px;}}
@media only screen and (max-width:720px){.receptOverlay{left:470px;width:470px;}}


/* receptIframe Responsive */
#receptIframe{
display:none;
width:100%;
height:100%;
position:fixed;
padding:0 0 0 10px;
background-color:#fafad2;
border:0 solid;
border-radius:10px;
box-shadow:0 6px 10px rgba(0, 0, 0, 0.7);
z-index:1
}
/* MEDIA*/
@media only screen and (max-width:1265px){#receptIframe {box-shadow:0 6px 10px rgba(0, 0, 0, 0.0);border-radius:10px;top:27px}}
@media only screen and (max-width:1194px){#receptIframe {top:1px}}
@media only screen and (max-width:1180px){#receptIframe {top:1px;}}
@media only screen and (max-width:1080px){#receptIframe {top:-1px;}}
@media only screen and (max-width:1024px){#receptIframe {top:0px;}}
@media only screen and (max-width:834px){#receptIframe {width:594px;}}
@media only screen and (max-width:820px){#receptIframe {width:568px;}}
@media only screen and (max-width:810px){#receptIframe {width:562px;}}
@media only screen and (max-width:800px){#receptIframe {width:545px;}}
@media only screen and (max-width:768px){#receptIframe {width:524px;}}
@media only screen and (max-width:720px){#receptIframe {width:470px;}}
@media only screen and (max-width:600px){#receptIframe{display:none !important}}


/* receptMelding */
.receptMelding{
margin-top:2px;
margin-bottom:0;
font-size:1.1em;
text-align:center;
color:red
}

/* Voeg hier de sticky CSS toe voor de eerste - Deze blijft vast staan in der UL<li> */
#receptDropdown li:first-child{
position:sticky;
top:0;
color:#fff;
font-weight:bold;
padding-bottom:8px;
background-color:#b8860b;
cursor:default;
z-index:3;
}

/* Voorkom hover-effect op de eerste child */
#receptDropdown li:first-child:hover{background-color:green}

/* receptDropdown */
#receptDropdown{
display:none;
position:relative;
/*max-width:600px;*/
/*width:523px;*/
width:100%;
/*height:281px;*/
height:248px;
margin-top:0;
margin-bottom:0;
/*margin-left:-1px;*/
margin-left:0;
padding:0;
/*border:3px solid #b8860b;*/
border:0px solid #b8860b;
font-size:1.1em;
background-color:#fafad2;
border-radius:0 25px 0 0;
list-style:none;
overflow:scroll;
z-index:3
}

#receptDropdown li{
box-sizing:border-box; 
margin-bottom:0;
width:100%; 
padding:4px 5px 2px 10px;
cursor:pointer;
text-align:left;
background-color:#fafad2
}

#receptDropdown li:first-child{
position:sticky;
top:0;
color:#fff;
font-weight:bold;
padding-bottom:8px;
background-color:#b8860b;
cursor:default;
z-index:3;
}

#receptDropdown li:first-child .closeButton{
cursor:pointer;
font-size:0.9em;
color:#fff;
float:right;
margin-right:10px
}

#receptDropdown li:first-child .closeButton:hover{color:#fff}

#receptDropdown li:not(:first-child):nth-child(odd){
background-color:#f5f5f5 /* De kleur voor oneven items, behalve de eerste */
}

#receptDropdown li:not(:first-child):nth-child(even){
background-color:#dcdcdc /* De kleur voor even items, behalve de eerste */
}

/* Hover effect voor alle items behalve de eerste */
#receptDropdown li:not(:first-child):hover{
background-color:transparent; /* Nieuwe kleur bij hover */
cursor:pointer /* Verandering van cursor bij hover */
}

/* receptButtonContainer */
.receptButtonContainer{width:100%;text-align:center;margin-left:0;height:33px;padding-top:6px}
/* MEDIA */
@media only screen and (max-width:600px){.receptButtonContainer{display:none !important}}

/* receptOpnieuwButton */
#receptOpnieuwButton{
display:none;
width:50%;
height:33px;
margin-top:-7px;
padding:3px 0 0 0;
color:red;
font-weight:bolder;
font-size:1.0em;
cursor:pointer
}
/* MEDIA */
/*@media only screen and (max-width:1080px){#receptOpnieuwButton{width:38%;}}
*/
/* receptBekijkButton */
#receptBekijkButton{
display:none;
float:left;
width:50%;
height:33px;
margin-top:-6px;
margin-left:-1px;
padding:4px 0 0 0;
font-size:1.2em;
cursor:pointer;
}
/* MEDIA */
/*@media only screen and (max-width:1080px){#receptBekijkButton{width:62%;}}
*/
#receptBekijkButton:hover{
background-color:#b8860b;
color:#fff;
border-radius:0 0 25px 25px;
border-radius:100%;
}

#receptOpnieuwButton:hover{
background-color:#b8860b;
color:#fff;
border-radius:0 0 25px 25px;
border-radius:100%;
}