@-webkit-keyframes slideUpPen {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUpPen {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.recommended-pens {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  width: 34rem;
  z-index: 999;
}
.recommended-pens .pen {
  opacity: 0;
  margin: .4rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 7rem;
  position: relative;
  list-style: none;
  -webkit-transform: translateZ(0) translateY(100%);
          transform: translateZ(0) translateY(100%);
  -webkit-animation: slideUpPen 0.8s 6.5s forwards cubic-bezier(0.77, 0, 0.175, 1);
          animation: slideUpPen 0.8s 6.5s forwards cubic-bezier(0.77, 0, 0.175, 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 3px;
  border: 1px solid transparent;
}
.recommended-pens .pen:hover {
  border-color: #ccc;
}
.recommended-pens .pen:nth-child(2) {
  -webkit-animation-delay: 6.45s;
          animation-delay: 6.45s;
}
.recommended-pens .pen:nth-child(2) a {
  color: #333;
}
.recommended-pens .pen video {
  border-radius: 3px;
  -o-object-fit: fill;
     object-fit: fill;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.recommended-pens .pen a {
  padding: .4rem;
  z-index: 10;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #ccc;
  text-decoration: none;
}
.recommended-pens .pen h2 {
  margin: 0;
  margin-bottom: .8rem;
  font-weight: 200;
  font-size: .9rem;
  color: #fff;
  bottom: 100%;
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
}

@-webkit-keyframes scaleIn {
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scaleIn {
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes slideUpText {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUpText {
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/*.card {
  width: 9rem;
  height: 9rem;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.card h1 {
  font-family: 'Helvetica Neue', 'Calibri Light', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em;
  position: absolute;
  top: 100%;
  left: 0;
  color: #fff;
  font-weight: 200;
  text-align: center;
  margin: .4rem 0;
  width: 100%;
  overflow: hidden;
}
.card h1 span {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation: slideUpText 1s 4.2s forwards cubic-bezier(1, 0, 0, 1);
          animation: slideUpText 1s 4.2s forwards cubic-bezier(1, 0, 0, 1);
  display: inline-block;
}
.card h1 span:nth-of-type(2) {
  -webkit-animation-delay: 4.225s;
          animation-delay: 4.225s;
}
.card h1 span:nth-of-type(3) {
  -webkit-animation-delay: 4.25s;
          animation-delay: 4.25s;
}
.card h1 span:nth-of-type(4) {
  -webkit-animation-delay: 4.275s;
          animation-delay: 4.275s;
}
.card h1 span:nth-of-type(5) {
  -webkit-animation-delay: 4.3s;
          animation-delay: 4.3s;
}
.card, .card img {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: scaleIn 0.8s forwards cubic-bezier(1, 0, 0, 1);
          animation: scaleIn 0.8s forwards cubic-bezier(1, 0, 0, 1);
  -webkit-animation-delay: 3.7s;
          animation-delay: 3.7s;
}
.card img {
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
  margin: auto;
  border-radius: 50%;
}*/

.bg-line,
.dot, .wrapper, .logo-mkbhd, .skewed-box .bg {
  position: absolute;
  left: 0;
  top: 0;
}

.stripe {
  width: 1px;
  background: #fff;
  opacity: .55;
  position: absolute;
}

.skewed-box .stripe {
  height: 170%;
  bottom: -40%;
  -webkit-animation: scaleTop .6s both linear;
          animation: scaleTop .6s both linear;
}
.skewed-box .stripe.top {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.skewed-box .stripe.bottom {
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
}
.skewed-box.white .stripe.top {
  right: 0;
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
}
.skewed-box.white .stripe.topBottom {
  -webkit-animation-name: scaleBottom;
          animation-name: scaleBottom;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  right: 6px;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}
.skewed-box.white .stripe.bottomTop {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  left: 6px;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
}
.skewed-box.white .stripe.bottom {
  -webkit-animation-name: scaleBottom;
          animation-name: scaleBottom;
  -webkit-animation-delay: 0;
          animation-delay: 0;
}
.skewed-box.pink .stripe.top {
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}
.skewed-box.pink .stripe.bottom {
  -webkit-animation-name: scaleBottom;
          animation-name: scaleBottom;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
  left: 100%;
}

.final-stripe {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 30%;
  width: 1px;
}
.final-stripe.right {
  -webkit-transform: rotateZ(60deg) translateY(-7rem);
          transform: rotateZ(60deg) translateY(-7rem);
  -webkit-animation: finalStripeScaleRight .4s 3s both ease;
          animation: finalStripeScaleRight .4s 3s both ease;
}
.final-stripe.left {
  -webkit-animation: finalStripeScaleLeft .4s 3s both ease;
          animation: finalStripeScaleLeft .4s 3s both ease;
}

@-webkit-keyframes finalStripeScaleLeft {
  0% {
    -webkit-transform: rotateZ(60deg) scaleY(0) translateY(7rem);
            transform: rotateZ(60deg) scaleY(0) translateY(7rem);
  }
  50% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(7rem);
            transform: rotateZ(60deg) scaleY(1) translateY(7rem);
  }
  100% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(14rem);
            transform: rotateZ(60deg) scaleY(1) translateY(14rem);
    opacity: 0;
  }
}

@keyframes finalStripeScaleLeft {
  0% {
    -webkit-transform: rotateZ(60deg) scaleY(0) translateY(7rem);
            transform: rotateZ(60deg) scaleY(0) translateY(7rem);
  }
  50% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(7rem);
            transform: rotateZ(60deg) scaleY(1) translateY(7rem);
  }
  100% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(14rem);
            transform: rotateZ(60deg) scaleY(1) translateY(14rem);
    opacity: 0;
  }
}
@-webkit-keyframes finalStripeScaleRight {
  0% {
    -webkit-transform: rotateZ(60deg) scaleY(0) translateY(-7rem);
            transform: rotateZ(60deg) scaleY(0) translateY(-7rem);
  }
  50% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(-7rem);
            transform: rotateZ(60deg) scaleY(1) translateY(-7rem);
  }
  100% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(-14rem);
            transform: rotateZ(60deg) scaleY(1) translateY(-14rem);
    opacity: 0;
  }
}
@keyframes finalStripeScaleRight {
  0% {
    -webkit-transform: rotateZ(60deg) scaleY(0) translateY(-7rem);
            transform: rotateZ(60deg) scaleY(0) translateY(-7rem);
  }
  50% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(-7rem);
            transform: rotateZ(60deg) scaleY(1) translateY(-7rem);
  }
  100% {
    -webkit-transform: rotateZ(60deg) scaleY(1) translateY(-14rem);
            transform: rotateZ(60deg) scaleY(1) translateY(-14rem);
    opacity: 0;
  }
}
@-webkit-keyframes scaleBottom {
  0% {
    -webkit-transform: translateY(0) scaleY(0);
            transform: translateY(0) scaleY(0);
  }
  50% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(100%) scaleY(0);
            transform: translateY(100%) scaleY(0);
  }
}
@keyframes scaleBottom {
  0% {
    -webkit-transform: translateY(0) scaleY(0);
            transform: translateY(0) scaleY(0);
  }
  50% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(100%) scaleY(0);
            transform: translateY(100%) scaleY(0);
  }
}
@-webkit-keyframes scaleTop {
  0% {
    -webkit-transform: translateY(0) scaleY(0);
            transform: translateY(0) scaleY(0);
  }
  50% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(-100%) scaleY(0);
            transform: translateY(-100%) scaleY(0);
  }
}
@keyframes scaleTop {
  0% {
    -webkit-transform: translateY(0) scaleY(0);
            transform: translateY(0) scaleY(0);
  }
  50% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
  100% {
    -webkit-transform: translateY(-100%) scaleY(0);
            transform: translateY(-100%) scaleY(0);
  }
}
.bg-line,
.dot {
  height: 1px;
  will-change: transform;
}

.bg-line {
  width: 30px;
  background: #7a7e7f;
  -webkit-animation: bgLine 2.8s infinite ease-in-out;
          animation: bgLine 2.8s infinite ease-in-out;
}

.dot {
  width: 1px;
  background: #b6b9ba;
  border-radius: 50%;
  -webkit-animation: dot 2.8s infinite ease-in-out;
          animation: dot 2.8s infinite ease-in-out;
}

.bg-line:nth-child(1),
.dot:nth-child(1) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -1.41s;
          animation-delay: -1.41s;
}

.dot:nth-child(1) {
  left: calc(0 * 100% / 12 + 22.2px);
}

.bg-line:nth-child(2),
.dot:nth-child(2) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}

.dot:nth-child(2) {
  left: calc(1 * 100% / 12 + 25.8px);
}

.bg-line:nth-child(3),
.dot:nth-child(3) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -1.98s;
          animation-delay: -1.98s;
}

.dot:nth-child(3) {
  left: calc(2 * 100% / 12 + 14.6px);
}

.bg-line:nth-child(4),
.dot:nth-child(4) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}

.dot:nth-child(4) {
  left: calc(3 * 100% / 12 + 25.8px);
}

.bg-line:nth-child(5),
.dot:nth-child(5) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}

.dot:nth-child(5) {
  left: calc(4 * 100% / 12 + 21px);
}

.bg-line:nth-child(6),
.dot:nth-child(6) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -1.47s;
          animation-delay: -1.47s;
}

.dot:nth-child(6) {
  left: calc(5 * 100% / 12 + 21.4px);
}

.bg-line:nth-child(7),
.dot:nth-child(7) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -2.01s;
          animation-delay: -2.01s;
}

.dot:nth-child(7) {
  left: calc(6 * 100% / 12 + 14.2px);
}

.bg-line:nth-child(8),
.dot:nth-child(8) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -2.76s;
          animation-delay: -2.76s;
}

.dot:nth-child(8) {
  left: calc(7 * 100% / 12 + 4.2px);
}

.bg-line:nth-child(9),
.dot:nth-child(9) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -1.92s;
          animation-delay: -1.92s;
}

.dot:nth-child(9) {
  left: calc(8 * 100% / 12 + 15.4px);
}

.bg-line:nth-child(10),
.dot:nth-child(10) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

.dot:nth-child(10) {
  left: calc(9 * 100% / 12 + 35px);
}

.bg-line:nth-child(11),
.dot:nth-child(11) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -2.01s;
          animation-delay: -2.01s;
}

.dot:nth-child(11) {
  left: calc(10 * 100% / 12 + 14.2px);
}

.bg-line:nth-child(12),
.dot:nth-child(12) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -0.24s;
          animation-delay: -0.24s;
}

.dot:nth-child(12) {
  left: calc(11 * 100% / 12 + 37.8px);
}

.bg-line:nth-child(13),
.dot:nth-child(13) {
  top: calc((0 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -0.33s;
          animation-delay: -0.33s;
}

.dot:nth-child(13) {
  left: calc(12 * 100% / 12 + 36.6px);
}

.bg-line:nth-child(14),
.dot:nth-child(14) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -1.89s;
          animation-delay: -1.89s;
}

.dot:nth-child(14) {
  left: calc(0 * 100% / 12 + 15.8px);
}

.bg-line:nth-child(15),
.dot:nth-child(15) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -1.68s;
          animation-delay: -1.68s;
}

.dot:nth-child(15) {
  left: calc(1 * 100% / 12 + 18.6px);
}

.bg-line:nth-child(16),
.dot:nth-child(16) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -2.01s;
          animation-delay: -2.01s;
}

.dot:nth-child(16) {
  left: calc(2 * 100% / 12 + 14.2px);
}

.bg-line:nth-child(17),
.dot:nth-child(17) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -2.37s;
          animation-delay: -2.37s;
}

.dot:nth-child(17) {
  left: calc(3 * 100% / 12 + 9.4px);
}

.bg-line:nth-child(18),
.dot:nth-child(18) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -0.33s;
          animation-delay: -0.33s;
}

.dot:nth-child(18) {
  left: calc(4 * 100% / 12 + 36.6px);
}

.bg-line:nth-child(19),
.dot:nth-child(19) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -2.88s;
          animation-delay: -2.88s;
}

.dot:nth-child(19) {
  left: calc(5 * 100% / 12 + 2.6px);
}

.bg-line:nth-child(20),
.dot:nth-child(20) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -1.83s;
          animation-delay: -1.83s;
}

.dot:nth-child(20) {
  left: calc(6 * 100% / 12 + 16.6px);
}

.bg-line:nth-child(21),
.dot:nth-child(21) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -0.51s;
          animation-delay: -0.51s;
}

.dot:nth-child(21) {
  left: calc(7 * 100% / 12 + 34.2px);
}

.bg-line:nth-child(22),
.dot:nth-child(22) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -1.38s;
          animation-delay: -1.38s;
}

.dot:nth-child(22) {
  left: calc(8 * 100% / 12 + 22.6px);
}

.bg-line:nth-child(23),
.dot:nth-child(23) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -0.21s;
          animation-delay: -0.21s;
}

.dot:nth-child(23) {
  left: calc(9 * 100% / 12 + 38.2px);
}

.bg-line:nth-child(24),
.dot:nth-child(24) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

.dot:nth-child(24) {
  left: calc(10 * 100% / 12 + 35px);
}

.bg-line:nth-child(25),
.dot:nth-child(25) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -2.43s;
          animation-delay: -2.43s;
}

.dot:nth-child(25) {
  left: calc(11 * 100% / 12 + 8.6px);
}

.bg-line:nth-child(26),
.dot:nth-child(26) {
  top: calc((1 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -2.43s;
          animation-delay: -2.43s;
}

.dot:nth-child(26) {
  left: calc(12 * 100% / 12 + 8.6px);
}

.bg-line:nth-child(27),
.dot:nth-child(27) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -0.99s;
          animation-delay: -0.99s;
}

.dot:nth-child(27) {
  left: calc(0 * 100% / 12 + 27.8px);
}

.bg-line:nth-child(28),
.dot:nth-child(28) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}

.dot:nth-child(28) {
  left: calc(1 * 100% / 12 + 38.6px);
}

.bg-line:nth-child(29),
.dot:nth-child(29) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -1.68s;
          animation-delay: -1.68s;
}

.dot:nth-child(29) {
  left: calc(2 * 100% / 12 + 18.6px);
}

.bg-line:nth-child(30),
.dot:nth-child(30) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -1.56s;
          animation-delay: -1.56s;
}

.dot:nth-child(30) {
  left: calc(3 * 100% / 12 + 20.2px);
}

.bg-line:nth-child(31),
.dot:nth-child(31) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -1.71s;
          animation-delay: -1.71s;
}

.dot:nth-child(31) {
  left: calc(4 * 100% / 12 + 18.2px);
}

.bg-line:nth-child(32),
.dot:nth-child(32) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -2.73s;
          animation-delay: -2.73s;
}

.dot:nth-child(32) {
  left: calc(5 * 100% / 12 + 4.6px);
}

.bg-line:nth-child(33),
.dot:nth-child(33) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -0.84s;
          animation-delay: -0.84s;
}

.dot:nth-child(33) {
  left: calc(6 * 100% / 12 + 29.8px);
}

.bg-line:nth-child(34),
.dot:nth-child(34) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -2.88s;
          animation-delay: -2.88s;
}

.dot:nth-child(34) {
  left: calc(7 * 100% / 12 + 2.6px);
}

.bg-line:nth-child(35),
.dot:nth-child(35) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -2.28s;
          animation-delay: -2.28s;
}

.dot:nth-child(35) {
  left: calc(8 * 100% / 12 + 10.6px);
}

.bg-line:nth-child(36),
.dot:nth-child(36) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -2.31s;
          animation-delay: -2.31s;
}

.dot:nth-child(36) {
  left: calc(9 * 100% / 12 + 10.2px);
}

.bg-line:nth-child(37),
.dot:nth-child(37) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -1.29s;
          animation-delay: -1.29s;
}

.dot:nth-child(37) {
  left: calc(10 * 100% / 12 + 23.8px);
}

.bg-line:nth-child(38),
.dot:nth-child(38) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -2.01s;
          animation-delay: -2.01s;
}

.dot:nth-child(38) {
  left: calc(11 * 100% / 12 + 14.2px);
}

.bg-line:nth-child(39),
.dot:nth-child(39) {
  top: calc((2 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -1.68s;
          animation-delay: -1.68s;
}

.dot:nth-child(39) {
  left: calc(12 * 100% / 12 + 18.6px);
}

.bg-line:nth-child(40),
.dot:nth-child(40) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -2.79s;
          animation-delay: -2.79s;
}

.dot:nth-child(40) {
  left: calc(0 * 100% / 12 + 3.8px);
}

.bg-line:nth-child(41),
.dot:nth-child(41) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -2.97s;
          animation-delay: -2.97s;
}

.dot:nth-child(41) {
  left: calc(1 * 100% / 12 + 1.4px);
}

.bg-line:nth-child(42),
.dot:nth-child(42) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -2.13s;
          animation-delay: -2.13s;
}

.dot:nth-child(42) {
  left: calc(2 * 100% / 12 + 12.6px);
}

.bg-line:nth-child(43),
.dot:nth-child(43) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -0.03s;
          animation-delay: -0.03s;
}

.dot:nth-child(43) {
  left: calc(3 * 100% / 12 + 40.6px);
}

.bg-line:nth-child(44),
.dot:nth-child(44) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

.dot:nth-child(44) {
  left: calc(4 * 100% / 12 + 35px);
}

.bg-line:nth-child(45),
.dot:nth-child(45) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -1.32s;
          animation-delay: -1.32s;
}

.dot:nth-child(45) {
  left: calc(5 * 100% / 12 + 23.4px);
}

.bg-line:nth-child(46),
.dot:nth-child(46) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -0.93s;
          animation-delay: -0.93s;
}

.dot:nth-child(46) {
  left: calc(6 * 100% / 12 + 28.6px);
}

.bg-line:nth-child(47),
.dot:nth-child(47) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -0.03s;
          animation-delay: -0.03s;
}

.dot:nth-child(47) {
  left: calc(7 * 100% / 12 + 40.6px);
}

.bg-line:nth-child(48),
.dot:nth-child(48) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -2.28s;
          animation-delay: -2.28s;
}

.dot:nth-child(48) {
  left: calc(8 * 100% / 12 + 10.6px);
}

.bg-line:nth-child(49),
.dot:nth-child(49) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
}

.dot:nth-child(49) {
  left: calc(9 * 100% / 12 + 35px);
}

.bg-line:nth-child(50),
.dot:nth-child(50) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

.dot:nth-child(50) {
  left: calc(10 * 100% / 12 + 33px);
}

.bg-line:nth-child(51),
.dot:nth-child(51) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
}

.dot:nth-child(51) {
  left: calc(11 * 100% / 12 + 13px);
}

.bg-line:nth-child(52),
.dot:nth-child(52) {
  top: calc((3 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -1.11s;
          animation-delay: -1.11s;
}

.dot:nth-child(52) {
  left: calc(12 * 100% / 12 + 26.2px);
}

.bg-line:nth-child(53),
.dot:nth-child(53) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -0.39s;
          animation-delay: -0.39s;
}

.dot:nth-child(53) {
  left: calc(0 * 100% / 12 + 35.8px);
}

.bg-line:nth-child(54),
.dot:nth-child(54) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -1.65s;
          animation-delay: -1.65s;
}

.dot:nth-child(54) {
  left: calc(1 * 100% / 12 + 19px);
}

.bg-line:nth-child(55),
.dot:nth-child(55) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
}

.dot:nth-child(55) {
  left: calc(2 * 100% / 12 + 13px);
}

.bg-line:nth-child(56),
.dot:nth-child(56) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -0.63s;
          animation-delay: -0.63s;
}

.dot:nth-child(56) {
  left: calc(3 * 100% / 12 + 32.6px);
}

.bg-line:nth-child(57),
.dot:nth-child(57) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -0.81s;
          animation-delay: -0.81s;
}

.dot:nth-child(57) {
  left: calc(4 * 100% / 12 + 30.2px);
}

.bg-line:nth-child(58),
.dot:nth-child(58) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}

.dot:nth-child(58) {
  left: calc(5 * 100% / 12 + 39px);
}

.bg-line:nth-child(59),
.dot:nth-child(59) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -1.29s;
          animation-delay: -1.29s;
}

.dot:nth-child(59) {
  left: calc(6 * 100% / 12 + 23.8px);
}

.bg-line:nth-child(60),
.dot:nth-child(60) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -2.67s;
          animation-delay: -2.67s;
}

.dot:nth-child(60) {
  left: calc(7 * 100% / 12 + 5.4px);
}

.bg-line:nth-child(61),
.dot:nth-child(61) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -0.78s;
          animation-delay: -0.78s;
}

.dot:nth-child(61) {
  left: calc(8 * 100% / 12 + 30.6px);
}

.bg-line:nth-child(62),
.dot:nth-child(62) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -2.46s;
          animation-delay: -2.46s;
}

.dot:nth-child(62) {
  left: calc(9 * 100% / 12 + 8.2px);
}

.bg-line:nth-child(63),
.dot:nth-child(63) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -2.73s;
          animation-delay: -2.73s;
}

.dot:nth-child(63) {
  left: calc(10 * 100% / 12 + 4.6px);
}

.bg-line:nth-child(64),
.dot:nth-child(64) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}

.dot:nth-child(64) {
  left: calc(11 * 100% / 12 + 32.2px);
}

.bg-line:nth-child(65),
.dot:nth-child(65) {
  top: calc((4 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -0.33s;
          animation-delay: -0.33s;
}

.dot:nth-child(65) {
  left: calc(12 * 100% / 12 + 36.6px);
}

.bg-line:nth-child(66),
.dot:nth-child(66) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -0.69s;
          animation-delay: -0.69s;
}

.dot:nth-child(66) {
  left: calc(0 * 100% / 12 + 31.8px);
}

.bg-line:nth-child(67),
.dot:nth-child(67) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -1.71s;
          animation-delay: -1.71s;
}

.dot:nth-child(67) {
  left: calc(1 * 100% / 12 + 18.2px);
}

.bg-line:nth-child(68),
.dot:nth-child(68) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -0.51s;
          animation-delay: -0.51s;
}

.dot:nth-child(68) {
  left: calc(2 * 100% / 12 + 34.2px);
}

.bg-line:nth-child(69),
.dot:nth-child(69) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -2.97s;
          animation-delay: -2.97s;
}

.dot:nth-child(69) {
  left: calc(3 * 100% / 12 + 1.4px);
}

.bg-line:nth-child(70),
.dot:nth-child(70) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -0.78s;
          animation-delay: -0.78s;
}

.dot:nth-child(70) {
  left: calc(4 * 100% / 12 + 30.6px);
}

.bg-line:nth-child(71),
.dot:nth-child(71) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -0.48s;
          animation-delay: -0.48s;
}

.dot:nth-child(71) {
  left: calc(5 * 100% / 12 + 34.6px);
}

.bg-line:nth-child(72),
.dot:nth-child(72) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -0.03s;
          animation-delay: -0.03s;
}

.dot:nth-child(72) {
  left: calc(6 * 100% / 12 + 40.6px);
}

.bg-line:nth-child(73),
.dot:nth-child(73) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -2.88s;
          animation-delay: -2.88s;
}

.dot:nth-child(73) {
  left: calc(7 * 100% / 12 + 2.6px);
}

.bg-line:nth-child(74),
.dot:nth-child(74) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}

.dot:nth-child(74) {
  left: calc(8 * 100% / 12 + 38.6px);
}

.bg-line:nth-child(75),
.dot:nth-child(75) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -0.15s;
          animation-delay: -0.15s;
}

.dot:nth-child(75) {
  left: calc(9 * 100% / 12 + 39px);
}

.bg-line:nth-child(76),
.dot:nth-child(76) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -0.63s;
          animation-delay: -0.63s;
}

.dot:nth-child(76) {
  left: calc(10 * 100% / 12 + 32.6px);
}

.bg-line:nth-child(77),
.dot:nth-child(77) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}

.dot:nth-child(77) {
  left: calc(11 * 100% / 12 + 17px);
}

.bg-line:nth-child(78),
.dot:nth-child(78) {
  top: calc((5 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}

.dot:nth-child(78) {
  left: calc(12 * 100% / 12 + 25.8px);
}

.bg-line:nth-child(79),
.dot:nth-child(79) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -0.69s;
          animation-delay: -0.69s;
}

.dot:nth-child(79) {
  left: calc(0 * 100% / 12 + 31.8px);
}

.bg-line:nth-child(80),
.dot:nth-child(80) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -0.51s;
          animation-delay: -0.51s;
}

.dot:nth-child(80) {
  left: calc(1 * 100% / 12 + 34.2px);
}

.bg-line:nth-child(81),
.dot:nth-child(81) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -1.86s;
          animation-delay: -1.86s;
}

.dot:nth-child(81) {
  left: calc(2 * 100% / 12 + 16.2px);
}

.bg-line:nth-child(82),
.dot:nth-child(82) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -1.74s;
          animation-delay: -1.74s;
}

.dot:nth-child(82) {
  left: calc(3 * 100% / 12 + 17.8px);
}

.bg-line:nth-child(83),
.dot:nth-child(83) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -1.74s;
          animation-delay: -1.74s;
}

.dot:nth-child(83) {
  left: calc(4 * 100% / 12 + 17.8px);
}

.bg-line:nth-child(84),
.dot:nth-child(84) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
}

.dot:nth-child(84) {
  left: calc(5 * 100% / 12 + 13px);
}

.bg-line:nth-child(85),
.dot:nth-child(85) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -2.85s;
          animation-delay: -2.85s;
}

.dot:nth-child(85) {
  left: calc(6 * 100% / 12 + 3px);
}

.bg-line:nth-child(86),
.dot:nth-child(86) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -0.54s;
          animation-delay: -0.54s;
}

.dot:nth-child(86) {
  left: calc(7 * 100% / 12 + 33.8px);
}

.bg-line:nth-child(87),
.dot:nth-child(87) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -0.33s;
          animation-delay: -0.33s;
}

.dot:nth-child(87) {
  left: calc(8 * 100% / 12 + 36.6px);
}

.bg-line:nth-child(88),
.dot:nth-child(88) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -2.16s;
          animation-delay: -2.16s;
}

.dot:nth-child(88) {
  left: calc(9 * 100% / 12 + 12.2px);
}

.bg-line:nth-child(89),
.dot:nth-child(89) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -0.69s;
          animation-delay: -0.69s;
}

.dot:nth-child(89) {
  left: calc(10 * 100% / 12 + 31.8px);
}

.bg-line:nth-child(90),
.dot:nth-child(90) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -0.99s;
          animation-delay: -0.99s;
}

.dot:nth-child(90) {
  left: calc(11 * 100% / 12 + 27.8px);
}

.bg-line:nth-child(91),
.dot:nth-child(91) {
  top: calc((6 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -0.63s;
          animation-delay: -0.63s;
}

.dot:nth-child(91) {
  left: calc(12 * 100% / 12 + 32.6px);
}

.bg-line:nth-child(92),
.dot:nth-child(92) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -1.17s;
          animation-delay: -1.17s;
}

.dot:nth-child(92) {
  left: calc(0 * 100% / 12 + 25.4px);
}

.bg-line:nth-child(93),
.dot:nth-child(93) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -1.95s;
          animation-delay: -1.95s;
}

.dot:nth-child(93) {
  left: calc(1 * 100% / 12 + 15px);
}

.bg-line:nth-child(94),
.dot:nth-child(94) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -2.52s;
          animation-delay: -2.52s;
}

.dot:nth-child(94) {
  left: calc(2 * 100% / 12 + 7.4px);
}

.bg-line:nth-child(95),
.dot:nth-child(95) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -0.87s;
          animation-delay: -0.87s;
}

.dot:nth-child(95) {
  left: calc(3 * 100% / 12 + 29.4px);
}

.bg-line:nth-child(96),
.dot:nth-child(96) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -1.71s;
          animation-delay: -1.71s;
}

.dot:nth-child(96) {
  left: calc(4 * 100% / 12 + 18.2px);
}

.bg-line:nth-child(97),
.dot:nth-child(97) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
}

.dot:nth-child(97) {
  left: calc(5 * 100% / 12 + 38.6px);
}

.bg-line:nth-child(98),
.dot:nth-child(98) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -1.14s;
          animation-delay: -1.14s;
}

.dot:nth-child(98) {
  left: calc(6 * 100% / 12 + 25.8px);
}

.bg-line:nth-child(99),
.dot:nth-child(99) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -0.81s;
          animation-delay: -0.81s;
}

.dot:nth-child(99) {
  left: calc(7 * 100% / 12 + 30.2px);
}

.bg-line:nth-child(100),
.dot:nth-child(100) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -0.75s;
          animation-delay: -0.75s;
}

.dot:nth-child(100) {
  left: calc(8 * 100% / 12 + 31px);
}

.bg-line:nth-child(101),
.dot:nth-child(101) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -2.7s;
          animation-delay: -2.7s;
}

.dot:nth-child(101) {
  left: calc(9 * 100% / 12 + 5px);
}

.bg-line:nth-child(102),
.dot:nth-child(102) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -2.07s;
          animation-delay: -2.07s;
}

.dot:nth-child(102) {
  left: calc(10 * 100% / 12 + 13.4px);
}

.bg-line:nth-child(103),
.dot:nth-child(103) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -2.49s;
          animation-delay: -2.49s;
}

.dot:nth-child(103) {
  left: calc(11 * 100% / 12 + 7.8px);
}

.bg-line:nth-child(104),
.dot:nth-child(104) {
  top: calc((7 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}

.dot:nth-child(104) {
  left: calc(12 * 100% / 12 + 17px);
}

.bg-line:nth-child(105),
.dot:nth-child(105) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -2.64s;
          animation-delay: -2.64s;
}

.dot:nth-child(105) {
  left: calc(0 * 100% / 12 + 5.8px);
}

.bg-line:nth-child(106),
.dot:nth-child(106) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -2.64s;
          animation-delay: -2.64s;
}

.dot:nth-child(106) {
  left: calc(1 * 100% / 12 + 5.8px);
}

.bg-line:nth-child(107),
.dot:nth-child(107) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -1.41s;
          animation-delay: -1.41s;
}

.dot:nth-child(107) {
  left: calc(2 * 100% / 12 + 22.2px);
}

.bg-line:nth-child(108),
.dot:nth-child(108) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -0.96s;
          animation-delay: -0.96s;
}

.dot:nth-child(108) {
  left: calc(3 * 100% / 12 + 28.2px);
}

.bg-line:nth-child(109),
.dot:nth-child(109) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -2.76s;
          animation-delay: -2.76s;
}

.dot:nth-child(109) {
  left: calc(4 * 100% / 12 + 4.2px);
}

.bg-line:nth-child(110),
.dot:nth-child(110) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -0.69s;
          animation-delay: -0.69s;
}

.dot:nth-child(110) {
  left: calc(5 * 100% / 12 + 31.8px);
}

.bg-line:nth-child(111),
.dot:nth-child(111) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
}

.dot:nth-child(111) {
  left: calc(6 * 100% / 12 + 36.2px);
}

.bg-line:nth-child(112),
.dot:nth-child(112) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -2.22s;
          animation-delay: -2.22s;
}

.dot:nth-child(112) {
  left: calc(7 * 100% / 12 + 11.4px);
}

.bg-line:nth-child(113),
.dot:nth-child(113) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -2.67s;
          animation-delay: -2.67s;
}

.dot:nth-child(113) {
  left: calc(8 * 100% / 12 + 5.4px);
}

.bg-line:nth-child(114),
.dot:nth-child(114) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -1.56s;
          animation-delay: -1.56s;
}

.dot:nth-child(114) {
  left: calc(9 * 100% / 12 + 20.2px);
}

.bg-line:nth-child(115),
.dot:nth-child(115) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -1.92s;
          animation-delay: -1.92s;
}

.dot:nth-child(115) {
  left: calc(10 * 100% / 12 + 15.4px);
}

.bg-line:nth-child(116),
.dot:nth-child(116) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -2.43s;
          animation-delay: -2.43s;
}

.dot:nth-child(116) {
  left: calc(11 * 100% / 12 + 8.6px);
}

.bg-line:nth-child(117),
.dot:nth-child(117) {
  top: calc((8 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -1.05s;
          animation-delay: -1.05s;
}

.dot:nth-child(117) {
  left: calc(12 * 100% / 12 + 27px);
}

.bg-line:nth-child(118),
.dot:nth-child(118) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(0 * 100% / 12);
  -webkit-animation-delay: -0.03s;
          animation-delay: -0.03s;
}

.dot:nth-child(118) {
  left: calc(0 * 100% / 12 + 40.6px);
}

.bg-line:nth-child(119),
.dot:nth-child(119) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(1 * 100% / 12);
  -webkit-animation-delay: -1.47s;
          animation-delay: -1.47s;
}

.dot:nth-child(119) {
  left: calc(1 * 100% / 12 + 21.4px);
}

.bg-line:nth-child(120),
.dot:nth-child(120) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(2 * 100% / 12);
  -webkit-animation-delay: -1.11s;
          animation-delay: -1.11s;
}

.dot:nth-child(120) {
  left: calc(2 * 100% / 12 + 26.2px);
}

.bg-line:nth-child(121),
.dot:nth-child(121) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(3 * 100% / 12);
  -webkit-animation-delay: -2.61s;
          animation-delay: -2.61s;
}

.dot:nth-child(121) {
  left: calc(3 * 100% / 12 + 6.2px);
}

.bg-line:nth-child(122),
.dot:nth-child(122) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(4 * 100% / 12);
  -webkit-animation-delay: -1.59s;
          animation-delay: -1.59s;
}

.dot:nth-child(122) {
  left: calc(4 * 100% / 12 + 19.8px);
}

.bg-line:nth-child(123),
.dot:nth-child(123) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(5 * 100% / 12);
  -webkit-animation-delay: -0.66s;
          animation-delay: -0.66s;
}

.dot:nth-child(123) {
  left: calc(5 * 100% / 12 + 32.2px);
}

.bg-line:nth-child(124),
.dot:nth-child(124) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(6 * 100% / 12);
  -webkit-animation-delay: -1.26s;
          animation-delay: -1.26s;
}

.dot:nth-child(124) {
  left: calc(6 * 100% / 12 + 24.2px);
}

.bg-line:nth-child(125),
.dot:nth-child(125) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(7 * 100% / 12);
  -webkit-animation-delay: -0.93s;
          animation-delay: -0.93s;
}

.dot:nth-child(125) {
  left: calc(7 * 100% / 12 + 28.6px);
}

.bg-line:nth-child(126),
.dot:nth-child(126) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(8 * 100% / 12);
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
}

.dot:nth-child(126) {
  left: calc(8 * 100% / 12 + 36.2px);
}

.bg-line:nth-child(127),
.dot:nth-child(127) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(9 * 100% / 12);
  -webkit-animation-delay: -1.56s;
          animation-delay: -1.56s;
}

.dot:nth-child(127) {
  left: calc(9 * 100% / 12 + 20.2px);
}

.bg-line:nth-child(128),
.dot:nth-child(128) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(10 * 100% / 12);
  -webkit-animation-delay: -1.86s;
          animation-delay: -1.86s;
}

.dot:nth-child(128) {
  left: calc(10 * 100% / 12 + 16.2px);
}

.bg-line:nth-child(129),
.dot:nth-child(129) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(11 * 100% / 12);
  -webkit-animation-delay: -1.32s;
          animation-delay: -1.32s;
}

.dot:nth-child(129) {
  left: calc(11 * 100% / 12 + 23.4px);
}

.bg-line:nth-child(130),
.dot:nth-child(130) {
  top: calc((9 * 100%) / 9 + 50% / 9);
  left: calc(12 * 100% / 12);
  -webkit-animation-delay: -1.41s;
          animation-delay: -1.41s;
}

.dot:nth-child(130) {
  left: calc(12 * 100% / 12 + 22.2px);
}

@-webkit-keyframes bgLine {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateX(0.5rem) scaleX(0.1);
            transform: translateX(0.5rem) scaleX(0.1);
  }
  20% {
    opacity: .5;
    -webkit-transform: translateX(0.1rem) scaleX(0.4);
            transform: translateX(0.1rem) scaleX(0.4);
  }
  40% {
    opacity: 0;
    -webkit-transform: translateX(1rem) scaleX(1.2);
            transform: translateX(1rem) scaleX(1.2);
  }
  60% {
    opacity: .4;
    -webkit-transform: translateX(-0.5rem) scaleX(0.5);
            transform: translateX(-0.5rem) scaleX(0.5);
  }
  80% {
    opacity: .1;
    -webkit-transform: translateX(0) scaleX(0.8);
            transform: translateX(0) scaleX(0.8);
  }
}

@keyframes bgLine {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateX(0.5rem) scaleX(0.1);
            transform: translateX(0.5rem) scaleX(0.1);
  }
  20% {
    opacity: .5;
    -webkit-transform: translateX(0.1rem) scaleX(0.4);
            transform: translateX(0.1rem) scaleX(0.4);
  }
  40% {
    opacity: 0;
    -webkit-transform: translateX(1rem) scaleX(1.2);
            transform: translateX(1rem) scaleX(1.2);
  }
  60% {
    opacity: .4;
    -webkit-transform: translateX(-0.5rem) scaleX(0.5);
            transform: translateX(-0.5rem) scaleX(0.5);
  }
  80% {
    opacity: .1;
    -webkit-transform: translateX(0) scaleX(0.8);
            transform: translateX(0) scaleX(0.8);
  }
}
@-webkit-keyframes dot {
  0%, 100% {
    -webkit-transform: translateX(0.5rem);
            transform: translateX(0.5rem);
  }
  20% {
    -webkit-transform: translateX(0.1rem);
            transform: translateX(0.1rem);
  }
  40% {
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
  }
  60% {
    -webkit-transform: translateX(-0.5rem);
            transform: translateX(-0.5rem);
  }
  80% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes dot {
  0%, 100% {
    -webkit-transform: translateX(0.5rem);
            transform: translateX(0.5rem);
  }
  20% {
    -webkit-transform: translateX(0.1rem);
            transform: translateX(0.1rem);
  }
  40% {
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
  }
  60% {
    -webkit-transform: translateX(-0.5rem);
            transform: translateX(-0.5rem);
  }
  80% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/*html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #202527;
  overflow: hidden;
}*/

@-webkit-keyframes bgOpacity {
  to {
    opacity: 0.4;
  }
}

@keyframes bgOpacity {
  to {
    opacity: 0.4;
  }
}
#root {
  -webkit-animation: bgOpacity 1s 3.4s forwards ease;
          animation: bgOpacity 1s 3.4s forwards ease;
  will-change: opacity;
  margin: auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow-x: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: rotate 3.16s forwards linear;
          animation: rotate 3.16s forwards linear;
}

.logo-mkbhd {
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  -webkit-transform: translateZ(0) scale(0.85);
          transform: translateZ(0) scale(0.85);
  z-index: 9;
}

.skewed-box {
  width: 57px;
  height: 100%;
  position: absolute;
  left: 21px;
}
.skewed-box.over {
  z-index: 4;
}
.skewed-box .bg {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.skewed-box.white {
  -webkit-transform: rotateZ(-90deg) skewX(-30deg);
          transform: rotateZ(-90deg) skewX(-30deg);
}
.skewed-box.white .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
          clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.skewed-box.white.bottom .mask {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.skewed-box.pink {
  -webkit-transform: rotateZ(90deg) skewX(30deg);
          transform: rotateZ(90deg) skewX(30deg);
  z-index: 3;
}
.skewed-box.pink .bg {
  -webkit-animation: slideUp 1s 0.6s both cubic-bezier(0.165, 0.84, 0.44, 1), blink 0.2s 2.9s forwards steps(1, end);
          animation: slideUp 1s 0.6s both cubic-bezier(0.165, 0.84, 0.44, 1), blink 0.2s 2.9s forwards steps(1, end);
  -webkit-transform-origin: 50% 130%;
          transform-origin: 50% 130%;
  background: -webkit-linear-gradient(right, #f44f90, #f6455f);
  background: linear-gradient(to left, #f44f90, #f6455f);
}
.skewed-box.bottom .line.top {
  -webkit-animation-name: slideLinesLeft, shrinkLineX;
          animation-name: slideLinesLeft, shrinkLineX;
}
.skewed-box.bottom .line.right {
  -webkit-animation-name: slideLinesLeft, shrinkLineY;
          animation-name: slideLinesLeft, shrinkLineY;
}
.skewed-box.bottom .line.bottom {
  -webkit-animation-name: slideLinesLeft, shrinkLineX;
          animation-name: slideLinesLeft, shrinkLineX;
}
.skewed-box.bottom .line.left {
  -webkit-animation-name: slideLinesLeft, shrinkLineY;
          animation-name: slideLinesLeft, shrinkLineY;
}
.skewed-box.top .line.top {
  -webkit-animation-name: slideLinesRight, shrinkLineX;
          animation-name: slideLinesRight, shrinkLineX;
}
.skewed-box.top .line.right {
  -webkit-animation-name: slideLinesRight, shrinkLineY;
          animation-name: slideLinesRight, shrinkLineY;
}
.skewed-box.top .line.bottom {
  -webkit-animation-name: slideLinesRight, shrinkLineX;
          animation-name: slideLinesRight, shrinkLineX;
}
.skewed-box.top .line.left {
  -webkit-animation-name: slideLinesRight, shrinkLineY;
          animation-name: slideLinesRight, shrinkLineY;
}
.skewed-box .line {
  -webkit-animation-duration: 0.7s, 0.07s;
          animation-duration: 0.7s, 0.07s;
  -webkit-animation-delay: 0.3s, 2.9s;
          animation-delay: 0.3s, 2.9s;
  -webkit-animation-fill-mode: both, forwards;
          animation-fill-mode: both, forwards;
  -webkit-animation-timing-function: ease, linear;
          animation-timing-function: ease, linear;
  background: #fff;
  position: absolute;
  will-change: transform;
}
.skewed-box .line.top, .skewed-box .line.bottom {
  width: 100%;
  height: 6px;
  top: 0;
}
.skewed-box .line.right, .skewed-box .line.left {
  width: 6px;
  height: 100%;
  right: 0;
}
.skewed-box .line.top {
  -webkit-animation-delay: 0.3s, 3.11s;
          animation-delay: 0.3s, 3.11s;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
.skewed-box .line.right {
  -webkit-animation-delay: 0.3s, 3.18s;
          animation-delay: 0.3s, 3.18s;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.skewed-box .line.bottom {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: 0.3s, 2.9s;
          animation-delay: 0.3s, 2.9s;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.skewed-box .line.left {
  right: auto;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation-delay: 0.3s, 3.04s;
          animation-delay: 0.3s, 3.04s;
}

@-webkit-keyframes shrinkLineY {
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@keyframes shrinkLineY {
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
@-webkit-keyframes shrinkLineX {
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes shrinkLineX {
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@-webkit-keyframes slideLinesLeft {
  from {
    -webkit-transform: translateY(-3.2rem);
            transform: translateY(-3.2rem);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideLinesLeft {
  from {
    -webkit-transform: translateY(-3.2rem);
            transform: translateY(-3.2rem);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideLinesRight {
  from {
    -webkit-transform: translateY(3.2rem);
            transform: translateY(3.2rem);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slideLinesRight {
  from {
    -webkit-transform: translateY(3.2rem);
            transform: translateY(3.2rem);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: scaleY(0) translateY(2rem);
            transform: scaleY(0) translateY(2rem);
  }
  100% {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: scaleY(0) translateY(2rem);
            transform: scaleY(0) translateY(2rem);
  }
  100% {
    -webkit-transform: scaleY(1) translateY(0);
            transform: scaleY(1) translateY(0);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateZ(-3deg) scale(1);
            transform: rotateZ(-3deg) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(0) scale(1.2);
            transform: rotateZ(0) scale(1.2);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotateZ(-3deg) scale(1);
            transform: rotateZ(-3deg) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(0) scale(1.2);
            transform: rotateZ(0) scale(1.2);
  }
}
@-webkit-keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
}
audio {
  position: absolute;
  z-index: 10;
  top: .4rem;
  right: -4rem;
}

audio::-webkit-media-controls-enclosure {
  width: 0;
}
audio::-webkit-media-controls-panel {
  border-radius: 2rem;
  background: rgba(0, 0, 0, 0.5);
  opacity: .4;
  width: 100%;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}
audio::-webkit-media-controls-panel:hover {
  opacity: 1;
}
audio::-webkit-media-controls-mute-button {
  margin: 0 .5rem;
  cursor: pointer;
}
audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-timeline-container, audio::-webkit-media-controls-timeline, audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display, audio::-webkit-media-controls-volume-slider-container, audio::-webkit-media-controls-volume-slider, audio::-webkit-media-controls-seek-back-button, audio::-webkit-media-controls-seek-forward-button, audio::-webkit-media-controls-download-button, audio::-webkit-media-controls-rewind-button {
  display: none;
}