@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200&display=swap');

[data-toggle="collapse"]:before {
	font-family: "Font Awesome 5 Pro";
	display: inline-block;
    float: right;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f105";
	transform: rotate(-90deg) ;
	transition: all linear 0.25s;
	margin-right: 5px;
}   
[data-toggle="collapse"].collapsed:before { transform: rotate(90deg); }

#barraTop button { font-size: 16px; background-color: #FFF; border: 1px solid Gray; padding: 0px; width: 40px; height: 40px }
#barraTop button:not(:last-child) { margin-right: 5px }
#barraTop button:disabled { opacity: 0.15 }
#barraTop button.sizeDown { font-size: 10px }
#barraTop button.sizeUp { font-size: 24px }
#barraTop > div { padding: 5px; height: 50px }
/*#barraTop img { height: 28px; vertical-align: baseline; border:1px solid #CCC; border-radius: 14px }*/
#languages { position: fixed; display:none; border: 1px solid #EEE; top: 0px; z-index: 100; background-color: #FFF; width: 92%; left: 4%; padding: 70px 10px 10px 10px; }
#menus { text-align: center }

#plato { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; background-color: #F7F7F7}
#plato .foto{ max-height: 600px; max-width: 100% }
#plato .grupo{ font-size: 0.8rem; color: #999;}
#plato .nombre{ font-size: 1.5rem; font-weight: bold; color: #333; }
#plato .extra{ font-size: 1.2rem; color: #555;}
#plato .precio{ font-size:1.5rem; font-weight: bold; color: #0CAC00;}
/*#plato .precio::after{ content:" €";}*/
#plato .desc{ font-size: 1.2rem; color: #555;}

#plato .ales .al, .plato_alergenos .al{ display: inline-block; width: 20px; margin-right: 4px; height: 20px; box-sizing: border-box; background:no-repeat left center; line-height:20px; font-size:20px; }
#plato .ales li{ display: block; margin-bottom: 5px !important;}
#plato .ales .al{ width: auto; padding-left: 25px;}
#plato .ales .al::after{ font-size: 17px; color: #666;}
#plato .ales .al1, .plato_alergenos .al1{ background-image: url(../images/alergenos/gluten.svg);}
#plato .ales .al1::after{ content: "Gluten"; }
#plato .ales .al2, .plato_alergenos .al2{ background-image: url(../images/alergenos/crustaceans.svg);}
#plato .ales .al2::after{ content: "Crustáceos"; }
#plato .ales .al3, .plato_alergenos .al3{ background-image: url(../images/alergenos/eggs.svg);}
#plato .ales .al3::after{ content: "Huevos"; }
#plato .ales .al4, .plato_alergenos .al4{ background-image: url(../images/alergenos/fish.svg);}
#plato .ales .al4::after{ content: "Pescado"; }
#plato .ales .al5, .plato_alergenos .al5{ background-image: url(../images/alergenos/peanuts.svg);}
#plato .ales .al5::after{ content: "Cacahuetes"; }
#plato .ales .al6, .plato_alergenos .al6{ background-image: url(../images/alergenos/soy.svg);}
#plato .ales .al6::after{ content: "Soja"; }
#plato .ales .al7, .plato_alergenos .al7{ background-image: url(../images/alergenos/milk.svg);}
#plato .ales .al7::after{ content: "Lácteos"; }
#plato .ales .al8, .plato_alergenos .al8{ background-image: url(../images/alergenos/nuts.svg);}
#plato .ales .al8::after{ content: "Frutos de Cáscara"; }
#plato .ales .al9, .plato_alergenos .al9{ background-image: url(../images/alergenos/celery.svg);}
#plato .ales .al9::after{ content: "Apio"; }
#plato .ales .al10, .plato_alergenos .al10{ background-image: url(../images/alergenos/mustard.svg);}
#plato .ales .al10::after{ content: "Mostaza"; }
#plato .ales .al11, .plato_alergenos .al11{ background-image: url(../images/alergenos/sesame.svg);}
#plato .ales .al11::after{ content: "Semillas de Sésamo"; }
#plato .ales .al12, .plato_alergenos .al12{ background-image: url(../images/alergenos/sulphites.svg);}
#plato .ales .al12::after{ content: "Sulfitos"; }
#plato .ales .al13, .plato_alergenos .al13{ background-image: url(../images/alergenos/molluscs.svg);}
#plato .ales .al13::after{ content: "Moluscos"; }
#plato .ales .al14, .plato_alergenos .al14{ background-image: url(../images/alergenos/lupin.svg);}
#plato .ales .al14::after{ content: "Altramuces"; }

.boton-menu { width: 80%; color: #FFF; font-size: 1.6rem }
.boton-activado { background-color: #E0FF00 !important }

.flags img { margin:0; -webkit-filter: grayscale(50%) opacity(40%); filter: grayscale(50%) opacity(40%); height: 40px; }
.flags img.activo { height: 45px; -webkit-filter: none; filter: none;  }
.flags img:hover { -webkit-filter: none; filter: none;  }
.foto { position: relative }
.menu { padding: 5px 15px; position:sticky; top: 49px; background-color: #EEE; z-index: 5; border-bottom: 1px solid #AAA;}
.menu h2 { font-family: 'Titillium Web', sans-serif; margin-bottom: 0px !important; font-size: 1.8rem; letter-spacing: -1px }
.menu span { font-weight: bold; padding-left: 10px; font-size: 1.7rem }

.menu-sticked { position: fixed; background-color: #FFF; top: 50px; width: 100%; text-align: left; border-bottom: 1px solid #AAA; z-index: 100; padding-bottom: 10px }

.pie { text-align: center; font-size: 16px; padding: 40px 0 30px 0; margin-top: 20px; }
.pie .botones .btn { font-size: 14px }
.pie .direccion { font-size: 12px; color: #555 }
.pie .gormatica { font-size: 13px; color: #000000; }
.pie .gormatica img {  height: 20px}

.telefono { position: absolute; bottom: 20px; right: 0px; color: #FFF; padding: 4px 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px }
.telefono a { font-size: 1.2rem; color: #FFF; font-weight: bold }

ul { list-style: none; margin: 0px; padding: 0px }
.tipo_menu ul { list-style: disc; margin: 0px; padding: 0 0 0 20px }
ul.plato_alergenos li { display:inline-block; margin: 0 2px !important;}
ul.plato_alergenos li img { height: 20px; }

/* SIN FOTOS */
.lista1 .ugrupo > li { line-height: 1rem; clear: both; text-align: left; margin: 1em 0 1em 0; }
.lista1 .plato_basic { display: flex; align-items: flex-end;}
.lista1 .plato_extra { text-align: left; padding: 3px 0 0 0; font-size: 0.8rem; color: #777; }
.lista1 .plato_nombre { text-align:left; width: 100%; border-bottom: 2px dotted #CCC;}
.lista1 .plato_nombre span { background-color:#FFF; padding: 0 5px 5px 0; margin-bottom: -5px; line-height: 1.2rem;}
.lista1 .plato_precio { margin-left: 5px; padding-bottom: 1px; color: #222;}
.lista1 .plato_alergenos { text-align: left; padding: 0; }
.lista1 .plato_alergenos li:first-child { margin-left: 0px !important; }
.lista1 .plato_foto { display:none; }

/* CON FOTOS */
.lista2 .ugrupo > li { display: flex; align-items: center; border-top: 1px solid #E4E4E4; margin-top: 9px; padding-top: 9px;}
.lista2 .ugrupo > li:first-child { border-top:none; margin-top: 0; padding-top: 0;}
.lista2 .plato_basic { display: flex; align-items: flex-end; }
.lista2 .plato_foto{ width: 30%; border-radius:5px; margin-right: 12px }
.lista2 .plato_info{ flex-grow: 1; text-align: left; box-sizing: border-box;}
.lista2 .plato_nombre{ font-size: 1rem; width: 100%; }
.lista2 .plato_precio{ font-size: 1.1rem; color: #222; margin-left:12px; }
.lista2 .plato_extra { text-align: left; font-size: 0.8rem; color: #777; }
.lista2 .plato_alergenos { margin-top: 3px; }
.lista2 .plato_alergenos li { display: inline-block; padding-top: 3px;}
.lista2 .plato_alergenos li:first-child { margin-left: 0px !important; }

.lista3 .ugrupo > li { display: flex; flex-wrap: wrap;}
.lista3 .ugrupo > li { display: inline-block; width: 50%; box-sizing: border-box; margin-bottom: 20px;}
.lista3 .ugrupo > li:nth-child(odd) { padding-right: 7px; clear: both;}
.lista3 .ugrupo > li:nth-child(even) { padding-left: 7px;}
.lista3 .plato_foto{ width:100%; background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius: 5px; }
.lista3 .plato_foto:before {content: ""; display: block; padding-top: 100%;}
.lista3 .plato_nombre{ font-size: 1.1rem; color: #444; text-align: center; padding-top: 3px;}
.lista3 .plato_precio{ font-size: 1rem; color:#4FB200; text-align: center; font-weight: bold;}
.lista3 .plato_extra { display:none; }
.lista3 .plato_alergenos li { display: inline-block; padding-top: 3px; width: auto; padding: 0 2px;}
.lista3 .plato_alergenos { display: block; text-align: center;}

@media (max-width: 700px){
	h4 { border-bottom: 1px solid Gray }	
}