@keyframes jump {
  0% {
    color: #bec0c3;
    transform: translateY(0);
  }
  to {
    color: #1c1d1f;
    transform: translateY(-10%);
  }
}
@keyframes notjump {
  0% {
    color: #1c1d1f;
    transform: scale(1);
  }
  60% {
    color: #bec0c3;
    transform: translateY(-10%) scale(2);
  }
  to {
    color: #bec0c3;
    transform: translateY(0) scale(1);
  }
}
@keyframes barShrink {
  0% {
    transform: scaleX(1);
  }
  20% {
    transform: scaleX(1.04);
  }
  100% {
    transform: scaleX(0);
  }
}
#intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1c1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  z-index: 9999;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

#intro.active {
  opacity: 0;
}

#introbox {
  text-align: center;
  font-size: 14px;
}

.introtxt {
  font-size: 21px;
  letter-spacing: 0.24em;
  margin-bottom: 12px;
}

.introtxt span {
  display: inline-block;
}

.bar {
  background: #3a3b3e;
  border-radius: 999px;
  height: 1px;
  width: 80vw;
  overflow: hidden;
  position: relative;
}

.bar.active {
  animation: barShrink 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  transform-origin: center;
}

.bar__process {
  background: #bec0c3;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  transition: width 2s cubic-bezier(0.65, 0, 0.35, 1);
}

.introtxt.active span {
  color: #bec0c3;
}/*# sourceMappingURL=loader.css.map */