.remoji {
  width: 40px;
  height: 40px;
  margin: 0 5px;
  font-size: 0.33em;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  background-color: transparent;
  background-position: center;
  background-size: 69px;
}

.remoji.float {
  margin: 0;
  animation: remoji_float 1.4s ease 1 both;
  position: absolute;
  left: 0;
}

@keyframes remoji_float {
  0% {
    transform: translate(0, 0) scale(0) rotate(var(--rotatestart));
    opacity: 0;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--translateX), var(--translateY)) scale(1) rotate(var(--rotateend));
  }
}

.remoji--sad {
    background-image: url(/img/reactions/sad_o.gif);
}


.remoji--like {
    background-image: url(/img/reactions/like_o.gif);
}

.remoji--dislike {
    background-image: url(/img/reactions/dislike_o.gif);
}

.remoji--haha {
    background-image: url(/img/reactions/haha_o.gif);
}

.remoji--wow {
    background-image: url(/img/reactions/wow_o.gif);
}

.remoji--angry {
    background-image: url(/img/reactions/angry_o.gif);
}