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

header {height: 92px;}
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.4em;}
a {text-decoration: none; color: #FFF;}
h1 {margin: 0 0 1.4em 0; font-size: 2.6em; line-height: 1.2em;}
h2 {margin: 0 0 1.2em 0; font-size: 2.4em; line-height: 1.2em;}
h3 {margin: 0 0 1em 0; font-size: 2em; line-height: 1.2em;}
h1, h2, h3 {color: #427222; text-align: center;}

button {border: none;}
ul {list-style-type: none;}
#wrapper {padding: 0 2%;}
#inner-wrapper {max-width: 1200px; margin: 0 auto; padding: 50px 0}
section {margin: 0 auto; padding: 50px 0;}

#navigation {position: fixed; width: 100%; padding: 0 2%; background: #000; z-index: 10;}
#navigation > div {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; max-width: 1200px; width: 100%; margin: 0 auto; padding: 26px 0;}
#logo {display: inline-block;}
#logo img {max-width: 230px; width: 100%;}

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




/* footer */
footer {padding: 80px 2%; background: #333; color:#FFF;}
#footer-container {display: flex; gap: 50px; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0;}
.item-footer {width: 33%;}
.title-footer {display: block; margin-bottom: 30px; padding: 0 0 10px 0; text-align: center; border-bottom: solid 1px #427222; font-size: 14pt;}
address {margin-bottom: 1em; line-height: 1.2em;}
#u-c li a:hover {color: #008000;}


#cookies {position: fixed; bottom: 0; width: 100%; margin: 0 auto; padding: 40px 3%; text-align: center; color: #555; background: #F2F2F2;}
#cookies span {display: block; margin-bottom: 1.2em; line-height: 1.4em;}
#cookies a {color: #008000;}
#close-cookie {display: inline-block; padding-left: 5px; cursor: pointer; color: #A01323;}



@media all and (max-width: 1024px) {}
@media all and (max-width: 992px) {

    #footer-container {flex-direction: column; gap: 50px;}
    .item-footer {max-width: 460px; width: 100%; margin: 0 auto; text-align: center;}
    .title-footer {max-width: 400px; width: 80%; margin: 0 auto 40px auto;}

    #menu.up {display: none;}
    #menu.down {display: block; width: 100%; padding-top: 30px;}
    #menu.down li {text-align: center; padding: 30px 0;}
    #navigation span.toggle-nav {display: block;}

    #navigation span.toggle-nav {display: block; margin-right: 20px;}
    #navigation span.toggle-nav-btn {display: block; width: 2.2em; height: auto; border: solid 2px #427222; border-radius: 3px; cursor: pointer;} 
    span .s-line {display: block; width: 1.5em; height: 1px; margin: 6px auto; background: #427222;} 

}
@media all and (max-width: 768px) {
   
}
@media all and (max-width: 576px) {}#carta div.section-container {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px;}
div.categoria {max-width: 100%; width: 100%; margin-bottom: 3em;}
p.nomCategoria {display: flex; align-items: center; margin-bottom: 0; padding: 10px 0; font-size: 1.4em; font-weight: 600; border-bottom: solid 1px #008000; color: #008000; text-transform: uppercase;}
div.plato {padding: 20px 20px;}
div.datos_plato {display: flex; justify-content: space-between; padding: 10px 0;}
div.nom_plato {font-size: 1em; font-weight: 600;}

div.descripcion {line-height: 1.2em;}
div.precio {min-width: 56px; text-align: right;}


.odd {background: #f8f8f8;}
.even {background: #E2E2E2;}

.arrow {display: none;}

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

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

@media all and (max-width: 992px) {
    div.categoria {max-width: 100%; margin-bottom: 2em;}
    .arrow {position: absolute; right: 30px; display: inline-block; cursor: pointer; border: solid #000; border-width: 0 3px 3px 0; padding: 3px;}    
    div.platos-container {max-height: 0; overflow: hidden;}
    
}
@media all and (max-width: 768px) {}


/*  */

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 {background: #578E31;}
p.nomCategoria:hover {background: #555;}
p.nomCategoria:hover {background: #4D7F2A;} 
div.platos-container.collapsed {max-height: 0; overflow: hidden; transition: max-height 0.6s ease-out}
div.plato {padding: 20px 20px;}
div.img-plato {position: relative; 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.caracteristicas {position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; padding-top: 10px;}
div.caracteristicas-container {display: flex; justify-content: center; align-items: center; gap: 20px 0;}
div.caracteristicas-container .alergenos {margin: 0 10px 0 0;}
div.caracteristicas-container.down {display: flex; flex-direction: column; gap: 3px 0; justify-content: center; align-items: start;}


div.caracteristicas-container div {display: flex; justify-content: center; align-items: center}

div.caracteristicas-container.down .alergenos {margin: 0 0 10px 0;}
div.caracteristicas-container.down .alergenos, div.caracteristicas-container.down .propiedades {display: flex; align-items: start; justify-content: center; flex-direction: column; gap: 3px 0;}

div.caracteristicas-container span.alergeno {margin-right: 3px;}
div.caracteristicas-container.down span.alergeno {margin-right: 3px;}

div.caracteristicas-container span.propiedad {margin-right: 3px;}
div.caracteristicas-container.down span.propiedad {margin-right: 3px;}

div.caracteristicas-container.down span.nomAlergeno {display: block; margin-left: 5px;}
div.caracteristicas-container span.nomAlergeno {display: none;}

div.caracteristicas-container.down span.nomPropiedad {display: block; margin-left: 5px;}
div.caracteristicas-container span.nomPropiedad {display: none;}
div.caracteristicas-container span.nomPropiedad.last {display: block;}

div.detalles {position: absolute; height: 22px; right: 0; bottom: -5px; cursor: pointer;}
div.detalles span {display: inline-block; color: #A01323;}

div.precios {display: flex; padding-top: 10px;}

.ancla {top: 100px;}
.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-lnk {position: absolute; left: 30px; border: solid #FFF; border-width: 0 3px 3px 0; display: inline-block; padding: 4px;}    

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

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

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

}

.img-plato .label {padding: 1.4em 1.8em;}
.position1 {position: absolute; top: 0; left: 0; color: #FFF;}
.position2 {position: absolute; top: 0; right: 0; color: #FFF;}
.position3 {position: absolute; bottom: 0; right: 0; color: #FFF;}
.position4 {position: absolute; bottom: 0; left: 0; color: #FFF;}
#agotado {background: #000;}
#vegano {background: #4D7F2A;}
#ecologico {background: #578E31;}
#picante {background: #A01323;}

.gluten, .alergeno_1 {background: url("/images/iconos/alergenos/gluten.svg") no-repeat;}
.crustaceos, .alergeno_2 {background: url("/images/iconos/alergenos/crustaceos.svg") no-repeat;}
.huevos, .alergeno_3 {background: url("/images/iconos/alergenos/huevos.svg") no-repeat;}
.pescado, .alergeno_4 {background: url("/images/iconos/alergenos/pescado.svg") no-repeat;}
.cacahuetes, .alergeno_5 {background: url("/images/iconos/alergenos/cacahuetes.svg") no-repeat;}
.soja, .alergeno_6 {background: url("/images/iconos/alergenos/soja.svg") no-repeat;}
.lacteos, .alergeno_7 {background: url("/images/iconos/alergenos/lacteos.svg") no-repeat;}
.frutos_cascara, .alergeno_8 {background: url("/images/iconos/alergenos/frutos_cascara.svg") no-repeat;}
.apio, .alergeno_9 {background: url("/images/iconos/alergenos/apio.svg") no-repeat;}
.mostaza, .alergeno_10 {background: url("/images/iconos/alergenos/mostaza.svg") no-repeat;}
.sesamo, .alergeno_11 {background: url("/images/iconos/alergenos/sesamo.svg") no-repeat;}
.sulfitos, .alergeno_12 {background: url("/images/iconos/alergenos/sulfitos.svg") no-repeat;}
.altramuces, .alergeno_13 {background: url("/images/iconos/alergenos/altramuces.svg") no-repeat;}
.moluscos, .alergeno_14 {background: url("/images/iconos/alergenos/moluscos.svg") no-repeat;}

.vegano {background: url("/images/iconos/propiedades/vegano.svg") no-repeat;}
.ecologico {background: url("/images/iconos/propiedades/ecologico.svg") no-repeat;}
.picante {background: url("/images/iconos/propiedades/picante.svg") no-repeat;}
.agotado {background: url("/images/iconos/propiedades/agotado.svg") no-repeat;}

.alergeno {display: inline-block; width: 22px; height: 22px; background-size: cover;}
.propiedad {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;}

#logo-down-lnk {display: block; max-width: 160px; margin: 0 auto;}
#acceso-usuarios {display: inline-flex; margin-left: 20px;}
#candado {width: 22px; height: 32px;}

@media all and (max-width: 992px) {
  #wrapper {padding: 0;}
}
@media all and (max-width: 768px) {

 .img-plato .label {padding: 0.8em 1.2em;}
}

/*******/