body {
  padding: 0;
  margin: 0;
  font-family: "Teachers", sans-serif;
}

.kt-animate-bounce {
  animation: bounce 2s ease;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.kt-tp-elegirnos .card {
  transition: 0.3s;
}
.kt-tp-elegirnos .card:hover {
  transform: scale(1.05);
}

.kt_tp_bg_lg_navbar {
  background: #000066;
}

@media (min-width: 992px) {
  .kt_tp_bg_lg_navbar {
    background: linear-gradient(to right, #000066 50%, #00006600 50%),
      linear-gradient(to bottom, #cc0000 38px, #000066 38px);
  }
}


/* BARRA  */

  .ProgressBar {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.ProgressBar-step {
    text-align: center;
    position: relative;
    width: 100%;
}

.ProgressBar-step:before,
.ProgressBar-step:after {
    content: "";
    height: 0.5em;
    background-color: #9F9FA3;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: -50%;
    top: 50%;
    transform: translateY(-50%);
}

.ProgressBar-step:first-child:before,
.ProgressBar-step:first-child:after {
    display: none;
}

.ProgressBar-step:after {
    background-color: #cc0000;
    width: 0%;
}

.ProgressBar-step.is-complete+.ProgressBar-step.is-complete:after {
    width: 100%;
}

.ProgressBar-icon {
    width: 2em;
    height: 2em;
    background-color: #9F9FA3;
    fill: #9F9FA3;
    border-radius: 50%;
    padding: 0.5em;
    max-width: 100%;
    z-index: 10;
    position: relative;
    transition: all .25s ease-out;
}

.is-complete .ProgressBar-icon {
    fill: #DBF1FF;
    background-color: #000066;
}

/* Estilos para pantallas más pequeñas, como celulares */
@media (max-width: 767px) {
    .ProgressBar {
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }

    .ProgressBar-step {
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .ProgressBar-step:before,
    .ProgressBar-step:after {
        height: 100%;
        width: 0.5em;
        top: 0;
        left: 50%;
        /* transform: translateX(-50%); */
    }

    .ProgressBar-step:first-child:before,
    .ProgressBar-step:last-child:after {
        display: none;
    }

    .ProgressBar-step:after {
        background-color: #cc0000;
        width: 10px !important;
        height: 0%;
  
    }

    .ProgressBar-step.is-complete+.ProgressBar-step.is-complete:after {
        height: 100%;
    }

    .ProgressBar-icon {
        margin: auto;
        /* justify-content: center; */

    }
}