// out: big-emote.css, sourcemap: false, compress: false
#bigEmoteContainer {
  z-index: 400;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .bigEmote {
    position: absolute;
    width: 112px;
    height: auto;
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
  }

  .hidden-scale {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  .appear {
    animation: appear-grow-shrink 3s ease-out forwards;
  }

  .fade-out {
    transition: opacity 1s ease;
    opacity: 0;
  }

  @keyframes appear-grow-shrink {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    40% {
      transform: translate(-50%, -50%) scale(5);
      opacity: 1;
    }
    60% {
      transform: translate(-50%, -50%) scale(5);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }  

}