body {
  background-color: #999;
  overflow: hidden;
}

.asterism .frame {
  position: absolute;
  height: 13.65rem;
  left: calc(50% - 6.85rem);
  top: 0.4rem;
}

.asterisk {
  position: relative;
}
.asterisk .letter {
  display: block;
  position: absolute;
  height: 0.88em;
  color :#fff;
  font-size: 10em;
  font-family: Calibri;
  transition: transform 1.2s cubic-bezier(.22,.59,.38,1.3) 0.2s,
    opacity 1.2s ease-out 0.2s;
  transform: scale(0) rotate(500deg);
  top: -2.3rem;
  left: calc(50% - 2.55rem);
  opacity: 0.4;
}

.asterisk .letter.shadow {
  top: -2.1rem;
  left: calc(50% - 2.25rem);
  text-shadow: 0 0 0.5rem rgba(10, 10, 10, 0.7);
  color: transparent;
  opacity: 0;
}

.asterisk.active .letter {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.a2 {
  top: 8em;
  left: 4.65rem;
}

.a2.asterisk .letter {
  transition: transform 1.2s cubic-bezier(.22,.59,.38,1.3) 0.4s,
    opacity 0.8s ease-out 0.8s !important;
}

.a3 {
  top: 8em;
  right: 4.65em;
}

.a3.asterisk .letter {
  transition: transform 1.2s cubic-bezier(.22,.59,.38,1.3) 0.6s,
    opacity 0.8s ease-out 1s !important;
}