body{
  padding:0;
  margin:0;
}
.contenedor-pieza{
  position:relative;
  width:320px;
  height:480px;
  margin:0 auto;
  overflow: hidden;
}
.background{
  position: absolute;
  width:320px;
  height:480px;
  z-index:1;
  background-image:url("../img/background01.jpg");
  z-index:1;
}
#cuchilla{
  position: absolute;
  top:0px;
  left:100px;
  width:105px;
  height:317px;
  background-image:url("../img/maquinilla.png");
  z-index: 9999;
}
.position01{
  animation:moveright;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.position02{
  animation:moveleft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.ala01{
  position:absolute;
  width:54px;
  height:54px;
  background-image:url("../img/ala.png");
  top: 99px;
  left: -11px;
}
.ala02{
  position:absolute;
  width:54px;
  height:54px;
  background-image:url("../img/ala02.png");
  top: 99px;
  left: 63px;
}
.contenedor-cuchilla{
  position:absolute;
  width:320px;
  top:-200px;
  height:950px;
}
#video{
  position: absolute;
  width: 320px;
  height: 180px;
  top: 0px;
}
#audio{
  position:absolute;
  background-image:url("../img/audio.png");
  width: 100%;
  height: 100%;
  left: 20px;
  top: 20px;
  max-width: 35px;
  background-repeat: no-repeat;
  background-size: contain;
  max-height: 35px;
}
#mute{
  position: absolute;
  background-image: url("../img/mute.png");
  width: 100%;
  height: 100%;
  left: 20px;
  top: 20px;
  max-width: 35px;
  background-repeat: no-repeat;
  background-size: contain;
  max-height: 35px;
}
.clicktag{
  position:absolute;
  width:320px;
  height:480px;
  z-index:2;
}
.participa{
  position:absolute;
  width:122px;
  height:38px;
  background-image:url("../img/cta.png");
  bottom:7px;
  right:5px;
}
.background02{
  position:absolute;
  width:320px;
  height:480px;
}
.texto01{
  position:absolute;
  width:174px;
  height:79px;
  background-image:url("../img/texto01.png");
  top: 190px;
  left: 70px;
}
.texto02{
  position:absolute;
  width:283px;
  height:84px;
  background-image:url("../img/texto02.png");
  top: 190px;
  left: 20px;
  display:none;
}
.top-poster{
  position:absolute;
  width:320px;
  height:180px;
  background-image:url("../img/poster.jpg");
  top:0;
}
.top-chica{
  position:absolute;
  width:320px;
  height:180px;
  background-image:url("../img/chica.jpg");
  top:0;
  display: none;
}
.bottom-background{
  position:absolute;
  width:320px;
  height:300px;
  background-image:url("../img/background02.jpg");
  bottom:0;
}
.fade-in {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
  -webkit-animation-duration:0.5s;
  -moz-animation-duration:0.5s;
  animation-duration:0.5s;
}
.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.animacionalas01{
  animation-name: alasmov01;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
.animacionalas02{
  animation-name: alasmov02;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
@-webkit-keyframes fadeIn {
	from { opacity:0; }
	to { opacity:1; }
}
@-moz-keyframes fadeIn {
	from { opacity:0; }
	to { opacity:1; }
}
@keyframes fadeIn {
	from { opacity:0; }
	to { opacity:1; }
}
/*------- ANIMACIONES ALAS CUCHILLA ------- */
@keyframes alasmov01 {
  0%    {transform: rotate(10deg);left: -13px;top: 96px;}
  25%   {transform: rotate(30deg);left: -19px;top: 84px;}
  50%   {transform: rotate(45deg);left: -20px;top: 76px;}
  75%   {transform: rotate(30deg);left: -19px;top: 84px;}
  100%  {transform: rotate(10deg);left: -13px;top: 96px;}
}
@keyframes alasmov02 {
  0%    {transform: rotate(-10deg);left: 68px;top: 96px;}
  25%   {transform: rotate(-30deg);left: 70px;top: 84px;}
  50%   {transform: rotate(-45deg);left: 72px;top: 76px;}
  75%   {transform: rotate(-30deg);left: 70px;top: 84px;}
  100%  {transform: rotate(-10deg);left: 68px;top: 96px;}
}
/* ------- ANIMACIONES LATERALES CUCHILLA ------- */
@keyframes moveright {
  from {left:100px;}
  to {left:180px;}
}
@keyframes moveleft {
  from {left:180px;}
  to {left:70px;}
}