#Loading {
	position: absolute;
	left: 40%;
	top: 40%;
	z-index: 1;
	width: 10%;
	padding-top: 10%;
/*	height: 50px;  */
/*	background: #000000; */
/*	border: 25px solid #bbbbbb; */
	border-radius: 50%;
	border-top: 50px solid #ff0000;
	border-left: 50px solid #00ff00;
	border-right: 50px solid #0000ff;
	border-bottom: 50px solid #ffff00;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

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

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.animate-bottom {
	position: relative;
	-webkit-animation-name: animatebottom;
	-webkit-animation-duration: 1s;
	animation-name: animatebottom;
	animation-duration: 1s
}

@-webkit-keyframes animatebottom {
	from { bottom:-50px; opacity:0 } 
	to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
	from{ bottom:-50px; opacity:0 } 
	to{ bottom:0; opacity:1 }
}

#Loaded {
	display: none;
	text-align: center;
}



#TapeReelA {
	left: 10%;
	top: 10px;
}

#TapeReelB {
	left: 80%;
	top: 10px;
}

div.TapeReel {
	position: absolute;
	z-index: 1;
	width: 5%;
/*	height: 50px; */
	padding-top: 5%;
/*	background: #000000; */
	border: 2em solid #bbbbbb;
	border-radius: 50%;
	border-top: 2em solid #444444;
/*
	border-left: 50px solid #00ff00;
	border-right: 50px solid #0000ff;
*/
	border-bottom: 2em solid #444444;
	-webkit-animation: spin 2s linear infinite;
/*	animation: spin 2s linear infinite; */

	animation-timing-function: linear;
	
    animation-name: spin;
    animation-duration: 2s;
    animation-iteration-count: 4;
}




div.TickerTape {
    width: 25%;
	left: 37%;
	height:10%;

    background-color: #0000ff;
    position: relative;
    -webkit-animation-name: SlidingBar; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
/*    -webkit-animation-iteration-count: 3;  Safari 4.0 - 8.0 */
    animation-name: SlidingBar;
    animation-duration: 2s;
    animation-iteration-count: 4;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes SlidingBar {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes SlidingBar {
    0%   {background-color:#ff0000; left:0%; top:0px;}
    25%  {background-color:#ffff00; left:19%; top:0px;}
    50%  {background-color:#0000ff; left:37%; top:0px;}
    75%  {background-color:#00ff00; left:58%; top:0px;}
    100% {background-color:#ff0000; left:75%; top:0px;}
}

#MatrixA {
	float: left;
	top: 10px;
}

#MatrixB {
	float: left;
	top: 60px;
}

#MatrixC {
	float: left;
	top: 30px;
}

#MatrixD {
	float: left;
	top: 120px;
}

#MatrixE {
	float: left;
	top: 90px;
}


div.Matrix {
    width: 1%;
	height: 10%;
	top: 10px;

	margin-left: 5%;
	
    background-color:#00ff77;
    position: relative;
    -webkit-animation-name: MatrixStream; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
/*    -webkit-animation-iteration-count: 3;  Safari 4.0 - 8.0 */
    animation-name: MatrixStream;
    animation-duration: 1s;
    animation-iteration-count: 4;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes MatrixStream {
    0%	{top:0px;}
	20%	{top:30px;}
    40%	{top:60px;}
    60%	{top:90px;}
    80%	{top:120px;}
    100%	{top:150px;}
}

/* Standard syntax */
@keyframes MatrixStream {
    0%	{top:0px;}
	20%	{top:30px;}
    40%	{top:60px;}
    60%	{top:90px;}
    80%	{top:120px;}
    100%	{top:150px;}
}