/* CSS con modificaciones */

/* Color de Fondo */

.bg-celeste-change{
  background-color: #ffffff !important;
}

/* Transiciones de Color */

.bg-celeste-change-custom{
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  border-width: 4px !important;
  color: #ffffff !important;
  transition: background-color 0.5s;
}

.bg-celeste-change-custom:hover{
  background-color: #d3cec9 !important;
  border-color: #ffffff !important;
  border-width: 4px !important;
  color: #ffffff !important;
}

.bg-azul-custom-change{
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  border-width: 4px !important;
  color: #ffffff !important;
  transition: background-color 0.5s;
}

.bg-azul-custom-change:hover{
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  border-width: 4px !important;
  color: #ffffff !important;
}

/* Color de Texto */

.text-celeste-change{
  color: #004080 !important;
}

.bg_product {
  background-image: url("../images/fondoproducto.png");
  background-color: #cccccc;
}

/* Screen Media */

/* Estilos para pantallas extra grandes */
@media (min-width: 1200px) {
  /* Agrega aquí los estilos que deseas aplicar en pantallas extra grandes */
  .div-relleno-celeste-change{
    background: linear-gradient(to bottom, transparent 25%, #ffffff 25%, #ffffff 75%, transparent 75%);
  }
}

/* Estilos para pantallas grandes */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Agrega aquí los estilos que deseas aplicar en pantallas grandes */
  .div-relleno-celeste-change{
    background: linear-gradient(to bottom, transparent 25%, #ffffff 25%, #ffffff 75%, transparent 75%);
  }
}

/* Estilos para pantallas medianas */
@media (min-width: 768px) and (max-width: 991px) {
  /* Agrega aquí los estilos que deseas aplicar en pantallas medianas */
  .div-relleno-celeste-change{
    background: #ffffff;
  }
}

/* Estilos para pantallas pequeñas */
@media (max-width: 767px) {
  /* Agrega aquí los estilos que deseas aplicar en pantallas pequeñas */
  .div-relleno-celeste-change{
    background: #ffffff;
  }
}