#wpmmh_wrapper {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 999999999999999999;
}

.wpmmh_spider_web_left {
	position: absolute;
	width: 50%;
	max-width: 500px;
	top: 0;
	left: 0;
}

.wpmmh_spider_web_left img,
.wpmmh_spider_web_left svg {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}

.wpmmh_spider_web_right {
	position: absolute;
	width: 50%;
	max-width: 430px;
	top: 0;
	right: 0;
}

.wpmmh_spider_web_right img,
.wpmmh_spider_web_right svg {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
}


.wpmmh_spider_web_left svg,
.wpmmh_spider_web_right svg {
	stroke: black;
}

#wpmmh_wrapper.white-spider .wpmmh_spider_web_left svg,
#wpmmh_wrapper.white-spider .wpmmh_spider_web_right svg {
	stroke: white;
}

/* COMMENT */
.wpmmh_spider_wrapper {
	position: absolute;
	width: 50%;
	max-width: 430px;
	top: 0;
	right: 0;
}

#wpmhh_spider-web-line {
	position: absolute;
	width: 2px;
	height: 0px;
	top: 0;
	right: 35%;
	background: #000;
	transform: translateX(50%) translateY(0px);
}

#wpmmh_wrapper.white-spider #wpmhh_spider-web-line {
	background: white;
}

#wpmmh_spider {
	position: absolute;
	width: 260px;
	height: 200px;
	top: 0;
	right: 35%;
  transform-origin: 130px 80px;
	transform: translateX(50%) translateY(-200px) rotate(0deg);
}

#wpmmh_spider #hands_right {
  transform-origin: 155px 85px;
  transform: rotate(90deg);
}

#wpmmh_spider #hands_left {
  transform-origin: 105px 85px;
  transform: rotate(-90deg);
}

.wpmmh_footer {
	position: absolute;
	width: 100%;
	height: 150px;
	left: 0;
	bottom: 0;
	overflow: hidden;
}


/* GHOSTS */

.wpmmh_ghost {
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: 0;
	left: -100px;
	animation: wpmmh_ghost 20s infinite linear reverse, wpmmh_ghost_flying 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
	z-index: 2;
}

.wpmmh_ghost[data-id="1"] {
	animation-direction: normal;
}

@keyframes wpmmh_ghost {
	0% {
		left: -100px;
	}
	100% {
		left: 100vw;
	}
}

@keyframes wpmmh_ghost_flying {
	0%, 100% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(10px);
	}
}

.wpmmh_ghost svg{
	width: 100px;
	height: 100px;
}


/* GRAVESTONE */

.wpmmh_gravestone {
	position: absolute;
	width: 100px;
	height: 100px;
	bottom: 0;
	transform-origin: 50% 100%;
	animation: wpmmh_gravestone 4s infinite cubic-bezier(0.68, -0.6, 0.32, 1.6);
	transform: translateX(-50%) translateY(5px) rotate(0deg);
}

.wpmmh_gravestone svg {
	position: relative;
	height: 100%;
	width: 100%;
}

.wpmmh_gravestone[data-id="1"] {
	left: 5%;
	animation-delay: 1s;
	z-index: 1;
}

.wpmmh_gravestone[data-id="2"] {
	left: 25%;
	animation-delay: 3s;
	z-index: 3;
}

.wpmmh_gravestone[data-id="3"] {
	left: 75%;
	animation-delay: 6s;
	z-index: 1;
}

.wpmmh_gravestone[data-id="4"] {
	left: 95%;
	animation-delay: 9s;
	z-index: 3;
}

@keyframes wpmmh_gravestone {
  0%, 10%, 20%, 30%, 40% { 
    transform: translateX(-50%) translateY(5px) rotate(-5deg);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: translateX(-50%) translateY(5px) rotate(5deg);
  }
  50%, 100% {
    transform: translateX(-50%) translateY(5px) rotate(0deg);
  }
}


/* HANDS */

.wpmmh_hand {
	position: absolute;
	height: 100px;
	bottom: -100px;
	z-index: 4;
}

.wpmmh_hand[data-id="1"] {
	left: 10%;
}

.wpmmh_hand[data-id="2"] {
	left: 30%;
}

.wpmmh_hand[data-id="3"] {
	left: 50%;
	z-index: 1;
}

.wpmmh_hand[data-id="4"] {
	left: 70%;
}

.wpmmh_hand[data-id="5"] {
	left: 90%;
}