.canvas {
  display: flex;
  align-items: center;
  width: 65px;
  height: 65px;
  position: relative;
}
.total-counter {
  display: flex;
  justify-content: left;
  align-items: start;
  width: 100%;
  position: absolute;
  margin-left: 60px;
  color: rgba(0, 0, 0, 0.84);
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.total-counter.fader {
  animation: fade-in 1400ms forwards;
}
.clap-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 50%;
  z-index: 2;
  background: #fff;
  cursor: pointer;
  margin-left: 5px;
}
.clap-container img{
	height: 50px;
}
.clap-icon {
  font-size: 30px;
  color: #03a87c;
  width: 30px;
  height: 30px;
}
.clap-container:hover {
  border: 1px solid #03a87c;
}
.clap-container.scale {
  animation: scaleAndBack 700ms forwards;
}
.click-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 50px;
  background-color: #03a87c;
  border-radius: 50%;
  z-index: 1;
	opacity:0;
  margin-left: 12px;
}
.counter {
  font-family: sans-serif;
  font-size: 14px;
  color: #fff;
}
.click-counter.first-active {
  animation: first-bump-in 1s forwards;
}
.click-counter.active {
  animation: bump-in 1s forwards;
}
.clap-container-sonar {
  width: 60px;
  height: 60px;
  background: #03a87c;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  z-index: 0;
}
.hover-active {
  animation: sonar-wave 2s forwards;
}
.particles-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	position: absolute;
}
.triangle {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 10px solid red;
  border-bottom: 4px solid transparent;
  position: absolute;
}
.square {
  width: 5px;
  height: 5px;
  background: #03a87c;
  position: absolute;
  left: -15px;
  top: 0;
}
.pop-top {
  animation: pop-top 1s forwards;
}
.pop-top-left {
  animation: pop-top-left 1s forwards;
}
.pop-top-right {
  animation: pop-top-right 1s forwards;
}
.pop-bottom-right {
  animation: pop-bottom-right 1s forwards;
}
.pop-bottom-left {
  animation: pop-bottom-left 1s forwards;
}
@keyframes sonar-wave {
    0% {
        opacity: 0.7;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes pop-top {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 0.4;
    }
    100% {
        transform: translate(0, -100px) rotate(0);
        opacity: 0;
    }
}
@keyframes pop-top-left {
    0% {
        transform: translate(0, 0) rotate(-55deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(-100px, -50px) rotate(-55deg);
        opacity: 0;
    }
}
@keyframes pop-top-right {
    0% {
        transform: translate(0, 0) rotate(55deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(100px, -50px) rotate(55deg);
        opacity: 0;
    }
}
@keyframes pop-bottom-right {
    0% {
        transform: translate(0, 0) rotate(135deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(70px, 80px) rotate(135deg);
        opacity: 0;
    }
}
@keyframes pop-bottom-left {
    0% {
        transform: translate(0, 0) rotate(-135deg);
        opacity: 0.4;
    }
    100% {
        transform: translate(-70px, 80px) rotate(-135deg);
        opacity: 0;
    }
}
@keyframes first-bump-in {
    0% {
       transform: translateY(-65px);
       opacity: 1;
    }
    50% {
        transform: translateY(-80px);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

@keyframes bump-in {
    0% {
       transform: translateY(-80px) scale(0.9);
       opacity: 1;
    }
    50% {
        transform: translateY(-80px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}
@keyframes scaleAndBack {
    0% {
       transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}