/*  **  stage-sep.css  **  */

body {
	overflow:hidden; 
}

#stage-1-bkg {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:none;
	opacity:1;
	z-index:500;
}
		  
#stage-1 {
	position:relative;
	top:-39vh;
	width:96vh;
	height:96vh;
	margin:auto;
	border: 40vh solid #111;
	border-radius:50%;
	opacity:0;
	box-shadow:0px 0px 1px 20vw #111;
	-webkit-animation: FLARE1 4s ease 136s 4 none, APPEAR 1s ease 135s 1 forwards;
     -moz-animation: FLARE1 4s ease 136s 4 none, APPEAR 1s ease 135s 1 forwards;
       -o-animation:FLARE1 4s ease 136s 4 none, APPEAR 1s ease 135s 1 forwards;
          animation: FLARE1 4s ease 136s 4 none, APPEAR 1s ease 135s 1 forwards;

}		  

#stage-2 {
	position:relative;
	top:-5vh;
	left:-5vw;
	width: 70vh;
	height:70vh;
	border-radius:50%;
	margin:auto;
	border: 20vh solid #111;
	-webkit-animation: FALL-AWAY 40s ease 140s 1 forwards;
     -moz-animation: FALL-AWAY 40s ease 140s 1 forwards;
       -o-animation: FALL-AWAY 40s ease 140s 1 forwards;
          animation: FALL-AWAY 40s ease 140s 1 forwards;	
}

#frame-1 {
	position:absolute;
	top:0;
	left:0;
	width:96vh;
	height:96vh;
	border:5px solid #000;
	border-radius:50%;
	background-image:url(../images/band-11.jpg);
    background-repeat:no-repeat;
    background-size:contain;
	background-position:center;	
	background-color:#020088;
	-webkit-animation: PIC-AWAY 40s ease 140s 1 forwards;
     -moz-animation: PIC-AWAY 40s ease 140s 1 forwards;
       -o-animation: PIC-AWAY 40s ease 140s 1 forwards;
          animation: PIC-AWAY 40s ease 180s 1 forwards, APPEAR 2s ease 177s 1 forwards;
	opacity:0;
}

#frame-2 {
	position:absolute;
	top:0;
	left:0;
	width:96vh;
	height:96vh;
	border-radius:50%;
	padding:10vh;
	-webkit-animation: APPEAR 1s ease 210s 1 forwards;
     -moz-animation: APPEAR 1s ease 210s 1 forwards;
       -o-animation: APPEAR 1s ease 210s 1 forwards;
          animation: APPEAR 1s ease 210s 1 forwards;
	opacity:0;
}

.typeText {
	font-family:"OCR A Std", Verdana, Geneva, sans-serif;
	color:#00ff00;
	white-space:nowrap;
	overflow:hidden;
	letter-spacing: 5px;	
	width:0;
		margin-left:20%;
		
}

#t-1 {
	-webkit-animation: 		TYPE1 1s steps(5,end) 216s 1 forwards;
		-moz-animation: 	TYPE1 1s steps(5,end) 216s 1 forwards;
			-o-animation: 	TYPE1 1s steps(5,end) 216s 1 forwards;
				animation: 	TYPE1 2s steps(6,end) 211s 1 forwards;
}

#t-2 {
	-webkit-animation: 		TYPE2 1s steps(5,end) 216s 1 forwards;
		-moz-animation: 	TYPE2 1s steps(5,end) 216s 1 forwards;
			-o-animation: 	TYPE2 1s steps(5,end) 216s 1 forwards;
				animation: 	TYPE2 3s steps(11,end) 213.5s 1 forwards;
}

#t-3 {
	position:relative;
	top:48vh;
	-webkit-animation: 		TYPE3 1s steps(5,end) 216s 1 forwards;
		-moz-animation: 	TYPE3 1s steps(5,end) 216s 1 forwards;
			-o-animation: 	TYPE3 1s steps(5,end) 216s 1 forwards;
				animation: 	TYPE3 3s steps(11,end) 217s 1 forwards;
}

#t-4 {
	position:relative;
	top:49vh;
	-webkit-animation: 		TYPE4 1s steps(5,end) 216s 1 forwards;
		-moz-animation: 	TYPE4 1s steps(5,end) 216s 1 forwards;
			-o-animation: 	TYPE4 1s steps(5,end) 216s 1 forwards;
				animation: 	TYPE4 4s steps(17,end) 220s 1 forwards;
}

#t-5 {
	position:relative;
	top:10vh;
}

#t-5 a {
	font-size:16px;
	font-family:"OCR A Std", Verdana, Geneva, sans-serif;
	color:#fff;
	text-decoration:none;
}


@media screen and (max-width: 800px) {
	#stage-1 {
		position:relative;
		top:0vh;
		left:-40vw;
		width:96vw;
		height:96vw;
		margin:none;
		border: 40vw solid #111;
		border-radius:50%;
		box-shadow:0px 0px 1px 20vw #111;

	}	
}





@-webkit-keyframes FLARE1 { 
0%   	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#111;}
20%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
50% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#000;}
80% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
100% 	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #111; border-color:#111;}
}
   @-moz-keyframes FLARE1{ 
0%   	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#111;}
20%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
50% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#000;}
80% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
100% 	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #111; border-color:#111;}
}
     @-o-keyframes FLARE1 { 
0%   	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#111;}
20%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
50% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#000;}
80% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
100% 	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #111; border-color:#111;}
}
        @keyframes FLARE1 { 
0%   	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#111;}
20%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
50% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #000; border-color:#000;}
80% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 1px 20vw #250000; border-color:#250000;}
100% 	{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 1px 20vw #111; border-color:#111;}
}

@-webkit-keyframes FALL-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); background-color:rgba(255,0,0,0.3);}
3%		{background-color:transparent;}
5%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}
25% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 0px #37edf8; border-color:#222;}
40% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}

100% 	{transform:scale(0,0) rotateX(60deg);}
}
   @-moz-keyframes FALL-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); background-color:rgba(255,0,0,0.3);}
3%		{background-color:transparent;}
5%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}
25% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 0px #37edf8; border-color:#222;}
40% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}

100% 	{transform:scale(0,0) rotateX(60deg);}
}
     @-o-keyframes  FALL-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); background-color:rgba(255,0,0,0.3);}
3%		{background-color:transparent;}
5%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}
25% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 0px #37edf8; border-color:#222;}
40% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}

100% 	{transform:scale(0,0) rotateX(60deg);}
}
        @keyframes FALL-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); background-color:rgba(255,0,0,0.3);}
3%		{background-color:transparent;}
5%		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}
25% 		{box-shadow: inset 0 0 0px #000, inset 0px 0px 0px #fff, inset 0px 0px 0px #37edf8, 0px 0px 0px #37edf8; border-color:#222;}
40% 		{box-shadow: inset 0 0 3px #000, inset 0px 0px 100px #fff, inset 0px 0px 90px #37edf8, 0px 0px 20px #37edf8; border-color:#250000;}

100% 	{transform:scale(0,0) rotateX(60deg);}
}

@-webkit-keyframes APPEAR { 
0%   	{opacity:0; z-index:-1;}
100% 	{opacity:1; z-index:450;}
}
   @-moz-keyframes APPEAR { 
0%   	{opacity:0; z-index:-1;}
100% 	{opacity:1; z-index:450;}
}
     @-o-keyframes  APPEAR { 
0%   	{opacity:0; z-index:-1;}
100% 	{opacity:1; z-index:450;}
}
        @keyframes APPEAR { 
0%   	{opacity:0; z-index:-1;}
100% 	{opacity:1; z-index:450;}
}


@-webkit-keyframes PIC-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); box-shadow:0px 0px 0px #37edf8;}
5% 		{box-shadow:0px 0px 60px #37edf8; border-color:#250000;}
15% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
20% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
30% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
40% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
50% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
60% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
70% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
80% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
100% 	{transform:scale(0,0) rotateX(720deg);}
}
   @-moz-keyframes PIC-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); box-shadow:0px 0px 0px #37edf8;}
5% 		{box-shadow:0px 0px 60px #37edf8; border-color:#250000;}
15% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
20% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
30% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
40% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
50% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
60% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
70% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
80% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
100% 	{transform:scale(0,0) rotateX(720deg);}
}
     @-o-keyframes  PIC-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); box-shadow:0px 0px 0px #37edf8;}
5% 		{box-shadow:0px 0px 60px #37edf8; border-color:#250000;}
15% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
20% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
30% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
40% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
50% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
60% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
70% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
80% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
100% 	{transform:scale(0,0) rotateX(720deg);}
}
        @keyframes PIC-AWAY { 
0%   	{transform:scale(1,1) rotateX(0deg); box-shadow:0px 0px 0px #37edf8;}
5% 		{box-shadow:0px 0px 60px #37edf8; border-color:#250000;}
15% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
20% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
30% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
40% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
50% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
60% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
70% 		{box-shadow:0px 0px 0px #37edf8; border-color:#000;}
80% 		{box-shadow:0px 0px 100px #37edf8; border-color:#250000;}
100% 	{transform:scale(0,0) rotateX(720deg);}
}



@-webkit-keyframes TYPE1 {
  	0%	{width:0;}
	100%	{width:5em;}
}
@-moz-keyframes TYPE1 {
  	0%	{width:0;}
	100%	{width:5em;}
}
@-O-keyframes TYPE1 {
  	0%	{width:0;}
	100%	{width:5em;}
}
@keyframes TYPE1 {
	0%		{width:0;}
	100%	{width:5em;}
}



@-webkit-keyframes TYPE2 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@-moz-keyframes TYPE2 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@-O-keyframes TYPE2 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@keyframes TYPE2 {
	0%		{width:0;}
	100%	{width:10em;}
}


@-webkit-keyframes TYPE3 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@-moz-keyframes TYPE3 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@-O-keyframes TYPE3 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@keyframes TYPE3 {
	0%		{width:0;}
	100%	{width:10.25em;}
}

@-webkit-keyframes TYPE4 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@-moz-keyframes TYPE4 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@-O-keyframes TYPE4 {
  	0%	{width:0;}
	100%	{width:11em;}
}
@keyframes TYPE4 {
	0%		{width:0;}
	100%	{width:16em;}
}