body {font-family: 'Poller One'; }


.robotI, .robotA {
  position: fixed;
  left: 900px;
  bottom: 73px;
}

.robotA {
  /* position: relative; */
  left: 200px;
}

.beep, .beepA {
  width: 5px;
  height: 0;
  border: 5px solid transparent;
  border-top: 10px solid #777;
  border-bottom: 60px solid #888;
  position: relative;
  left: 140px;
}

.beepA {
	border-top: 10px solid black;
	border-bottom: 70px solid gray;
	left: 129px;
}

@keyframes blinkAnt {
	
  50% {
    border: 5px solid transparent;
    border-top: 10px solid red;
    border-bottom: 80px solid gray;
	padding-left: 4px;
	padding-right: 4px;
	left: 125px;
  }
}

@-webkit-keyframes blink {
  50% {
    background: -webkit-radial-gradient(circle, red 15%, transparent 40%), silver;
	background-size: 75px 150px;
  }
}

@-moz-keyframes blink {
  50% {
    background: -moz-radial-gradient(circle, red 15%, transparent 40%), silver;
	background-size: 75px 150px;
  }
}

@keyframes blink {
  50% {
    background: radial-gradient(circle, red 15%, transparent 40%), silver;
	background-size: 75px 150px;
  }
}

@keyframes blinkAlt {
  50% {
    background: radial-gradient(circle, red 15%, transparent 40%, black), silver;
	background-size: 75px 150px;
  }
}

@-moz-keyframes blinkAlt {
  50% {
    background: radial-gradient(circle, red 15%, transparent 40%, black), silver;
	background-size: 75px 150px;
  }
}

@-webkit-keyframes blinkAlt {
  50% {
    background: radial-gradient(circle, red 15%, transparent 40%, black), silver;
	background-size: 75px 150px;
  }
}

@keyframes blink3 {
  
  10% {
    background: linear-gradient(#ccc 5%, white 20%, silver 25%, transparent 100%), black;
	background: -webkit-linear-gradient(#ccc 5%, white 20%, silver 25%, transparent 100%), black;
	background: -moz-linear-gradient(#ccc 5%, white 20%, silver 25%, transparent 100%), black;
  }
  
  20% {
    background: linear-gradient(#ccc 25%, white 40%, silver 65%, transparent 100%), black;
	background: -webkit-linear-gradient(#ccc 25%, white 40%, silver 65%, transparent 100%), black;
	background: -moz-linear-gradient(#ccc 25%, white 40%, silver 65%, transparent 100%), black;
  }
  
  30% {
    background: linear-gradient(#ccc 45%, white 80%, silver 95%, transparent 100%), black;
	background: -webkit-linear-gradient(#ccc 45%, white 80%, silver 95%, transparent 100%), black;
	background: -moz-linear-gradient(#ccc 45%, white 80%, silver 95%, transparent 100%), black;
  }
  
  40% {
    background: linear-gradient(#ccc 65%, white 90%, silver 100%), black;
	background: -webkit-linear-gradient(#ccc 45%, white 80%, silver 100%), black;
	background: -moz-linear-gradient(#ccc 45%, white 80%, silver 100%), black;
  }
  
  50% {
    background: linear-gradient(#ccc 45%, white 80%, silver 95%, transparent 100%), black;
	background: -webkit-linear-gradient(#ccc 45%, white 80%, silver 95%, transparent 100%), black;
	background: -moz-linear-gradient(#ccc 45%, white 80%, silver 95%, transparent 100%), black;
  }
  
  60% {
    background: linear-gradient(#ccc 25%, white 40%, silver 65%, transparent 100%), black;
	background: -webkit-linear-gradient(#ccc 25%, white 40%, silver 65%, transparent 100%), black;
	background: -moz-linear-gradient(#ccc 25%, white 40%, silver 65%, transparent 100%), black;
  }
  
  70% {
    background: linear-gradient(#ccc 5%, white 20%, silver 25%, transparent 100%), black;
	background: -webkit-linear-gradient(#ccc 5%, white 20%, silver 25%, transparent 100%), black;
	background: -moz-linear-gradient(#ccc 5%, white 20%, silver 25%, transparent 100%), black;
  }
  
  80% {
	  background: linear-gradient(silver 5%, white 20%, silver 25%, transparent 100%), black;
	background: -webkit-linear-gradient(silver 5%, white 20%, silver 25%, transparent 100%), black;
	background: -moz-linear-gradient(silver 5%, white 20%, silver 25%, transparent 100%), black;
  }
}

.laser {
  animation: blink .5s infinite;
  -webkit-animation: blink .5s infinite;
  -moz-animation: blink .5s infinite;
}

.laserA {
  animation: blink3 2.5s infinite;
  -webkit-animation: blink3 2.5s infinite;
  -moz-animation: blink3 2.5s infinite;
}

.laser3 {
  animation: blinkAlt 1.5s infinite;
  -webkit-animation: blinkAlt 1.5s infinite;
  -moz-animation: blinkAlt 1.5s infinite;
}

.blinkAntennaA {
	animation: blinkAnt .5s infinite;
  -webkit-animation: blinkAnt .5s infinite;
  -moz-animation: blinkAnt .5s infinite;
}

.brain {
  background: radial-gradient(circle, white 15%, transparent 40%), #cce;
  background: -moz-radial-gradient(circle, white 15%, transparent 40%), #cce; 
  background: -webkit-radial-gradient(circle, white 15%, transparent 40%), #cce;
  
  background-size: 75px 150px;
  height: 150px;
  width: 150px;
  border-radius: 60px 60px 10px 10px;
  border-bottom: 40px solid #666;
  position: relative;
  left: 70px;
}

.brainA {
  background: radial-gradient(circle, white 15%, transparent 40%), rgb(127,255,0);
  background: -moz-radial-gradient(circle, white 15%, transparent 40%), rgb(127,255,0);
  background: -webkit-radial-gradient(circle, white 15%, transparent 40%), rgb(127,255,0);
  background-size: 76px 126px;
  height: 150px;
  width: 150px;
  border-radius: 60px 60px 10px 10px;
  border-bottom: 20px double rgb(20,20,20);
  position: relative;
  left: 61px;
}

.torso {
  height: 0;
  width: 140px;
  
  border-top: 280px solid white;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-radius: 20px 20px 100px 100px;
}

.torsoA, .particleBearer1, .particleBearer2 {
	height: 250px;
	width: 240px;
	
	border-radius: 20px 20px 100px 100px;
	border: 15px solid rgb(0,100,0);
	
	background: linear-gradient(silver 5%, white 20%, silver 25%, transparent 100%), black;
	background: -webkit-linear-gradient(silver 5%, white 20%, silver 25%, transparent 100%), black;
	background: -moz-linear-gradient(silver 5%, white 20%, silver 25%, transparent 100%), black;
}

.green_shield {
	position: fixed;
	width: inherit;
	height: inherit;
	border-radius: 5px 5px 85px 85px;
	background: rgba(127,255,0,.35 );
	
}

.particleBearer1, .particleBearer2, .particleBearer3, .particleBearer4 {
	background: transparent;
	position: absolute;
	bottom: 73px;
	margin-left: 11px;
	border: none;
}

.particleBearer2 {
	margin-left: 14px;
}

/* .particleBearer3 { animation: particleSuck 1.25s linear infinite; } */
/* .particleBearer4 { animation: particleSuck 2.5s linear infinite; } */

@keyframes particleSpin {
	1% { transform: rotate(0deg) scale(.5,.5); opacity:.5;}
	50% { transform: rotate(180deg) scale(.75,.75);}
	100% {transform: rotate(360deg) scale(.5,.5); }
}

@keyframes particleSpin2 {
	1% { transform: rotate(0deg) scale(.75,.75); opacity:.85;}
	50% { transform: rotate(-180deg) scale(.55,.55);}
	100% {transform: rotate(-360deg) scale(.75,.75);}
}

@keyframes particleSuck {
	1% { transform: scale(1,1); }
	100% { transform: scale(0,0);}
}


.roboCharge { animation: charge 2.5s infinite;}
.roboChargeHold { animation: chargeHold .5s infinite;}
.roboChargeFire { animation: charge2 2.5s infinite;}

.roboMoveBlastRight { 
	transform: rotateY(40deg); 
	left: 150px; 
	transition: transform 3s, left 3s;
}

.particleAdjust {
	left: 5px; 
	bottom: 75px;
	/* transition: left 1s, bottom 1s; */
}

.roboReturn2Neutral {
	left: 200px; 
	transform: rotateY(0deg); 
	transition: left 2s, transform 3s;
}

.roboFireBurst {
	animation: blastAnim 1.3s ease-out;
}

@keyframes blastAnim {
	1% { background: url('blast.png'); 
	background-size: 100% 100%; 
	height: 70px; 
	width: 50px;
	}
	
	65% { 
	background-size: 100% 100%; 
	height: 70px; 
	width: 100vw;
	opacity: 1;}
	
	100% { 
		background: url('blast2.png'); 
		background-size: 100% 100%; 
		width: 100vw;
		opacity: 0;}
}

#zone, #zone2, #zone3{
	width: 100%;
	height: 100%; 
	bottom: 100px;
	position: fixed;
	z-index: 2;
	/* background: black; */
}

.particles1 { 
background-image: url('particle.png'); 
background-size: 100% 100%; 
animation: particleSpin 2s linear infinite;
}

.particles2 { 
background-image: url('particle2a.png');  
background-size: 100% 100%; 
animation: particleSpin2 2s linear infinite;
}

.particles3 { background-image: url('particle3.png'); background-size: 100% 100%; }
.particles4 { background-image: url('particle4.png');  background-size: 100% 100%; }

@keyframes chargeHold {
  1% { background: radial-gradient(orange 35%, red 50%, white 55%, black 70%), black; }
	
  50% {
	background: radial-gradient(orange 30%, red 40%, white 50%, black 70%), black;
  }
  100% {
	background: radial-gradient(orange 35%, red 50%, white 55%, black 70%), black;
  }
}

@keyframes charge {
  10% {
	background: radial-gradient(red 5%, white 10%, black 50%), black;
  }
  
  20% {
	background: radial-gradient(orange 5%, red 10%, white 15%, black 55%), black;
  }
  
  30% {
	background: radial-gradient(orange 7.5%, red 15%, white 20%, black 60%), black;
  }
  
  40% {
	background: radial-gradient(orange 10%, red 20%, white 25%, black 65%), black;
  }
  
  50% {
	background: radial-gradient(orange 15%, red 25%, white 30%, black 70%), black;
  }

  
  
  60% {
	background: radial-gradient(orange 20%, orange 5%, red 30%, white 35%, black 70%), black;
  }
  
  70% {
	background: radial-gradient(orange 22.5%, red 35%, white 40%, black 70%), black;
  }
  
  80% {
	background: radial-gradient(orange 25%, red 40%, white 45%, black 70%), black;
  }
  
  90% {
	background: radial-gradient(orange 30%, red 45%, white 50%, black 70%), black;
  }
  
  100% {
	background: radial-gradient(orange 35%, red 50%, white 55%, black 70%), black;
  }
}

@keyframes charge2 {
	
10% {
	background: radial-gradient(red 5%, white 20%, black 50%), black;
  }
  
  20% {
	background: radial-gradient(orange 5%, red 10%, white 15%, black 55%), black;
  }
  
  30% {
	background: radial-gradient(yellow 1%, orange 7.5%, red 15%, white 30%, black 60%), black;
  }
  
  40% {
	background: radial-gradient(yellow 2%, orange 10%, red 20%, white 20%, black 65%), black;
  }
  
  50% {
	background: radial-gradient(yellow 3%, orange 15%, red 25%, white 40%, black 70%), black;
  }
  
  
  
  60% {
	background: radial-gradient(yellow 4%, orange 20%, orange 5%, red 30%, white 30%, black 70%), black;
  }
  
  70% {
	background: radial-gradient(yellow 5%, orange 22.5%, red 35%, white 50%, black 70%), black;
  }
  
  80% {
	background: radial-gradient(yellow 6%, orange 25%, red 40%, white 40%, black 70%), black;
  }
  
  90% {
	background: radial-gradient(yellow 7%, orange 30%, red 45%, white 60%, black 70%), black;
  }
  
  100% {
	background: radial-gradient(yellow 8%, orange 35%, red 50%, white 50%, black 70%), black;
  }
 }



.wave { animation: wave 2.5s infinite;}

@keyframes wave {
  
  25% {
	top: -370px;
	transform: scaleY(-1) rotate(80deg);
  }
  
  90% {
    transform: scaleY(-1) rotate(20deg);
  }
}

.move { animation: move 7.5s infinite ease-in-out;}

@keyframes move {
  
  1% { left: 900px;}
  
  33% { left: 1000px; }
  
  66% {
	left: 800px;
  }
  
  100% {left: 900px;}
}

.smoke { animation: smoke .5s infinite;}

@keyframes smoke {
	
	1% {
	top: -15px;
	opacity: .7;
  }
  
  100% {top: 65px; 
	   opacity: 0;}
}

.hover { animation: hover 10s infinite;}

@keyframes hover {
	
  1% { bottom: 85px; }
  
  50% { bottom: 150px; }
  
  100% { bottom: 85px; }
}

.left, .leftA, .right, .rightA {
  font-family: 'Poller One', verdana, arial, sans-serif;
  font-weight: bold;
  font-size: 220px;
  color: #666;
  transform: rotate(200deg);
  -webkit-transform: rotate(200deg);
  -moz-transform: rotate(200deg);
  position: relative;
  top: -50px;
  left: -190px;
  z-index: -1;
}

.left {
	top: -280px;
}

.right {
  transform: scaleY(-1) rotate(20deg);
  -webkit-transform: scaleY(-1) rotate(20deg);
  -moz-transform: scaleY(-1) rotate(20deg);
  position: relative;
  top: -540px;
  left: 190px;
  z-index: -1;
}

.rightA, .leftA {
	color: black;
}

.rightA {
  transform: scaleY(-1) rotate(20deg);
  -webkit-transform: scaleY(-1) rotate(20deg);
  -moz-transform: scaleY(-1) rotate(20deg);
  position: relative;
  top: -315px;
  left: 190px;
  z-index: -1;
}

.foot {
  height: 40px;
  width: 40px;
  background: #ccc;
  border-radius: 40px;
  border: 15px solid #999;
  position: relative;
  left: 110px;
  top: -10px;
  z-index: -1;
}

.feet {
	margin-bottom: 50px;
}

.footA {
  height: 40px;
  width: 20px;
  background: gray;
  border-radius: 40px;
  border: 10px solid black;
  position: relative;
  left: 52px;
  top: -15px;
  z-index: -1;
  transform: rotate(200deg);
  float: left;
}

.buttonBar {
	position: fixed; 
	bottom: 0px;
	left: 0px;
	width: 100%;
	/* min-width: 100px; */
	display: block;
	background: rgba(0,0,0,.5);
	padding: 10px;
	border-top: 4px double black;
}

.buttonBar button {
	font-size: 2.5vmin;
	font-family: 'Poller One', verdana, arial, sans-serif;
	
	height: 60px;
	border-radius: 20px;
	width: 16%;
	color: white;
	border: 2px solid black;
	
	background: linear-gradient(red 20%, orange),black;
	background: -webkit-linear-gradient(red 20%, orange),black;
	background: -moz-linear-gradient(red 20%, orange),black;
	
	overflow: hidden;
}

.buttonBar button:hover {
	color: black;
	transition: color .7s;
}

.buttonBar .disabled {
	background: rgba(100,100,100, .5);
}


/* @keyframes fire { */
	
		
	  /* from {left: 800px; opacity: 0;} */
	  /* 1% {opacity: 1;} */
	  
	  /* 99% {left: 200px; opacity: 1;} */
	  /* 100% {opacity: 0;} */
  /* } */
  
/* @-webkit-keyframes fire { */
	  /* from {left: 800px;} */
	  /* to {left: 200px;} */
  /* } */
  
/* @-moz-keyframes fire { */
	  /* from {left: 800px;} */
	  /* to {left: 200px;} */
  /* } */

/* .missileOff { */
	/* display: none; */
/* }   */
  
.missileOn {
	  display: inherit;
	  position: absolute; 
	  
	  top: 200px; 
	  left: 700px; 
	  
	  transform: rotate(-90deg);
	  z-index: 1;
	  
	  -webkit-animation: fire 1s ease-in;
	  -moz-animation: fire 1s ease-in;
	  animation: fire 1s ease-in;
}

.missileShoot {
	animation: missileShoot 1.5s linear;
}

.missileShoot2 {
	animation: missileShoot2 1.5s linear;
}

/* .roboFireBurst { */
	/* animation: blastAnim 1.3s ease-out; */
/* } */

@keyframes missileShoot {
	1% { 
		opacity: 0;	/* Set invisible */
		background: url('missile0.png');  /* load image*/
		transform: rotate(-90deg); /* rotate first*/
		background-size: 50px 100px; /* set background size*/
		left: 100%;
	}
	
	2%{
		opacity: 1; /* make it visible*/
	}
	
	
	78% { 
		background: url('missile0.png');  /* keep image, but sudden transition*/
		transform: rotate(-90deg);
	}
	
	79% {
		background: url('boom.png');
		background-size: 100% 100%;
	}
	
	100% {
		background: url('boom.png');
		transform: rotate(-180deg);
		background-size: 100% 100%;
		/* left: 200px; */
		left: 0;
	}
}
 
@keyframes missileShoot2 {
	1% { 
		opacity: 0;	/* Set invisible */
		background: url('missile0.png');  /* load image*/
		transform: rotate(-90deg); /* rotate first*/
		background-size: 50px 100px; /* set background size*/
		left: 100%;
	}
	
	2%{
		opacity: 1; /* make it visible*/
	}
	
	
	78% { 
		background: url('missile0.png');  /* keep image, but sudden transition*/
		transform: rotate(-90deg);
	}
	
	79% {
		background: url('boom2.png');
		background-size: 100% 100%;
	}
	
	100% {
		background: url('boom2.png');
		transform: rotate(-180deg);
		background-size: 100% 100%;
		/* left: 200px; */
		left: 0;
	}
}
 
.energyBarLeft, .energyBarRight {
	/* background: rgba(60,100,205,.95); */
	background: rgba(0,205,0,.95);
	border-radius: 20px;
	border: 2px solid black;
	position: relative;
	text-align: center;
	top: 0px;
	
	float: left; 
	height: 22px;
	width: 40%;
	margin-left: 6%;
	margin-bottom: 10px;
	overflow: hidden;
}

.energyBarRight {
	background: rgba(255,255,255,1);
}