#loader { position: fixed ; width: 100% ; height: 100% ; top: 0px ; left: 0px ; background-color: #000 ; z-index: 300000 ; text-align: center }

/*div.loading { margin: -50px 0px 0px -50px ; border-radius: 50% ; position: absolute ; top: 50% ; left: 50% ; width: 100px ; height: 100px ; transition: width .25s, height .25s ; background: #FFF ; box-shadow: 0px 0px 12px #C0C0C0 inset }
div.loading:before, div.loading:after { animation: spinning 0.75s linear 0s infinite ; display: block ; position: absolute ; width: 120px ; height: 120px ; content: "" ; background: linear-gradient( rgba( 255, 255, 255, 1), #FEDD92 ) ; border-radius: 50% ; left: -5px ; top: -5px ; margin: 0px ; z-index: -1 }
/*div.loading:after { width: 30px ; height: 30px ; background: linear-gradient( rgba( 0, 136, 217, 1 ), rgba( 255, 255, 255, 0.5 ) ) ; left: 25px ; top: 25px ; z-index: 1 ; box-shadow: 0px 0px 3px #C0C0C0 }*/
/*div.loading:before { box-shadow: 0px 0px 12px #C0C0C0 }
div.loading { width: 80px ; height: 80px }*/

div.tcell { display: table-cell ; width: 100% ; height: 100% ; vertical-align: middle ; text-align: center }
div.trow { display: table-row ; width: 100% ; height: 100% }
div.mtable { display: table ; width: 100% ; height: 100% }

div.tcell > div { opacity: 0 }
div.loading {
	position: relative;
	display: inline-block;
	border-radius: 50%;
	width: 21px;
	height: 21px;
	background-color: #FF0000 ;
	animation: effect .75s linear .25s infinite;
	margin: 0px 15px;
}
div.loading.orange {
	background-color: #00FF00 ;
	animation-delay: .5s;
}
div.loading.blue {
	background-color: #FFFF00 ;
	animation-delay: .75s;
}

@keyframes effect {
	0%, 50%, 100% { transform: scale( 1 ) ; filter: blur( 0px ) ; opacity: 1 }
	25% { transform: scale( 0.75 ) ; filter: blur( 3px ) }
	75% { transform: scale( 1.25 ) ; filter: blur( 3px ) }
}