body {
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* HEADER */
.dropend:hover > .dropdown-menu {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

.linkCategoria {
  background: rgba(16, 44, 105, 0.753);
}

.linkCategoria:hover {
  background: rgba(22, 89, 165, 0.753);
}

/* BANNER */
div.contenedorInicioImagenes {
  background-color: #00000054;
  backdrop-filter: blur(3px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  text-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.banner-inicio-info {
  text-shadow: 1px 2px 4px #414141b9;
  z-index: 100 !important;
}

span.banner-inicio-info {
  font-size: 1em;
}

.banner-fachada-img {
  position: absolute;
  z-index: 10 !important;
  bottom: 0;
  margin-bottom: -5em;
  margin-left: -1em;
  opacity: 0;
  filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
}

.banner-cuadricula-inicio {
  width: 45% !important;
  flex-grow: 1;
  border-radius: 1rem !important;
}

.banner-cuadricula-inicio:hover .banner-fachada-img {
  transition: all ease-out 0.5s;
  transform: scale(1.5) translateY(-15px);
  animation: fachada 1s forwards;
}

@keyframes fachada {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100;
  }
}

.banner-cuadricula-inicio:hover .banner-inicio-img {
  transition: all ease-out 0.5s;
  transform: scale(1.2);
  filter: blur(5px);
}

.banner-cuadricula-inicio:hover .banner-inicio-info {
  z-index: 100 !important;
  transition: all ease-out 0.5s;
  transform: scale(1.2);
}

/* BANNER PROMOCION */
div#bannerPromocional {
  position: relative;
  z-index: 1;
  width: 100%;
}

div#bannerPromocional img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: -1;
  top: 0;
  left: 0;
}

div#bannerTexto {
  position: absolute;
  z-index: 10;
  background: linear-gradient(to right, #00000000, #000000bb);
}

#btnPromocion {
  transform: scale(1.3);
}

.cardGrid {
  width: 24rem;
  height: 16rem;
}

.cardGrid {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

div.cardCategorias {
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.cardGrid:hover {
  transform: scale(1.05);
}

/* GRID CATEGORIAS */
div.cardCategorias img {
  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out;
}

div.cardCategorias:hover img {
  transform: scale(1.1);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
}

.cardGrid:hover div.contenedorInicioImagenes {
  backdrop-filter: none;
}

/* DESTACADOS */
div.cards-inicio {
  width: 97vw;
}

.cardDestacado {
  /* width: 18rem; */
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

p.descripcionDestacados {
  width: 100%;
  height: 5rem;
  line-height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -moz-box;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.cardProducto {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

div.cardDestacado:hover,
.cardProducto:hover {
  transform: translateY(-10px);
  background: #00000023;
}

/* INFORMACION RAPIDA EN VISTA GRID */
.infoGrid {
  font-size: smaller;
}

/* RANKING DE ESTRELLAS */
.star-rating .fa-star {
  font-size: 1.5rem;
  color: rgb(243, 220, 14);
  text-shadow: #ccc 1px 1px 3px;
}

/* CARRUSEL DE IMAGENES */
.thumbnail-container img {
  cursor: pointer;
}

/* MODULOS AGREGAR PRODUCTOS */
span.ancho {
  width: 3rem;
}

/* SUBIR IMAGENES PRODUCTOS */
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-container img {
  min-width: 100%;
  object-fit: cover;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.button-container-imagenes {
  padding: 10px 0;
  width: 100%;
  text-align: center;
}

.button-container-imagenes button {
  padding: 7px 18px;
  border: none;
  border-radius: 3px;
  background: #1976d2;
  color: #fff;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

.button-container-imagenes button:hover {
  background: #2780da;
}

.container-imagenes {
  display: inline-block;
  width: 80%;
  padding: 20px;
}

.images-cards figure {
  position: relative;
}

.images-cards img {
  height: 240px;
}

.images-cards figure figcaption {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 20%;
  height: 20%;
  align-items: center;
  justify-content: center;
  background: rgba(213, 8, 8, 0.4);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

.images-cards figure:hover figcaption {
  opacity: 1;
}

#Images .add-new-photo {
  display: flex;
  border: 4px dashed #3c8dbc;
  height: 100%;
  min-height: 240px;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #3c8dbc;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

#Images .add-new-photo.first:hover {
  /* background: rgba(255, 255, 255, 0.17); */
  background: #3c8dbc22;
}

#add-photo-container input {
  display: none;
}

#Images .text-add-new-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  transition: 0.3s all ease;
}

#Images .add-new-photo.first:hover .text-add-new-photo {
  color: #164c6bd3;
}

#Images .add-new-photo span {
  font-size: 1.5rem;
  font-weight: 600;
  /* color: #666; */
}

#Images .add-new-photo .add-photo-icon {
  font-size: 5rem;
}

.titulo-previsualizar h2 {
  text-align: center;
  font-weight: 600;
  margin-bottom: 2.2rem;
}

.Contenido-Modal {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.Contenido-Modal span {
  font-size: medium;
}

#add-photo-container,
.ImagenPrevisualizar {
  margin: 2rem 0;
}

/* MODAL ORDENAR FOTOS */

img.mini-fotos {
  border: 2px solid #3c8dbc;
  aspect-ratio: 4/3;
  width: 100%;
  background-size: cover;
  box-shadow: 2px 2px 4px #00000038;
  cursor: pointer;
}

div.img-preview-orden {
  position: relative;
  z-index: 10;
  margin: 10px 0;
}

button.after-btn {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000038;
}

button.after-btn {
  display: none;
}

button.num-focus {
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 44px;
  cursor: pointer;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

div.img-preview-orden figure figcaption {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  /* display: flex; */
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 44px;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

div.img-preview-orden figure figcaption:hover {
  opacity: 1;
}

span.numero-orden-imagen {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 25%;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
  color: #fff;
  background-color: #3d3d3d85;
  box-shadow: 2px 2px 4px #00000038;
}

/* BOTÓN ELIMINAR IMAGEN */

.contenedorFotos button.btnEliminarImagen {
  position: absolute;
  z-index: 25;
  top: 0;
  right: 15px;
  display: flex;
  width: 18%;
  height: 18%;
  align-items: center;
  justify-content: center;
  background: rgba(209, 6, 6, 0.842);
  color: #ffffff;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
}

.contenedorFotos:hover button.btnEliminarImagen {
  opacity: 1;
}

/* GRID */

.row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.flex-center {
  align-self: center !important;
}

@media (max-width: 768px) {
  .hide-xs {
    display: none !important;
  }

  .c-1-xs,
  .c-10-xs,
  .c-11-xs,
  .c-12-xs,
  .c-2-xs,
  .c-3-xs,
  .c-4-xs,
  .c-5-xs,
  .c-6-xs,
  .c-7-xs,
  .c-8-xs,
  .c-9-xs {
    display: inline-block;
    align-self: flex-end;
  }
  .c-1-xs {
    flex: 0 0 8.333333333333333%;
  }
  .c-2-xs {
    flex: 0 0 16.66666666666667%;
  }
  .c-3-xs {
    flex: 0 0 25%;
  }
  .c-4-xs {
    flex: 0 0 33.33333333333333%;
  }
  .c-5-xs {
    flex: 0 0 41.66666666666667%;
  }
  .c-6-xs {
    flex: 0 0 50%;
  }
  .c-7-xs {
    flex: 0 0 58.33333333333334%;
  }
  .c-8-xs {
    flex: 0 0 66.66666666666667%;
  }
  .c-9-xs {
    flex: 0 0 75.00000000000002%;
  }
  .c-10-xs {
    flex: 0 0 83.33333333333333%;
  }
  .c-11-xs {
    flex: 0 0 91.66666666666666%;
  }
  .c-12-xs {
    flex: 0 0 100%;
  }
  .visible-xs {
    display: inline-block !important;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .hide-sm {
    display: none !important;
  }

  .c-1-sm,
  .c-10-sm,
  .c-11-sm,
  .c-12-sm,
  .c-2-sm,
  .c-3-sm,
  .c-4-sm,
  .c-5-sm,
  .c-6-sm,
  .c-7-sm,
  .c-8-sm,
  .c-9-sm {
    display: inline-block;
    align-self: flex-end;
  }
  .c-1-sm {
    flex: 0 0 8.333333333333333%;
  }
  .c-2-sm {
    flex: 0 0 16.66666666666667%;
  }
  .c-3-sm {
    flex: 0 0 25%;
  }
  .c-4-sm {
    flex: 0 0 33.33333333333333%;
  }
  .c-5-sm {
    flex: 0 0 41.66666666666667%;
  }
  .c-6-sm {
    flex: 0 0 50%;
  }
  .c-7-sm {
    flex: 0 0 58.33333333333334%;
  }
  .c-8-sm {
    flex: 0 0 66.66666666666667%;
  }
  .c-9-sm {
    flex: 0 0 75.00000000000002%;
  }
  .c-10-sm {
    flex: 0 0 83.33333333333333%;
  }
  .c-11-sm {
    flex: 0 0 91.66666666666666%;
  }
  .c-12-sm {
    flex: 0 0 100%;
  }
  .visible-sm {
    display: inline-block !important;
  }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .hide-md {
    display: none !important;
  }

  .c-1-md,
  .c-10-md,
  .c-11-md,
  .c-12-md,
  .c-2-md,
  .c-3-md,
  .c-4-md,
  .c-5-md,
  .c-6-md,
  .c-7-md,
  .c-8-md,
  .c-9-md {
    display: inline-block;
    align-self: flex-end;
  }
  .c-1-md {
    flex: 0 0 8.333333333333333%;
  }
  .c-2-md {
    flex: 0 0 16.66666666666667%;
  }
  .c-3-md {
    flex: 0 0 25%;
  }
  .c-4-md {
    flex: 0 0 33.33333333333333%;
  }
  .c-5-md {
    flex: 0 0 41.66666666666667%;
  }
  .c-6-md {
    flex: 0 0 50%;
  }
  .c-7-md {
    flex: 0 0 58.33333333333334%;
  }
  .c-8-md {
    flex: 0 0 66.66666666666667%;
  }
  .c-9-md {
    flex: 0 0 75.00000000000002%;
  }
  .c-10-md {
    flex: 0 0 83.33333333333333%;
  }
  .c-11-md {
    flex: 0 0 91.66666666666666%;
  }
  .c-12-md {
    flex: 0 0 100%;
  }
  .visible-md {
    display: inline-block !important;
  }
}

@media (min-width: 1200px) {
  .hide-lg {
    display: none !important;
  }

  .c-1-lg,
  .c-10-lg,
  .c-11-lg,
  .c-12-lg,
  .c-2-lg,
  .c-3-lg,
  .c-4-lg,
  .c-5-lg,
  .c-6-lg,
  .c-7-lg,
  .c-8-lg,
  .c-9-lg {
    display: inline-block;
    align-self: flex-end;
  }
  .c-1-lg {
    flex: 0 0 8.333333333333333%;
  }
  .c-2-lg {
    flex: 0 0 16.66666666666667%;
  }
  .c-3-lg {
    flex: 0 0 25%;
  }
  .c-4-lg {
    flex: 0 0 33.33333333333333%;
  }
  .c-5-lg {
    flex: 0 0 41.66666666666667%;
  }
  .c-6-lg {
    display: inline-block;
    flex: 0 0 50%;
  }
  .c-7-lg {
    flex: 0 0 58.33333333333334%;
  }
  .c-8-lg {
    flex: 0 0 66.66666666666667%;
  }
  .c-9-lg {
    flex: 0 0 75.00000000000002%;
  }
  .c-10-lg {
    flex: 0 0 83.33333333333333%;
  }
  .c-11-lg {
    flex: 0 0 91.66666666666666%;
  }
  .c-12-lg {
    flex: 0 0 100%;
  }
  .visible-lg {
    display: inline-block !important;
  }
}

/* MODALS */

/* Modal */

section.captaciones-imagenes .modal {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block !important;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  z-index: -1;
  transition: 0.3s all ease;
}

section.captaciones-imagenes .modal.show {
  opacity: 1;
  z-index: 10;
}

section.captaciones-imagenes .modal .modal-main {
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: -100%;
  left: 0;
  padding: 0 5px;
  transition: 0.3s all ease;
}

section.captaciones-imagenes .modal.show .modal-main {
  top: 0;
}

section.captaciones-imagenes .modal .modal-main .row {
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 50px !important;
}

section.captaciones-imagenes .modal .modal-main .row > div {
  align-self: stretch !important;
}

section.captaciones-imagenes .modal .modal-main .modal-card {
  padding: 15px;
  display: none;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
  margin: 50px;
}

/* Loader */

#loading {
  color: #696969;
  text-align: center;
}

#loading .preloader {
  display: inline-block;
  width: 70px;
  height: 70px;
  border: 10px solid #eee;
  border-top: 10px solid #666;
  border-radius: 50%;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: loading;
}

#loading .tag {
  font-size: 16px;
  display: inline-block;
  width: 100%;
  margin-top: 8px;
}

@keyframes loading {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

/* RESPONSIVE */

@media (max-width: 1024px) {
  .banner-cuadricula-inicio {
    width: 100vw !important;
  }

  .banner-inicio-info {
    width: 100% !important;
    left: 15% !important;
    bottom: 10% !important;

    & h2.titulo-info-banner {
      width: 100% !important;

      font-size: 1.3rem !important;
    }
  }
}