body {
  font-family: sans-serif;
  font-size: 0.99rem;
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1200px;
  }
}

@media (min-width: 1600px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1200px;
  }
}

.btn_votar {
  background: #f8f8f8;
  padding: 10px;
  border: solid 1px #ccc;
  border-radius: 10px;
}

.form-check-input {
  width: 2em;
  height: 2em;
  margin-top: -4px;
  margin-right: 10px;
}

.card-header {
  background-color: #245ba1;
  color: white;
}

.btn-primary {
  color: #fff;
  background-color: #245ba1;
  border-color: #245ba1;
}

.form-check-input:checked {
  background-color: #245ba1;
  border-color: #245ba1;
}


/* ? ----- Categoria en header del html votos ----- */
.custom-categoria {
  background-color: #d6d6d6; /* gris medio */
  color: #000;
  font-weight: bold;
  margin: 1rem 0;
}


/* ? ----- PORTADA ----- */

.inicia {
  display: none;
}

/* Para navegadores basados en Webkit (Chrome, Edge, Opera, Safari) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Para Firefox */
input[type=number] {
    appearance: textfield;
}


/* Para ocultar las flechas en Firefox */
#documento {
  -moz-appearance: textfield;
  appearance: none;
}

.inicia.mostrar {
  display: block;
}

.portada {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: 0.5s ease-out all;
}

.portada.oculta {
  transform: translateY(100%);
  display: none;
}

.portada .header {
  margin-bottom: 100px;
  letter-spacing: 3px;
}

.portada .header .logotipo {
  font-size: 50px;
  font-size: 900;
  margin-bottom: 20px;
}

.portada .header .mensaje {
  font-size: 30px;
  font-weight: 600;
}

/* ? ----- MAIN ----- */

main {
  max-width: 1000px;
  margin: auto;
  width: 90%;
  padding: 60px 0;
  font-size: 18px;
  line-height: 28px;
  text-align: left;
}

/* ? ----- Cuenta Regresiva ----- */

#cuenta {
  display: flex;
  justify-content: center;
  margin-bottom: 100px;
  width: 100%;
}

.simply-section {
  background: #dcdcdc;
  /* width: 180px; */
  width: 17%;
  height: 180px;
  margin: 0px 14px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.simply-amount {
  display: block;
  /* font-size: 50px; */
  font-size: 5vw;
  font-weight: 700;
  line-height: 59px;
}

.simply-word {
  font-size: 2.5vw;
}

@media screen and (max-width: 600px) {
  .simply-amount {
    font-size: 20px;
  }
  .simply-word {
    font-size: 15px;
  }
}

@media screen and (min-width: 1200px) {
  .simply-amount {
    font-size: 40px;
  }
  .simply-word {
    font-size: 20px;
  }
}

@media screen and (min-width: 1600px) {
  .simply-amount {
    font-size: 50px;
  }
}

.simply-word {
  font-weight: 300;
}

/* ? ---------------------------- */

/* ? ----- REDES SOCIALES ----- */

.redes-sociales .btn-red-social {
  padding: 15px 0;
  display: inline-block;
  min-width: 120px;
  border-radius: 5px;
  background: #ff0000;
  color: #fff;
  font-size: 30px;
  margin: 0 20px;
  transition: 0.3s ease all;
}

.redes-sociales .btn-red-social:hover {
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1100px) {
}

/* Cards de candidatos: misma altura + boton fijo abajo */
.card.text-center > .row > div > .row > [class*="col-"] {
  display: flex;
}
.card.text-center > .row > div > .row > [class*="col-"] > .card {
  flex: 1;
  position: relative;
  padding-bottom: 55px;
}
.card.text-center > .row > div > .row > [class*="col-"] > .card > .card-body > .btn_votar {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}