* {margin: 0; padding: 0; box-sizing: border-box; outline: none;}

body {font-family: 'Open Sans', serif; font-size: 12pt; line-height: 11pt; background: #FDFDFD; color: #555;}
img {display: block; width: 100%;}
img {opacity: 1;}
p {margin-bottom: 1em; line-height: 1.2em;}
a {display: block; text-decoration: none; color: #FFF;}
h1 {margin: 0 0 1em 0; font-size: 2.4em; line-height: 1.4em;}
h2 {margin: 0 0 1em 0; font-size: 1.6em; line-height: 1.2em;}
h3 {margin: 0 0 1em 0; font-size: 1.4em; line-height: 1.2em;}


/**/
label, input, select, textarea {display: block; width: 100%;}
input, select, textarea {padding: 0.8em; border: solid 1px #CCC; background: none; color: #7483a7;}
table {width: 100%; border-collapse: collapse; font-size: 1em;}
input:focus {border-color: #586482; background: #f8f8f8;}
th {padding: 20px 10px; color: #FFF; border: solid 1px #DDD; background: #555;}
tr {background: #F3F2F3;}
td {padding: 5px 0; text-align: center;}
tr, td {border: solid 1px #DDD;}

label span {display: block; line-height: 1.2em; margin-bottom: 4px;}
.form-brick {margin-bottom: 1.6em;}
.btn {border: none; cursor: pointer; padding: 16px; color: #FFF; background: #A01323; font-size: 1em;}
.btn:hover {background: #EFAC05;}
/**/

button {border: none;}
ul {list-style-type: none;}

#header-container {height: 110px;}

#navigation {width: 100%; padding: 0 2%; background: #A01323; z-index: 2;}
#navigation {position: fixed; width: 100%; height: 110px; padding: 20px 2%; background: #CCC;}

#navigation > div {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 1400px; width: 100%; margin: 0 auto; padding: 16px 0;}
#logo {display: inline-block;}
#logo img {max-width: 120px; max-height: 150px; width: 100%; height: auto;}
#logo img {max-width: none; width: 260px; height: auto;}

#menu {display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1000px; width: calc(100% - 160px);}
#menu li {max-height: 20px; padding: 20px 0;}
#menu a {display: block; text-transform: uppercase;}
#menu a:hover {color: #000;}

#inner-wrapper {max-width: 1400px; margin: 0 auto; padding: 50px 0;}
.section-container {margin-bottom: 50px;}



/* footer */

footer {background: #555;}
#footer-container {max-width: 1200px; margin: 0 auto; height: 500px; padding: 50px 0;}

/* Custom Errors */

#not-found {max-width: 800px; margin: 0 auto; padding: 50px;}
#not-found .error-msg {display: block; line-height: 1.2em; text-align: justify;}

/* Clases */

.msg-box {margin: 0 0 30px 0; padding: 20px; text-align: center;}
.msg-box span {display: inline-block; margin: 0 auto; color: #FFF;}
.msg-error-box {background: #ef3242;}
.msg-success-box {background: #3ead58;}
span.error {display: block; padding-top: 3px; color: #ef3242; font-size: 0.9em;}

@media all and (max-width: 992px) {
    #wrapper {padding: 0 3%;}
}
@media all and (max-width: 768px) {
    #menu {display: block;}
    #logo {margin: 0 auto;}
}
@media all and (max-width: 576px) {}html {max-width: 900px; margin: 0 auto;}
h1, h2, h3 {text-align: center;}
h2 {color: #E2B714;}
#header-container {height: auto;}
#background-containerssss {background: url("/images/upload/establecimientos/establecimiento.jpg");}
#navigation {position: static; height: auto; padding: 80px 2% 40px 2%; background: none;}
#navigation > div {display: block; padding: 0;}
#navigation > div h1 {color: #000; margin: 0; font-size: 2em;} 

div.item-portada {width: 94%; margin: 0 auto 5px auto; background: #A01323;}
div.item-portada a {padding: 16px; text-align: center;}

#tipo_local {display: block; margin: 0 auto; font-size: 0.6em; color: #333;}
#menu-ctrl {position: fixed; bottom: 0; display: flex; width: 100%; max-width: 900px; height: 60px; background: #444; z-index: 10;}
#menu-ctrl .item-menu {flex-grow: 1; padding: 18px 0; cursor: pointer;}
#menu-ctrl .item-menu:hover {background: #777;}
#menu-ctrl .item-menu span {display: block; width: auto; height: 24px;}
#ctrl-2 {border-right: solid 1px #777; border-left: solid 1px #777;}
#ctrl-1 span {background: url("/images/iconos/smartphone/telefono-blanco.svg") no-repeat; background-size: contain; background-position: center;}
#ctrl-2 span {background: url("/images/iconos/smartphone/reloj.svg") no-repeat; background-size: contain; background-position: center;}
#ctrl-3 span {background: url("/images/iconos/smartphone/posicion.svg") no-repeat; background-size: contain; background-position: center;}

div.categoria {max-width: 100%; width: 100%; margin-bottom: 1px;}
p.nomCategoria {position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 0; padding: 20px 0; cursor: pointer; background: #777; color: #FFF; text-align: center; font-weight: 600; font-size: 1.2em;}
p.nomCategoria:hover {background: #555;}
div.platos-container {max-height: 0; overflow: hidden; transition: max-height 0.6s ease-out}
div.plato {padding: 20px 20px;}
div.img-plato {margin-bottom: 5px;}
div.datos_plato {display: flex; justify-content: space-between; padding: 10px 0 0 0;}
div.nom_plato {font-size: 1em; font-weight: 600;}
div.nom_plato span {line-height: 1.2em;}

div.descripcion {padding-top: 5px; font-size: 0.95em; line-height: 1.2em;}
div.precio {min-width: 56px; text-align: right;}

div.alergenos {position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; padding-top: 10px;}
div.alergenos-container {display: flex; justify-content: center; align-items: center;}
div.alergenos-container.down {display: flex; flex-direction: column; gap: 3px 0; justify-content: center; align-items: start;}

div.alergenos-container div {display: flex; justify-content: center; align-items: center}
div.alergenos-container span.alergeno {margin-right: 3px;}
div.alergenos-container.down span.alergeno {margin-right: 3px;}

div.alergenos-container.down span.nomAlergeno {display: block; margin-left: 5px;}
div.alergenos-container span.nomAlergeno {display: none;}
div.detalles {position: absolute; right: 0; bottom: -5px  ; cursor: pointer;}
div.detalles span {display: inline-block; color: #A01323;}

.odd {background: #f8f8f8;}
.even {background: #E2E2E2;}
    
.arrows {display: none;}
.arrow {position: absolute; right: 30px; border: solid #E2B714; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}    

.arrow-up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transition: 0.6s;
}

.arrow-down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transition: 0.6s;
}



.gluten {background: url("/images/iconos/alergenos/gluten.svg") no-repeat;}
.crustaceos {background: url("/images/iconos/alergenos/crustaceos.svg") no-repeat;}
.huevos {background: url("/images/iconos/alergenos/huevos.svg") no-repeat;}
.pescado {background: url("/images/iconos/alergenos/pescado.svg") no-repeat;}
.cacahuetes {background: url("/images/iconos/alergenos/cacahuetes.svg") no-repeat;}
.soja {background: url("/images/iconos/alergenos/soja.svg") no-repeat;}
.lacteos {background: url("/images/iconos/alergenos/lacteos.svg") no-repeat;}
.frutos_cascara {background: url("/images/iconos/alergenos/frutos_cascara.svg") no-repeat;}
.apio {background: url("/images/iconos/alergenos/apio.svg") no-repeat;}
.mostaza {background: url("/images/iconos/alergenos/mostaza.svg") no-repeat;}
.sesamo {background: url("/images/iconos/alergenos/sesamo.svg") no-repeat;}
.sulfitos {background: url("/images/iconos/alergenos/sulfitos.svg") no-repeat;}
.altramuces {background: url("/images/iconos/alergenos/altramuces.svg") no-repeat;}
.moluscos {background: url("/images/iconos/alergenos/moluscos.svg") no-repeat;}

.alergeno {display: inline-block; width: 22px; height: 22px; background-size: cover;}

#horario, #localizacion {display: none; text-align: center;}
#localizacion #gmaps-icon {display: block; width: 20px; height: 30px; margin: 0 auto; background: url("/images/iconos/smartphone/gmaps-icon.svg") no-repeat;}
.modal {position: fixed; top: 0; left: 0; display: block; width: 100%; min-height: 300px; padding: 30px 3%; background-color: #f2f2f2; z-index: 11;}

.close-modal {margin: 30px 0 0 0; padding: 8px 20px; font-size: 1.2em; border-radius: 3px;}

footer {background: #CCC;}
#footer-container {height: auto; padding-bottom: 80px;}
#logo-down {max-width: 160px; width: 100%; height: auto; margin: 0 auto 20px auto; padding: 0 10px;}
#lema {max-width: 210px; margin: 0 auto; text-align: center; color: #A01323;}

@media all and (max-width: 992px) {
  #wrapper {padding: 0;}
}#establecimiento {position: relative;}
#idioma {max-width: 30%; margin: 0 auto 100px auto; padding: 10px 0; text-align: center; cursor: pointer; border: solid 1px #ccc; border-radius: 5px;}


#pop-up-idioma {display: none; flex-direction: column; padding: 20px; background: #F2F2F2;} 
.pop-up {display: none; max-width: 400px; width: 340px; position: fixed; top: 10vh; right: 50vh; left: 50vh; margin: 0 auto; border-radius: 8px;}
#flags-container {display: flex; flex-direction: row; padding: 15px 0;}
#flags-container img {width: 40px;}
.flag-c {display: block; margin-right: 20px; cursor: pointer;}
.close-container {position: relative;}
.close-popUps {position: absolute; right: 5px; bottom: 3px; width: 20px; height: 20px; cursor: pointer;  transform: rotate(45deg); }
.close-popUps::after {transform: rotate(-45deg); color: #FFF;}


.close-popUp {
    position: absolute;
    right: 6px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    opacity: 0.7;
    cursor: pointer;
  }
  .close-popUp:hover {
    opacity: 1;
  }
  .close-popUp:before, .close-popUp:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 16px;
    width: 2px;
    background-color: #333;
  }
  .close-popUp:before {
    transform: rotate(45deg);
  }
  .close-popUp:after {
    transform: rotate(-45deg);
  }