*:before, *:after {
  	box-sizing: border-box;
}

.ghost-wrapper {
	margin: -60px 0 -40px 0;
	-moz-transform: scale(0.3);
	-webkit-transform: scale(0.3);
	-o-transform: scale(0.3);
	-ms-transform: scale(0.3);
	transform: scale(0.3);
}

.ghost {
	position: relative;
	width: 180px;
	height: 180px;
	margin: 0 auto;
	border-radius: 50% /  50% 50% 0 0;
	background-color: #FF00FF;
	background: radial-gradient(top, ellipse cover, rgba(238,141,220,0.5) 0%, rgba(238,141,220,0.5) 20%, rgba(221,115,227,0.5) 51%, rgba(221,115,227,0.5) 100%);
	animation: up 4s 0.5s ease-in-out infinite alternate;
}

.gooey {
	position: absolute;
	background-color: #FF00FF;
	background: radial-gradient(top, ellipse cover, rgba(238,141,220,0.5) 0%, rgba(238,141,220,0.5) 20%, rgba(221,115,227,0.5) 51%, rgba(221,115,227,0.5) 100%);
	animation: slide 1s 0.5s ease-in-out alternate infinite;
}

.gooey:before {
	content: '';
	position:absolute;
	width: 20px;
	height: 70px;
	right: -20px;
	background-color: white;
	border-radius: 50% / 20px 20px 0 0;
}

.gooey.one {
	left: 0;
	bottom: -65px;
	width: 20px;
	height: 70px;
	border-radius: 50% / 0 0 20px 20px;
}
.gooey.one:before {
  	top: -40%;
}

.gooey.two {
	left: 40px;
	bottom: -85px;
	width: 20px;
	height: 100px;
	border-radius: 50% / 0 0 20px 20px;
}
.gooey.two:before {
  	top: -5%;
}

.gooey.three {
	left: 80px;
	bottom: -35px;
	width: 20px;
	height: 40px;
	border-radius: 50% / 0 0 20px 20px;
}
.gooey.three:before {
  	top: -25%;
}

.gooey.four {
	left: 120px;
	bottom: -65px;
	width: 20px;
	height: 70px;
	border-radius: 50% / 0 0 20px 20px;
}
.gooey.four:before {
  	top: -20%;
}

.gooey.five {
	left: 160px;
	bottom: -35px;
	width: 20px;
	height: 40px;
	border-radius: 50% / 0 0 20px 20px;
}

.eyes {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 50%;
	margin-top:50px;
	margin-left: 45px;
}

.mouth {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 25px;
	animation: mouthMove 3s ease infinite alternate;
}

.out {
	position: absolute;
	bottom: 10px;
	left: -10px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.out:before {
	content: '';
	position: absolute;
	background-color: #FF00FF;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.gooey.one .out:before {
  	animation: off 2s linear infinite;
}

.gooey.two .out:before {
  	animation: off 2.5s 0.8s linear infinite;
}

.gooey.three .out:before {
  	animation: off 2.7s 0.75s ease-in-out infinite;
}

.gooey.four .out:before {
  	animation: off 2.5s 1s ease infinite;
}

.gooey.five .out:before {
 	 animation: off 2s 0.6s ease-in-out infinite;
}

@keyframes off {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(10px);
	}
	20% {
		transform: translateY(20px);
	}
	25% {
		border-radius: 50% / 60% 60% 50% 50%; 
		transform: translateY(22px);
	}
	30% {
		transform: translateY(25px);
		height: 30px;
		width: 17px;
		border-radius: 50% / 70% 70% 60% 60%;
	}
	40% {
		transform: translateY(30px);
		height: 26px;
		width: 18px;
		border-radius: 50% / 70% 70% 50% 50%;
	}
	50% {
		transform: translateY(35px);
		height: 23px;
		width: 19px;
		border-radius: 50% / 60% 60% 50% 50%;
	}
	60% {
		transform: translateY(40px);
		height: 22px;
		width: 19px;
		border-radius: 50%;
	}
	70% {
		transform: translateY(50px);
		height: 20px;
		width: 20px;
		border-radius: 50%;
	}
	80% {
		transform: translateY(60px);
		border-radius: 50%;
		opacity: 0.9;
	}
	90% {
		transform: translateY(70px);
		border-radius: 50%;
	}
	90% {
		transform: translateY(80px);
		border-radius: 50%;
	}
	100% {
		transform: translateY(60px);
		border-radius: 50%;
		opacity: 0;
	}
}

@keyframes up {
	0% {
		transform: translateY(0px) rotate(0deg);
	}
	50% {
		transform: translateY(-25px) rotate(2deg);
	}
	100% {
		transform: translateY(-40px) rotate(-2deg);
	}
}

@keyframes mouthMove {
	from {
		width: 20px;
	}
	to {
		width: 40px;
	}
}

@keyframes shadowMove {
	from {
		transform:scale(1);
	}
	to {
		transform:scale(0.8);
	}
}

@keyframes slide {
	to {
		transform: translateY(-15%);
	}
}