.soo-sky {
  position: absolute;
  width: 100%;
  height: 100%;
}
.soo-sky .soo-moon {
  position: absolute;
  top: 20%;
  z-index: 1;
  left: 10%;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background-color: #FFD453;
  box-shadow: 0 0 0 25px rgba(255, 212, 83, 0.1), 0 0 0 50px rgba(255, 212, 83, 0.05), 0 0 0 75px rgba(255, 212, 83, 0.01), 0 0 200px rgba(255, 212, 83, 0.5);
}
.soo-moon:after {
  background-image: url(../img/halloween.png);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-size: 100%;
  opacity: .3;
  box-shadow: 0 0 60px inset;
}

#witch {
   animation-name: bounce;
   animation-duration: 10s;
  animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
 animation-fill-mode: forwards;
 animation-delay: 0.50s;
}
#witch-glow{
  animation-name: bounce;
   animation-duration: 10s;
  animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
 animation-fill-mode: forwards;
 animation-delay: 0.51s;
}
.witch-glow{
  fill:#FDDB1E;
}
.witch-shoe-back{
  animation-name: bounce-leg;
   animation-duration: 3s;
  animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
 animation-fill-mode: forwards;
 animation-delay: 0.6s;
}
.witch-hat{
  animation-name:hat-animation ;
   animation-duration: 3s;
  animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
 animation-fill-mode: forwards;
 animation-delay: 0.6s;
}
.witch-hair{
  animation-name: wavy-hair;
   animation-duration: 3s;
  animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
 animation-fill-mode: forwards;
  animation-delay: -0.5s;
}
.witch-shoe-front{
  animation-name: bounce-leg;
   animation-duration: 3s;
  animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: ease-in;
 animation-fill-mode: forwards;
  animation-delay: -0.5s;
}
@keyframes wavy-hair{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(-5deg);
  }
  100%{
    transform:rotate(0deg);
  }
}

@keyframes hat-animation{
  0%,100%{
    transform:rotate(0deg) translate(0, 0);
    transform-origin:0% 0%;
  }
  50%{
    transform:rotate(-15deg) translate(10px,-20px);
    transform-origin:100% 100%;
  }
}

@keyframes bounce-leg{
  0%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(2deg);
  }
  100%{
    transform:rotate(0deg);
  }
}

@keyframes bounce {
  0%{
    opacity:0;
    transform:translate(0%);
  }
  5%{
    opacity:1;
    transform:translate(0%);
  }
  10%,30%,50%,70%,90%{
    transform: rotate(0deg);
  }
  20%,40%,60%,80%{
    transform: rotate(2deg);
  }
  97%,100%{
    transform:translate(300%);
  }
}
.soo-fence {
  position: absolute;
  top:20%;
  left: 10%;
  width: 400px;
  height: 200px;
  z-index: 3;
}
.soo-tombs {
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.soo-tombs .soo-tomb {
  width: 100px;
  height: 150px;
  background-color: black;
  position: absolute;
  z-index: 11;
  bottom: -10px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.soo-tombs .soo-tomb:before, .soo-tombs .soo-tomb:after {
  content: '';
  position: absolute;
  background-color: white;
}
.soo-tombs .soo-tomb:before {
  width: 3px;
  height: 50px;
  left: 50%;
  top: 20%;
}
.soo-tombs .soo-tomb:after {
  height: 3px;
  width: 50px;
  left: 35%;
  top: 30%;
}
.soo-tombs .soo-tomb:nth-child(1) {
  left: 10%;
  transform: rotate(5deg);
}
.soo-tombs .soo-tomb:nth-child(2) {
  left: 30%;
  transform: rotate(-5deg);
}
.soo-tombs .soo-tomb:nth-child(3) {
  left: 52%;
  bottom: -30px;
  transform: rotate(0deg) scale(0.8);
}
.soo-tombs .soo-tomb:nth-child(4) {
  left: 82%;
  bottom: -30px;
  transform: rotate(-10deg) scale(1.2);
}

@keyframes blink {
  90% {
    transform: none;
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(5px) scaleY(0);
  }
  100% {
    animation-timing-function: ease-out;
  }
}
@-moz-keyframes swing {
  0% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
@keyframes swing {
  0% {
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  50% {
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
[class*="soo-spider"] {
  position: absolute;
  height: 40px;
  width: 50px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 40px 0 0 0;
  background: #152736;
  z-index: 99999;
}
[class*="soo-spider"] *, [class*="soo-spider"]:before, [class*="soo-spider"]:after, [class*="soo-spider"] :after, [class*="soo-spider"] :before {
  position: absolute;
  content: "";
}
[class*="soo-spider"]:before {
  height: 40px;
  width: 1px;
  background: #AAAAAA;
  top: -40px;
  left: 50%;
}
[class*="soo-spider"] .soo-eye {
  top: 16px;
  height: 14px;
  width: 12px;
  background: #FFFFFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
[class*="soo-spider"] .soo-eye:after {
  top: 6px;
  height: 5px;
  width: 5px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: black;
}
[class*="soo-spider"] .soo-eye.soo-left {
  left: 14px;
}
[class*="soo-spider"] .soo-eye.soo-left:after {
  right: 3px;
}
[class*="soo-spider"] .soo-eye.soo-right {
  right: 14px;
}
[class*="soo-spider"] .soo-eye.soo-right:after {
  left: 3px;
}
[class*="soo-spider"] .soo-leg {
  top: -1px;
  height: 12px;
  width: 14px;
  border-top: 2px solid #152736;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  z-index: -1;
}
[class*="soo-spider"] .soo-leg.left {
  left: -12px;
  -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 #152736;
  -moz-border-radius: 60% 0 0 0;
  -webkit-border-radius: 60%;
  border-radius: 60% 0 0 0;
}
[class*="soo-spider"] .soo-leg.right {
  right: -12px;
  -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 #152736;
  -moz-border-radius: 0 60% 0 0;
  -webkit-border-radius: 0;
  border-radius: 0 60% 0 0;
}
[class*="soo-spider"] .soo-leg:nth-of-type(1) {
  animation: 0.7s moveLeftLegs 0s infinite;
}
[class*="soo-spider"] .soo-leg:nth-of-type(2) {
  top: 7px;
  left: -15px;
  animation: 0.7s moveLeftLegs 0.05s infinite;
}
[class*="soo-spider"] .soo-leg:nth-of-type(3) {
  top: 15px;
  left: -16px;
  animation: 0.7s moveLeftLegs 0.1s infinite;
}
[class*="soo-spider"] .soo-leg:nth-of-type(4) {
  top: 24px;
  left: -14px;
  animation: 0.7s moveLeftLegs 0.2s infinite;
}
[class*="soo-spider"] .soo-leg:nth-of-type(5) {
  animation: 0.7s moveRightLegs 0s infinite;
}
[class*="soo-spider"] .soo-leg:nth-of-type(6) {
  top: 7px;
  right: -15px;
  animation: 0.7s moveRightLegs 0.05s infinite;
}
[class*="soo-spider"] .soo-leg:nth-of-type(7) {
  top: 15px;
  right: -16px;
  animation: 0.7s moveRightLegs 1s infinite;
}
[class*="soo-spider"] .soo-leg:nth-of-type(8) {
  top: 24px;
  right: -14px;
  animation: 0.7s moveRightLegs 2s infinite;
}

.soo-spider_0 {
  left: 5%;
  margin-top: 200px;
  z-index: 9999999;
  animation: moveSpider 2s infinite alternate;
}
.soo-spider_0:before {
  top: -200px;
  height: 200px;
}

.soo-spider_1 {
  left: 20%;
  margin-top: 120px;
  z-index: 9999999;
  animation: moveSpider 2s infinite alternate;
  animation-delay: 0.1s;
}
.soo-spider_1:before {
  top: -120px;
  height: 120px;
}

.soo-spider_2 {
  left: 35%;
  margin-top: 240px;
  z-index: 9999999;
  animation: moveSpider 2s infinite alternate;
  animation-delay: 0.3s;
}
.spider_2:before {
  top: -240px;
  height: 240px;
}

.soo-spider_3 {
  right: 35%;
  margin-top: 160px;
  z-index: 9999999;
  animation: moveSpider 2s infinite alternate;
  animation-delay: 0.5s;
}
.soo-spider_3:before {
  top: -160px;
  height: 160px;
}

.soo-spider_4 {
  right: 20%;
  margin-top: 50px;
  animation: moveSpider 2s infinite alternate;
  animation-delay: 0.2s;
}
.soo-spider_4:before {
  top: -50px;
  height: 50px;
}

.soo-spider_5 {
  right: 5%;
  margin-top: 210px;
  animation: moveSpider 2s infinite alternate;
  animation-delay: 0.4s;
}
.soo-spider_5:before {
  top: -210px;
  height: 210px;
}

@keyframes moveLeftLegs {
  0% {
    -moz-transform: rotate(25deg) skewX(-20deg);
    -ms-transform: rotate(25deg) skewX(-20deg);
    -webkit-transform: rotate(25deg) skewX(-20deg);
    transform: rotate(25deg) 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);
  }
  to {
    -moz-transform: rotate(36deg) skewX(-20deg);
    -ms-transform: rotate(36deg) skewX(-20deg);
    -webkit-transform: rotate(36deg) skewX(-20deg);
    transform: rotate(36deg) skewX(-20deg);
  }
}
@keyframes moveRightLegs {
  0% {
    -moz-transform: rotate(-25deg) skewX(20deg);
    -ms-transform: rotate(-25deg) skewX(20deg);
    -webkit-transform: rotate(-25deg) skewX(20deg);
    transform: rotate(-25deg) 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);
  }
  to {
    -moz-transform: rotate(-36deg) skewX(20deg);
    -ms-transform: rotate(-36deg) skewX(20deg);
    -webkit-transform: rotate(-36deg) skewX(20deg);
    transform: rotate(-36deg) skewX(20deg);
  }
}
@keyframes moveSpider {
  from {
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  to {
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
}