* {
	margin:0;
	padding:0;
}
body,html {
	background-color:#333;
	position:relative;
	width:100%;
	height:100%;
}
.loader {
	position:absolute;
	width:80px;
	height:100px;
	left:50%;
	top:50%;
	margin-left:-40px;
	margin-top:-50px;
}
.loader .dot {
	left:35%;
	position:absolute;
	width:10px;
	height:10px;
	background:#ffffff;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	transform-origin:10px 40px;
	animation:dotrotate 2s cubic-bezier(0.775,0.005,0.310,1.000) infinite;
}
.loader .dot .first {
	position:absolute;
	width:8px;
	height:8px;
	top:50%;
	left:50%;
	margin-left:-4px;
	margin-top:-4px;
	border-radius:50%;
	background:#ffffff;
	animation-delay:0.2s;
	animation:1.7s dotscale cubic-bezier(0.775,0.005,0.310,1.000) infinite;
}
.loader .dot:nth-of-type(2) {
	animation-delay:0.2s;
}
.loader .dot:nth-of-type(3) {
	animation-delay:0.3s;
}
.loader .dot:last-of-type {
	animation-delay:0.4s;
}
@keyframes dotrotate {
	0% {
	transform:rotate(0deg);
}
100% {
	transform:rotate(360deg);
}
}@keyframes dotscale {
	0%,10% {
	width:16px;
	height:16px;
	margin-left:-8px;
	margin-top:-8px;
}
50% {
	width:8px;
	height:8px;
	margin-left:-4px;
	margin-top:-4px;
}
90%,100% {
	width:16px;
	height:16px;
	margin-left:-8px;
	margin-top:-8px;
}
}.loader p {
	font-size:12px;
	font-weight:bold;
	color:#fff;
	margin:0;
	position:absolute;
	bottom:0;
	text-align:center;
	width:100%;
}
.loader p span {
	animation:1.7s fontMove cubic-bezier(0.775,0.005,0.310,1.000) infinite;
}
.loader p span:nth-of-type(2) {
	animation-delay:0.2s;
}
.loader p span:nth-of-type(3) {
	animation-delay:0.3s;
}
.loader p span:last-of-type {
	animation-delay:0.4s;
}
@keyframes fontMove {
	0% {
	font-size:12px;
}
50% {
	font-size:14px;
}
100% {
	font-size:12px;
}
}