.page-preloader {
	position: relative;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	margin-left: -30px;
	transform: rotateZ(45deg);
	&-cover {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
	&__cube {
		position: relative;
		float: left;
		width: 50%;
		height: 50%;
		transform: scale(1.1);
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			transform-origin: 100% 100%;
			animation: tmFoldCubeAngle 2.4s infinite linear both;
			background-color: #333;
		}
	}
	&--cube2 {
		transform: scale(1.1) rotateZ(90deg);
		&::before {
			animation-delay: 0.3s;
		}
	}
	&--cube3 {
		transform: scale(1.1) rotateZ(180deg);
		&::before {
			animation-delay: 0.6s;
		}
	}
	&--cube4 {
		transform: scale(1.1) rotateZ(270deg);
		&::before {
			animation-delay: 0.9s;
		}
	}
}

@-webkit-keyframes tmFoldCubeAngle {
	0%, 10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		transform: perspective(140px) rotateX(-180deg);
		opacity: 0;
	}
	25%, 75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		transform: perspective(140px) rotateX(0deg);
		opacity: 1;
	}
	90%, 100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		transform: perspective(140px) rotateY(180deg);
		opacity: 0;
	}
}

@keyframes tmFoldCubeAngle {
	0%, 10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		transform: perspective(140px) rotateX(-180deg);
		opacity: 0;
	}
	25%, 75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		transform: perspective(140px) rotateX(0deg);
		opacity: 1;
	}
	90%, 100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		transform: perspective(140px) rotateY(180deg);
		opacity: 0;
	}
}