@charset 'UTF-8';

html{
  height: 100%;
}

#myBtnUIFrm {
  visibility: hidden;
  position: absolute;
  width: 60.0rem;
  height: 60.0rem;
  overflow: hidden;
  color: rgb(210, 210, 210);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

#myBtnUIFrm.circle {
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.0) 70%);
  background:         radial-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.0) 70%);
}

#myBtnUIFrm.visible {
  visibility: visible;
}

#animateStar {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -8.0rem;
  margin-top: -8.0rem;
  width: 16.0rem;
  height: 16.0rem;
  opacity: 0.0;
}

#animateStar.show {
  animation: rotationStar 600ms;
  -webkit-animation: rotationStar 600ms;
}

#animateStarImg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

#favMsgWrap {
  position: absolute;
  top: 50%;
  margin-top: -4.0rem;
  width: 100%;
  height: 8.0rem;
  font-size: 6.4rem;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  opacity: 0.0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

#favMsgWrap.show {
  /*transform: scale(2.0);
  -webkit-transform: scale(2.0);
  transition: transform 1500ms 400ms cubic-bezier(0.0, 0.0, 0.7, 1.0);
  -webkit-transition: -webkit-transform 1500ms 400ms cubic-bezier(0.0, 0.0, 0.7, 1.0);*/
  animation: showMsg 1200ms 400ms cubic-bezier(0.25, 0.1, 0.8, 1.0);
  -webkit-animation: showMsg 1200ms 400ms cubic-bezier(0.25, 0.1, 0.8, 1.0);
}

#favMsgIcon {
  display: block;
  margin-right: 0.4rem;
  width: 6.0rem;
  height: 6.0rem;
}

#favMsgText {
  text-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.8);
}

#iconListOrigin {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -7.0rem;
  margin-top: -7.0rem;
  width: 14.0rem;
  height: 14.0rem;
  transform: rotateZ(-90deg);
  -webkit-transform: rotateZ(-90deg);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

#iconListOrigin.show {
  transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: ease-in;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 400ms;
  -webkit-transition-timing-function: ease-in;
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
}

#iconListOrigin.hide {
    transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: ease-out;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 400ms;
  -webkit-transition-timing-function: ease-out;
  transform: rotateZ(90deg);
  -webkit-transform: rotateZ(90deg);
}

#iconListOrigin.withDelay {
  transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
}

/* iconWrap (iconHWrap) */
.iconWrap {
  position: absolute;
  opacity: 0;
  width: 14.0rem;
  height: 14.0rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* type1 */
#iconWrap0.type1 {
  transform: rotateZ(90deg);
  -webkit-transform: rotateZ(90deg);
}

/* type2 */
#iconWrap0.type2 {
  transform: rotateZ(90deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(90deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap1.type2 {
  transform: rotateZ(270deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(270deg) translateY(-2.0rem) scale(1.0);
}

/* type3 */
#iconWrap0.type3 {
  transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap1.type3 {
  transform: rotateZ(120deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(120deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap2.type3 {
  transform: rotateZ(240deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(240deg) translateY(-2.0rem) scale(1.0);
}

/* type4 */
#iconWrap0.type4 {
  transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap1.type4 {
  transform: rotateZ(90deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(90deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap2.type4 {
  transform: rotateZ(180deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(180deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap3.type4 {
  transform: rotateZ(270deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(270deg) translateY(-2.0rem) scale(1.0);
}

/* type5 */
#iconWrap0.type5 {
  transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap1.type5 {
  transform: rotateZ(72deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(72deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap2.type5 {
  transform: rotateZ(144deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(144deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap3.type5 {
  transform: rotateZ(216deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(216deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap4.type5 {
  transform: rotateZ(288deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(288deg) translateY(-2.0rem) scale(1.0);
}

/* type6 */
#iconWrap0.type6 {
  transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap1.type6 {
  transform: rotateZ(60deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(60deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap2.type6 {
  transform: rotateZ(120deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(120deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap3.type6 {
  transform: rotateZ(180deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(180deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap4.type6 {
  transform: rotateZ(240deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(240deg) translateY(-2.0rem) scale(1.0);
}

#iconWrap5.type6 {
  transform: rotateZ(300deg) translateY(-2.0rem) scale(1.0);
  -webkit-transform: rotateZ(300deg) translateY(-2.0rem) scale(1.0);
}

#iconListOrigin.show > .iconWrap {
  transition-property: transform, opacity;
  transition-duration: 400ms, 200ms;
  transition-timing-function: ease-in;
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-duration: 400ms, 200ms;
  -webkit-transition-timing-function: ease-in;
  opacity: 1.0;
}

#iconListOrigin.hide > .iconWrap {
  transition-property: transform, opacity;
  transition-duration: 400ms;
  transition-timing-function: ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-duration: 400ms;
  -webkit-transition-timing-function: ease-out;
  opacity: 0.0;
}

#iconListOrigin.withDelay > .iconWrap {
  transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
}

/* show type2 */
#iconListOrigin.show > #iconWrap0.type2 {
  transform: rotateZ(90deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(90deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap1.type2 {
  transform: rotateZ(270deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(270deg) translateY(-16.0rem) scale(1.0);
}

/* show type3 */
#iconListOrigin.show > #iconWrap0.type3 {
  transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap1.type3 {
  transform: rotateZ(120deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(120deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap2.type3 {
  transform: rotateZ(240deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(240deg) translateY(-16.0rem) scale(1.0);
}

/* show type4 */
#iconListOrigin.show > #iconWrap0.type4 {
  transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap1.type4 {
  transform: rotateZ(90deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(90deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap2.type4 {
  transform: rotateZ(180deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(180deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap3.type4 {
  transform: rotateZ(270deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(270deg) translateY(-16.0rem) scale(1.0);
}

/* show type5 */
#iconListOrigin.show > #iconWrap0.type5 {
  transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap1.type5 {
  transform: rotateZ(72deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(72deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap2.type5 {
  transform: rotateZ(144deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(144deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap3.type5 {
  transform: rotateZ(216deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(216deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap4.type5 {
  transform: rotateZ(288deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(288deg) translateY(-16.0rem) scale(1.0);
}

/* show type6 */
#iconListOrigin.show > #iconWrap0.type6 {
  transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(0deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap1.type6 {
  transform: rotateZ(60deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(60deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap2.type6 {
  transform: rotateZ(120deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(120deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap3.type6 {
  transform: rotateZ(180deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(180deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap4.type6 {
  transform: rotateZ(240deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(240deg) translateY(-16.0rem) scale(1.0);
}

#iconListOrigin.show > #iconWrap5.type6 {
  transform: rotateZ(300deg) translateY(-16.0rem) scale(1.0);
  -webkit-transform: rotateZ(300deg) translateY(-16.0rem) scale(1.0);
}

/* iconWrapInner */
.iconWrapInner {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* type1 */
#iconWrap0.type1 > .iconWrapInner {
  transform: rotateZ(-90deg);
  -webkit-transform: rotateZ(-90deg);
}

/* type2 */
#iconWrap0.type2 > .iconWrapInner {
  transform: rotateZ(-90deg);
  -webkit-transform: rotateZ(-90deg);
}

#iconWrap1.type2 > .iconWrapInner {
  transform: rotateZ(-270deg);
  -webkit-transform: rotateZ(-270deg);
}

/* type3 */
#iconWrap0.type3 > .iconWrapInner {
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
}

#iconWrap1.type3 > .iconWrapInner {
  transform: rotateZ(-120deg);
  -webkit-transform: rotateZ(-120deg);
}

#iconWrap2.type3 > .iconWrapInner {
  transform: rotateZ(-240deg);
  -webkit-transform: rotateZ(-240deg);
}

/* type4 */
#iconWrap0.type4 > .iconWrapInner {
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
}

#iconWrap1.type4 > .iconWrapInner {
  transform: rotateZ(-90deg);
  -webkit-transform: rotateZ(-90deg);
}

#iconWrap2.type4 > .iconWrapInner {
  transform: rotateZ(-180deg);
  -webkit-transform: rotateZ(-180deg);
}

#iconWrap3.type4 > .iconWrapInner {
  transform: rotateZ(-270deg);
  -webkit-transform: rotateZ(-270deg);
}

/* type5 */
#iconWrap0.type5 > .iconWrapInner {
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
}

#iconWrap1.type5 > .iconWrapInner {
  transform: rotateZ(-72deg);
  -webkit-transform: rotateZ(-72deg);
}

#iconWrap2.type5 > .iconWrapInner {
  transform: rotateZ(-144deg);
  -webkit-transform: rotateZ(-144deg);
}

#iconWrap3.type5 > .iconWrapInner {
  transform: rotateZ(-216deg);
  -webkit-transform: rotateZ(-216deg);
}

#iconWrap4.type5 > .iconWrapInner {
  transform: rotateZ(-288deg);
  -webkit-transform: rotateZ(-288deg);
}

/* type6 */
#iconWrap0.type6 > .iconWrapInner {
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
}

#iconWrap1.type6 > .iconWrapInner {
  transform: rotateZ(-60deg);
  -webkit-transform: rotateZ(-60deg);
}

#iconWrap2.type6 > .iconWrapInner {
  transform: rotateZ(-120deg);
  -webkit-transform: rotateZ(-120deg);
}

#iconWrap3.type6 > .iconWrapInner {
  transform: rotateZ(-180deg);
  -webkit-transform: rotateZ(-180deg);
}

#iconWrap4.type6 > .iconWrapInner {
  transform: rotateZ(-240deg);
  -webkit-transform: rotateZ(-240deg);
}

#iconWrap5.type6 > .iconWrapInner {
  transform: rotateZ(-300deg);
  -webkit-transform: rotateZ(-300deg);
}

/* iconBase */
.iconBase {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.iconHWrap > .iconBase {
  transform: none;
  -webkit-transform: none;
}

#iconListOrigin.show > .iconWrap > .iconWrapInner > .iconBase {
  transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: ease-in;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 400ms;
  -webkit-transition-timing-function: ease-in;
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
}

#iconListOrigin.hide > .iconWrap > .iconWrapInner > .iconBase {
  transition-property: transform;
  transition-duration: 400ms;
  transition-timing-function: ease-out;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 400ms;
  -webkit-transition-timing-function: ease-out;
  transform: rotateZ(-90deg);
  -webkit-transform: rotateZ(-90deg);
}

#iconListOrigin.withDelay > .iconWrap > .iconWrapInner > .iconBase {
  transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
}

.commonIcon {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transition-property: transform, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease-out, steps(1, start);
  -webkit-transition-property: -webkit-transform, box-shadow;
  -webkit-transition-duration: 200ms;
  -webkit-transition-timing-function: ease-out, steps(1, start);
}

.iconBase.typeUser > .commonIcon {
  box-shadow: 0 0 0 0.6rem rgb(255, 255, 255);
}

.iconBase.active > .commonIcon {
  box-shadow: 0 0 0 0.6rem rgb(255, 194, 57);
  transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transition-timing-function: ease-in, steps(1, end);
  -webkit-transition-timing-function: ease-in, steps(1, end);
}

#iconListOrigin.withDelay > .iconWrap > .iconWrapInner > .iconBase.active > .commonIcon {
  transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
}

.favMarkWrap {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  /* TODO Tentative size */
  width: 8.0rem;
  height: 8.0rem;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transition-property: transform, opacity;
  transition-duration: 200ms, 200ms;
  transition-timing-function: ease-out, ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -webkit-transition-duration: 200ms, 200ms;
  -webkit-transition-timing-function: ease-out, ease-out;
  opacity: 0.0;
}

.iconBase.active > .favMarkWrap {
  transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transition-timing-function: ease-in, ease-out;
  -webkit-transition-timing-function: ease-in, ease-out;
}

#iconListOrigin.withDelay > .iconWrap > .iconWrapInner > .iconBase.active > .favMarkWrap {
  transition-delay: 400ms, 200ms;
  -webkit-transition-delay: 400ms, 200ms;
}

.favMarkWrap.show {
  transition-duration: 200ms, 50ms;
  -webkit-transition-duration: 200ms, 50ms;
  opacity: 1.0;
}

.iconBase.active > .favMarkWrap.show {
  transition-timing-function: ease-in, ease-in;
  -webkit-transition-timing-function: ease-in, ease-in;
}

.favMark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 200ms;
  -webkit-transition-timing-function: ease-out;
}

.favMarkWrap.show > .favMark {
  transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.2, 2.5, 1.0, 1.0);
  transition-delay: -50ms;
  transition-duration: 250ms;
  -webkit-transition-timing-function: cubic-bezier(0.2, 2.5, 1.0, 1.0);
  -webkit-transition-delay: -50ms;
}

.iconExp {
  position: absolute;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  left: -100%;
  bottom: -5.0rem;
  width: 300%;
  height: 5.0rem;
  font-size: 2.8rem;
  visibility: hidden;
  text-shadow: 0.2rem 0.2rem rgba(0, 0, 0, 0.3);
  transition-property: visibility;
  transition-duration: 200ms;
  transition-timing-function: steps(1, start);
  -webkit-transition-property: visibility;
  -webkit-transition-duration: 200ms;
  -webkit-transition-timing-function: steps(1, start);
}

.iconBase.active > .iconExp {
  visibility: visible;
  transition-timing-function: steps(1, end);
  transition-delay: 100ms;
  -webkit-transition-timing-function: steps(1, end);
  -webkit-transition-delay: 100ms;
}

#iconListOrigin.withDelay > .iconWrap > .iconWrapInner > .iconBase.active > .iconExp {
  transition-delay: 700ms;
  -webkit-transition-delay: 700ms;
}

#iconListOrigin.hide > .iconWrap > .iconWrapInner > .iconBase.active > .iconExp {
  visibility: hidden;
  transition-property: none;
  -webkit-transition-property: none;
}

@keyframes rotationStar {
  0% {
    transform: rotateZ(-180deg) scale(0.3);
    opacity: 0.0;
  }
  40% {
    transform: rotateZ(0deg) scale(1.0);
    opacity: 1.0;
  }
  60% {
    transform: rotateZ(0deg) scale(1.0);
    opacity: 1.0;
  }
  100% {
    transform: rotateZ(90deg) scale(2.0);
    opacity: 0;
  }
}

@-webkit-keyframes rotationStar {
  0% {
    -webkit-transform: rotateZ(-180deg) scale(0.3);
    opacity: 0.0;
  }
  40% {
    -webkit-transform: rotateZ(0deg) scale(1.0);
    opacity: 1.0;
  }
  60% {
    -webkit-transform: rotateZ(0deg) scale(1.0);
    opacity: 1.0;
  }
  100% {
    -webkit-transform: rotateZ(90deg) scale(2.0);
    opacity: 0;
  }
}

@keyframes showMsg {
  0% {
    transform: scale(0.4);
    opacity: 0.0;
  }
  25% {
    opacity: 1.0;
  }
  80% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.0;
  }
}

@-webkit-keyframes showMsg {
  0% {
    -webkit-transform: scale(0.4);
    opacity: 0.0;
  }
  25% {
    opacity: 1.0;
  }
  80% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1.2);
    opacity: 0.0;
  }
}
