html, body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-size:22px;
	line-height:26px;
	background:#F9F5EA;
	color:#333D7A;
	text-align:left;
}
*{font-family:"metallophile-sp8", sans-serif; font-weight:300; vertical-align:top; text-decoration:none; outline:none; border:0; background-position:center; background-repeat:no-repeat; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; -webkit-text-size-adjust:none; box-sizing:border-box;}

.section{position:relative; float:left; width:100%; padding:0; z-index:1;}
.container{position:relative; margin:auto; width:750px;}
.full, .half{position:relative; float:left;}
.full{width:100%;}
.half{width:48%;}
.half:last-child{margin-left:4%;}

h1,h2,h3{font-family:"metallophile-sp8", sans-serif; font-weight:500; text-transform:uppercase; margin:0;}
h1{float:left; width:100%; font-size:34px; line-height:34px; margin-bottom:12px; text-align:center;}
h2{font-size:32px; line-height:34px; margin-bottom:20px;}
h3{font-size:28px; line-height:28px; margin:30px 0 20px; color:#333D7A; font-weight:700;}

a, a:link, a:visited{color:#333D7A; text-decoration:none; cursor:pointer;}
a:hover, a:active{color:#333D7A; text-decoration:none;}
p{margin:0;}
strong{font-weight:500;}
u{text-decoration:underline;}

.border{float:left; width:100%; padding:15px; /*background:rgba(51,61,122, 0.6);*/ background:#F9F5EA;}
.border .content{float:left; width:100%; padding:15px; background:#fff; border-radius:10px;}

.top{position:relative; float:left; width:100%; margin:10px 0 20px;}
.top .logo{float:left; width:100%; height:75px; margin-top:10px; background:url(/img/logo.png) no-repeat center / contain;}
.top .social{position:absolute; top:0; left:0;}
.top .social a{display:inline-block; margin-right:10px; background:no-repeat center / cover;}
.top .social a:last-child{margin-right:0;}
.top .social a.facebook{width:13px; height:25px; background-image:url(/img/facebook.png); margin-right:5px;}
.top .social a.instagram{width:24px; height:24px; background-image:url(/img/instagram.png);}
.top .flags{position:absolute; top:0; right:0;}
.top .flags a{display:inline-block; width:24px; height:24px; margin-left:5px; background:no-repeat center / cover; border-radius:5px;}
.top .flags a:first-child{margin-left:0;}
.top .flags a.nl{background-image:url(/img/nl.svg);}
.top .flags a.en{background-image:url(/img/en.svg);}
.top .flags a.de{background-image:url(/img/de.svg);}

.categories{float:left; width:100%; top:0; left:0; height:70px; z-index:3;}
.categories p{float:left; width:100%; height:22px; margin:0; padding:6px 16px 0; font-size:12px; line-height:12px; color:#fff; text-transform:uppercase; font-weight:400; background:#333D7A; opacity:0.8; border-radius:10px 10px 0 0;}
.categories select{float:left; width:100%; font-family:"metallophile-sp8", sans-serif; font-size:20px; font-weight:400; line-height:20px; padding:14px 16px; margin:0; color:#fff; border:0; background:url(/img/select.svg) no-repeat #333D7A right 18px center / 9px 18px; cursor:pointer; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0 0 10px 10px}
.categories select::-ms-expand{display:none;}
.categories.fixed{position:fixed; top:-4px;}
.categories.fixed p{display:none;}
.categories.fixed select{padding:16px 30px 12px; font-size:22px; background-position:right 30px center; border-radius:0;}
.categories_placeholder{display:none; float:left; width:100%; height:70px;}

.text-notice{display:none; float:left; width:100%; margin-top:12px; font-size:15px; line-height:18px; border:2px dashed #333D7A; background:url(/img/green-key.png) no-repeat center left 6px / auto 78%; padding:10px 10px 9px 44px;}

.menu{float:left;}
.menu h3{float:left; width:100%;}
.menu h3 small{display:inline-block; font-size:16px; line-height:16px; color:#333D7A; vertical-align:baseline; text-transform:none;}
.menu sup{font-weight:400; font-size:13px; line-height:13px;}
.menu .item{width:100%; float:left; margin-bottom:16px;}
.menu .item:last-child{margin-bottom:0;}
.menu .item .title{position:relative; width:100%; padding-right:90px;}
.menu .item .title strong{display:block; font-size:19px; line-height:22px; text-transform:uppercase;}
.menu .item .price{position:absolute; right:0; top:0; font-size:20px; font-weight:400; text-align:right;}
.menu .item .price small{font-size:13px; font-weight:400;}
.menu .item .price img{height:16px; margin:0 2px 0 -2px; vertical-align:baseline;}
.menu .item .price img:last-child{margin-right:0;}
.menu .item .price img.glass{height:10px;}
.menu .item p{padding-right:20px; font-size:21px; letter-spacing:-0.5px; opacity:0.9;}
.menu .item p small{display:inline-block; margin:5px 0; line-height:18px;}

.totop{float:left; width:100%; height:23px; margin:50px 0 10px; background:url(/img/totop.png) no-repeat center / contain;}

.legenda{float:left; width:100%; margin:40px 0 10px; text-align:center;}
.legenda p{display:inline-block; margin:0 2px; font-size:15px; line-height:15px; font-weight:500;}
.legenda span, .menu .item .title strong span{display:inline-block; width:10px; height:10px; background:#333D7A; margin:2px 2px 0; border-radius:100%;}
.legenda span.vega, .menu .item .title strong span.vega{background:#7cb963;}
.legenda span.vegan, .menu .item .title strong span.vegan{background:#d8ca55;}
.legenda span.biologisch, .menu .item .title strong span.biologisch{background:#ac963d;}
.menu .item .title strong span{width:8px; height:8px; margin:4px 0 0 -2px;}

.allergie{float:left; width:100%; margin-bottom:15px; padding:20px 15px 15px; font-family:"metallophile-sp8", sans-serif; font-size:30px; color:#333D7A !important; font-weight:700; text-align:center; text-transform:uppercase; background:url(/img/allergenen-bg.png) no-repeat center / cover; border:2px dashed #333D7A; border-radius:10px;}
.allergie small{display:block; margin-top:4px; font-size:14px; line-height:12px; color:#333D7A !important; font-weight:500;}

.footer{float:left; width:100%; padding:15px; background:#F9F5EA; border-radius:10px; margin-bottom:10px;}
.footer .wifi{float:left; width:100%; padding-left:54px; background:url(/img/wifi.svg?v=1) no-repeat left center / 40px 32px;}
.footer .ad{float:left; width:100%; margin-top:15px; padding-top:15px; border-top:1px solid #fff;}
.footer .ad img{width:80%; margin:0 10%;}
.footer .ad p{margin-top:10px; font-weight:400;}

/*responsive*/
@media screen and (max-width:760px){
.container{width:100%;}
}
@media screen and (max-width:375px){
.top .logo{height:65px;}
}
@media screen and (max-width:350px){
.top .logo{height:50px;}
.text-notice{font-size:14px; line-height:16px; padding:8px 8px 7px 46px;}
}