@charset "utf-8";
html,body,
h1,h2,h3,h4,h5,h6,
hr,p,blockquote,
dl,dt,dd,ul,ol,li,
pre,
form,fieldset,legend,button,input,textarea,
th,td,
figure{
	margin:0;
	padding:0
}
html,body{
	font-family: "微软雅黑", Arial, Helvetica, sans-serif;
	color:#888888;
}
html{
	font-size: 625% !important;
}
body{
	font-size: .12rem;
}
h1,h2,h3,h4,h5,h6 {
	font-weight:normal;
}
ul,ol,dl,li,dt,dd {
	list-style:none
}
a:link,a:visited {
	color:#888;
	text-decoration:none;
	/*-webkit-tap-highlight-color:transparent; 
	-webkit-user-focus: none;
	-webkit-user-select: none;
	-moz-tap-highlight-color:transparent; 
	-moz-user-focus: none;
	-moz-user-select: none;
	-ms-tap-highlight-color:transparent; 
	-ms-user-focus: none;
	-ms-user-select: none;
	-o-tap-highlight-color:transparent; 
	-o-user-focus: none;
	-o-user-select: none;
	tap-highlight-color:transparent; 
	user-focus: none;
	user-select: none;*/
}
a:hover {
	color:#f80;
}
a:active {
	color:#f00;
}
input,select,textarea,button{
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
.fleft{float:left;}
.fright{float:right;}
.fclear{clear: both;}

.tleft{text-align: left;}
.tcenter{text-align: center;}
.tright{text-align:right;}
.middle{display: table-cell;vertical-align: middle;}
.vtmiddle{
	display: table-cell;
	vertical-align: middle;
}
.lh1{line-height: 1;}
.lh15{line-height: 1.5;}
.lh2{line-height: 2;}
.lh25{line-height: 2.5;}
.lh3{line-height: 3;}
.lh35{line-height: 3.5;}
.lh4{line-height: 4;}
.lh45{line-height: 4.5;}
.lh5{line-height: 5;}


.mcenter{margin:auto;}

.block{display:block;}
.inline{display:inline;}
.inline-block{display:inline-block;}
.table{display: table;}
.table-cell{display: table-cell;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}	
.ellipsis{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.of-auto{overflow: auto;}.ofx-auto{overflow-x: auto;}.ofy-auto{overflow-y: auto;}
.of-visible{overflow: visible;}.ofx-visible{overflow-x: visible;}.ofy-visible{overflow-y: visible;}
.of-scroll{overflow: scroll;}.ofx-scroll{overflow-x: scroll;}.ofy-scroll{overflow-y: scroll;}
.of-hidden{overflow: hidden;}.ofx-hidden{overflow-x: hidden;}.ofy-hidden{overflow-y: hidden;}
.border-box{
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

/* 特殊意义的类选择器 */


.flex-row{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	
	display:-o-flex;
	display:-ms-flex;
	display:-moz-flex;
	display:-webkit-flex;
	display:flex;	
	-o-flex-direction:row;
	-ms-flex-direction:row;
	-moz-flex-direction:row;
	-webkit-flex-direction:row;
	flex-direction:row;
}
.flex-row-reverse{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;

	display:-o-flex;
	display:-ms-flex;
	display:-moz-flex;
	display:-webkit-flex;
	display:flex;	
	-o-flex-direction:row-reverse;
	-ms-flex-direction:row-reverse;
	-moz-flex-direction:row-reverse;
	-webkit-flex-direction:row-reverse;
	flex-direction:row-reverse;
}
.flex-column{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;

	display:-o-flex;
	display:-ms-flex;
	display:-moz-flex;
	display:-webkit-flex;
	display:flex;	
	-o-flex-direction:column;
	-ms-flex-direction:column;
	-moz-flex-direction:column;
	-webkit-flex-direction:column;
	flex-direction:column;
}
.flex-column-reverse{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;

	display:-o-flex;
	display:-ms-flex;
	display:-moz-flex;
	display:-webkit-flex;
	display:flex;	
	-o-flex-direction:column-reverse;
	-ms-flex-direction:column-reverse;
	-moz-flex-direction:column-reverse;
	-webkit-flex-direction:column-reverse;
	flex-direction:column-reverse;
}
.flex-wrap{
	-o-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
.flex-wrap-reverse{
	-o-flex-wrap:wrap-reverse;
	-ms-flex-wrap:wrap-reverse;
	-moz-flex-wrap:wrap-reverse;
	-webkit-flex-wrap:wrap-reverse;
	flex-wrap:wrap-reverse;
}
.flex-wrap-inverse{
	-o-flex-wrap:wrap-inverse;
	-ms-flex-wrap:wrap-inverse;
	-moz-flex-wrap:wrap-inverse;
	-webkit-flex-wrap:wrap-inverse;
	flex-wrap:wrap-inverse;
}

.flex-main-start{
	-webkit-justify-content:flex-start;
	-moz-justify-content:flex-start;
	-ms-justify-content:flex-start;
	-o-justify-content:flex-start;
	justify-content:flex-start;
}
.flex-main-end{
	-webkit-justify-content:flex-end;
	-moz-justify-content:flex-end;
	-ms-justify-content:flex-end;
	-o-justify-content:flex-end;
	justify-content:flex-end;
}

.flex-main-center{
	-webkit-justify-content:center;
	-moz-justify-content:center;
	-ms-justify-content:center;
	-o-justify-content:center;
	justify-content:center;
}
.flex-main-around{
	-webkit-justify-content:space-around;
	-moz-justify-content:space-around;
	-ms-justify-content:space-around;
	-o-justify-content:space-around;
	justify-content:space-around;
}
.flex-main-between{
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	-ms-justify-content:space-between;
	-o-justify-content:space-between;
	justify-content:space-between;
}
.flex-line-start{
	-webkit-align-items:flex-start;
	-moz-align-items:flex-start;
	-ms-align-items:flex-start;
	-o-align-items:flex-start;
	-align-items:flex-start;
}
.flex-line-end{
	-webkit-align-items:flex-end;
	-moz-align-items:flex-end;
	-ms-align-items:flex-end;
	-o-align-items:flex-end;
	-align-items:flex-end;
}
.flex-line-center{
	-webkit-align-items:center;
	-moz-align-items:center;
	-ms-align-items:center;
	-o-align-items:center;
	-align-items:center;
}
.flex-line-baseline{
	-webkit-align-items:baseline;
	-moz-align-items:baseline;
	-ms-align-items:baseline;
	-o-align-items:baseline;
	-align-items:baseline;
}
.flex-line-stretch{
	-webkit-align-items:stretch;
	-moz-align-items:stretch;
	-ms-align-items:stretch;
	-o-align-items:stretch;
	-align-items:stretch;
}

.flex-cross-start{
	-webkit-align-content:flex-start;
	-moz-align-content:flex-start;
	-ms-align-content:flex-start;
	-o-align-content:flex-start;
	-align-content:flex-start;
}
.flex-cross-end{
	-webkit-align-content:flex-end;
	-moz-align-content:flex-end;
	-ms-align-content:flex-end;
	-o-align-content:flex-end;
	-align-content:flex-end;
}
.flex-cross-center{
	-webkit-align-content:center;
	-moz-align-content:center;
	-ms-align-content:center;
	-o-align-content:center;
	-align-content:center;
}
.flex-cross-stretch{
	-webkit-align-content:stretch;
	-moz-align-content:stretch;
	-ms-align-content:stretch;
	-o-align-content:stretch;
	-align-content:stretch;
}
.flex-cross-around{
	-webkit-align-content:space-around;
	-moz-align-content:space-around;
	-ms-align-content:space-around;
	-o-align-content:space-around;
	align-content:space-around;
}
.flex-cross-between{
	-webkit-align-content:space-between;
	-moz-align-content:space-between;
	-ms-align-content:space-between;
	-o-align-content:space-between;
	align-content:space-between;
}


.flex-item {
	-o-flex:1;
	-ms-flex:1;
	-moz-flex:1;
	-webkit-flex:1;
	flex:1;
}
.flex-item-2 {
	-o-flex:2;
	-ms-flex:2;
	-moz-flex:2;
	-webkit-flex:2;
	flex:2;
}
.flex-item-3{
	-o-flex:3;
	-ms-flex:3;
	-moz-flex:3;
	-webkit-flex:3;
	flex:3;
}
.flex-item-4{
	-o-flex:4;
	-ms-flex:4;
	-moz-flex:4;
	-webkit-flex:4;
	flex:4;
}
.flex-item-5{
	-o-flex:5;
	-ms-flex:5;
	-moz-flex:5;
	-webkit-flex:5;
	flex:5;
}
.flex-item-6{				
	-o-flex:6;
	-ms-flex:6;
	-moz-flex:6;
	-webkit-flex:6;
	flex:6;
}


.flex-item-start{
	-webkit-align-items:flex-start;
	-moz-align-items:flex-start;
	-ms-align-items:flex-start;
	-o-align-items:flex-start;
	-align-items:flex-start;
}
.flex-item-end{
	-webkit-align-items:flex-end;
	-moz-align-items:flex-end;
	-ms-align-items:flex-end;
	-o-align-items:flex-end;
	-align-items:flex-end;
}
.flex-item-center{
	-webkit-align-items:center;
	-moz-align-items:center;
	-ms-align-items:center;
	-o-align-items:center;
	-align-items:center;
}
.flex-item-baseline{
	-webkit-align-items:baseline;
	-moz-align-items:baseline;
	-ms-align-items:baseline;
	-o-align-items:baseline;
	-align-items:baseline;
}
.flex-item-stretch{
	-webkit-align-items:stretch;
	-moz-align-items:stretch;
	-ms-align-items:stretch;
	-o-align-items:stretch;
	-align-items:stretch;
}








/* 加载动画 */
/*
<div class="spinner-loading"></div>
*/
@-webkit-keyframes sk-rotateplane {
	0% { -webkit-transform: perspective(120px) }
	50% { -webkit-transform: perspective(120px) rotateY(180deg) }
	100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
	0% { 
	transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
	} 50% { 
	transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
	} 100% { 
	transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}
}
.spinner-loading {
	width: 40px;
	height: 40px;
	background-color: #333;

	margin: 100px auto;
	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
	animation: sk-rotateplane 1.2s infinite ease-in-out;
}


/*
<div class="bounce-loading1"></div>
*/
@-webkit-keyframes sk-bounce {
	0%, 100% { -webkit-transform: scale(0.0) }
	50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
	0%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 50% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}
.bounce-loading1 {
	width: 40px;
	height: 40px;

	position: relative;
	margin: 100px auto;
}
.bounce-loading1:before,.bounce-loading1:after {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #333;
	opacity: 0.6;
	position: absolute;
	top: 0;
	left: 0;

	-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
	animation: sk-bounce 2.0s infinite ease-in-out;
}

.bounce-loading1:after {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

/*
<div class="bounce-loading2"></div>
*/
@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

.bounce-loading2 {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: relative;
	text-align: center;

	-webkit-animation: sk-rotate 2.0s infinite linear;
	animation: sk-rotate 2.0s infinite linear;
}

.bounce-loading2:before, .bounce-loading2:after {
	width: 60%;
	height: 60%;
	display: inline-block;
	position: absolute;
	top: 0;
	background-color: #333;
	border-radius: 100%;

	-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
	animation: sk-bounce 2.0s infinite ease-in-out;
}

.bounce-loading2:after {
	top: auto;
	bottom: 0;
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}


/*
<div class="stretch-delay-loading">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
*/
@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
	0%, 40%, 100% { 
	transform: scaleY(0.4);
	-webkit-transform: scaleY(0.4);
	}  20% { 
	transform: scaleY(1.0);
	-webkit-transform: scaleY(1.0);
	}
}

.stretch-delay-loading {
	margin: 100px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
}

.stretch-delay-loading>* {
	background-color: #333;
	height: 100%;
	width: 6px;
	display: inline-block;

	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.stretch-delay-loading>:nth-child(2) {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.stretch-delay-loading>:nth-child(3) {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.stretch-delay-loading>:nth-child(4) {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.stretch-delay-loading>:nth-child(5) {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}


/*
<div class="cube-move-loading"></div>
*/
@-webkit-keyframes sk-cubemove {
	25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
	50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
	75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
	100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
	25% { 
				transform: translateX(42px) rotate(-90deg) scale(0.5);
		-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
	} 50% { 
				transform: translateX(42px) translateY(42px) rotate(-179deg);
		-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
	} 50.1% { 
				transform: translateX(42px) translateY(42px) rotate(-180deg);
		-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
	} 75% { 
				transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
		-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
	} 100% { 
				transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
	}
}
.cube-move-loading {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: relative;
}

.cube-move-loading:before, .cube-move-loading:after {
	background-color: #333;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 0;
	left: 0;

	-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
	animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube-move-loading:after {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}


/*
<div class="scale-out-loading"></div>
*/
@-webkit-keyframes sk-scaleout {
	0% { -webkit-transform: scale(0) }
	100% {
		-webkit-transform: scale(1.0);
		opacity: 0;
	}
}

@keyframes sk-scaleout {
	0% { 
		-webkit-transform: scale(0);
				transform: scale(0);
	} 100% {
		-webkit-transform: scale(1.0);
				transform: scale(1.0);
		opacity: 0;
	}
}
.scale-out-loading {
	width: 40px;
	height: 40px;
	margin: 100px auto;
	background-color: #333;

	border-radius: 100%;  
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
}


/*
<div class="bounce-delay-delay-loading">
	<div></div>
	<div></div>
	<div></div>
</div>
*/
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
				transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
				transform: scale(1.0);
	}
}
.bounce-delay-delay-loading {
	margin: 10px auto;
	text-align: center;
}

.bounce-delay-delay-loading>* {
	width: 18px;
	height: 18px;
	background-color: #333;

	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bounce-delay-delay-loading>:nth-child(1) {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.bounce-delay-delay-loading>:nth-child(2) {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}


/*
<div class="circle-bounce-delay-loading">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
*/
@-webkit-keyframes sk-circleBounceDelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		        transform: scale(0);
	} 40% {
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}

@keyframes sk-circleBounceDelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		        transform: scale(0);
	} 40% {
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
}
.circle-bounce-delay-loading {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: relative;
}
.circle-bounce-delay-loading>* {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.circle-bounce-delay-loading>:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
	      animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.circle-bounce-delay-loading>:nth-child(2) {
	-webkit-transform: rotate(30deg);
	  -ms-transform: rotate(30deg);
	      transform: rotate(30deg); 
}
.circle-bounce-delay-loading>:nth-child(3) {
	-webkit-transform: rotate(60deg);
	  -ms-transform: rotate(60deg);
	      transform: rotate(60deg); 
}
.circle-bounce-delay-loading>:nth-child(4) {
	-webkit-transform: rotate(90deg);
	  -ms-transform: rotate(90deg);
	      transform: rotate(90deg); 
}
.circle-bounce-delay-loading>:nth-child(5) {
	-webkit-transform: rotate(120deg);
	  -ms-transform: rotate(120deg);
	      transform: rotate(120deg); 
}
.circle-bounce-delay-loading>:nth-child(6) {
	-webkit-transform: rotate(150deg);
	  -ms-transform: rotate(150deg);
	      transform: rotate(150deg); 
}
.circle-bounce-delay-loading>:nth-child(7) {
	-webkit-transform: rotate(180deg);
	  -ms-transform: rotate(180deg);
	      transform: rotate(180deg); 
}
.circle-bounce-delay-loading>:nth-child(8) {
	-webkit-transform: rotate(210deg);
	  -ms-transform: rotate(210deg);
	      transform: rotate(210deg); 
}
.circle-bounce-delay-loading>:nth-child(9) {
	-webkit-transform: rotate(240deg);
	  -ms-transform: rotate(240deg);
	      transform: rotate(240deg); 
}
.circle-bounce-delay-loading>:nth-child(10) {
	-webkit-transform: rotate(270deg);
	  -ms-transform: rotate(270deg);
	      transform: rotate(270deg); 
}
.circle-bounce-delay-loading>:nth-child(11) {
	-webkit-transform: rotate(300deg);
	  -ms-transform: rotate(300deg);
	      transform: rotate(300deg); 
}
.circle-bounce-delay-loading>:nth-child(12) {
	-webkit-transform: rotate(330deg);
	  -ms-transform: rotate(330deg);
	      transform: rotate(330deg); 
}
.circle-bounce-delay-loading>:nth-child(2):before {
	-webkit-animation-delay: -1.1s;
	      animation-delay: -1.1s; 
}
.circle-bounce-delay-loading>:nth-child(3):before {
	-webkit-animation-delay: -1s;
	      animation-delay: -1s; }
.circle-bounce-delay-loading>:nth-child(4):before {
	-webkit-animation-delay: -0.9s;
	      animation-delay: -0.9s; 
}
.circle-bounce-delay-loading>:nth-child(5):before {
	-webkit-animation-delay: -0.8s;
	      animation-delay: -0.8s; 
}
.circle-bounce-delay-loading>:nth-child(6):before {
	-webkit-animation-delay: -0.7s;
	      animation-delay: -0.7s; 
}
.circle-bounce-delay-loading>:nth-child(7):before {
	-webkit-animation-delay: -0.6s;
	      animation-delay: -0.6s; 
}
.circle-bounce-delay-loading>:nth-child(8):before {
	-webkit-animation-delay: -0.5s;
	      animation-delay: -0.5s; 
}
.circle-bounce-delay-loading>:nth-child(9):before {
	-webkit-animation-delay: -0.4s;
	      animation-delay: -0.4s;
}
.circle-bounce-delay-loading>:nth-child(10):before {
	-webkit-animation-delay: -0.3s;
	      animation-delay: -0.3s; 
}
.circle-bounce-delay-loading>:nth-child(11):before {
	-webkit-animation-delay: -0.2s;
	      animation-delay: -0.2s; 
}
.circle-bounce-delay-loading>:nth-child(12):before {
	-webkit-animation-delay: -0.1s;
	      animation-delay: -0.1s; 
}



/*
<div class="cube-grid-scale-delay-loading">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
*/
@-webkit-keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		        transform: scale3D(1, 1, 1);
	} 35% {
		-webkit-transform: scale3D(0, 0, 1);
		        transform: scale3D(0, 0, 1); 
	}
}

@keyframes sk-cubeGridScaleDelay {
	0%, 70%, 100% {
		-webkit-transform: scale3D(1, 1, 1);
		        transform: scale3D(1, 1, 1);
	} 35% {
		-webkit-transform: scale3D(0, 0, 1);
		        transform: scale3D(0, 0, 1);
	} 
}
.cube-grid-scale-delay-loading {
	width: 40px;
	height: 40px;
	margin: 100px auto;
}

.cube-grid-scale-delay-loading>* {
	width: 33%;
	height: 33%;
	background-color: #333;
	float: left;
	-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	      animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.cube-grid-scale-delay-loading>:nth-child(1) {
	-webkit-animation-delay: 0.2s;
	      animation-delay: 0.2s; 
}
.cube-grid-scale-delay-loading>:nth-child(2) {
	-webkit-animation-delay: 0.3s;
	      animation-delay: 0.3s; 
}
.cube-grid-scale-delay-loading>:nth-child(3) {
	-webkit-animation-delay: 0.4s;
	      animation-delay: 0.4s; 
}
.cube-grid-scale-delay-loading>:nth-child(4) {
	-webkit-animation-delay: 0.1s;
	      animation-delay: 0.1s; 
}
.cube-grid-scale-delay-loading>:nth-child(5) {
	-webkit-animation-delay: 0.2s;
	      animation-delay: 0.2s; 
}
.cube-grid-scale-delay-loading>:nth-child(6) {
	-webkit-animation-delay: 0.3s;
	      animation-delay: 0.3s; 
}
.cube-grid-scale-delay-loading>:nth-child(7) {
	-webkit-animation-delay: 0s;
	      animation-delay: 0s; 
}
.cube-grid-scale-delay-loading>:nth-child(8) {
	-webkit-animation-delay: 0.1s;
	      animation-delay: 0.1s; 
}
.cube-grid-scale-delay-loading>:nth-child(9) {
	-webkit-animation-delay: 0.2s;
	      animation-delay: 0.2s; 
}


/*
<div class="circle-fade-delay-loading">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
*/
@-webkit-keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
	0%, 39%, 100% { opacity: 0; }
	40% { opacity: 1; } 
}
.circle-fade-delay-loading {
	margin: 100px auto;
	width: 40px;
	height: 40px;
	position: relative;
}

.circle-fade-delay-loading>* {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.circle-fade-delay-loading>:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #333;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	      animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.circle-fade-delay-loading:nth-child(2) {
	-webkit-transform: rotate(30deg);
	  -ms-transform: rotate(30deg);
	      transform: rotate(30deg);
}
.circle-fade-delay-loading:nth-child(3) {
	-webkit-transform: rotate(60deg);
	  -ms-transform: rotate(60deg);
	      transform: rotate(60deg);
}
.circle-fade-delay-loading:nth-child(4) {
	-webkit-transform: rotate(90deg);
	  -ms-transform: rotate(90deg);
	      transform: rotate(90deg);
}
.circle-fade-delay-loading:nth-child(5) {
	-webkit-transform: rotate(120deg);
	  -ms-transform: rotate(120deg);
	      transform: rotate(120deg);
}
.circle-fade-delay-loading:nth-child(6) {
	-webkit-transform: rotate(150deg);
	  -ms-transform: rotate(150deg);
	      transform: rotate(150deg);
}
.circle-fade-delay-loading:nth-child(7) {
	-webkit-transform: rotate(180deg);
	  -ms-transform: rotate(180deg);
	      transform: rotate(180deg);
}
.circle-fade-delay-loading:nth-child(8) {
	-webkit-transform: rotate(210deg);
	  -ms-transform: rotate(210deg);
	      transform: rotate(210deg);
}
.circle-fade-delay-loading:nth-child(9) {
	-webkit-transform: rotate(240deg);
	  -ms-transform: rotate(240deg);
	      transform: rotate(240deg);
}
.circle-fade-delay-loading:nth-child(10) {
	-webkit-transform: rotate(270deg);
	  -ms-transform: rotate(270deg);
	      transform: rotate(270deg);
}
.circle-fade-delay-loading:nth-child(11) {
	-webkit-transform: rotate(300deg);
	  -ms-transform: rotate(300deg);
	      transform: rotate(300deg); 
}
.circle-fade-delay-loading:nth-child(12) {
	-webkit-transform: rotate(330deg);
	  -ms-transform: rotate(330deg);
	      transform: rotate(330deg); 
}
.circle-fade-delay-loading:nth-child(2):before {
	-webkit-animation-delay: -1.1s;
	      animation-delay: -1.1s; 
}
.circle-fade-delay-loading:nth-child(3):before {
	-webkit-animation-delay: -1s;
	      animation-delay: -1s; 
}
.circle-fade-delay-loading:nth-child(4):before {
	-webkit-animation-delay: -0.9s;
	      animation-delay: -0.9s; 
}
.circle-fade-delay-loading:nth-child(5):before {
	-webkit-animation-delay: -0.8s;
	      animation-delay: -0.8s; 
}
.circle-fade-delay-loading:nth-child(6):before {
	-webkit-animation-delay: -0.7s;
	      animation-delay: -0.7s; 
}
.circle-fade-delay-loading:nth-child(7):before {
	-webkit-animation-delay: -0.6s;
	      animation-delay: -0.6s; 
}
.circle-fade-delay-loading:nth-child(8):before {
	-webkit-animation-delay: -0.5s;
	      animation-delay: -0.5s; 
}
.circle-fade-delay-loading:nth-child(9):before {
	-webkit-animation-delay: -0.4s;
	      animation-delay: -0.4s;
}
.circle-fade-delay-loading:nth-child(10):before {
	-webkit-animation-delay: -0.3s;
	      animation-delay: -0.3s;
}
.circle-fade-delay-loading:nth-child(11):before {
	-webkit-animation-delay: -0.2s;
	      animation-delay: -0.2s;
}
.circle-fade-delay-loading:nth-child(12):before {
	-webkit-animation-delay: -0.1s;
	      animation-delay: -0.1s;
}


/*
<div class="fold-cube-angle-loading">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
*/
@-webkit-keyframes sk-foldCubeAngle {
	0%, 10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		        transform: perspective(140px) rotateX(-180deg);
		opacity: 0; 
	} 25%, 75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		        transform: perspective(140px) rotateX(0deg);
		opacity: 1; 
	} 90%, 100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		        transform: perspective(140px) rotateY(180deg);
		opacity: 0; 
	} 
}

@keyframes sk-foldCubeAngle {
	0%, 10% {
		-webkit-transform: perspective(140px) rotateX(-180deg);
		        transform: perspective(140px) rotateX(-180deg);
		opacity: 0; 
	} 25%, 75% {
		-webkit-transform: perspective(140px) rotateX(0deg);
		        transform: perspective(140px) rotateX(0deg);
		opacity: 1; 
	} 90%, 100% {
		-webkit-transform: perspective(140px) rotateY(180deg);
		        transform: perspective(140px) rotateY(180deg);
		opacity: 0; 
	}
}
.fold-cube-angle-loading {
	margin: 20px auto;
	width: 40px;
	height: 40px;
	position: relative;
	-webkit-transform: rotateZ(45deg);
	      transform: rotateZ(45deg);
}

.fold-cube-angle-loading>* {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	-webkit-transform: scale(1.1);
	  -ms-transform: scale(1.1);
	      transform: scale(1.1); 
}
.fold-cube-angle-loading>:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
	      animation: sk-foldCubeAngle 2.4s infinite linear both;
	-webkit-transform-origin: 100% 100%;
	  -ms-transform-origin: 100% 100%;
	      transform-origin: 100% 100%;
}
.fold-cube-angle-loading>:nth-child(2) {
	-webkit-transform: scale(1.1) rotateZ(90deg);
	      transform: scale(1.1) rotateZ(90deg);
}
.fold-cube-angle-loading>:nth-child(4) {
	-webkit-transform: scale(1.1) rotateZ(180deg);
	      transform: scale(1.1) rotateZ(180deg);
}
.fold-cube-angle-loading>:nth-child(3) {
	-webkit-transform: scale(1.1) rotateZ(270deg);
	      transform: scale(1.1) rotateZ(270deg);
}
.fold-cube-angle-loading>:nth-child(2):before {
	-webkit-animation-delay: 0.3s;
	      animation-delay: 0.3s;
}
.fold-cube-angle-loading>:nth-child(4):before {
	-webkit-animation-delay: 0.6s;
	      animation-delay: 0.6s; 
}
.fold-cube-angle-loading>:nth-child(3):before {
	-webkit-animation-delay: 0.9s;
	      animation-delay: 0.9s;
}