span.sprite {
	display: inline-block;
	position: relative;
	width: 1px;
	height: 1px;
	vertical-align: middle;
	margin: 32px;
	transform-origin: 0 0;
	image-rendering: pixelated;
}
span.sprite > span {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	image-rendering: pixelated;
}
span.allow_rotate {
	animation: rotate 5s infinite linear;
}
span.x_flip {
	transform: scaleX(-1);
}
span.y_flip {
	transform: scaleY(-1);
}
span.size2x {
	transform: scale(2);
}

span.sprite::before,
span.sprite::after,
span.sprite > span::before,
span.sprite > span::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	8.33333% {
		transform: rotate(-30deg);
	}
	16.66667% {
		transform: rotate(-60deg);
	}
	25% {
		transform: rotate(-90deg);
	}
	33.33333% {
		transform: rotate(-120deg);
	}
	41.66667% {
		transform: rotate(-150deg);
	}
	50% {
		transform: rotate(-180deg);
	}
	58.33333% {
		transform: rotate(-210deg);
	}
	66.66667% {
		transform: rotate(-240deg);
	}
	75% {
		transform: rotate(-270deg);
	}
	83.33333% {
		transform: rotate(-300deg);
	}
	91.66667% {
		transform: rotate(-330deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}