/* ==========================================================================
   Estilos para Portal Tipo
   ========================================================================== */

/**
 * Definir los colores respetando los contrastes indicados
 */

/* Header
   ========================================================================== */

.Header-logo img {
  max-width: 200px;
}

@media screen and (min-width: 992px) {
  .Header-logo img {
    max-width: 100%;
  }
}

/* Menu Principal
   ========================================================================== */

.Nav {
  background-color: #0f4d98; /* contraste con blanco (*1) */
}

.Nav-subnav,
.Nav-item.hover,
.Nav-item.hover > a,
.Nav-item > a:hover {
  background-color: #29446d; /* oscurecer color de fondo (*1) */
}

.Nav-subnav a:hover {
  background-color: #223859;
}

@media screen and (min-width: 992px) {
  .Nav-subnav {
    border-bottom: 4px solid #29446d;
  }
}

/* Colores de contenedores
   ========================================================================== */

.Group--color1,
.Date-month,
.Box--color1 {
  background-color: #0f4d98; /* constraste con blanco */
}

.Group--color2,
.Box--color2 {
  background-color: #25AAE2; /* constraste con negro */
}

.Group--color3,
.Box--color3 {
  background-color: #4a7abd; /* contraste con blanco */
}

/* Hero
   ========================================================================== */

.Hero--circle {
  background-color: #4a7abd; /* contraste con blanco */
}

.Hero:before {
  opacity: .5;
  background-color: #4a7abd; /* color de capa de opacidad */
}

/* Footer
   ========================================================================== */

.Footer-nav {
  background-color: #4a7abd; /* (*1) */
}

.Footer-links {
  border-bottom-color: #4a7abd; /* usar mismo color que el fondo (*1) */
}

/* Box Form
   ========================================================================== */

.Box--form .Form-group {
  margin-bottom: 1.25em;
}

/* Vencimientos
   ========================================================================== */

.Vencimiento {
  font-weight: 700;
  color: #b67029;
}

/**
 * Cambios específicos mi Departamento
 */

.Box-mediaList--small li {
  padding-bottom: 1rem;
  padding-top: 1rem;
}


@media screen and (min-width: 992px) {
  .Grid--equalsBoxes .Box {
    min-height: 342px;
  }
}

@media screen and (max-width: 480px) {
  .Hero--circle img{
  display: none; /* saca la img del hero en moviles */
	}
.Hero-footnote--light{
  display: none; /* saca descripcion hero en moviles */
	}
}