.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  background: #4C4C4C;
  color: #fff;
  font-size: 12px;
  line-height: 100%;
  text-transform: uppercase;
  font-family: 'Open Sans', Helvetica, sans-serif;
}

.center {
  position: absolute;
  width: 212px;
  height: 212px;
  top: 87px;
  left: 87px;
  background: #242424;
  border: 7px solid #3A3A3A;
  border-radius: 50%;
  text-align: center;
}

.date {
  position: absolute;
  top: 68px;
  width: 100%;
}

.time {
  position: absolute;
  top: 80px;
  width: 100%;
  font-weight: 700;
  font-size: 40px;
  line-height: 100%;
  margin: 4px 0;
}

.beat {
  position: absolute;
  top: 129px;
  left: 57px;
}

.beat span {
  float: left;
  color: #F85B5B;
  font-size: 10px;
  margin: 1px 4px 0 0;
  -webkit-animation: heartbeat 0.85s ease-in-out infinite;
          animation: heartbeat 0.85s ease-in-out infinite;
}

.energy {
  position: absolute;
  top: 129px;
  right: 55px;
}

.point-set-1 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.point-set-1 .point-1, .point-set-1 .point-2, .point-set-1 .point-3, .point-set-1 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-1 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-1 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-1 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-2 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
}

.point-set-2 .point-1, .point-set-2 .point-2, .point-set-2 .point-3, .point-set-2 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-2 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-2 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-2 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-3 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(12deg);
          transform: rotate(12deg);
}

.point-set-3 .point-1, .point-set-3 .point-2, .point-set-3 .point-3, .point-set-3 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-3 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-3 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-3 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-4 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(18deg);
          transform: rotate(18deg);
}

.point-set-4 .point-1, .point-set-4 .point-2, .point-set-4 .point-3, .point-set-4 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-4 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-4 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-4 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-5 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(24deg);
          transform: rotate(24deg);
}

.point-set-5 .point-1, .point-set-5 .point-2, .point-set-5 .point-3, .point-set-5 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-5 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-5 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-5 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-6 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.point-set-6 .point-1, .point-set-6 .point-2, .point-set-6 .point-3, .point-set-6 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-6 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-6 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-6 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-7 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(36deg);
          transform: rotate(36deg);
}

.point-set-7 .point-1, .point-set-7 .point-2, .point-set-7 .point-3, .point-set-7 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-7 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-7 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-7 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-8 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(42deg);
          transform: rotate(42deg);
}

.point-set-8 .point-1, .point-set-8 .point-2, .point-set-8 .point-3, .point-set-8 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-8 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-8 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-8 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-9 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(48deg);
          transform: rotate(48deg);
}

.point-set-9 .point-1, .point-set-9 .point-2, .point-set-9 .point-3, .point-set-9 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-9 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-9 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-9 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-10 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(54deg);
          transform: rotate(54deg);
}

.point-set-10 .point-1, .point-set-10 .point-2, .point-set-10 .point-3, .point-set-10 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-10 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-10 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-10 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-11 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}

.point-set-11 .point-1, .point-set-11 .point-2, .point-set-11 .point-3, .point-set-11 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-11 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-11 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-11 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-12 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(66deg);
          transform: rotate(66deg);
}

.point-set-12 .point-1, .point-set-12 .point-2, .point-set-12 .point-3, .point-set-12 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-12 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-12 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-12 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-13 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(72deg);
          transform: rotate(72deg);
}

.point-set-13 .point-1, .point-set-13 .point-2, .point-set-13 .point-3, .point-set-13 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-13 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-13 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-13 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-14 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(78deg);
          transform: rotate(78deg);
}

.point-set-14 .point-1, .point-set-14 .point-2, .point-set-14 .point-3, .point-set-14 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-14 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-14 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-14 .point-4 {
  top: 93px;
  left: 0;
}

.point-set-15 {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 188px;
  width: 188px;
  -webkit-transform: rotate(84deg);
          transform: rotate(84deg);
}

.point-set-15 .point-1, .point-set-15 .point-2, .point-set-15 .point-3, .point-set-15 .point-4 {
  position: absolute;
  top: 0;
  left: 93px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #D3D3D3;
}

.point-set-15 .point-2 {
  top: 93px;
  left: auto;
  right: 0;
}

.point-set-15 .point-3 {
  top: auto;
  bottom: 0;
}

.point-set-15 .point-4 {
  top: 93px;
  left: 0;
}

.spinner {
  position: absolute;
  width: 202px;
  height: 202px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
}

.spinner g {
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

.spinner circle {
  stroke: #F85B5B;
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 0, 100;
  transition: stroke-dasharray 0.2s cubic-bezier(0.2, 0.5, 0, 1);
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes heartbeat {
  from {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  to {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}