@charset "utf-8";
:root {
  --color-negro       : #333;
  --color-blanco      : #EEE;
  --color-verde       : #00603A;
  --color-verde-claro : #9EC878;
  --color-amarillo    : #F8C12C;
  --color-gris        : #474747;
  --color-gris-claro  : #727272;
  --color-celeste     : #36A8E0;
}
.bg-verde {
  background-color : var(--color-verde);
}
.color-verde {
  color : var(--color-verde);
}
.border-verde {
  border-color : var(--color-verde);
}
.bg-verde-claro {
  background-color : var(--color-verde-claro);
}
.color-verde-claro {
  color : var(--color-verde-claro);
}
.border-verde-claro {
  border-color : var(--color-verde-claro);
}
.bg-amarillo {
  background-color : var(--color-amarillo);
}
.color-amarillo {
  color : var(--color-amarillo);
}
.border-amarillo {
  border-color : var(--color-amarillo);
}
.bg-gris {
  background-color : var(--color-gris);
}
.color-gris {
  color : var(--color-gris);
}
.border-gris {
  border-color : var(--color-gris);
}
.bg-gris-claro {
  background-color : var(--color-gris-claro);
}
.color-gris-claro {
  color : var(--color-gris-claro);
}
.border-gris-claro {
  border-color : var(--color-gris-claro);
}
.bg-celeste {
  background-color : var(--color-celeste);
}
.color-celeste {
  color : var(--color-celeste);
}
.border-celeste {
  border-color : var(--color-celeste);
}
textarea {
  resize      : none;
  form-sizing : content;
  min-height  : 1em;
}
/** ajustes solo para ios **/
@supports (-webkit-overflow-scrolling: touch) {
  /*
    Al seleccionar un campo de ingreso de texto, o un select, en browser realiza un zoom. (iphone)
    http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone 
  */
  select,
  textarea,
  input {
    font-size : 16px !important;
  }

  /** reseteo apariencia de botones ios **/
  input[type="button"],
  input[type="submit"] {
    -webkit-appearance : none;
  }
}
.videoWrapper {
  position       : relative;
  /* 16:9 */
  padding-bottom : 56.25%;
  /* 4:3 */
  /*padding-bottom : 75%; */
  padding-top    : 0;
  height         : 0;
}
.videoWrapper iframe {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}
/*---- aspectRatios ----*/
.aspectRatio43,
.aspectRatio1,
.aspectRatio169,
.aspectRatio168,
.aspectRatio167,
.aspectRatio166,
.aspectRatio165,
.aspectRatio164 {
  position : relative;
}
:is(
  .aspectRatio43,
.aspectRatio1,
.aspectRatio169,
.aspectRatio168,
.aspectRatio167,
.aspectRatio166,
.aspectRatio165,
.aspectRatio164):before {
  display : block;
  content : " ";
  width   : 100%;
}
.aspectRatio1:before {
  padding-top : 100%;
}
.aspectRatio43:before {
  padding-top : calc((3 / 4) * 100%);
  /*padding-top : 75%;*/
}
.aspectRatio169:before {
  padding-top : calc((9 / 16) * 100%);
}
.aspectRatio168:before {
  padding-top : calc((8 / 16) * 100%);
}
.aspectRatio167:before {
  padding-top : calc((7 / 16) * 100%);
}
.aspectRatio166:before {
  padding-top : calc((6 / 16) * 100%);
}
.aspectRatio165:before {
  padding-top : calc((5 / 16) * 100%);
}
.aspectRatio164:before {
  padding-top : calc((4 / 16) * 100%);
}
.backCover {
  background-position : center;
  background-size     : cover;
  background-repeat   : no-repeat;
}
:is(input[type=password],
input[type=text]).verificado {
  border     : none;
  box-shadow : 0 0 7px green;
}
:is(input[type=password],
input[type=text]).incorrecto {
  border        : 1px solid red;
  border-radius : 2px;
  box-shadow    : 0 0 7px red

}
.mid-articulos .list a span.thumbnail {
  background-size     : cover;
  background-position : center;
  background-repeat   : no-repeat;
  display             : block;
}
.bodymask {
  background-color : #FFF;
  display          : none;
  position         : fixed;
  top              : 0;
  left             : 0;
  z-index          : 1000;
  opacity          : .7;
}
.paginacion span,
.paginacion a {
  color            : #FFF;
  text-decoration  : none;
  margin           : 5px;
  background-color : #658582;
  padding          : 5px 10px;
  transition       : .5s;
}
.paginacion a:hover,
.paginacion span {
  background-color : #FFF !important;
  color            : #658582;
  transition       : .5s;
}
.paginacion span {
  border : 1px solid #658582;
}
.owl-nav {
  position : absolute;
  bottom   : 29px;
  left     : 0;
}
.owl-prev,
.owl-next {
  background-color : #333 !important;
}
.owl-dots {
  position : absolute;
  bottom   : 0;
}
#cboxTitle {
  position   : absolute;
  top        : -22px;
  left       : 0;
  color      : #EEE;
  background : #FFF;
  padding    : 0 5px 0 5px;
  font-size  : 14px;
}
#cboxTitle .btnGoFullScreen {
  color : #333;
}
:is(textarea,
select,
input)[data-validation-engine^="validate[required"] {
  background-color : #FFE8E8;
}
@media (min-width : 576px) {
  .aspectRatio-sm-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}
@media (min-width : 768px) {
  .aspectRatio-md-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }


}
@media (min-width : 992px) {
  header {
    position         : fixed;top : 0;left : 0;width : 100%;z-index : 1111111;
    background-color : #FFF;
  }

  .mid-portada {
    margin-top : 180px;
  }

  .steps {
    display : flex !important;

  }

  .step {
    width : 20%;
  }

  .aspectRatio-lg-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}
@media (min-width : 1200px) {
  .aspectRatio-xl-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}
@media (min-width : 1400px) {
  .aspectRatio-xxl-none:before {
    display     : none !important;
    padding-top : 0 !important;
  }
}
.card .card-title i.fa-chevron-up {
  display : none;
}
.card .card-title i.fa-chevron-down {
  transition : .5s;
  transform  : rotate(0deg);
}
.card :is(.card-body,
.card-footer) {
  display : none;
}
.card.active :is(.card-body,
.card-footer) {
  display : block;
}
.card.active .card-title i.fa-chevron-up {
}
.card.active .card-title i.fa-chevron-down {
  transition : .5s;
  transform  : rotate(180deg);
}
.btnOpenCard {
  display : none;
}
.w-1 {
  width : 1px;
}
.steps {
  display     : block;
  font-size   : .75em;
  font-weight : bold;
}
.step div.text {
  background-color : var(--color-verde-claro);
  color            : var(--color-negro);
  padding          : .5em 1em;
  display          : block;
  width            : 100%;
  min-height       : 3em;
  line-height      : 2em;
}
.step.active div.text {
  background-color : var(--color-verde);
  color            : var(--color-blanco);
}
tr.color-gris-claro * {
  color : var(--color-gris-claro) !important;
}
tr.color-gris-claro.active * {
  color       : var(--color-negro) !important;
  font-weight : bold;
}
.card-body .selectSector table td a {
  filter     : grayscale(100%) brightness(130%);
  transition : .5s;
  border     : 1px solid white;
  display    : block;
}
.card-body .selectSector table td a.btnSectorTable {
  filter : grayscale(100%) brightness(100%) contrast(80%);
}
.card-body .selectSector table td a.btnSectorTable:hover {
  transition : .5s;
  filter     : grayscale(0) brightness(100%) contrast(100%) invert(1);
  border     : 1px solid black;
}
header .step div.chevron {
  float   : right;
  display : none;
}
header .step.active div.chevron {display : block}

.backImage8 {
  background-image  : url(/imagenes/Mesas8Personas.jpg);
  background-repeat : no-repeat;
  background-size   : 100%;
  width             : 360px;
  height            : 177px;
  display           : inline-block;
}
.mesas {
}
.backImage8 .mesas {
  width    : 245px;
  height   : 80px;
  top      : 90px;
  position : relative;
  left     : 60px
}
.backImage8 .mesas td {
  border     : 1px solid;
  text-align : center;
}
.backImage8 .mesas td a {
  display          : inline;
  background-color : green;
  color            : white;
  text-decoration  : none;
  padding          : 5px 5px;
}

.backImage4 {
  background-image  : url(/imagenes/Mesas4Personas.jpg);
  background-repeat : no-repeat;
  background-size   : 100%;
  width             : 360px;
  height            : 178px;
  display           : inline-block;
  font-size         : 12px
}
.backImage4 .mesa4bottom,
.backImage4 .mesa4bottom td,
.backImage4 .mesa4top,
.backImage4 .mesa4top td {padding : 0;margin : 0;border : none !important;}

.backImage4 .mesa4top {
  width    : 170px;
  height   : 50px;
  top      : 45px;
  position : absolute;
  right    : 27px;
}
.backImage4 .mesa4bottom {
  width    : 300px;
  height   : 65px;
  bottom   : 5px;
  position : absolute;
  left     : 0;
}
.backImage4 .mesas td {
  border     : 1px solid;
  text-align : center;
}

.backImage4 .mesa4top td a {
  display          : inline;
  background-color : green;
  color            : white;
  text-decoration  : none;
  padding          : 2px 4px;
  font-size        : 10px;
}

.backImage4 .mesa4bottom td a {
  display          : inline;
  background-color : green;
  color            : white;
  text-decoration  : none;
  padding          : 2px 4px;
  font-size        : 10px;
}
a.mesa.selected {
  background-color : yellow !important;
  color            : black!important;
}
a.mesa.reservada {
  background-color : red !important;
}
.mesa.reservada {
  cursor : not-allowed;
}
.alertify {z-index : 11111111;}
.total {
  position         : fixed;
  box-shadow       : 0 0 5px #9EC878;
  border-radius    : 6px;
  background-color : #FFF;
  text-align       : center;
  /* min-width: 4em; */
  /* min-height: 4em; */
  bottom           : 1em;
  right            : 1em;
  color            : #00603A;
  padding          : 1em 2em;
  font-weight      : bold;
  text-transform   : uppercase;
}
@media (max-width : 576px) {
  .ajs-content .table.table-sm,
  .ajs-content .table.table-sm tbody,
  .ajs-content .table.table-sm thead,
  .ajs-content .table.table-sm tfoot,
  .ajs-content .table.table-sm tr,
  .ajs-content .table.table-sm td,
  .ajs-content .table.table-sm th {
    display    : block;
    width      : 100%;
    min-height : 1em;
  }

  .ajs-content .table.table-sm tr {margin-bottom : .5em;}
}