.mouse {
	/* background: #4e5559 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #ffffff), to(#ffffff));
	background: #4e5559
		linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%); */
	position: relative;
	width: 42px;
	height: 60px;
	border-radius: 17px;
	background-size: 100% 200%;
	/* -webkit-animation: colorSlide 5s linear infinite,
		nudgeMouse 5s ease-out infinite;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite; */
	border: 4px solid #fff;
}

.mouse:before,
.mouse:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.mouse:before {
	width: 46px;
	height: 82px;
	background: none;
	border-radius: 100px;
}

.mouse:after {
	width: 8px;
	height: 12px;
	border-radius: 20px;
	border: 3px solid #fff;
	-webkit-animation: trackBallSlide 5s linear infinite;
	animation: trackBallSlide 5s linear infinite;
}

@-webkit-keyframes colorSlide {
	0% {
		background-position: 0% 100%;
	}
	20% {
		background-position: 0% 0%;
	}
	21% {
		background-color: #4e5559;
	}
	29.99% {
		background-color: #ffffff;
		background-position: 0% 0%;
	}
	30% {
		background-color: #4e5559;
		background-position: 0% 100%;
	}
	50% {
		background-position: 0% 0%;
	}
	51% {
		background-color: #4e5559;
	}
	59% {
		background-color: #ffffff;
		background-position: 0% 0%;
	}
	60% {
		background-color: #4e5559;
		background-position: 0% 100%;
	}
	80% {
		background-position: 0% 0%;
	}
	81% {
		background-color: #4e5559;
	}
	90%,
	100% {
		background-color: #ffffff;
	}
}

@keyframes colorSlide {
	0% {
		background-position: 0% 100%;
	}
	20% {
		background-position: 0% 0%;
	}
	21% {
		background-color: #4e5559;
	}
	29.99% {
		background-color: #ffffff;
		background-position: 0% 0%;
	}
	30% {
		background-color: #4e5559;
		background-position: 0% 100%;
	}
	50% {
		background-position: 0% 0%;
	}
	51% {
		background-color: #4e5559;
	}
	59% {
		background-color: #ffffff;
		background-position: 0% 0%;
	}
	60% {
		background-color: #4e5559;
		background-position: 0% 100%;
	}
	80% {
		background-position: 0% 0%;
	}
	81% {
		background-color: #4e5559;
	}
	90%,
	100% {
		background-color: #ffffff;
	}
}

@-webkit-keyframes trackBallSlide {
	0% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	6% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}
	14% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}
	15%,
	19% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}
	28%,
	29.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	30% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	36% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}
	44% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}
	45%,
	49% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}
	58%,
	59.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	66% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}
	74% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}
	75%,
	79% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}
	88%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
}

@keyframes trackBallSlide {
	0% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	6% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}
	14% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}
	15%,
	19% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}
	28%,
	29.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	30% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	36% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}
	44% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}
	45%,
	49% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}
	58%,
	59.99% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
	66% {
		opacity: 1;
		-webkit-transform: scale(0.9) translateY(5px);
		transform: scale(0.9) translateY(5px);
	}
	74% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(40px);
		transform: scale(0.4) translateY(40px);
	}
	75%,
	79% {
		opacity: 0;
		-webkit-transform: scale(0.4) translateY(-20px);
		transform: scale(0.4) translateY(-20px);
	}
	88%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1) translateY(-20px);
		transform: scale(1) translateY(-20px);
	}
}

@-webkit-keyframes nudgeMouse {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}
	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}
	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	80% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes nudgeMouse {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}
	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}
	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	80% {
		-webkit-transform: translateY(8px);
		transform: translateY(8px);
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes nudgeText {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	80% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes nudgeText {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	30% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	60% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	80% {
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}
	90% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes colorText {
	21% {
		color: #4e5559;
	}
	30% {
		color: #ffffff;
	}
	51% {
		color: #4e5559;
	}
	60% {
		color: #ffffff;
	}
	81% {
		color: #4e5559;
	}
	90% {
		color: #ffffff;
	}
}

@keyframes colorText {
	21% {
		color: #4e5559;
	}
	30% {
		color: #ffffff;
	}
	51% {
		color: #4e5559;
	}
	60% {
		color: #ffffff;
	}
	81% {
		color: #4e5559;
	}
	90% {
		color: #ffffff;
	}
}