/* **  lights.css  **  */


.flood {
	position:absolute;
	width:3vw;
	height:3vw;
	border-radius:50%;
	background-color:#fff;
	opacity:.1;
	animation: FLOOD-FLARE 2s ease 2.5s 1 none, FLOOD-FLARE2 2s ease 28s 1 none, FLOOD-FLARE3 2s ease 242s 1 forwards;			
}

#fl1 {
	top:0;
	left:0;
}

#fl2 {
	top:0;
	left:19.4vw;
}

#fl3 {
	top:0;
	left:38.8vw;
}

#fl4 {
	top:0;
	left:58.2vw;
}

#fl5 {
	top:0;
	left:77.6vw;
}

#fl6 {
	top:0;
	left:97vw;
}

/* bottom floods - at end  */
.bflood {
	position:absolute;
	width:3vw;
	height:3vw;
	border-radius:50%;
	opacity:0;			
}

#bfl1 {
	top:90vh;
	left:0;
	background-color:#f00;
	animation: BOTTOM-FLOOD-FLARE-RED 2s ease 242s 1 forwards;
}

#bfl2 {
	top:90vh;
	left:19.4vw;
	background-color:#00f;
	animation: BOTTOM-FLOOD-FLARE-BLUE 2s ease 242s 1 forwards;	
}

#bfl3 {
	top:90vh;
	left:38.8vw;
	background-color:#f00;
	animation: BOTTOM-FLOOD-FLARE-RED 2s ease 242s 1 forwards;
}

#bfl4 {
	top:90vh;
	left:58.2vw;
	background-color:#00f;
	animation: BOTTOM-FLOOD-FLARE-BLUE 2s ease 242s 1 forwards;
}

#bfl5 {
	top:90vh;
	left:77.6vw;
	background-color:#f00;
	animation: BOTTOM-FLOOD-FLARE-RED 2s ease 242s 1 forwards;
}

#bfl6 {
	top:90vh;
	left:97vw;
	background-color:#00f;
	animation: BOTTOM-FLOOD-FLARE-BLUE 2s ease 242s 1 forwards;
}



#spM {
	position:absolute;
	top:-10vh;
	left:35%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 97vh solid #fff;
	opacity:0;
	border-radius:13em/3em;
	-webkit-animation: SW-ON 30s ease 0s 1 forwards;
		-moz-animation: SW-ON 30s ease 0s 1 forwards;
		   -o-animation: SW-ON 30s ease 0s 1 forwards;
			  animation: SW-ON 1s ease 20s 1 forwards;	
	
}


#sp1 {
	position:absolute;
	top:-10vh;
	left:0%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid #82172B;
	opacity:0;
	border-radius:13em/3em;
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 3.5s 240 forwards;	
}

#sp2 {
	position:absolute;
	top:-15vh;
	left:10%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid #37edf8;
	opacity:0;
	border-radius:13em/3em;
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 4s 240 forwards;
}

#sp3 {
	position:absolute;
	top:-20vh;
	left:20%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid #00f;
	opacity:0;
	border-radius:13em/3em;
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 4.5s 240 forwards;	
}

#sp4 {
	position:absolute;
	top:-20vh;
	left:75%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid #00f;
	opacity:0;
	border-radius:13em/3em;
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 3.5s 240 forwards;	
}

#sp5 {
	position:absolute;
	top:-15vh;
	left:85%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid #D5544F;
	opacity:0;
	border-radius:13em/3em;
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 4s 240 forwards;	
}

#sp6 {
	position:absolute;
	top:-10vh;
	left:90%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid #7BCC70;
	opacity:0;
	border-radius:13em/3em;
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 4.5s 240 forwards;	
	
}

#sp7 {
	position:absolute;
	top:-10vh;
	left:50%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid Purple;
	opacity:0;
	transform:rotate(10deg);
	border-radius:13em/3em;
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 28s 99 forwards;	
	
}

#sp8 {
	position:absolute;
	top:-10vh;
	left:20%;
	width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 105vh solid Purple;
	opacity:0;
	border-radius:13em/3em;
	transform:rotate(-7deg);
	-webkit-animation: SP-ON 1s ease 3.5s 99 forwards;
		-moz-animation: SP-ON 1s ease 3.5s 99 forwards;
		   -o-animation: SP-ON 1s ease 3.5s 99 forwards;
			  animation: SP-ON 1s ease 28s 99 forwards;	
	
}


/*  **  KEYFRAMES  ** */

/* FLOOD-FLARE */

@keyframes FLOOD-FLARE { 
0%   	{opacity:.2;background-color:#fff;}
25%		{opacity:1; background-color:#fff;}
50%   	{opacity:1; width:15vw; height:15vw; box-shadow: 0 0 100px 100px #fff;}
75%		{opacity:1; background-color:#fff;}
100% 	{opacity:.3; background-color:#f00;}
}

/* FLOOD-FLARE2 */
@keyframes FLOOD-FLARE2 { 
0%   	{opacity:.2;}
25%		{opacity:1;}
50%   	{opacity:1; width:15vw; height:15vw; box-shadow: 0 0 100px 100px #fff;}
75%		{opacity:1;}
100% 	{opacity:.3;}
}

/* FLOOD-FLARE3 */

@keyframes FLOOD-FLARE3 { 
0%   	{opacity:.2;}
25%		{opacity:1;}
50%   	{opacity:1; width:15vw; height:15vw; box-shadow: 0 0 100px 100px #fff;}
75%		{opacity:1;}
100% 	{opacity:.3;}
}

/* BOTTOM-FLOOD-FLARE3 */

@keyframes BOTTOM-FLOOD-FLARE-RED { 
0%   	{opacity:.2;}
25%		{opacity:1;}
50%   	{opacity:1; width:15vw; height:15vw; box-shadow: 0 0 100px 100px #f00;}
75%		{opacity:1;}
100% 	{opacity:.05;}
}

@keyframes BOTTOM-FLOOD-FLARE-BLUE { 
0%   	{opacity:.2;}
25%		{opacity:1;}
50%   	{opacity:1; width:15vw; height:15vw; box-shadow: 0 0 100px 100px #00f;}
75%		{opacity:1;}
100% 	{opacity:.05;}
}


/* SW-ON */
@-webkit-keyframes SW-ON { 
0%   	{left:10%;}
50%   	{left:50%;}
100% 	{left:10%}
}
   @-moz-keyframes SW-ON { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
     @-o-keyframes SW-ON { 
0%   	{opacity:1;z-index:1;}

100% 	{opacity:0; z-index:-1;}
}
        @keyframes SW-ON { 
0%   	{opacity:0;}
100% 	{opacity:.1;}
}

/* SP-ON */
@-webkit-keyframes SP-ON { 
0%   	{opacity:0;}
50%		{opacity:.1;}
100% 	{opacity:0;}
}
   @-moz-keyframes SP-ON { 
0%   	{opacity:0;}
50%		{opacity:.1;}
100% 	{opacity:0;}
}
     @-o-keyframes SP-ON { 
0%   	{opacity:0;}
50%		{opacity:.1;}
100% 	{opacity:0;}
}
        @keyframes SP-ON { 
0%   	{opacity:0;}
50%		{opacity:.1;}
100% 	{opacity:0;}
}