* { padding: 0; margin: 0; box-sizing: border-box; }

.group:after { content: ' '; display: table; clear: both; }
.group > * { float: left; }
.group > .right { float: right; }

.preload {
	width: 100vw;
	height: 100vh;
	background: #999;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

.preload .logo {
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
}

.loader-frame {
	width: 5em;
	height: 5em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 0);
}

.loader1, .loader2 {
	position: absolute;
	border: 5px solid transparent;
	border-radius: 50%;
}

.loader1 {
	width: 5em;
	height: 5em;
	border-top: 5px solid #333;
	border-bottom: 5px solid #333;
	animation: clockwisespin 2s linear infinite;
}

.loader2 {
	width: 4em;
	height: 4em;
	border-left: 5px solid #ddd;
	border-right: 5px solid #ddd;
	top: 8px;
	left: 8px;
	animation: anticlockwisespin 2s linear infinite;
}

@keyframes clockwisespin {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

@keyframes anticlockwisespin {
	from {transform: rotate(0deg);}
	to {transform: rotate(-360deg);}
}

@keyframes fadeout {
	from {opacity: 1;}
	to {opacity: 0;}
}