/*DINER-VOOR-TWEE.CSS */

/* MESSAGES IN HEADER*/
.EETwatEtenWeVanavondDinerVoorTwee h1{width:auto;position:absolute;z-index:2;top:50%;color:green;font-size:1.3em;font-style:italic;text-shadow:1px 1px 1px #000;
font-weight:lighter;margin-left:60%;text-align:right;cursor:default}
/* MEDIA */
@media only screen and (max-width:720px){.EETwatEtenWeVanavondDinerVoorTwee h1{font-size:1.2em}}
@media only screen and (max-width:600px){.EETwatEtenWeVanavondDinerVoorTwee h1{font-size:0.9em}}

/* QR DINER VOOR TWEE*/
.QrDinerVoorTwee{
z-index:2;
position:relative;
float:right;
margin-right:15px;
top:15px;
width:90px;
height:90px;
background:url('../diner-voor-twee-included/qr-diner-voor-twee/qr-diner-voor-twee.jpg') no-repeat
}
/* MEDIA */
@media only screen and (max-width:900px){.QrDinerVoorTwee{display:none}}
@media only screen and (max-width:834px){.QrDinerVoorTwee{display:none}}
@media only screen and (max-width:820px){.QrDinerVoorTwee{display:none}}
@media only screen and (max-width:720px){.QrDinerVoorTwee{display:none}}

/*GEEN BULLIT - Genruik: bij voorbereiding*/
.geen-bullit{list-style:none}

/*SUBMENU DINER VOOR TWEE*/
.EETmenusubMobiel ul{
list-style-type:none;
margin:1px auto 10px 19px;
padding:9px;
width:88.55555%;
background-color:#dcdcdc; 
font-size:1.4em;
border-radius:0 0 15px 15px;
border:1px solid #c0c0c0;
box-shadow:2px 2px 6px #ccc;
height:100px
}

.EETmenusubMobiel a:link,
.EETmenusubMobiel a:visited{color:#19752f;text-decoration:none;font-size:0.8em}
.EETmenusubMobiel a:hover,
.EETmenusubMobiel a:active{color:#000;text-decoration:none}

.EETmenusubMobiel li a{display:block;color:#000;padding:0;text-decoration:none;float:left;margin-right:17px}

/*GEKOZEN SELECTIE DINER VOOR TWEE*/
.GekozenSelectieDinerVoorTwee{text-align:center;color:#19752f;margin-top:-25px;font-size:1.3em;background-color:#f7f7df;border-radius:10px}

/* INFOBALK DINER VOOR TWEE*/
.EETinfobalkTopDinnerVoorTwee{
height:33px;
width:100%;
margin-top:100px;
margin-bottom:-30px;
padding:7px 0 0 5px;
font-size:1.0em;
color:#000;
text-align:left;
border-radius:0 10px 0  0;
}

.EETinfobalkTopDinnerVoorTwee a{float:right;margin-right:30px;font-size:1.0em;margin-top:0}

.EETinfobalkTopDinnerVoorTwee a:link,
.EETinfobalkTopDinnerVoorTwee a:visited{color:#fff !important;text-decoration:none}
.EETinfobalkTopDinnerVoorTwee a:hover,
.EETinfobalkTopDinnerVoorTwee a:active{color:#dcdcdc !important;text-decoration:none}

/*IMAGE CONTAINER 3 GANGEN MENU*/
.ImageContainerDrieGangenDinerVoorTwee{
display:flex;
justify-content:space-between;
width:auto; /* Adjust based on your requirement */
margin:10px 10px 10px 50px; /* Center the container */
text-align:center;
background-color:#faf0be;
border-radius:15px;
box-shadow:1px 1px 5px #808080;
padding-right:10px
}

.ImageContainerDrieGangenDinerVoorTwee img {
flex:1; /* Waarom 1? */
margin:10px; /* Optional: space between the images */
max-width:100%;
height:auto;
cursor: pointer
}

/*ACHTERGROND KLEUR A B*/
.recept-item-diner-a{background-color:#f7f7df}
.recept-item-diner-b{background-color:transparent}

/*HEAD voorgerecht,hoofdgerecht,dessert*/
.HeadDinnerVoorTwee{text-align:center;color:green;font-size:1.2em;border-bottom:1px solid red;padding-top:1px;margin-top:-38px}

/*CONTAINER-33 DINER VOOR TWEE*/
.EETcontainer-33-DinerVoorTwee{
margin-top:0px;
margin-left:20px;
margin-right:15px;
font-size:0.9em;
display:grid;
grid-template-columns:repeat(3,1fr);
column-gap:1.0vw;
background-color:transparent
}
.EETcontainer-33-DinerVoorTwee >div{z-index:3;padding-bottom:10px;border-bottom:1px solid red;margin-bottom:10px}
.EETcontainer-33-DinerVoorTwee img{width:95%;margin-bottom:10px;border-radius:10px;position: relative;left:50%;transform:translateX(-50%)}
.EETcontainer-33-DinerVoorTwee img:hover{background-color:#f0f3e7}
.EETcontainer-33-DinerVoorTwee p{margin:0 10px 0 10px}
.EETcontainer-33-DinerVoorTwee h1{height:40px;margin:8px 3px 2px 3px;cursor:default
}
/*MEDIA */
@media only screen and (max-width:834px){.EETcontainer-33-DinerVoorTwee{grid-template-columns:repeat(3,1fr)}}
@media only screen and (max-width:568px){.EETcontainer-33-DinerVoorTwee{grid-template-columns:repeat(1,1fr)}}

.EETcontainer-33-DinerVoorTwee a:link,
.EETcontainer-33-DinerVoorTwee a:visited{color:#000;text-decoration:none}
.EETcontainer-33-DinerVoorTwee a:hover,
.EETcontainer-33-DinerVoorTwee a:active{color:#7AA10F!important;text-decoration:none}


/*ZET LANDSCAPE OP MOBIEL OP KLEUR*/
/*Dit kan/mag hier staan omdat er geen POPUP.html is */
@media screen and (max-width: 896px) and (orientation: landscape){

html, body{
margin:0;
padding:0;
background:green;
height:100vh;
width:100vw;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}

body::before{
content:"Deze website werkt alléén in portrait weergave.\A Draai je scherm a.u.b.";
color:white;
font-size:3.0rem;
text-align:center;
padding:1rem;
white-space:pre-line;
}

body *{
display:none !important;
}

}