#banner-animation-app { opacity:0 }
.bannerActive { opacity:1 !important }
#banner-animation-app svg { width:100%; height:auto }
.bannerActive #banner-bg, .bannerActive #bannerlogo, .bannerActive #lines, .bannerActive #light, .bannerActive #letter-offices, .bannerActive #letter-home, .bannerActive #letter-business, .bannerActive #letter-resid, .bannerActive #letter-apart, .bannerActive #office-sec-computer, .bannerActive #building-1,  .bannerActive #building-2, .bannerActive #building-3, .bannerActive #building-3, .bannerActive #building-5, .bannerActive #security-monitoring, .bannerActive #security-standing, .bannerActive #building-4 
 { opacity:0;  opacity:0;     animation: banOpacAnim 1s forwards; }
.bannerActive #banner-bg { animation-delay:0.5s } 
.bannerActive #lines { animation-delay:0.6s } 
.bannerActive  #light { animation-delay:0.8s } 
.bannerActive  #letter-offices  { animation-delay:1s } .bannerActive #letter-home { animation-delay:1.1s } .bannerActive #letter-business { animation-delay:1.2s } .bannerActive #letter-resid { animation-delay:1.3s } .bannerActive #letter-apart{ animation-delay:1.4s }
.bannerActive  #office-sec-computer { animation-delay:1.6s }
.bannerActive   #building-1    { animation-delay:1.8s }   
.bannerActive   #security-salute   { animation-delay:2s } 
.bannerActive   #building-2   { animation-delay:2.2s } 
.bannerActive   #building-3   { animation-delay:2.4s } 
.bannerActive   #building-3 { animation-delay:2.6s } 
.bannerActive   #building-5 { animation-delay:3s }
.bannerActive    #security-monitoring  { animation-delay:2.8s }
.bannerActive   #security-standing { animation-delay:2.9s }
.bannerActive  #building-4 {  animation-delay:3s }
@keyframes banOpacAnim {    
	   0%  { opacity:0;}
		   20%  { opacity:0;}
        100%{opacity:1;}	  
}
#line-1, #line-2, #line-3, #line-3, #line-4, #line-5 { stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 20s linear infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 100;
  }
}

#light-1, #light-2, #light-3, #light-4, #light-5 {
animation: lightAnim 2s ease 0s infinite alternate forwards;
}
@keyframes lightAnim {
	0% {
		opacity: 0.3;
	}

10% {
		opacity: 0.2;
	}
	30% {
		opacity: 0.4;
	}

	50% {
		opacity: 0.2;
	}
	
	65% {
		opacity: 0.4;
	}
	80% {
		opacity: 0.2;
	}

	100% {
		opacity: 0.5;
	}

}

.bannerActive #security-salute, .bannerActive #security-standing
{
animation: securityAnim 2s forwards; transform: scale(0.9) ; transform-origin:center; opacity:0; animation-delay:1.8s 
}
 .bannerActive  #security-standing { animation-delay:2.2s  }

@keyframes securityAnim {
	0% {
		opacity: 0; transform: scale(0.9) ;
	}
	20% {
		opacity: 1; transform: scale(0.9) ;
	}


100% {
		transform: scale(1) ; opacity: 1;
	}

}