html, body{ 
	margin:0px; 
	padding:0px; 
	width: 100%;
	background: #020606;
	overflow: hidden; 
} 
.progress{ 
	position: absolute; 
	width: 0; 
	height: 1px; 
	background: #314849; 
	-webkit-transition: all .5s; 
	transition: all .5s;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	opacity: 1; 
	z-index: 70;
	-webkit-transform-origin: right;  
	transform-origin: right;
	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden; 
	will-change: transform;
}
.progress.complete{ 
	-webkit-transition: all .6s; 
	transition: all .6s;
	-webkit-transform: scale(0, 1);
	-webkit-transition-delay: .1s;
	transform: scale(0, 1);
	transition-delay: .1s;
}
.progress .wipe{ 
	display: none; 
	position: absolute;  
	width: 200px; 
	height: 100%;  
	top: 0px; 
	left: 0px; 
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transition: all .6s; 
	-webkit-transform-origin: left; 
	transition: all .6s; 
	transform-origin: left; 

	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden; 
	will-change: transform; 
}
.progress.complete .wipe{ 
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);  
}
.progress.complete .wipe:first-child{ 
	background-color: #C8C8C8; 
	transition-delay: 0s; 
	transition-duration: .2s; 
	z-index: 1; 
}
.progress.complete .wipe:nth-child(2){
	background-color: #464646; 
	transition-delay: .2s; 
	transition-duration: .2s; 
	z-index: 2;
	display: none;
}
.progress.complete .wipe:last-child{ 
	background-color: #F1F1F1; 
	transition-delay: .2s; 
	transition-duration: .3s; 
	z-index: 3; 
}
.progress-label{ 
	position: absolute; 
	width: 90px; 
	height: 90px; 
	text-align: center;
	background: #1A1A1A;
	line-height: 90px; 
	top: 0px; 
	bottom: 0px; 
	left: 0px; 
	right: 0px; 
	border-radius: 50%; 
	margin: auto;  
	color: #B0ACAC;
	font-size: 20px;
	font-family: 'prota_basicregular';
	font-weight: 100;
	letter-spacing: 2px;
	z-index: 75; 
	-webkit-transition: all .5s .5s ease-out; 
	transition: all .5s .5s ease-out;
	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden; 
	will-change: transform, opacity;
}
.progress-label.complete{ 
/*	transform: scale(0, 0);*/ 
	opacity: 0; 
}

/*body.loaded .progress, 
body.loaded .progress-label{ 
	display: none; 
}*/

*{ 
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
	outline:none; 
	-ms-overflow-style:-ms-autohiding-scrollbar; 
} 

a, 
button{ 
	outline: 0; 
} 

@media all and (min-width:720px)
{ 
	*::-webkit-scrollbar {
		background:rgba(0,0,0,.1); 
		width:8px; 
	}
	*::-webkit-scrollbar-thumb {
		background:rgba(0,0,0,.2) !important; 
	}
	.scrollbar-light::-webkit-scrollbar {
		background:rgba(255,255,255,.2);   
	}
	.scrollbar-light::-webkit-scrollbar-thumb {
		background:rgba(255,255,255,.4) !important; 
	} 
	.scrollbar-dark::-webkit-scrollbar {
		background:rgba(0,0,0,.1);
	}
	.scrollbar-dark::-webkit-scrollbar-thumb {
		background:rgba(0,0,0,.2) !important; 
	}
}

.float-left{ 
	float:left; 
} 
.float-right{ 
	float:right; 
} 
.clear:after { 
	content:""; 
	display:block; 
	height:0px; 
	clear:both; 
	visibility:hidden; 
}

[class*="loading-circle"]:after{ 
	position: absolute; 
	content: ''; 
	width: 80px; 
	height: 80px; 
	top: 0px; 
	bottom: 0px; 
	left: 0px; 
	right: 0px; 
	margin: auto; 
	display: block; 
	background:url(../images/loading-circle.svg) no-repeat center; 
	-webkit-animation: rotateCircle 2s infinite;
	animation: rotateCircle 2s infinite; 
} 
.loading-circle-white:after{ 
	background:url(../images/loading-circle-white.svg) no-repeat center; 
} 
.loading-circle-small-white:after{ 
	background:url(../images/loading-circle-white.svg) no-repeat center; 
}
body:after{ 
	-webkit-transition: all .3s .2s ease-out; 
	transition: all .3s .2s ease-out;
}
body.loaded:after{ 
	transform: scale(0, 0); 
	opacity: 0;
	width: 0px;
	height: 0px;
}
/* rotate circle */
@-webkit-keyframes rotateCircle {
	0% { 
		-webkit-transform: rotateZ(0deg); 
		opacity:0;
	}

	50% {
		-webkit-transform: rotateZ(180deg);  
		opacity:1;
	} 

	100% {
		-webkit-transform: rotateZ(360deg); 
		opacity:0;  
	}
} 
@keyframes rotateCircle {
	0% { 
		transform: rotate(0deg); 
		opacity:0;
	}

	50% {
		transform: rotate(180deg);  
		opacity:1; 
	} 

	100% {
		transform: rotate(360deg); 
		opacity:0;  
	}
} 
.rotateCircle {
	-webkit-animation: rotateCircle 2s infinite;
	animation: rotateCircle 2s infinite; 

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}