/*FOODMENU*/


/*
body { 
background-color: var(--drinks-bg);
color: var(--drinks-text);}
*/

.drankenkaart .dishwrapper,
.drankenkaart .dishwrapper2 {
    /* position: relative; */
    /* margin-top: 44px; */
    /* margin-bottom: -59px; */
    /* min-height: 44px; */
    /* max-height: 46px;*/
}

.drankenkaart .dishwrapper2 {
    margin-bottom: -20px;
}

.drankenkaart .dishwrapper h2,
.drankenkaart .dishwrapper2 h2 {
    font-family: "Customfont1";
    font-size: unset;
    display: none;
}

.drankenkaart h1+h2 {
    display: flex;
    align-items: center;
    
}
.drankenkaart h1+h2 .ingredients {
    margin-left: 1em;
}

.drankenkaart .dishwrapper p:nth-of-type(1) {
    /* font-family: "Customfont2"; */
    /* position: relative; */
    /* top: 0; */
    left: 0px;
    font-weight: ;
    /* font-size: 100%; */
    /* width: calc(100%); */
}

.drankenkaart .dishwrapper p:nth-of-type(2) {
    /* position: relative; */
    /* top: -20px; */
    left: 0px;
    font-weight: ;
    width: calc(100%); 
    /* margin-bottom: -35px; */
}

.drankenkaart .price {
    position: absolute;
    right: 0px;
    font-family: "Customfont1";
    font-size: 100%;
    background-color: var(--main-bg-color);
    background-color: transparent;
/* 
    background: -moz-linear-gradient(left, rgba(81, 240, 130, 0) 0%, rgba(81, 240, 130, 1) 58%, rgba(81, 240, 130, 1) 100%);

    background: -webkit-linear-gradient(left, rgba(81, 240, 130, 0) 0%, rgba(81, 240, 130, 1) 58%, rgba(81, 240, 130, 1) 100%);

    background: linear-gradient(to right, rgba(81, 240, 130, 0) 0%, rgba(81, 240, 130, 1) 58%, rgba(81, 240, 130, 1) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0051f082', endColorstr='#51f082', GradientType=1); */

}

.drankenkaart p .price {
    top:-1.4em;
}
.drankenkaart h2+p .price {
    top:unset;
}

.drankenkaart h2 .price,
.drankenkaart h2 .ingredients {
    font-size: 57%;
}

.drankenkaart .ingredients {
    font-family: "Customfont1";
}

.drankenkaart .diet {
    border: solid 2px var(--main-text-color);
    border-radius: 1em;
    padding: 0 .25em 0 .25em;
    height: 1em;
}

p .price {
    top: 0;
}



/* iPad  */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {}


/* iPad Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {}


/* iPad Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}


/*mobile*/

@media only screen and (-webkit-min-device-pixel-ratio: 1.0) and (max-width: 767px) {}


/* Mobile Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {}


/* Mobile Portrait */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {

    .drankenkaart h1+h2 {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        align-content: flex-start;
        text-align: left;
    }

    .drankenkaart h1+h2 .ingredients {
        margin-left: 0em;
    }

}


/* ----------- iPhone 5 and 5S ----------- */


/* iPhone 5 Portrait and Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {}


/* iPhone 5 Portrait */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
    body {
        font-size: 80%;
    }
}


/* iPhone 5 Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {}


/* ----------- iPhone 6 ----------- */


/* Portrait */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {}


/* Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {}

x-device-width: 667px) and (orientation: landscape) {}