.spider__inner {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.spider__inner .spider-body {
  -webkit-animation-name: body-creep;
          animation-name: body-creep;
  -webkit-animation-duration: .2s;
          animation-duration: .2s;
  -webkit-animation-timing-function: cubic-bezier(0.365, 0.005, 0.355, 1);
          animation-timing-function: cubic-bezier(0.365, 0.005, 0.355, 1);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes body-creep {
  0% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
}
@keyframes body-creep {
  0% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
}
html {
  font-size: 10px;
  background: transparent;
}

.spider-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 9999 !important;
}

span {
  display: block;
}

#spider {
  z-index: 9999;
  position: absolute;
  top: -32rem;
  left: -42rem;
  width: 47.5rem;
  height: 52.6rem;
}

.spider__inner {
  position: relative;
  width: 47.5rem;
  height: 52.6rem;
  -webkit-transform: scale(0.4) rotate(90deg);
          transform: scale(0.4) rotate(90deg);
}
.spider__inner .spider-body {
  content: "";
  display: block;
  position: absolute;
}
.spider__inner .spider-body {
  top: 16%;
  left: 36%;
  width: 54rem;
  height: 50.5rem;
  background-image: url("../images/running-spider.png");
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-repeat: no-repeat;
}