/*
    * {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

:root {
    --bgtable: #000;
    --bordertable: #9b820f;
    --bgdish: #b7af9d;
    --bgprice: #534637;
}

body, html{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

body {
  background: #68605d;
  overflow-x: hidden;
  font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
  text-rendering: optimizeLegibility;
}

ul { list-style-type: none; padding:0; }

a {
  color: #b63b4d;
  text-decoration: none;
}

/* LOADER */

.loader_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader:before, .loader:after {
    content: '';
    border: 1em solid #DBC089;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
    box-sizing: border-box;
}
.loader:before {
    animation-delay: .5s;
}

.loadimage{
    position:absolute;
    width:85%;
    left:50%;
    transform:translateX(-50%);
    max-width:700px;
}

@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}


/** =======================
 * Contenedor Principal
 ===========================*/


h1 {
  color: #FFF;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-top: 80px;
}

h1 a {
  color: #c12c42;
  font-size: 16px;
}

.accordion {
  width: 100%;
  max-width: 960px;
  margin: 30px auto 20px;
  background: var(--bgtable);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.accordion .link {
  cursor: pointer;
  display: block;
  padding:5px 0px 10px 0px;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .15rem;
  text-align:center;
  border-bottom: 1px solid var(--bordertable);
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li:last-child .link { border-bottom: 0; }

.accordion li i {
  position: absolute;
  top: 21px;
  left: 12px;
  font-size: 14px;
  color: #.accordion .link;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}

.accordion li.open .link { color: #e3a049; }

.accordion li.open i { color: #e3a049; }

.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/


.submenu {
  display: none; /*COLAPSAR ACORDEON*/
  background: #444359;
  font-size: 14px;
}

.submenu li { border-bottom: 1px solid var(--bordertable); }

.submenu a {
  display: block;
  text-decoration: none;
  color: #d9d9d9;
  padding: 12px;
  padding-left: 42px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.submenu a:hover {
  color: #FFF;
}


/* XTRAS */

.top{
position: absolute;
z-index: -1;
top: 0px;
width: 100%;
height: 250px;
background: rgb(41,72,122);
background: -moz-linear-gradient(0deg, rgba(41,72,122,1) 0%, rgba(29,92,190,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(41,72,122,1) 0%, rgba(29,92,190,1) 100%);
background: linear-gradient(0deg, rgba(41,72,122,1) 0%, rgba(29,92,190,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#29487a",endColorstr="#1d5cbe",GradientType=1);
}

.logo{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.logo .restbrand{
  margin-top: 15px;
}

.logo .restname{
  width: 100%;
  position: relative;
  text-align: center;
  margin: 10px 0px -10px 0px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1.75rem;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
}
.logo img{ width:100%; max-width:250px; margin-right: 15px;}

.coversect{
  display: block;
  position: relative;
  width: 100%;
  /*height: 420px;*/
  margin:0px 0px -30px 0px;
}

.cover{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  position:relative;
  overflow: hidden;
  width:100%;
  max-width: 460px ;
  height: auto;
  max-height: 400px;
  padding: 0px;
  margin:0px;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  overflow: hidden;
}

.cover img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

.socialmedia {
    width: 100%;
    background: #444359;
    color: var(--bgdish);
    display: flex;
    align-items: center;     /* centra verticalmente */
    justify-content: center; /* centra horizontalmente */
    gap: 18px;                /* espacio entre imagen y texto */
    padding:4px 0px;
}

.socialmedia img{
    display:inline;
    position: relative;
    width:30px;
}


.elmenu{
  display: block;
  position: relative;
  width: 100%;
  max-width: 460px;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 0px;
}

.allmenu{
  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.5);
}

.catimg{
    width:100%;
}

.footer{
  clear: both;
  width: 100%;
  position: relative;
  bottom: 0px;
  padding: 5px 0px;
  text-align: center;
  background: #444;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .85rem;
  margin: 10px 0px 0px 0px;
}

.footer a{
  color: #CCC;
}


/*DISHES*/

.menuflag{
  height: 80px;
  text-align:center;
}

.menuflag img{
    width:100%;
}

.eachdish{
  display: flex;
  justify-content: space-around;
  background: var(--bgdish);
  padding: 9px 5px;
}

.eachdish div{
  border:solid 0px red;
}

.dishdata{
  padding:5px 7px;
  width: 60%;
}

.alone{
  width: 100%;
}

.dishdata h3{
  font-family: 'Roboto Condensed', sans-serif;
  letter-spacing:-.03rem;
  font-size: 1.25rem;
  padding: 0;
  margin: 0;
  display:inline;
}

.dishdata .text{
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  padding:9px 0px;
  line-height: 1.2rem;
  margin-bottom: 4px;
}

.dishdata .text:empty{
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  padding:0px 0px;
  line-height:0rem;
  margin-bottom: 4px;
}

.price{
  position: relative;
  display: inline-block;
  width: auto;  
  background: var(--bgprice);
  color: #fff;
  font-weight: bold;
  font-size: .87rem;
  border-radius: 10px;
  padding: 4px 6px;
  margin-left:5px;
}

.dishimg{
  width: 40%;
  max-height: 440px;
  overflow: hidden;
  background: #fff;
  border-radius: 13px;
}

.dishimg img{
  display: block;
  width: 100%;
  vertical-align: bottom;
  border-radius: 13px;
}

.dishexp{
  background-size: cover;  
  background-repeat: no-repeat;
  overflow: hidden;
}

.exparea{
  width: 100%;
  height: 0;
  padding-bottom: 90%;
}

.exparea a{
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.textesp{
  background: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: .85rem;
  text-align: center;
  padding:9px 0px;
  line-height: 1.2rem;
  margin-bottom: 4px;
}