body {
  background: #feffef;
  font-family: Helvetica, sans-serif;
}

@-webkit-keyframes bang {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-moz-keyframes bang {
  from {
    -moz-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes bang {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.hoverme {
  width: 80%;
  margin: 150px auto 0;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}
.hoverme span {
  color: #333;
  font-size: 4em;
}
.hoverme i {
  position: absolute;
  display: block;
  left: 50%;
  top: 0;
  width: 3px;
  height: 5px;
  background: red;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(1) {
  -webkit-transform: translate3d(-56px, -71px, 0) rotate(211deg);
  -moz-transform: translate3d(-56px, -71px, 0) rotate(211deg);
  -ms-transform: translate3d(-56px, -71px, 0) rotate(211deg);
  -o-transform: translate3d(-56px, -71px, 0) rotate(211deg);
  transform: translate3d(-56px, -71px, 0) rotate(211deg);
  background: #ff0073;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(2) {
  -webkit-transform: translate3d(85px, -66px, 0) rotate(298deg);
  -moz-transform: translate3d(85px, -66px, 0) rotate(298deg);
  -ms-transform: translate3d(85px, -66px, 0) rotate(298deg);
  -o-transform: translate3d(85px, -66px, 0) rotate(298deg);
  transform: translate3d(85px, -66px, 0) rotate(298deg);
  background: #ff5900;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(3) {
  -webkit-transform: translate3d(-5px, -85px, 0) rotate(180deg);
  -moz-transform: translate3d(-5px, -85px, 0) rotate(180deg);
  -ms-transform: translate3d(-5px, -85px, 0) rotate(180deg);
  -o-transform: translate3d(-5px, -85px, 0) rotate(180deg);
  transform: translate3d(-5px, -85px, 0) rotate(180deg);
  background: #007bff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(4) {
  -webkit-transform: translate3d(0px, -89px, 0) rotate(20deg);
  -moz-transform: translate3d(0px, -89px, 0) rotate(20deg);
  -ms-transform: translate3d(0px, -89px, 0) rotate(20deg);
  -o-transform: translate3d(0px, -89px, 0) rotate(20deg);
  transform: translate3d(0px, -89px, 0) rotate(20deg);
  background: #ff00bb;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(5) {
  -webkit-transform: translate3d(-47px, -74px, 0) rotate(270deg);
  -moz-transform: translate3d(-47px, -74px, 0) rotate(270deg);
  -ms-transform: translate3d(-47px, -74px, 0) rotate(270deg);
  -o-transform: translate3d(-47px, -74px, 0) rotate(270deg);
  transform: translate3d(-47px, -74px, 0) rotate(270deg);
  background: #ff0033;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(6) {
  -webkit-transform: translate3d(-39px, -72px, 0) rotate(251deg);
  -moz-transform: translate3d(-39px, -72px, 0) rotate(251deg);
  -ms-transform: translate3d(-39px, -72px, 0) rotate(251deg);
  -o-transform: translate3d(-39px, -72px, 0) rotate(251deg);
  transform: translate3d(-39px, -72px, 0) rotate(251deg);
  background: #ff00bb;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(7) {
  -webkit-transform: translate3d(20px, -79px, 0) rotate(201deg);
  -moz-transform: translate3d(20px, -79px, 0) rotate(201deg);
  -ms-transform: translate3d(20px, -79px, 0) rotate(201deg);
  -o-transform: translate3d(20px, -79px, 0) rotate(201deg);
  transform: translate3d(20px, -79px, 0) rotate(201deg);
  background: #ff0080;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(8) {
  -webkit-transform: translate3d(-85px, -59px, 0) rotate(134deg);
  -moz-transform: translate3d(-85px, -59px, 0) rotate(134deg);
  -ms-transform: translate3d(-85px, -59px, 0) rotate(134deg);
  -o-transform: translate3d(-85px, -59px, 0) rotate(134deg);
  transform: translate3d(-85px, -59px, 0) rotate(134deg);
  background: #bfff00;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(9) {
  -webkit-transform: translate3d(44px, -74px, 0) rotate(218deg);
  -moz-transform: translate3d(44px, -74px, 0) rotate(218deg);
  -ms-transform: translate3d(44px, -74px, 0) rotate(218deg);
  -o-transform: translate3d(44px, -74px, 0) rotate(218deg);
  transform: translate3d(44px, -74px, 0) rotate(218deg);
  background: #00ff33;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(10) {
  -webkit-transform: translate3d(-19px, -77px, 0) rotate(215deg);
  -moz-transform: translate3d(-19px, -77px, 0) rotate(215deg);
  -ms-transform: translate3d(-19px, -77px, 0) rotate(215deg);
  -o-transform: translate3d(-19px, -77px, 0) rotate(215deg);
  transform: translate3d(-19px, -77px, 0) rotate(215deg);
  background: #00ff66;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(11) {
  -webkit-transform: translate3d(-63px, -83px, 0) rotate(87deg);
  -moz-transform: translate3d(-63px, -83px, 0) rotate(87deg);
  -ms-transform: translate3d(-63px, -83px, 0) rotate(87deg);
  -o-transform: translate3d(-63px, -83px, 0) rotate(87deg);
  transform: translate3d(-63px, -83px, 0) rotate(87deg);
  background: #00a6ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(12) {
  -webkit-transform: translate3d(-2px, -51px, 0) rotate(194deg);
  -moz-transform: translate3d(-2px, -51px, 0) rotate(194deg);
  -ms-transform: translate3d(-2px, -51px, 0) rotate(194deg);
  -o-transform: translate3d(-2px, -51px, 0) rotate(194deg);
  transform: translate3d(-2px, -51px, 0) rotate(194deg);
  background: #aa00ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(13) {
  -webkit-transform: translate3d(53px, -87px, 0) rotate(344deg);
  -moz-transform: translate3d(53px, -87px, 0) rotate(344deg);
  -ms-transform: translate3d(53px, -87px, 0) rotate(344deg);
  -o-transform: translate3d(53px, -87px, 0) rotate(344deg);
  transform: translate3d(53px, -87px, 0) rotate(344deg);
  background: #00ff55;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(14) {
  -webkit-transform: translate3d(-61px, -52px, 0) rotate(350deg);
  -moz-transform: translate3d(-61px, -52px, 0) rotate(350deg);
  -ms-transform: translate3d(-61px, -52px, 0) rotate(350deg);
  -o-transform: translate3d(-61px, -52px, 0) rotate(350deg);
  transform: translate3d(-61px, -52px, 0) rotate(350deg);
  background: #2600ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(15) {
  -webkit-transform: translate3d(-80px, -57px, 0) rotate(272deg);
  -moz-transform: translate3d(-80px, -57px, 0) rotate(272deg);
  -ms-transform: translate3d(-80px, -57px, 0) rotate(272deg);
  -o-transform: translate3d(-80px, -57px, 0) rotate(272deg);
  transform: translate3d(-80px, -57px, 0) rotate(272deg);
  background: #0dff00;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(16) {
  -webkit-transform: translate3d(18px, -96px, 0) rotate(121deg);
  -moz-transform: translate3d(18px, -96px, 0) rotate(121deg);
  -ms-transform: translate3d(18px, -96px, 0) rotate(121deg);
  -o-transform: translate3d(18px, -96px, 0) rotate(121deg);
  transform: translate3d(18px, -96px, 0) rotate(121deg);
  background: #ffd900;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(17) {
  -webkit-transform: translate3d(-24px, -72px, 0) rotate(63deg);
  -moz-transform: translate3d(-24px, -72px, 0) rotate(63deg);
  -ms-transform: translate3d(-24px, -72px, 0) rotate(63deg);
  -o-transform: translate3d(-24px, -72px, 0) rotate(63deg);
  transform: translate3d(-24px, -72px, 0) rotate(63deg);
  background: #ff00ae;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(18) {
  -webkit-transform: translate3d(-18px, -93px, 0) rotate(290deg);
  -moz-transform: translate3d(-18px, -93px, 0) rotate(290deg);
  -ms-transform: translate3d(-18px, -93px, 0) rotate(290deg);
  -o-transform: translate3d(-18px, -93px, 0) rotate(290deg);
  transform: translate3d(-18px, -93px, 0) rotate(290deg);
  background: #00e1ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(19) {
  -webkit-transform: translate3d(-67px, -77px, 0) rotate(265deg);
  -moz-transform: translate3d(-67px, -77px, 0) rotate(265deg);
  -ms-transform: translate3d(-67px, -77px, 0) rotate(265deg);
  -o-transform: translate3d(-67px, -77px, 0) rotate(265deg);
  transform: translate3d(-67px, -77px, 0) rotate(265deg);
  background: #ff7300;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(20) {
  -webkit-transform: translate3d(-79px, -56px, 0) rotate(21deg);
  -moz-transform: translate3d(-79px, -56px, 0) rotate(21deg);
  -ms-transform: translate3d(-79px, -56px, 0) rotate(21deg);
  -o-transform: translate3d(-79px, -56px, 0) rotate(21deg);
  transform: translate3d(-79px, -56px, 0) rotate(21deg);
  background: #c4ff00;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(21) {
  -webkit-transform: translate3d(-10px, -53px, 0) rotate(51deg);
  -moz-transform: translate3d(-10px, -53px, 0) rotate(51deg);
  -ms-transform: translate3d(-10px, -53px, 0) rotate(51deg);
  -o-transform: translate3d(-10px, -53px, 0) rotate(51deg);
  transform: translate3d(-10px, -53px, 0) rotate(51deg);
  background: #007bff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(22) {
  -webkit-transform: translate3d(70px, -95px, 0) rotate(23deg);
  -moz-transform: translate3d(70px, -95px, 0) rotate(23deg);
  -ms-transform: translate3d(70px, -95px, 0) rotate(23deg);
  -o-transform: translate3d(70px, -95px, 0) rotate(23deg);
  transform: translate3d(70px, -95px, 0) rotate(23deg);
  background: #0073ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(23) {
  -webkit-transform: translate3d(73px, -50px, 0) rotate(93deg);
  -moz-transform: translate3d(73px, -50px, 0) rotate(93deg);
  -ms-transform: translate3d(73px, -50px, 0) rotate(93deg);
  -o-transform: translate3d(73px, -50px, 0) rotate(93deg);
  transform: translate3d(73px, -50px, 0) rotate(93deg);
  background: #ff002b;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(24) {
  -webkit-transform: translate3d(-78px, -73px, 0) rotate(309deg);
  -moz-transform: translate3d(-78px, -73px, 0) rotate(309deg);
  -ms-transform: translate3d(-78px, -73px, 0) rotate(309deg);
  -o-transform: translate3d(-78px, -73px, 0) rotate(309deg);
  transform: translate3d(-78px, -73px, 0) rotate(309deg);
  background: #00ff95;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(25) {
  -webkit-transform: translate3d(-66px, -75px, 0) rotate(39deg);
  -moz-transform: translate3d(-66px, -75px, 0) rotate(39deg);
  -ms-transform: translate3d(-66px, -75px, 0) rotate(39deg);
  -o-transform: translate3d(-66px, -75px, 0) rotate(39deg);
  transform: translate3d(-66px, -75px, 0) rotate(39deg);
  background: #00ffa2;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(26) {
  -webkit-transform: translate3d(-62px, -82px, 0) rotate(251deg);
  -moz-transform: translate3d(-62px, -82px, 0) rotate(251deg);
  -ms-transform: translate3d(-62px, -82px, 0) rotate(251deg);
  -o-transform: translate3d(-62px, -82px, 0) rotate(251deg);
  transform: translate3d(-62px, -82px, 0) rotate(251deg);
  background: #ff002b;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(27) {
  -webkit-transform: translate3d(-8px, -81px, 0) rotate(206deg);
  -moz-transform: translate3d(-8px, -81px, 0) rotate(206deg);
  -ms-transform: translate3d(-8px, -81px, 0) rotate(206deg);
  -o-transform: translate3d(-8px, -81px, 0) rotate(206deg);
  transform: translate3d(-8px, -81px, 0) rotate(206deg);
  background: #00ff15;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(28) {
  -webkit-transform: translate3d(-27px, -76px, 0) rotate(212deg);
  -moz-transform: translate3d(-27px, -76px, 0) rotate(212deg);
  -ms-transform: translate3d(-27px, -76px, 0) rotate(212deg);
  -o-transform: translate3d(-27px, -76px, 0) rotate(212deg);
  transform: translate3d(-27px, -76px, 0) rotate(212deg);
  background: #95ff00;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(29) {
  -webkit-transform: translate3d(44px, -86px, 0) rotate(54deg);
  -moz-transform: translate3d(44px, -86px, 0) rotate(54deg);
  -ms-transform: translate3d(44px, -86px, 0) rotate(54deg);
  -o-transform: translate3d(44px, -86px, 0) rotate(54deg);
  transform: translate3d(44px, -86px, 0) rotate(54deg);
  background: #ff2200;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(30) {
  -webkit-transform: translate3d(-27px, -61px, 0) rotate(346deg);
  -moz-transform: translate3d(-27px, -61px, 0) rotate(346deg);
  -ms-transform: translate3d(-27px, -61px, 0) rotate(346deg);
  -o-transform: translate3d(-27px, -61px, 0) rotate(346deg);
  transform: translate3d(-27px, -61px, 0) rotate(346deg);
  background: #00ffb3;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(31) {
  -webkit-transform: translate3d(24px, -76px, 0) rotate(3deg);
  -moz-transform: translate3d(24px, -76px, 0) rotate(3deg);
  -ms-transform: translate3d(24px, -76px, 0) rotate(3deg);
  -o-transform: translate3d(24px, -76px, 0) rotate(3deg);
  transform: translate3d(24px, -76px, 0) rotate(3deg);
  background: #b300ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(32) {
  -webkit-transform: translate3d(-46px, -88px, 0) rotate(355deg);
  -moz-transform: translate3d(-46px, -88px, 0) rotate(355deg);
  -ms-transform: translate3d(-46px, -88px, 0) rotate(355deg);
  -o-transform: translate3d(-46px, -88px, 0) rotate(355deg);
  transform: translate3d(-46px, -88px, 0) rotate(355deg);
  background: #00b7ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(33) {
  -webkit-transform: translate3d(50px, -67px, 0) rotate(18deg);
  -moz-transform: translate3d(50px, -67px, 0) rotate(18deg);
  -ms-transform: translate3d(50px, -67px, 0) rotate(18deg);
  -o-transform: translate3d(50px, -67px, 0) rotate(18deg);
  transform: translate3d(50px, -67px, 0) rotate(18deg);
  background: #ff0037;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(34) {
  -webkit-transform: translate3d(-55px, -74px, 0) rotate(317deg);
  -moz-transform: translate3d(-55px, -74px, 0) rotate(317deg);
  -ms-transform: translate3d(-55px, -74px, 0) rotate(317deg);
  -o-transform: translate3d(-55px, -74px, 0) rotate(317deg);
  transform: translate3d(-55px, -74px, 0) rotate(317deg);
  background: #ff5500;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(35) {
  -webkit-transform: translate3d(-46px, -75px, 0) rotate(59deg);
  -moz-transform: translate3d(-46px, -75px, 0) rotate(59deg);
  -ms-transform: translate3d(-46px, -75px, 0) rotate(59deg);
  -o-transform: translate3d(-46px, -75px, 0) rotate(59deg);
  transform: translate3d(-46px, -75px, 0) rotate(59deg);
  background: #1100ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(36) {
  -webkit-transform: translate3d(18px, -52px, 0) rotate(339deg);
  -moz-transform: translate3d(18px, -52px, 0) rotate(339deg);
  -ms-transform: translate3d(18px, -52px, 0) rotate(339deg);
  -o-transform: translate3d(18px, -52px, 0) rotate(339deg);
  transform: translate3d(18px, -52px, 0) rotate(339deg);
  background: lime;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(37) {
  -webkit-transform: translate3d(3px, -76px, 0) rotate(224deg);
  -moz-transform: translate3d(3px, -76px, 0) rotate(224deg);
  -ms-transform: translate3d(3px, -76px, 0) rotate(224deg);
  -o-transform: translate3d(3px, -76px, 0) rotate(224deg);
  transform: translate3d(3px, -76px, 0) rotate(224deg);
  background: #6f00ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(38) {
  -webkit-transform: translate3d(-69px, -97px, 0) rotate(293deg);
  -moz-transform: translate3d(-69px, -97px, 0) rotate(293deg);
  -ms-transform: translate3d(-69px, -97px, 0) rotate(293deg);
  -o-transform: translate3d(-69px, -97px, 0) rotate(293deg);
  transform: translate3d(-69px, -97px, 0) rotate(293deg);
  background: #bbff00;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(39) {
  -webkit-transform: translate3d(21px, -73px, 0) rotate(219deg);
  -moz-transform: translate3d(21px, -73px, 0) rotate(219deg);
  -ms-transform: translate3d(21px, -73px, 0) rotate(219deg);
  -o-transform: translate3d(21px, -73px, 0) rotate(219deg);
  transform: translate3d(21px, -73px, 0) rotate(219deg);
  background: #00ffea;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(40) {
  -webkit-transform: translate3d(-89px, -58px, 0) rotate(83deg);
  -moz-transform: translate3d(-89px, -58px, 0) rotate(83deg);
  -ms-transform: translate3d(-89px, -58px, 0) rotate(83deg);
  -o-transform: translate3d(-89px, -58px, 0) rotate(83deg);
  transform: translate3d(-89px, -58px, 0) rotate(83deg);
  background: #c4ff00;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(41) {
  -webkit-transform: translate3d(63px, -94px, 0) rotate(13deg);
  -moz-transform: translate3d(63px, -94px, 0) rotate(13deg);
  -ms-transform: translate3d(63px, -94px, 0) rotate(13deg);
  -o-transform: translate3d(63px, -94px, 0) rotate(13deg);
  transform: translate3d(63px, -94px, 0) rotate(13deg);
  background: #ffc800;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(42) {
  -webkit-transform: translate3d(-27px, -73px, 0) rotate(150deg);
  -moz-transform: translate3d(-27px, -73px, 0) rotate(150deg);
  -ms-transform: translate3d(-27px, -73px, 0) rotate(150deg);
  -o-transform: translate3d(-27px, -73px, 0) rotate(150deg);
  transform: translate3d(-27px, -73px, 0) rotate(150deg);
  background: #00ff2f;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(43) {
  -webkit-transform: translate3d(66px, -53px, 0) rotate(119deg);
  -moz-transform: translate3d(66px, -53px, 0) rotate(119deg);
  -ms-transform: translate3d(66px, -53px, 0) rotate(119deg);
  -o-transform: translate3d(66px, -53px, 0) rotate(119deg);
  transform: translate3d(66px, -53px, 0) rotate(119deg);
  background: #ff0062;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(44) {
  -webkit-transform: translate3d(55px, -95px, 0) rotate(125deg);
  -moz-transform: translate3d(55px, -95px, 0) rotate(125deg);
  -ms-transform: translate3d(55px, -95px, 0) rotate(125deg);
  -o-transform: translate3d(55px, -95px, 0) rotate(125deg);
  transform: translate3d(55px, -95px, 0) rotate(125deg);
  background: #a200ff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(45) {
  -webkit-transform: translate3d(83px, -56px, 0) rotate(341deg);
  -moz-transform: translate3d(83px, -56px, 0) rotate(341deg);
  -ms-transform: translate3d(83px, -56px, 0) rotate(341deg);
  -o-transform: translate3d(83px, -56px, 0) rotate(341deg);
  transform: translate3d(83px, -56px, 0) rotate(341deg);
  background: #00ff1e;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(46) {
  -webkit-transform: translate3d(49px, -63px, 0) rotate(257deg);
  -moz-transform: translate3d(49px, -63px, 0) rotate(257deg);
  -ms-transform: translate3d(49px, -63px, 0) rotate(257deg);
  -o-transform: translate3d(49px, -63px, 0) rotate(257deg);
  transform: translate3d(49px, -63px, 0) rotate(257deg);
  background: #00ff88;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(47) {
  -webkit-transform: translate3d(-35px, -76px, 0) rotate(320deg);
  -moz-transform: translate3d(-35px, -76px, 0) rotate(320deg);
  -ms-transform: translate3d(-35px, -76px, 0) rotate(320deg);
  -o-transform: translate3d(-35px, -76px, 0) rotate(320deg);
  transform: translate3d(-35px, -76px, 0) rotate(320deg);
  background: #ff5500;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(48) {
  -webkit-transform: translate3d(-33px, -57px, 0) rotate(325deg);
  -moz-transform: translate3d(-33px, -57px, 0) rotate(325deg);
  -ms-transform: translate3d(-33px, -57px, 0) rotate(325deg);
  -o-transform: translate3d(-33px, -57px, 0) rotate(325deg);
  transform: translate3d(-33px, -57px, 0) rotate(325deg);
  background: #80ff00;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(49) {
  -webkit-transform: translate3d(-45px, -74px, 0) rotate(129deg);
  -moz-transform: translate3d(-45px, -74px, 0) rotate(129deg);
  -ms-transform: translate3d(-45px, -74px, 0) rotate(129deg);
  -o-transform: translate3d(-45px, -74px, 0) rotate(129deg);
  transform: translate3d(-45px, -74px, 0) rotate(129deg);
  background: #ffc400;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}
.hoverme:hover i:nth-of-type(50) {
  -webkit-transform: translate3d(29px, -69px, 0) rotate(253deg);
  -moz-transform: translate3d(29px, -69px, 0) rotate(253deg);
  -ms-transform: translate3d(29px, -69px, 0) rotate(253deg);
  -o-transform: translate3d(29px, -69px, 0) rotate(253deg);
  transform: translate3d(29px, -69px, 0) rotate(253deg);
  background: #00bbff;
  -webkit-animation: bang 700ms ease-out forwards;
  -moz-animation: bang 700ms ease-out forwards;
  animation: bang 700ms ease-out forwards;
  opacity: 0;
}