#loader,
#unloader {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 9999;
}
#unloader {
	left: -100%;
}
#loader .strip,
#unloader .strip {
	width: 100%;
	height: 25%;
	background: #eee;
	font-family: 'Rozha One', serif;
	text-align: center;
	color: #111;
}
#loader[loaded] .strip {
	animation: loaderStrips 1.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
}
#unloader[unloaded] .strip {
	animation: unloaderStrips 1.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) backwards reverse;
}
#loader .strip:nth-child(1),
#unloader .strip:nth-child(1) {
	animation-delay: .3s;
}
#loader .strip:nth-child(2),
#unloader .strip:nth-child(2) {
	animation-delay: .2s;
}
#loader .strip:nth-child(3),
#unloader .strip:nth-child(3) {
	animation-delay: .1s;
}
#loader .strip:nth-child(4),
#unloader .strip:nth-child(4) {
	animation-delay: 0s;
}

@keyframes loaderStrips {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-100%);
	}
}
@keyframes unloaderStrips {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(100%);
	}
}