/*** Loading / .gate, .loader ***/
.gate {
	@bar-h: 7px;
	@count-w: 100px;
	@count-fs: 40px;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 1000;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	.transition(~"all 0.5s");
	.gate-content{
		position: absolute;
		top: @state2-h;
		left: @page-border-w;
		right: @page-border-w;
		bottom: @page-border-w;
		@media (max-width: 1249px) {
			left: 0;
			right: 0;
		}
	}
	.loader{
		display: none;
	}
	.gate-bar{
		position: absolute;
		height: @bar-h;
		width: 0%;
	}
	.gate-count{
		font-size: @count-fs;
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: right;
		width: @count-w;
		margin-left: round(-1*@count-w/2);
		.transform(~"translateY(-50%)");
		font-weight: @fw-600;
	}
	.gate-water{
		position: absolute;
		width: 100%;
		height: 0;
		bottom: 0;
	}
	.gate-overlay{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		.transition(~"all 1.5s");
	}
	img{
		position: absolute;
		top: 50%;
		left: 50%;
		.transform(~"translate(-50%,-50%)");
	}
}
.loader{
	position: fixed;
	left:50%;
	top:50%;
	margin-top:-30px;
	margin-left:-20px;
	padding: 0;
	width:60px;
	height:60px;
	list-style:none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	opacity: 0;
	visibility: hidden;
	.transition(~"all 1s");
	li{
		width:10px;
		height:10px;
		float:left;
		margin-right:5px;
		box-shadow: 0px 80px 20px rgba(0,0,0,0.2);
	}
	&.show{
		opacity: 1;
		visibility: visible;
	}
	&.hided{
		.transition(~"all .2s");
	}
}


.loading-animation-mixi() {
	0%{
		height: 10px;
		margin-top: 25px;
	}
	50%{
		height:50px;
		margin-top: 0px;
	}
	100%{
		height: 10px;
		margin-top: 25px;
	}
}
@-webkit-keyframes loading-animation {.loading-animation-mixi;}
@-moz-keyframes loading-animation {.loading-animation-mixi;}
@-ms-keyframes loading-animation {.loading-animation-mixi;}
@-o-keyframes loading-animation {.loading-animation-mixi;}
@keyframes loading-animation {.loading-animation-mixi;}

.loader li:nth-child(1){
	.animate(~"loading-animation 0.6s ease-in-out infinite 0s");
}
.loader li:nth-child(2){
	.animate(~"loading-animation 0.6s ease-in-out infinite -0.2s");
}
.loader li:nth-child(3){
	.animate(~"loading-animation 0.6s ease-in-out infinite -0.4s");
}