.card-transition {
  --stop: 0;
  --stop2: 0;
  --innerh2: #D22216;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.4s ease;
  z-index: 99;
  pointer-events: none;
  background: #aafa96;
  background: linear-gradient(to right, #d22216 var(--stop2), #aafa96 var(--stop));
}
.card-transition h2 {
  font-size: 5vw;
  transition: 0.8s ease;
  margin: 0;
}
.card-transition .txt-front {
  width: 100%;
  position: absolute;
  margin-top: -4vh;
  text-align: center;
  z-index: 2;
}
.card-transition .txt-front .ki-msg {
  color: var(--innerh2);
  -webkit-text-stroke: 0 var(--innerh2);
}
.card-transition .txt-front .kiProgress {
  -webkit-text-stroke: 1px var(--innerh2);
}
.card-transition .txt-front .kiProgress:after {
  content: attr(data-progress) "%";
  display: block;
}
.card-transition .txt-back {
  position: relative;
  opacity: 0.2;
}
.card-transition .txt-back h2 {
  font-size: 12vw;
  -webkit-text-stroke: 1px var(--innerh2);
}
.card-transition .b01 {
  margin-bottom: 5vh;
  transform: translateX(-10%);
}
.card-transition .b02 {
  margin-bottom: 5vh;
  transform: translateX(19%);
}
.card-transition .b03 {
  transform: translateX(-8%);
}
.card-transition.active {
  opacity: 1;
  pointer-events: all;
}
@media (max-width: 767.98px) {
  .card-transition .txt-front {
    position: relative;
    width: 50%;
    margin: 0 auto 2vh;
  }
  .card-transition .txt-front h2 {
    font-size: 10vw;
  }
  .card-transition .b01 {
    margin-bottom: 2vh;
  }
  .card-transition .b02 {
    margin-bottom: 2vh;
  }
  .card-transition .mobile-format {
    display: block;
  }
}

/*# sourceMappingURL=transition.css.map */