[class*="spider"] {
  position: absolute;
  height: 40px;
  width: 50px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 40px 0 0 0;
  background: #110D04;
}
[class*="spider"] *, [class*="spider"]:before, [class*="spider"]:after, [class*="spider"] :after, [class*="spider"] :before {
  position: absolute;
  content: "";
}
[class*="spider"]:before {
  width: 1px;
  background: #AAAAAA;
  left: 50%;
  top: -300px;
  height: 300px;
}
[class*="spider"] .eye {
  top: 16px;
  height: 14px;
  width: 12px;
  background: #FFFFFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
[class*="spider"] .eye:after {
  top: 6px;
  height: 5px;
  width: 5px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: black;
}
[class*="spider"] .eye.left {
  left: 14px;
}
[class*="spider"] .eye.left:after {
  right: 3px;
}
[class*="spider"] .eye.right {
  right: 14px;
}
[class*="spider"] .eye.right:after {
  left: 3px;
}
[class*="spider"] .leg {
  top: 6px;
  height: 12px;
  width: 14px;
  border-top: 2px solid #110D04;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  z-index: 0;
}
[class*="spider"] .leg.left {
  left: -8px;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -moz-transform: rotate(36deg) skewX(-20deg);
  -ms-transform: rotate(36deg) skewX(-20deg);
  -webkit-transform: rotate(36deg) skewX(-20deg);
  transform: rotate(36deg) skewX(-20deg);
  border-left: 2px solid #110D04;
  -moz-border-radius: 60% 0 0 0;
  -webkit-border-radius: 60%;
  border-radius: 60% 0 0 0;
  -moz-animation: legs-wriggle-left 1s 0s infinite;
  -webkit-animation: legs-wriggle-left 1s 0s infinite;
  animation: legs-wriggle-left 1s 0s infinite;
}
[class*="spider"] .leg.right {
  right: -8px;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -moz-transform: rotate(-36deg) skewX(20deg);
  -ms-transform: rotate(-36deg) skewX(20deg);
  -webkit-transform: rotate(-36deg) skewX(20deg);
  transform: rotate(-36deg) skewX(20deg);
  border-right: 2px solid #110D04;
  -moz-border-radius: 0 60% 0 0;
  -webkit-border-radius: 0;
  border-radius: 0 60% 0 0;
  -moz-animation: legs-wriggle-right 1s 0.2s infinite;
  -webkit-animation: legs-wriggle-right 1s 0.2s infinite;
  animation: legs-wriggle-right 1s 0.2s infinite;
}
[class*="spider"] .leg:nth-of-type(2) {
  top: 14px;
  left: -11px;
  -moz-animation: legs-wriggle-left 1s 0.8s infinite;
  -webkit-animation: legs-wriggle-left 1s 0.8s infinite;
  animation: legs-wriggle-left 1s 0.8s infinite;
}
[class*="spider"] .leg:nth-of-type(3) {
  top: 22px;
  left: -12px;
  -moz-animation: legs-wriggle-left 1s 0.2s infinite;
  -webkit-animation: legs-wriggle-left 1s 0.2s infinite;
  animation: legs-wriggle-left 1s 0.2s infinite;
}
[class*="spider"] .leg:nth-of-type(4) {
  top: 31px;
  left: -10px;
  -moz-animation: legs-wriggle-left 1s 0.4s infinite;
  -webkit-animation: legs-wriggle-left 1s 0.4s infinite;
  animation: legs-wriggle-left 1s 0.4s infinite;
}
[class*="spider"] .leg:nth-of-type(6) {
  top: 14px;
  right: -11px;
  -moz-animation: legs-wriggle-right 1s 0.4s infinite;
  -webkit-animation: legs-wriggle-right 1s 0.4s infinite;
  animation: legs-wriggle-right 1s 0.4s infinite;
}
[class*="spider"] .leg:nth-of-type(7) {
  top: 22px;
  right: -12px;
  -moz-animation: legs-wriggle-right 1s 0.7s infinite;
  -webkit-animation: legs-wriggle-right 1s 0.7s infinite;
  animation: legs-wriggle-right 1s 0.7s infinite;
}
[class*="spider"] .leg:nth-of-type(8) {
  top: 31px;
  right: -10px;
  -moz-animation: legs-wriggle-right 1s 0.3s infinite;
  -webkit-animation: legs-wriggle-right 1s 0.3s infinite;
  animation: legs-wriggle-right 1s 0.3s infinite;
}

.spider_0 {
  left: 5%;
  -moz-animation: spider-move-0 5s infinite;
  -webkit-animation: spider-move-0 5s infinite;
  animation: spider-move-0 5s infinite;
}

.spider_1 {
  left: 20%;
  -moz-animation: spider-move-1 5s infinite;
  -webkit-animation: spider-move-1 5s infinite;
  animation: spider-move-1 5s infinite;
}

.spider_2 {
  left: 35%;
  -moz-animation: spider-move-2 5s infinite;
  -webkit-animation: spider-move-2 5s infinite;
  animation: spider-move-2 5s infinite;
}

.spider_3 {
  right: 35%;
  margin-top: 160px;
  -moz-animation: spider-move-3 5s infinite;
  -webkit-animation: spider-move-3 5s infinite;
  animation: spider-move-3 5s infinite;
}

.spider_4 {
  right: 20%;
  margin-top: 50px;
  -moz-animation: spider-move-4 5s infinite;
  -webkit-animation: spider-move-4 5s infinite;
  animation: spider-move-4 5s infinite;
}

.spider_5 {
  right: 5%;
  margin-top: 210px;
  -moz-animation: spider-move-5 5s infinite;
  -webkit-animation: spider-move-5 5s infinite;
  animation: spider-move-5 5s infinite;
}

.happy_halloween {
  font-family: 'Eater', cursive !important;
  font-size: 65px !important;
  color: #111111;
  -moz-animation: flicker 4s 0s infinite;
  -webkit-animation: flicker 4s 0s infinite;
  animation: flicker 4s 0s infinite;
}

.web-right {
  position: absolute;
  height: 200px;
  width: auto;
  right: -10px;
  top: -10px;
  z-index: 0;
  opacity: 0.7;
}

.web-left {
  position: absolute;
  left: -10px;
  top: -10px;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: 0;
  opacity: 0.7;
}

.social-circle li a{
    z-index: 2;
}

@-moz-keyframes flicker {
  0%, 6%, 12% {
    text-shadow: none;
    color: #111111;
  }
  3%, 9% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6);
    color: #fa6701;
  }
  60% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
    color: #fa6701;
  }
  100% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
    color: #fa6701;
  }
}
@-webkit-keyframes flicker {
  0%, 6%, 12% {
    text-shadow: none;
    color: #111111;
  }
  3%, 9% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6);
    color: #fa6701;
  }
  60% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
    color: #fa6701;
  }
  100% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
    color: #fa6701;
  }
}
@keyframes flicker {
  0%, 6%, 12% {
    text-shadow: none;
    color: #111111;
  }
  3%, 9% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6);
    color: #fa6701;
  }
  60% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
    color: #fa6701;
  }
  100% {
    text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1);
    color: #fa6701;
  }
}
@-moz-keyframes legs-wriggle-left {
  0%, 100% {
    -moz-transform: rotate(36deg) skewX(-20deg);
    transform: rotate(36deg) skewX(-20deg);
  }
  25%, 75% {
    -moz-transform: rotate(15deg) skewX(-20deg);
    transform: rotate(15deg) skewX(-20deg);
  }
  50% {
    -moz-transform: rotate(45deg) skewX(-20deg);
    transform: rotate(45deg) skewX(-20deg);
  }
}
@-webkit-keyframes legs-wriggle-left {
  0%, 100% {
    -webkit-transform: rotate(36deg) skewX(-20deg);
    transform: rotate(36deg) skewX(-20deg);
  }
  25%, 75% {
    -webkit-transform: rotate(15deg) skewX(-20deg);
    transform: rotate(15deg) skewX(-20deg);
  }
  50% {
    -webkit-transform: rotate(45deg) skewX(-20deg);
    transform: rotate(45deg) skewX(-20deg);
  }
}
@keyframes legs-wriggle-left {
  0%, 100% {
    -moz-transform: rotate(36deg) skewX(-20deg);
    -ms-transform: rotate(36deg) skewX(-20deg);
    -webkit-transform: rotate(36deg) skewX(-20deg);
    transform: rotate(36deg) skewX(-20deg);
  }
  25%, 75% {
    -moz-transform: rotate(15deg) skewX(-20deg);
    -ms-transform: rotate(15deg) skewX(-20deg);
    -webkit-transform: rotate(15deg) skewX(-20deg);
    transform: rotate(15deg) skewX(-20deg);
  }
  50% {
    -moz-transform: rotate(45deg) skewX(-20deg);
    -ms-transform: rotate(45deg) skewX(-20deg);
    -webkit-transform: rotate(45deg) skewX(-20deg);
    transform: rotate(45deg) skewX(-20deg);
  }
}
@-moz-keyframes legs-wriggle-right {
  0%, 100% {
    -moz-transform: rotate(-36deg) skewX(20deg);
    transform: rotate(-36deg) skewX(20deg);
  }
  25%, 75% {
    -moz-transform: rotate(-15deg) skewX(20deg);
    transform: rotate(-15deg) skewX(20deg);
  }
  50% {
    -moz-transform: rotate(-45deg) skewX(20deg);
    transform: rotate(-45deg) skewX(20deg);
  }
}
@-webkit-keyframes legs-wriggle-right {
  0%, 100% {
    -webkit-transform: rotate(-36deg) skewX(20deg);
    transform: rotate(-36deg) skewX(20deg);
  }
  25%, 75% {
    -webkit-transform: rotate(-15deg) skewX(20deg);
    transform: rotate(-15deg) skewX(20deg);
  }
  50% {
    -webkit-transform: rotate(-45deg) skewX(20deg);
    transform: rotate(-45deg) skewX(20deg);
  }
}
@keyframes legs-wriggle-right {
  0%, 100% {
    -moz-transform: rotate(-36deg) skewX(20deg);
    -ms-transform: rotate(-36deg) skewX(20deg);
    -webkit-transform: rotate(-36deg) skewX(20deg);
    transform: rotate(-36deg) skewX(20deg);
  }
  25%, 75% {
    -moz-transform: rotate(-15deg) skewX(20deg);
    -ms-transform: rotate(-15deg) skewX(20deg);
    -webkit-transform: rotate(-15deg) skewX(20deg);
    transform: rotate(-15deg) skewX(20deg);
  }
  50% {
    -moz-transform: rotate(-45deg) skewX(20deg);
    -ms-transform: rotate(-45deg) skewX(20deg);
    -webkit-transform: rotate(-45deg) skewX(20deg);
    transform: rotate(-45deg) skewX(20deg);
  }
}
@-moz-keyframes spider-move-0 {
  0%, 100% {
    margin-top: 100px;
  }
  62% {
    margin-top: calc(100px + 56px);
  }
}
@-webkit-keyframes spider-move-0 {
  0%, 100% {
    margin-top: 100px;
  }
  62% {
    margin-top: calc(100px + 56px);
  }
}
@keyframes spider-move-0 {
  0%, 100% {
    margin-top: 100px;
  }
  62% {
    margin-top: calc(100px + 56px);
  }
}
@-moz-keyframes spider-move-1 {
  0%, 100% {
    margin-top: 80px;
  }
  53% {
    margin-top: calc(80px + 116px);
  }
}
@-webkit-keyframes spider-move-1 {
  0%, 100% {
    margin-top: 80px;
  }
  53% {
    margin-top: calc(80px + 116px);
  }
}
@keyframes spider-move-1 {
  0%, 100% {
    margin-top: 80px;
  }
  53% {
    margin-top: calc(80px + 116px);
  }
}
@-moz-keyframes spider-move-2 {
  0%, 100% {
    margin-top: 40px;
  }
  36% {
    margin-top: calc(40px + 81px);
  }
}
@-webkit-keyframes spider-move-2 {
  0%, 100% {
    margin-top: 40px;
  }
  36% {
    margin-top: calc(40px + 81px);
  }
}
@keyframes spider-move-2 {
  0%, 100% {
    margin-top: 40px;
  }
  36% {
    margin-top: calc(40px + 81px);
  }
}
@-moz-keyframes spider-move-3 {
  0%, 100% {
    margin-top: 15px;
  }
  44% {
    margin-top: calc(15px + 80px);
  }
}
@-webkit-keyframes spider-move-3 {
  0%, 100% {
    margin-top: 15px;
  }
  44% {
    margin-top: calc(15px + 80px);
  }
}
@keyframes spider-move-3 {
  0%, 100% {
    margin-top: 15px;
  }
  44% {
    margin-top: calc(15px + 80px);
  }
}
@-moz-keyframes spider-move-4 {
  0%, 100% {
    margin-top: 50px;
  }
  43% {
    margin-top: calc(50px + 88px);
  }
}
@-webkit-keyframes spider-move-4 {
  0%, 100% {
    margin-top: 50px;
  }
  43% {
    margin-top: calc(50px + 88px);
  }
}
@keyframes spider-move-4 {
  0%, 100% {
    margin-top: 50px;
  }
  43% {
    margin-top: calc(50px + 88px);
  }
}
@-moz-keyframes spider-move-5 {
  0%, 100% {
    margin-top: 20px;
  }
  60% {
    margin-top: calc(20px + 50px);
  }
}
@-webkit-keyframes spider-move-5 {
  0%, 100% {
    margin-top: 20px;
  }
  60% {
    margin-top: calc(20px + 50px);
  }
}
@keyframes spider-move-5 {
  0%, 100% {
    margin-top: 20px;
  }
  60% {
    margin-top: calc(20px + 50px);
  }
}

@keyframes move {
  0% {
    top: 200px;
    left: 300px;
  }
  10% {
    top: 100px;
    left: 300px;
  }
  20% {
    top: 100px;
    left: 200px;
  }
  40% {
    top: 300px;
    left: 200px;
  }
  50% {
    top: 300px;
    left: 100px;
  }
  70% {
    top: 100px;
    left: 100px;
  }
  90% {
    top: 100px;
    left: 300px;
  }
  100% {
    top: 200px;
    left: 300px;
  }
}
@keyframes eyes {
  0% {
    top: 4px;
  }
  10% {
    top: 16px;
  }
  50% {
    top: 4px;
  }
  70% {
    top: 16px;
  }
  100% {
    top: 4px;
  }
}
@keyframes eyesballs {
  0% {
    top: 0;
    left: 4px;
  }
  10% {
    top: 8px;
    left: 0;
  }
  20% {
    left: 4px;
    top: 12px;
  }
  40% {
    top: 8px;
    left: 0;
  }
  50% {
    top: 0;
    left: 4px;
  }
  70% {
    top: 8px;
    left: 8px;
  }
  90% {
    left: 4px;
    top: 12px;
  }
  100% {
    top: 0;
    left: 4px;
  }
}
@keyframes feet {
  0% {
    box-shadow: 4px 0 orange, 8px 0 orange, 12px 0 orange, 4px 4px orange, 8px 4px orange, 20px 0 orange, 24px 0 orange, 28px 0 orange, 32px 0 orange, 24px 4px orange, 28px 4px orange, 40px 0 orange, 44px 0 orange, 48px 0 orange, 52px 0 orange, 44px 4px orange, 48px 4px orange;
  }
  50% {
    box-shadow: 0 4px orange, 4px 0 orange, 12px 0 orange, 16px 0 orange, 20px 0 orange, 16px 4px orange, 20px 4px orange, 32px 0 orange, 36px 0 orange, 40px 0 orange, 32px 4px orange, 36px 4px orange, 48px 0 orange, 52px 0 orange, 52px 4px orange;
  }
  100% {
    box-shadow: 4px 0 orange, 8px 0 orange, 12px 0 orange, 4px 4px orange, 8px 4px orange, 20px 0 orange, 24px 0 orange, 28px 0 orange, 32px 0 orange, 24px 4px orange, 28px 4px orange, 40px 0 orange, 44px 0 orange, 48px 0 orange, 52px 0 orange, 44px 4px orange, 48px 4px orange;
  }
}
body {
  background: #000;
}

.ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

.ghost__feet {
  animation-name: feet;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
  background: orange;
  content: '';
  display: block;
  position: absolute;
  top: 48px;
  left: 0;
  width: 4px;
  height: 4px;
  z-index: 1;
}

.ghost__body {
  fill: orange;
}

.ghost__eye--left, .ghost__eye--right {
  fill: #fff;
  position: absolute;
  top: 16px;
  width: 16px;
  height: 20px;
  animation-name: eyes;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}
.ghost__eye--left:after, .ghost__eye--right:after {
  background: blue;
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  animation-name: eyesballs;
  animation-duration: 6s;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
  animation-iteration-count: infinite;
}

.ghost__eye--left {
  left: 8px;
}

.ghost__eye--right {
  right: 8px;
}