#special {
  opacity: 0;
  width: 100%;
  max-width: 800px;
  height: 400px;
  position: absolute;
  top: 178px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: url(../images/effect.png) no-repeat center top;
  background-size: 100% auto;
}

#special[data-sq="0"] {
  background-position-y: 0%;
}

#special[data-sq="1"] {
  background-position-y: 4.2%;
}

#special[data-sq="2"] {
  background-position-y: 8.4%;
}

#special[data-sq="3"] {
  background-position-y: 12.6%;
}

#special[data-sq="4"] {
  background-position-y: 16.8%;
}

#special[data-sq="5"] {
  background-position-y: 21%;
}

#special[data-sq="6"] {
  background-position-y: 25.2%;
}

#special[data-sq="7"] {
  background-position-y: 29.4%;
}

#special[data-sq="8"] {
  background-position-y: 33.6%;
}

#special[data-sq="9"] {
  background-position-y: 37.8%;
}

#special[data-sq="10"] {
  background-position-y: 42%;
}

#special[data-sq="11"] {
  background-position-y: 46.2%;
}

#special[data-sq="12"] {
  background-position-y: 50.4%;
}

#special[data-sq="13"] {
  background-position-y: 54.6%;
}

#special[data-sq="14"] {
  background-position-y: 58.8%;
}

#special[data-sq="15"] {
  background-position-y: 63%;
}

#special[data-sq="16"] {
  background-position-y: 67.2%;
}

#special[data-sq="17"] {
  background-position-y: 71.4%;
}

#special[data-sq="18"] {
  background-position-y: 75.6%;
}

#special[data-sq="19"] {
  background-position-y: 79.8%;
}

#special[data-sq="20"] {
  background-position-y: 84%;
}

#special[data-sq="21"] {
  background-position-y: 88.2%;
}

#special[data-sq="22"] {
  background-position-y: 92.4%;
}

#special[data-sq="23"] {
  background-position-y: 96.6%;
}

#special[data-sq="24"] {
  background-position-y: 100.8%;
}
/*# sourceMappingURL=gun-effect.css.map */