@font-face{font-family: 'titulosCarta'; src:url('fonts/droidserif-italic-webfont.eot'); src:local('☺'), url('fonts/droidserif-italic-webfont.woff') format('woff'), url('fonts/droidserif-italic-webfont.ttf') format('truetype'), url('fonts/droidserif-italic-webfont.svg') format('svg');}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
a, a:hover, a:focus, a:active{
  text-decoration: none;
  color: inherit;
}

body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: max(14px, 2vh);
  background: url('/images/bg.jpg') repeat;
  color: #525252;
}

.head-wrap{
  background-color: rgba(230,230,230,0.9);
  border-bottom: solid 0.4em #CCC;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0);
  animation: headerin 1s;
  z-index: 10;
}

header.menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10vh;
  overflow: hidden;
}

.logo-menu{
  width: 40%;
  position: relative;
}
.logo-menu img{
  width: 100%;
}


.menu-head{
  height: 100%;
  position: relative;
  list-style: none;
  display: flex;
  text-transform: uppercase;
  display: none;
  align-items: center;
  font-size: 0.55em;
  margin-top: 4vw;
}
.menu-head .space{
  padding: 0 1em;
  font-size: 0.6em;
  color: #999;
}
.menu-head li:hover{
  color: white;
}
.menu-space{
  height: 10vh;
}



.slide{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.slide img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  transition: all linear 2s;
  transition-delay: 100ms;
}
.slide img.out{
  opacity: 0;
  z-index: 1;
}

.full-page{
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}

.home-swiper {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
.swiper-slide {
  height: 100%;
  text-align: center;
  font-size: 18px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

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

.container-center{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-fluid{
  width: 96%;
}



#menu-mobile{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 20;
  overflow: hidden;
  visibility: hidden;
}
#menu-mobile.show{
  visibility: visible;
}
.menu-mobile-wrapper{
  width: 100%;
  height: 100%;
  position: relative;
}
.menu-mobile-wrapper>#bg-mobile{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all ease-in-out 600ms;
  opacity: 0;
}
.menu-mobile-wrapper>#bg-mobile.show{
  opacity: 1;
}
.menu-mobile-wrapper>#options-mobile{
  position: absolute;
  left: -75%;
  width: 75%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: whitesmoke;
  padding: 2em;
  list-style: none;
  overflow-y: auto;
  transform: translateX(0);
  transition: all ease-in-out 300ms;
  z-index: 1;
  text-transform: uppercase;
}
.menu-mobile-wrapper>#options-mobile.show{
  transform: translateX(100%);
}
.menu-mobile-wrapper>#options-mobile .logo{
  text-align: center;
}
.menu-mobile-wrapper>#options-mobile .logo img{
  width: 80%;
}
.menu-mobile-wrapper>#options-mobile>li{
  display: flex;
  justify-content: center;
  text-align: center;
  border-bottom: solid thin #DDD;
}
.menu-mobile-wrapper>#options-mobile>li>a{
  flex: 1;
  padding: 1em 0;
}



.data-wrap{
  margin-top: calc(10vh + 0.4em);
  height: calc(90vh - 0.4em);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact{
  gap: 2em;
  flex-wrap: wrap;
  padding: 3em 0;
}
.contact video{
  height: auto;
  width: 80%;
  border: solid thin darkgray;
}



.carta-menu-wrap{
  display: grid;
  grid-template-rows: auto 1fr;
  height: 89vh;
  margin-top: 11vh;
}
#categories{
  border-bottom: thin solid #CCC;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  overflow-x: auto;
  font-size: 0.9em;
}
#categories:empty{
  border-bottom: none;
}
.category{
  padding: 1.2em 0.8em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.category:hover{
  color: black;
}
.category::after{
  content: "|";
  position: absolute;
  right: -0.3em;
}
.category:last-child::after{
  content: "";
}
.carta-menu{
  height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
}
#carta{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1em;
  width: 90%;
  margin: auto;
}
.carta-section{
  padding: 1em 0;
}
.titulo-carta{
  padding-bottom: 1%;
  border-bottom: thick solid #525252;
  margin-bottom: 20px;
  font-family: titulosCarta;
  font-size: 1.2em;
}
.plato-primera{overflow:auto}
.titulo-plato{font-family:titulosCarta; padding:2% 0px 0px 2%; color:#5A8090; float:left}
.precio-plato{font-family:titulosCarta; padding:2% 2% 0px 2%; color:#5A8090; float:right}
.descrip-plato{padding:0px 0px 1% 2%; color:#AAAFB5; font-size:smaller}
.media-porcion{color:#5A8090; font-family:titulosCarta}

.fotos-mini img{height:1.8em; margin-top:-0.2em; border:thin solid #525252; margin-left:0.2em; cursor:pointer}
.fotos-mini img:hover{border:thin solid #CCC;}
.gallery{display: block;float: right;}

#contact-data{text-align: center;}
#contact-mail{font-size:1.2em; margin-bottom:0.2em; color:#333; }


#foot-momentos{
  position:absolute;
  bottom:1.5em;
  right:1.5em;
  padding:1.5em;
  font-size:1.2em;
  z-index:1;
  background:#FFF;
  border:thin solid #CCC;
  font-family:'titulosCarta';
  font-size: 0.8em;
  max-width: calc(100% - 3em);
}

.full-content{
  width: 100%;
  height: 100%;
}

#nosotros{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 75vw auto;
  gap: 0;
  padding: 0;
  overflow: auto;
}

#nosotros .data{
  overflow:visible;
  background:rgba(255,255,255,0.7);
  font-size: 0.9rem;
  padding: 1.5em;
}

#pay-btn{
  position: absolute;
  z-index: 1;
  width: 50%;
  top: 70%;
  left: 0;
  transform: translate(-10%, 0);
}
#pay-btn[data-page="menu"]{
  display: none;
}



.scroll-hide::-webkit-scrollbar {
  width: 0px;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll-hide {
  scrollbar-width: thin;
}

.no-select{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mediaPorcion{
  color:#5A8090; 
  font-family:titulosCarta
}

@keyframes headerin {
  from{transform: translateY(-100%)}
  to{transform: translateY(0);}
}


@media (orientation: landscape) {
  body {
    font-size: clamp(16px, 1vw + 8px, 100px);
  }

  #menu-burguer{
    display: none;
  }

  header.menu{
    height: 6vw;
  }
  .menu-head{
    display: flex;
  }
  .logo-menu{
    width: 20%;
  }
  .menu-space{
    height: 7vw;
  }


  .carta-menu-wrap, .data-wrap{
    margin-top: 6.5vw;
    height: calc(100vh - 6.5vw);
  }
  #categories{
    justify-content: center;
    font-size: 0.4em;
  }
  .category{
    padding: 2em 0.8em;
  }
  
  #carta{
    width: 65%;
    grid-template-columns: 1fr 1fr;
  }
  .titulo-carta{font-size: 0.8em;}
  .plato{font-size: 0.6em;}

  #contact-data{
    font-size: 0.8em;
  }

  #foot-momentos{
    font-size: 0.5em;
  }

  #nosotros{
    width: 100%;
    height: 100%;
    grid-template-columns: 6fr 3fr;
    grid-template-rows: 1fr;
    gap: 1em;
    padding: 2em;
  }
  #nosotros .data{
    overflow:auto;
    font-size: 0.7rem;
    padding: 1.5em;
  }

  #pay-btn{
    width: 16%;
    top: 52%;
    left: 0;
    transform: translate(-11%, 0);
  }
  #pay-btn[data-page="menu"], #pay-btn[data-page="momentos"]{
    display: block;
  }


  .container-fluid{
    width: 65%;
  }

  .contact{
    overflow: hidden;
    gap: 4em;
    flex-wrap: nowrap;
    padding: 0;
  }
  .contact video{
    height: 80%;
    width: auto;
  }
}