@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* .frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* .frame .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #46A6DA;
  overflow: hidden;
}
* .frame .center .shapes {
  width: 25%;
  height: 25%;
  margin: auto;
  position: relative;
  transform-origin: 50% 100%;
  animation: shape-move 4.8s linear forwards infinite;
}
@keyframes shape-move {
  0% {
    transform: translateY(-7rem) scaleY(1);
  }
  6% {
    transform: translateY(9rem) scaleX(1) scaleY(1);
  }
  8% {
    transform: translateY(9rem) scaleX(1.3) scaleY(0.5);
  }
  10% {
    transform: translateY(4rem) scaleX(1) scaleY(1.2);
  }
  12%, 87% {
    transform: translateY(9rem) scaleX(1) scaleY(1);
  }
  90%, 92% {
    transform: translateY(4rem) scaleX(1.05) scaleY(0.85);
  }
  100% {
    transform: translateY(30rem) scaleX(1) scaleY(1);
  }
}
* .frame .center .shapes .circle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  border-radius: 50%;
  animation: circle-resize 4.8s linear forwards infinite;
}
@keyframes circle-resize {
  0%, 16% {
    transform: scale(1);
  }
  19%, 20% {
    transform: scale(1.3);
  }
  24%, 71% {
    transform: scale(0);
  }
  72%, 74% {
    transform: scale(1.2);
  }
  78%, 100% {
    transform: scale(1);
  }
}
* .frame .center .shapes .circle:after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  border: 4px solid #fff;
  border-radius: 50%;
  top: -4px;
  left: -4px;
  animation: circle-spark 4.8s linear forwards infinite;
}
@keyframes circle-spark {
  0%, 71% {
    transform: scale(0);
    opacity: 0;
  }
  72% {
    transform: scale(1.1);
    opacity: 1;
  }
  78%, 100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  fill: #fff;
  animation: octagon-resize 4.8s linear forwards infinite;
}
@keyframes octagon-resize {
  0%, 24% {
    transform: scale(0);
  }
  26%, 28% {
    transform: scale(1.5);
  }
  32%, 39% {
    transform: scale(1.2);
  }
  42%, 44% {
    transform: scale(1.5);
  }
  47%, 100% {
    transform: scale(0);
  }
}
* .frame .center .shapes .octagon .octagon-spark-1 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-1 4.8s linear forwards infinite;
}
@keyframes octagon-spark-1 {
  0%, 24% {
    transform: rotate(0deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(0deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(0deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon .octagon-spark-2 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-2 4.8s linear forwards infinite;
}
@keyframes octagon-spark-2 {
  0%, 24% {
    transform: rotate(45deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(45deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(45deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon .octagon-spark-3 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-3 4.8s linear forwards infinite;
}
@keyframes octagon-spark-3 {
  0%, 24% {
    transform: rotate(90deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(90deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(90deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon .octagon-spark-4 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-4 4.8s linear forwards infinite;
}
@keyframes octagon-spark-4 {
  0%, 24% {
    transform: rotate(135deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(135deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(135deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon .octagon-spark-5 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-5 4.8s linear forwards infinite;
}
@keyframes octagon-spark-5 {
  0%, 24% {
    transform: rotate(180deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(180deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(180deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon .octagon-spark-6 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-6 4.8s linear forwards infinite;
}
@keyframes octagon-spark-6 {
  0%, 24% {
    transform: rotate(225deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(225deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(225deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon .octagon-spark-7 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-7 4.8s linear forwards infinite;
}
@keyframes octagon-spark-7 {
  0%, 24% {
    transform: rotate(270deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(270deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(270deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .octagon .octagon-spark-8 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 48%;
  left: 37.5%;
  animation: octagon-spark-8 4.8s linear forwards infinite;
}
@keyframes octagon-spark-8 {
  0%, 24% {
    transform: rotate(315deg) translateX(0);
    opacity: 0;
  }
  26% {
    transform: rotate(315deg) translateX(4rem);
    opacity: 1;
  }
  32%, 100% {
    transform: rotate(315deg) translateX(6rem);
    opacity: 0;
  }
}
* .frame .center .shapes .triangle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  fill: #fff;
  animation: triangle-resize 4.8s linear forwards infinite;
}
@keyframes triangle-resize {
  0%, 47% {
    transform: scale(0);
  }
  49%, 52% {
    transform: scale(1.3);
  }
  56%, 62% {
    transform: scale(1);
  }
  66%, 67% {
    transform: scale(1.3);
  }
  71%, 100% {
    transform: scale(0);
  }
}
* .frame .center .shapes .triangle .triangle-spark-1 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 66.7%;
  left: 37.5%;
  animation: triangle-spark-1 4.8s linear forwards infinite;
}
@keyframes triangle-spark-1 {
  0%, 47% {
    transform: rotate(-90deg) translateX(0);
    opacity: 0;
  }
  49% {
    transform: rotate(-90deg) translateX(5rem);
    opacity: 1;
  }
  56%, 100% {
    transform: rotate(-90deg) translateX(7.5rem);
    opacity: 0;
  }
}
* .frame .center .shapes .triangle .triangle-spark-2 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 66.7%;
  left: 37.5%;
  animation: triangle-spark-2 4.8s linear forwards infinite;
}
@keyframes triangle-spark-2 {
  0%, 47% {
    transform: rotate(30deg) translateX(0);
    opacity: 0;
  }
  49% {
    transform: rotate(30deg) translateX(5rem);
    opacity: 1;
  }
  56%, 100% {
    transform: rotate(30deg) translateX(7.5rem);
    opacity: 0;
  }
}
* .frame .center .shapes .triangle .triangle-spark-3 {
  width: 25%;
  height: 4%;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 20%;
  position: absolute;
  top: 66.7%;
  left: 37.5%;
  animation: triangle-spark-3 4.8s linear forwards infinite;
}
@keyframes triangle-spark-3 {
  0%, 47% {
    transform: rotate(150deg) translateX(0);
    opacity: 0;
  }
  49% {
    transform: rotate(150deg) translateX(5rem);
    opacity: 1;
  }
  56%, 100% {
    transform: rotate(150deg) translateX(7.5rem);
    opacity: 0;
  }
}

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