.contenedor_robot{
  position: absolute;
  top: 0%;
  left: 22%;
  margin:auto;
  width:300px;
  height:100%;
  z-index: 0;
  /*
  width:40%;
  width:300px;
  padding-top: 6%;
  background-color: linear-gradient(0deg, white, lightblue, #00AFEF);*/
  background-color: linear-gradient(0deg, white, lightblue, #00AFEF);
}

.face_robot{
   position:absolute;
   left:15%;
   bottom:25%;
   margin:auto;
   width:70%;
   padding-top: 38%;
   z-index:1;
   background:black;
   border-top-left-radius:20px;
   border-top-right-radius:20px;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
   transition:.3s;
}

.head_robot{
   position:absolute;
   top:5%;
   left:55.5%;
   margin:auto;
   width:10%;
   padding-top: 8%;
   
  display: inline-block;
  text-align: center;
  color: #fff;
  vertical-align: middle;
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #9da6a8 0%, #9da6a8 5%, #ebeded 45%,#d7dbdb 60%,#9da6a8 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
  border-style: groove;

   z-index:1;
   border-top-left-radius:60px;
   border-top-right-radius:60px;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:10px;
   transition:.3s;
}
.body_robot{
   position:absolute;
   top:40%;
   left:54.5%;
   margin:auto;
   width:12%;
   padding-top: 12%;
   background:white;
   
  display: inline-block;
  text-align: center;
  color: #fff;
  vertical-align: middle;
  background: #2E011D;
  background: radial-gradient(circle at 10% 7%, #9da6a8 50%, #ff0808 50%, #ffffff 60%, #c73cbd 45%,#ff0808 60%,#9da6a8 75%);
  background: radial-gradient(circle at 30% 107%, #9da6a8 0%, #9da6a8 5%, #ebeded 45%,#d7dbdb 60%,#9da6a8 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
  border-style: groove;
  
   z-index:1;
   border-top-left-radius:20px;
   border-top-right-radius:20px;
   border-bottom-left-radius:100px;
   border-bottom-right-radius:100px;
}
.left-hand_robot{
   position:absolute;
   top:48%;
   left:47%;
   margin:auto;
   width:3%;
   padding-top: 12%;
   background:white;
   
  display: inline-block;
  text-align: center;
  color: #fff;
  vertical-align: middle;
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #9da6a8 0%, #9da6a8 5%, #ebeded 45%,#d7dbdb 60%,#b0b8b9 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
  border-style: groove;
  
   z-index:1;
   border-top-left-radius:10px;
   border-top-right-radius:10px;
   border-bottom-left-radius:50px;
   border-bottom-right-radius:10px;
   animation:hand_robot 1s linear infinite;
   transform: rotateZ(0deg);
   transition:.3s;
}

.right-hand_robot{
   position:absolute;
   top:48%;
   left:67%;
   margin:auto;
   width:3%;
   padding-top: 12%;
   background:white;
   
  display: inline-block;
  text-align: center;
  color: #fff;
  vertical-align: middle;
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #9da6a8 0%, #9da6a8 5%, #ebeded 45%,#d7dbdb 60%,#b0b8b9 90%);
  box-shadow: 0px 3px 10px rgba(0,0,0,.25);
  border-style: groove;
  
  
   z-index:1;
   border-top-left-radius:10px;
   border-top-right-radius:10px;
   border-bottom-left-radius:10px;
   border-bottom-right-radius:50px;
   transform: rotateZ(0deg);
   transition:.3s;
}
.eye1_robot{
  position:absolute;
  left:22%;
  bottom:35%;
  margin:auto;
  width:20%;
  padding-top: 13%;
  z-index:2;
  background:repeating-linear-gradient(#00AFEF 70%, #002966 80%, #00AFEF);
  border-top-left-radius:50px;
  border-top-right-radius:50px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
  animation:blink_robot 1s linear 2;
  transition:.3s;
}
.eye2_robot{
  position:absolute;
  left:57%;
  bottom:35%;
  margin:auto;
  width:20%;
  padding-top: 13%;
  z-index:2;
  background:repeating-linear-gradient(#00AFEF 70%, #002966 80%, #00AFEF);
  border-top-left-radius:50px;
  border-top-right-radius:50px;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
    animation:blink_robot 1s linear 2;
    transition:.3s;
}

@keyframes hand_robot{
0%{
transform:translateY(-90px) rotateZ(180deg);
} 
50%{
transform:translateY(0px) rotateZ(5deg);
}
100%{
transform:translateY(-90px) rotateZ(180deg);
}
}

@keyframes blink_robot{
0%{
height:10px;
}
25%{
height:6px;
}
50%{
height:1px;
}
75%{
height:6px;
}
100%{
heigth:10px;
}
}

input[type="checkbox"]{
  display:none;
}

.switch_robot{
  position:absolute;
  left:37%;
  bottom:65%;
  margin:auto;
  width:25%;
  padding-top: 25%;
  z-index:1;
  border-radius:50%;
  background:#48ff00;
  box-shadow:0px 0px 15px #48ff00,
            inset 0px 0px 15px #276322;
  transition:.3s;
  cursor:pointer;
}
#switch-button:checked ~ label .switch_robot{
  background:red;
  box-shadow:0px 0px 15px red,
            inset 0px 0px 15px black;
}
#switch-button:checked ~ .eye1_robot{
  transform:scale(0) translateY(-20px);
}
#switch-button:checked ~ .eye2_robot{
  transform:scale(0) translateY(-20px);
}

#switch-button:checked ~ .head_robot{
  top:12.5%;	
}
#switch-button:checked ~ .left-hand_robot{
  left:52%;
}
#switch-button:checked ~ .right-hand_robot{
  left:66%;
}
#switch-button:checked ~ .left-hand_robot{
	animation-name: stophand;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes stophand{
	from{ top:48%; left:52%; }
	to{ top:48%; left:52%; }
}

.fondo_robot{
  position:absolute;
  top:0px;
  width:100%;
  background:linear-gradient(0deg, white, lightblue, #00AFEF);
  z-index:0;
  height:0%;
  transition:.3s;
  transition-delay: .6s;
}
.fly-wave .wave{
  position:absolute;
  top:80%;
  bottom:0;
  left:20.5%;
  right:0;
  margin:auto;
  height:5px;
  width:90px;
  z-index:1;
  background:lightblue;
  border-radius:40px;
  box-shadow:0px 0px 1px blue,
            inset 0px 0px 5px black;
  animation:fly 1s linear infinite;
  opacity:0;
  display:none;
}
@keyframes fly{
  10%{
    transform:scale(1.1) translateY(0px);
    opacity:1;
  }
  50%{
    transform:scale(.5) translateY(150px);
    opacity:0;
  }
  100%{
    transform:scale(0) translateY(150px);
    opacity:0;
  }
}
.fly-wave .wave:nth-child(1){
  animation-delay:.2s;
}
.fly-wave .wave:nth-child(2){
  animation-delay:.4s;
}
.fly-wave .wave:nth-child(3){
  animation-delay:.6s;
}
.fly-wave .wave:nth-child(4){
  animation-delay:.8s;
}
#fly-button:checked ~ .fly-wave .wave{
  display:block;
}
#fly-button:checked ~ .fondo_robot{
  height:100%;
}
#fly-button:checked ~ .left-hand_robot{
  left:52%;
}
#fly-button:checked ~ .right-hand_robot{
  left:66%;
  top:60%;
}
#fly-button:checked ~ .head_robot{
  top:5%;
}
#fly-button:checked ~ .switch_robot{
	animation-name: stopswitch;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes stopswitch{
	from{left:37%; bottom:65%;}
	to{left:37%; bottom:65%;}
}

#fly-button:checked ~ .left-hand_robot{
	animation-name: stophand1;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes stophand1{
	from{ top:60%; left:52%; }
	to{ top:60%; left:52%; }
}

.nubes{
	background-image: url(images/fondo1.png);
	background-repeat: repeat-x;
	position: absolute;
	z-index:1;
	top: 10%;
	left: 20%;
	width: 100%;
	height: 50px;
	animation-name: nubes;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes nubes{
	from{ background-position: 0 0; }
	to{ background-position: 100% 0; }
}
#play:checked ~ .nubes{
	animation-name: nubes;
	animation-play-state: running;
}
#stop:checked ~ .nubes{
	animation-name: stopNubes;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes stopNubes{
	from{ background-position: 0 0; }
	to{ background-position: 0 0; }
}