@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: #16A078;
  display: flex;
  justify-content: center;
  align-items: center;
}
* .frame .center .flower {
  width: 15%;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform-origin: 50% 50%;
  transform: rotate(-70deg) scale(0.8);
  animation: rotate 7s ease-in-out infinite;
}
* .frame .center .flower:after {
  content: "";
  width: 85%;
  height: 85%;
  background: #fff;
  border-radius: 50%;
  box-shadow: 5px 5px 5px 0px rgba(255, 255, 255, 0.5), -5px 5px 5px 0px rgba(255, 255, 255, 0.5), 5px -5px 5px 0px rgba(255, 255, 255, 0.5), -5px -5px 5px 0px rgba(255, 255, 255, 0.5);
  opacity: 0.3%;
}
@keyframes rotate {
  0%, 5% {
    transform: rotate(-70deg);
  }
  50%, 60% {
    transform: rotate(90deg);
  }
  90%, 100% {
    transform: rotate(290deg);
  }
}
* .frame .center .flower .petal {
  width: 160%;
  height: 160%;
  background: #fff;
  border-radius: 85px 0 85px 0;
  box-shadow: 12px 0px 10px rgba(0, 0, 0, 0.05), 0px -12px 10px rgba(0, 0, 0, 0.05);
  position: absolute;
  left: 50%;
  top: -110%;
  transform-origin: 0% 100%;
}
* .frame .center .flower .petal-top-1 {
  z-index: 9;
  transform: rotate(0deg) scale(0.28);
  animation: petal-top-1 7s ease-in-out 0.12s infinite;
}
@keyframes petal-top-1 {
  0%, 5% {
    transform: rotate(0deg) scale(0.28);
  }
  25% {
    transform: rotate(0deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(0deg) scale(1);
  }
  80%, 100% {
    transform: rotate(0deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-1 {
  z-index: 1;
  transform: rotate(-22.5deg) scale(0.28);
  animation: petal-bottom-1 7s ease-in-out 0.12s infinite;
}
@keyframes petal-bottom-1 {
  0%, 5% {
    transform: rotate(-22.5deg) scale(0.28);
  }
  25% {
    transform: rotate(-22.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(-22.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(-22.5deg) scale(0.28);
  }
}
* .frame .center .flower .petal-top-2 {
  z-index: 10;
  transform: rotate(45deg) scale(0.28);
  animation: petal-top-2 7s ease-in-out 0.24s infinite;
}
@keyframes petal-top-2 {
  0%, 5% {
    transform: rotate(45deg) scale(0.28);
  }
  25% {
    transform: rotate(45deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(45deg) scale(1);
  }
  80%, 100% {
    transform: rotate(45deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-2 {
  z-index: 2;
  transform: rotate(22.5deg) scale(0.28);
  animation: petal-bottom-2 7s ease-in-out 0.24s infinite;
}
@keyframes petal-bottom-2 {
  0%, 5% {
    transform: rotate(22.5deg) scale(0.28);
  }
  25% {
    transform: rotate(22.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(22.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(22.5deg) scale(0.28);
  }
}
* .frame .center .flower .petal-top-3 {
  z-index: 11;
  transform: rotate(90deg) scale(0.28);
  animation: petal-top-3 7s ease-in-out 0.36s infinite;
}
@keyframes petal-top-3 {
  0%, 5% {
    transform: rotate(90deg) scale(0.28);
  }
  25% {
    transform: rotate(90deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(90deg) scale(1);
  }
  80%, 100% {
    transform: rotate(90deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-3 {
  z-index: 3;
  transform: rotate(67.5deg) scale(0.28);
  animation: petal-bottom-3 7s ease-in-out 0.36s infinite;
}
@keyframes petal-bottom-3 {
  0%, 5% {
    transform: rotate(67.5deg) scale(0.28);
  }
  25% {
    transform: rotate(67.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(67.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(67.5deg) scale(0.28);
  }
}
* .frame .center .flower .petal-top-4 {
  z-index: 12;
  transform: rotate(135deg) scale(0.28);
  animation: petal-top-4 7s ease-in-out 0.48s infinite;
}
@keyframes petal-top-4 {
  0%, 5% {
    transform: rotate(135deg) scale(0.28);
  }
  25% {
    transform: rotate(135deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(135deg) scale(1);
  }
  80%, 100% {
    transform: rotate(135deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-4 {
  z-index: 4;
  transform: rotate(112.5deg) scale(0.28);
  animation: petal-bottom-4 7s ease-in-out 0.48s infinite;
}
@keyframes petal-bottom-4 {
  0%, 5% {
    transform: rotate(112.5deg) scale(0.28);
  }
  25% {
    transform: rotate(112.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(112.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(112.5deg) scale(0.28);
  }
}
* .frame .center .flower .petal-top-5 {
  z-index: 13;
  transform: rotate(180deg) scale(0.28);
  animation: petal-top-5 7s ease-in-out 0.6s infinite;
}
@keyframes petal-top-5 {
  0%, 5% {
    transform: rotate(180deg) scale(0.28);
  }
  25% {
    transform: rotate(180deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(180deg) scale(1);
  }
  80%, 100% {
    transform: rotate(180deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-5 {
  z-index: 5;
  transform: rotate(157.5deg) scale(0.28);
  animation: petal-bottom-5 7s ease-in-out 0.6s infinite;
}
@keyframes petal-bottom-5 {
  0%, 5% {
    transform: rotate(157.5deg) scale(0.28);
  }
  25% {
    transform: rotate(157.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(157.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(157.5deg) scale(0.28);
  }
}
* .frame .center .flower .petal-top-6 {
  z-index: 14;
  transform: rotate(225deg) scale(0.28);
  animation: petal-top-6 7s ease-in-out 0.72s infinite;
}
@keyframes petal-top-6 {
  0%, 5% {
    transform: rotate(225deg) scale(0.28);
  }
  25% {
    transform: rotate(225deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(225deg) scale(1);
  }
  80%, 100% {
    transform: rotate(225deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-6 {
  z-index: 6;
  transform: rotate(202.5deg) scale(0.28);
  animation: petal-bottom-6 7s ease-in-out 0.72s infinite;
}
@keyframes petal-bottom-6 {
  0%, 5% {
    transform: rotate(202.5deg) scale(0.28);
  }
  25% {
    transform: rotate(202.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(202.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(202.5deg) scale(0.28);
  }
}
* .frame .center .flower .petal-top-7 {
  z-index: 15;
  transform: rotate(270deg) scale(0.28);
  animation: petal-top-7 7s ease-in-out 0.84s infinite;
}
@keyframes petal-top-7 {
  0%, 5% {
    transform: rotate(270deg) scale(0.28);
  }
  25% {
    transform: rotate(270deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(270deg) scale(1);
  }
  80%, 100% {
    transform: rotate(270deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-7 {
  z-index: 7;
  transform: rotate(247.5deg) scale(0.28);
  animation: petal-bottom-7 7s ease-in-out 0.84s infinite;
}
@keyframes petal-bottom-7 {
  0%, 5% {
    transform: rotate(247.5deg) scale(0.28);
  }
  25% {
    transform: rotate(247.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(247.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(247.5deg) scale(0.28);
  }
}
* .frame .center .flower .petal-top-8 {
  z-index: 16;
  transform: rotate(315deg) scale(0.28);
  animation: petal-top-8 7s ease-in-out 0.96s infinite;
}
@keyframes petal-top-8 {
  0%, 5% {
    transform: rotate(315deg) scale(0.28);
  }
  25% {
    transform: rotate(315deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(315deg) scale(1);
  }
  80%, 100% {
    transform: rotate(315deg) scale(0.28);
  }
}
* .frame .center .flower .petal-bottom-8 {
  z-index: 8;
  transform: rotate(292.5deg) scale(0.28);
  animation: petal-bottom-8 7s ease-in-out 0.96s infinite;
}
@keyframes petal-bottom-8 {
  0%, 5% {
    transform: rotate(292.5deg) scale(0.28);
  }
  25% {
    transform: rotate(292.5deg) scale(1.02);
  }
  28%, 60% {
    transform: rotate(292.5deg) scale(1);
  }
  80%, 100% {
    transform: rotate(292.5deg) scale(0.28);
  }
}
* .frame .center .flower .flower-center {
  width: 250%;
  height: 250%;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 17;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: flower-center 7s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes flower-center {
  0%, 18% {
    transform: scale(0.42);
  }
  35%, 60% {
    transform: scale(1);
  }
  83%, 100% {
    transform: scale(0.42);
  }
}
* .frame .center .flower .flower-center:after {
  content: "";
  width: 40%;
  height: 40%;
  background: #F1C40F;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transform-origin: 50% 50%;
  animation: inner 7s ease-in-out infinite;
  z-index: 18;
}
@keyframes inner {
  0%, 25% {
    transform: scale(0);
  }
  30% {
    transform: scale(1.3);
  }
  33%, 55% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.3);
  }
  70%, 100% {
    transform: scale(0);
  }
}
* .frame .center .flower:hover .petal, * .frame .center .flower:hover .flower-center:after {
  opacity: 0.5;
}
* .frame .center .flower:hover .flower-center {
  background: transparent;
}

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