.popup-icon,
.popup-icon-gif {
  background: rgba(0, 136, 212, 0.08);
  width: 32px;
  height: 0;
  padding-top: 24px;
  border-radius: 8px;
  text-indent: -9999em;
  position: relative;
  display: inline-block;
  border: 0;
  vertical-align: bottom;
}

.popup-icon:hover,
.popup-icon-gif:hover {
  background: rgba(52, 156, 219, 1);
  border: 0;
}

.popup-icon:before {
  position: absolute;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  background: url('../images/image-icon-blue.svg') center center no-repeat;
}
.popup-icon:hover:before {
  background: url('../images/image-icon-white.svg') center center no-repeat;
}

.popup-icon-gif:before {
  position: absolute;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  background: url('../images/play-icon-blue.svg') center center no-repeat;
}
.popup-icon-gif:hover:before {
  background: url('../images/play-icon-white.svg') center center no-repeat;
}