/*  20-NWF-0019-Zipply-970x250 all streams */
#ad {width:970px;height:250px;background-color:#009300;margin:0;position:absolute;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;overflow:hidden;z-index:1;}
body,div,html,img{margin:0;padding:0;border:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#click-area{width:970px;height:250px;position:absolute;top:0;left:0;opacity:0;z-index:900;cursor:pointer;}
#background{width:970px;height:250px;background-color:#009300;background-size:cover;position:absolute;top:0px;left:0px;border: solid 2px #FFf;}
@keyframes In {from{opacity:0;}to{opacity:1;}}
@keyframes Out {from{opacity:1;}to{opacity:0;}}
@keyframes DownIn {from{top:-250px;}to{top:0px;}}
@keyframes UpIn {from{top:250px;}to{top:0px;}}
@keyframes InOut {0%{opacity:1;}99.999%{opacity:1;}100%{opacity:0;}}
@keyframes Streak {
	0% {left: 970px;}
	100% {left: -650px;}
}
@keyframes Beam {
	0% {left: -800px;}
	30% {left: -300px;}
	60% {left: -100px;}
	100% {left: 970px;}
}
.circle {
	position: absolute;
	height: 4px;
	left: 970px;
	border-radius: 2px;
	animation: Streak .2s forwards linear 3;
}
#circleOne {
	background-color: #FFC600;
	top: 30px;
	width: 500px;
	height: 20px;
	border-radius: 10px;
}
#circleThree {
	background-color: #FFF;
	opacity: .5;
	top: 87px;
	width: 200px;
	animation-delay: .3s;
}
#circleFive {
	background-color: #FFF;
	opacity: .5;
	top: 168px;
	width: 100px;
	animation-delay: .5s;
}
#circleSix {
	background-color: #FFF;
	opacity: .5;
	top: 191px;
	width: 250px;
	animation-delay: .1s;
}
#dot {
	position: absolute;
	top: 100px;
	left: -800px;
	width: 600px;
	animation: Beam 1.5s forwards linear;
	/*animation-delay: .5s;*/
}
#textOne {
	position: absolute;
	top: 0px;
	left: 0px;
	animation: InOut forwards 1.5s;
	animation-delay: 1.25s;
	opacity: 0;
}
#dotTwo {
	position: absolute;
	top: 150px;
	left: -500px;
	width: 450px;
	animation: Streak .5s linear reverse;
	animation-delay: 1.75s;
}
#contract {
	position: absolute;
	top: -250px;
	left: 0px;
	margin-top: 22px;
	animation: DownIn .5s forwards ease-in-out;
	animation-delay: 2.6s;
}
@keyframes conTop {
	0% {top:0px;transform:rotate(2deg);left: 2.25px;}
	10% {top: -5px;left:-3px;transform:rotate(10deg);}
	20% {left: 15px;}
	85% {transform: rotate(-80deg);}
	100% {top:-400px;transform:rotate(-80deg);left: 30px;}
}
#con-top{
	position: absolute;
	top: 5.5px;
	left: 3.25px;
	width:970px;
	transform: rotate(2deg);
	animation: conTop .6s forwards linear;
	animation-delay: 3.6s;
}
@keyframes conBottom {
	0% {top:-32.6px;transform:rotate(-4.5deg);left:0px;}
	10% {top: -20px;left:-3px;transform:rotate(-13deg);}
	20% {left: 15px;}
	85% {transform: rotate(100deg);}
	100% {top:350px;transform:rotate(100deg);left: 10px;}
}
#con-bottom{
	position: absolute;
	top: -42.6px;
	transform: rotate(-4.5deg);
	left: 0px;
	width:970px;
	animation: conBottom .6s forwards linear;
	animation-delay: 3.6s;
}
#cableY {
	position: absolute;
	top: -275px;
	left: 0px;
	animation: DownIn .5s forwards ease-in-out;
	animation-delay: 2.6s;
}
#cableB {
	position: absolute;
	top: 254px;
	left: 0px;
	animation: UpIn .5s forwards ease-in-out;
	animation-delay: 2.6s;
}
#set1 {
	animation: Out forwards .08s;
	animation-delay: 3.7s;
}
.slide{
	position: absolute;
	top: -26px;
	left: 515px;
	width: 190px;
	opacity: 0;
	animation: InOut forwards .05s linear;
}
#cab1 {animation-delay: 3.7s;}
#cab2 {animation-delay: 3.75s;top:-15px;}
#cab3 {animation-delay: 3.8s;top:-5px;}
#cab4 {animation-delay: 3.85s;top:15px;width:200px;}
#cab5 {animation-delay: 3.9s;top:30px;width:205px;}
#cab6 {animation-delay: 3.95s;top:50px;width:210px;}
#cab7 {animation-delay: 4s;top:77px;width:215px;}
#cab8 {animation-delay: 4.05s;top:100px;width:230px;}
#cab9 {animation-delay: 4.1s;top:130px;width:230px;}
#cab10 {animation-delay: 4.15s;top:145px;width:230px;}
#cab11 {animation-delay: 4.2s;top:150px;width:230px;}
#cab12 {animation-delay: 4.25s;top:160px;width:230px;}
#cab13 {animation-delay: 4.3s;top:175px;width:230px;}
#cab14 {animation-delay: 4.35s;top:198px;width:230px;}

#dotThree {
	position: absolute;
	left: -500px;
	top: 120px;
	width:300px;
	animation: Streak .5s reverse;
	animation-delay: 3.2s;
}
#textTwo {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	animation: InOut forwards 1.5s;
	animation-delay: 4.4s;
}
#logo {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
	animation: In forwards .3s;
	animation-delay: 6.1s;
}
@keyframes bounce {
	0% {opacity:1;transform: scale(1);}
	50% {transform: scale(2.25);}
	100% {opacity:1; transform: scale(1);}
}
#dotFour {
	position: absolute;
	top: 39px;
	left: 185px;
	width: 12px;
	height: 12px;
	border-radius: 50% 50% 50% 50%;
	opacity: 0;
	background-color: #FFF;
	animation: bounce .7s forwards;
	animation-delay: 6.4s;
	z-index: 99;
}
#button {
	transition: .3s all;
	opacity: 0;
	animation: In forwards .3s;
	animation-delay: 6.1s;
}