/* HEART ZOOM */
@-webkit-keyframes heart-zoom {

  0%,
  100% {
    -webkit-transform: scale(0.5);
    opacity: 0.2;
  }

  50% {
    -webkit-transform: scale(1.3);
    opacity: 1;
  }
}

@-moz-keyframes heart-zoom {

  0%,
  100% {
    -moz-transform: scale(0.5);
    opacity: 0.2;
  }

  50% {
    -moz-transform: scale(1.3);
    opacity: 1;
  }
}

@-ms-keyframes heart-zoom {

  0%,
  100% {
    -ms-transform: scale(0.5);
    opacity: 0.2;
  }

  50% {
    -ms-transform: scale(1.3);
    opacity: 1;
  }
}

@-o-keyframes heart-zoom {

  0%,
  100% {
    -o-transform: scale(0.5);
    opacity: 0.2;
  }

  50% {
    -o-transform: scale(1.3);
    opacity: 1;
  }
}

@keyframes heart-zoom {

  0%,
  100% {
    transform: scale(0.5);
    opacity: 0.2;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}


/* HEART ZOOM REVERSE */
@-webkit-keyframes heart-zoom-reverse {

  0%,
  100% {
    -webkit-transform: scale(1.3);
    opacity: 1;
  }

  50% {
    -webkit-transform: scale(0.5);
    opacity: 0.2;
  }
}

@-moz-keyframes heart-zoom-reverse {

  0%,
  100% {
    -moz-transform: scale(1.3);
    opacity: 1;
  }

  50% {
    -moz-transform: scale(0.5);
    opacity: 0.2;
  }
}

@-ms-keyframes heart-zoom-reverse {

  0%,
  100% {
    -ms-transform: scale(1.3);
    opacity: 1;
  }

  50% {
    -ms-transform: scale(0.5);
    opacity: 0.2;
  }
}

@-o-keyframes heart-zoom-reverse {

  0%,
  100% {
    -o-transform: scale(1.3);
    opacity: 1;
  }

  50% {
    -o-transform: scale(0.5);
    opacity: 0.2;
  }
}

@keyframes heart-zoom-reverse {

  0%,
  100% {
    transform: scale(1.3);
    opacity: 1;
  }

  50% {
    transform: scale(0.5);
    opacity: 0.2;
  }
}


.heart-animation {
  display: inline-block;
  margin: 0 auto;
  font-size: 20px;
  line-height: 20px;

  -webkit-animation: heart-zoom infinite 1.2s;
  -moz-animation: heart-zoom infinite 1.2s;
  -ms-animation: heart-zoom infinite 1.2s;
  -o-animation: heart-zoom infinite 1.2s;
  animation: heart-zoom infinite 1.2s;
}

.heart-animation i {
  color: #f0394d;
}

.heart-animation-reverse {
  display: inline-block;
  margin: 0 auto;
  padding-right: 20px;
  font-size: 20px;
  line-height: 20px;

  -webkit-animation: heart-zoom-reverse infinite 1.2s;
  -moz-animation: heart-zoom-reverse infinite 1.2s;
  -ms-animation: heart-zoom-reverse infinite 1.2s;
  -o-animation: heart-zoom-reverse infinite 1.2s;
  animation: heart-zoom-reverse infinite 1.2s;
}

.heart-animation-reverse i {
  color: #999;
}