@-webkit-keyframes steveani {
    0% {
        -webkit-transform: rotateY(0deg) rotateX(-45deg);
    }
    50% {
        -webkit-transform: rotateY(180deg) rotateX(00deg);
    }
    100% {
        -webkit-transform: rotateY(360deg) rotateX(-45deg);
    }
}
@-moz-keyframes steveani {
    0% {
        -moz-transform: rotateY(0deg) rotateX(-45deg);
    }
    50% {
        -moz-transform: rotateY(180deg) rotateX(00deg);
    }
    100% {
        -moz-transform: rotateY(360deg) rotateX(-45deg);
    }
}


* {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
}

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

.snow:nth-child(1) {
  opacity: 0.6064;
  transform: translate(56.5936vw, -10px) scale(0.1606);
  animation: fall-1 22s -16s linear infinite;
}
@keyframes fall-1 {
  34.585% {
    transform: translate(57.9903vw, 34.585vh) scale(0.1606);
  }
  to {
    transform: translate(57.29195vw, 100vh) scale(0.1606);
  }
}
.snow:nth-child(2) {
  opacity: 0.0623;
  transform: translate(38.6106vw, -10px) scale(0.3982);
  animation: fall-2 17s -21s linear infinite;
}
@keyframes fall-2 {
  70.443% {
    transform: translate(37.0175vw, 70.443vh) scale(0.3982);
  }
  to {
    transform: translate(37.81405vw, 100vh) scale(0.3982);
  }
}
.snow:nth-child(3) {
  opacity: 0.7242;
  transform: translate(18.1453vw, -10px) scale(0.9984);
  animation: fall-3 10s -24s linear infinite;
}
@keyframes fall-3 {
  71.78% {
    transform: translate(22.1161vw, 71.78vh) scale(0.9984);
  }
  to {
    transform: translate(20.1307vw, 100vh) scale(0.9984);
  }
}

#scene {
    display: block;
    position: relative;
    height: 0px;
    width: 0px;
    margin: 120px auto;
}

#steve {
    position: absolute;
    background-image: url(https://web.minehost.com.ar/buy/img1/735175bb3d004f6f.png);
    background-size: 640px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -moz-animation: steveani 10s linear infinite;
}

#steve2 {
    position: absolute;
    background-image: url(https://web.minehost.com.ar/buy/assetianos/img/x4static.png);
    background-size: 640px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -moz-animation: steveani 10s linear infinite;
}

#head, #torso, #armL, #armR, #legL, #legR {
    position: absolute;
    background: inherit;
    -webkit-transform-style: preserve-3d;
}

.front, .right, .back, .left, .top, .bottom {
    background: inherit;
    position: absolute;
    display: block;
}


#head * {
    width: 80px;
    height: 80px;
}

#head .front {
    background-position: -80px -80px;
    -webkit-transform: rotateY(0) translateX(-40px) translateZ(40px) translateY(-40px);
    -moz-transform: rotateY(0) translateX(-40px) translateZ(40px) translateY(-40px);
}

#head .right {
    background-position: 0px -80px;
    -webkit-transform: rotateY(-90deg) translateX(0px) translateZ(80px) translateY(-40px);
}

#head .back {
    background-position: -240px -80px;
    -webkit-transform: rotateY(180deg) translateX(40px) translateZ(40px) translateY(-40px);
    -moz-transform: rotateY(180deg) translateX(40px) translateZ(40px) translateY(-40px);
}

#head .left {
    background-position: -160px -80px;
    -webkit-transform: rotateY(90deg) translateX(0px) translateZ(0px) translateY(-40px);
    -moz-transform: rotateY(90deg) translateX(0px) translateZ(0px) translateY(-40px);
}

#head .top {
    background-position: -80px 0px;
    -webkit-transform: rotateX(90deg) translateZ(80px) translateX(-40px);
    -moz-transform: rotateX(90deg) translateZ(80px) translateX(-40px);
}

#head .bottom {
    background-position: -160px 0px;
    -webkit-transform: rotateX(90deg) translateZ(0px) translateX(-40px);
    -moz-transform: rotateX(90deg) translateZ(0px) translateX(-40px);
}

#torso {
    -webkit-transform: translateX(0px) translateY(0px);
    -moz-transform: translateX(0px) translateY(0px);
}

#torso .front {
    width: 80px;
    height: 120px;
    background-position: -200px -200px;
    -webkit-transform: translateX(-40px) translateY(0px) translateZ(20px);
    -moz-transform: translateX(-40px) translateY(0px) translateZ(20px);
}

#torso .right {
    width: 40px;
    height: 120px;
    background-position: -160px -200px;
    -webkit-transform: rotateY(-90deg) translateX(0px) translateZ(60px) translateY(0px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateZ(60px) translateY(0px);
}

#torso .back {
    width: 80px;
    height: 120px;
    background-position: -320px -200px;
    -webkit-transform: rotateY(180deg) translateX(40px) translateY(0px) translateZ(20px);
    -moz-transform: rotateY(180deg) translateX(40px) translateY(0px) translateZ(20px);
}

#torso .left {
    width: 40px;
    height: 120px;
    background-position: -280px -200px;
    -webkit-transform: rotateY(90deg) translateX(0px) translateZ(20px) translateY(0px);
    -moz-transform: rotateY(90deg) translateX(0px) translateZ(20px) translateY(0px);
}

#torso .top {
    width: 80px;
    height: 40px;
    background-position: -200px -160px;
    -webkit-transform: rotateX(90deg) translateX(-40px) translateZ(20px) translateY(0px);
    -moz-transform: rotateX(90deg) translateX(-40px) translateZ(20px) translateY(0px);
}

#torso .bottom {
    width: 80px;
    height: 40px;
    background-position: -280px -160px;
    -webkit-transform: rotateX(90deg) translateX(-40px) translateZ(-100px) translateY(0px);
    -moz-transform: rotateX(90deg) translateX(-40px) translateZ(-100px) translateY(0px);
}

#armR .front {
    width: 40px;
    height: 120px;
    background-position: -440px -200px;
    -webkit-transform: rotateY(0deg) translateX(-20px) translateZ(20px) translateY(-20px);
    -moz-transform: rotateY(0deg) translateX(-20px) translateZ(20px) translateY(-20px);
}

#armR .right {
    width: 40px;
    height: 120px;
    background-position: -400px -200px;
    -webkit-transform: rotateY(-90deg) translateX(0px) translateZ(40px) translateY(-20px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateZ(40px) translateY(-20px);
}

#armR .back {
    width: 40px;
    height: 120px;
    background-position: -520px -200px;
    -webkit-transform: rotateY(180deg) translateX(20px) translateZ(20px) translateY(-20px);
    -moz-transform: rotateY(180deg) translateX(20px) translateZ(20px) translateY(-20px);
}

#armR .left {
    width: 40px;
    height: 120px;
    background-position: -480px -200px;
    -webkit-transform: rotateY(90deg) translateX(0px) translateZ(0px) translateY(-20px);
    -moz-transform: rotateY(90deg) translateX(0px) translateZ(0px) translateY(-20px);
}

#armR .top{
    width: 40px;
    height:40px;
    background-position: -440px -160px;
    -webkit-transform: rotateX(90deg)translateX(-20px) translateZ(40px) translateY(00px);
    -moz-transform: rotateX(90deg)translateX(-20px) translateZ(40px) translateY(00px);
}
#armR .bottom{
    width: 40px;
    height:40px;
    background-position: -480px -160px;
    -webkit-transform: rotateX(90deg) translateX(-20px) translateZ(-80px) translateY(00px);
    -moz-transform: rotateX(90deg) translateX(-20px) translateZ(-80px) translateY(00px);
}
#armL .front {
    width: 40px;
    height: 120px;
    background-position: -440px -200px;
    -webkit-transform: rotateY(180deg) translateX(20px) translateZ(-20px) translateY(-20px);
    -moz-transform: rotateY(180deg) translateX(20px) translateZ(-20px) translateY(-20px);
}

#armL .right {
    width: 40px;
    height: 120px;
    background-position: -400px -200px;
    -webkit-transform: rotateY(-90deg) translateX(0px) translateZ(0px) translateY(-20px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateZ(0px) translateY(-20px);
}

#armL .back {
    width: 40px;
    height: 120px;
    background-position: -520px -200px;
    -webkit-transform: rotateY(0deg) translateX(-20px) translateZ(-20px) translateY(-20px);
    -moz-transform: rotateY(0deg) translateX(-20px) translateZ(-20px) translateY(-20px);
}

#armL .left {
    width: 40px;
    height: 120px;
    background-position: -480px -200px;
    -webkit-transform: rotateY(90deg) translateX(0px) translateZ(-40px) translateY(-20px);
    -moz-transform: rotateY(90deg) translateX(0px) translateZ(-40px) translateY(-20px);
}

#armL .top{
    width: 40px;
    height:40px;
    background-position: -440px -160px;
    -webkit-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(-40px) translateY(00px);
    -moz-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(-40px) translateY(00px);
}
#armL .bottom{
    width: 40px;
    height:40px;
    background-position: -480px -160px;
    -webkit-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(80px) translateY(00px);
    -moz-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(80px) translateY(00px);
}
#legR .front {
    width: 40px;
    height: 120px;
    background-position: -40px -200px;
    -webkit-transform: rotateY(0deg) translateX(-20px) translateZ(20px) translateY(0px);
    -moz-transform: rotateY(0deg) translateX(-20px) translateZ(20px) translateY(0px);
}

#legR .right {
    width: 40px;
    height: 120px;
    background-position: -0px -200px;
    -webkit-transform: rotateY(-90deg) translateX(0px) translateZ(40px) translateY(0px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateZ(40px) translateY(0px);
}

#legR .back {
    width: 40px;
    height: 120px;
    background-position: -120px -200px;
    -webkit-transform: rotateY(180deg) translateX(20px) translateZ(20px) translateY(0px);
    -moz-transform: rotateY(180deg) translateX(20px) translateZ(20px) translateY(0px);
}

#legR .left {
    width: 40px;
    height: 120px;
    background-position: -80px -200px;
    -webkit-transform: rotateY(90deg) translateX(0px) translateZ(0px) translateY(0px);
    -moz-transform: rotateY(90deg) translateX(0px) translateZ(0px) translateY(0px);
}

#legR .top{
    width: 40px;
    height:40px;
    background-position: -40px -160px;
    -webkit-transform: rotateX(90deg)translateX(-20px) translateZ(20px) translateY(00px);
    -moz-transform: rotateX(90deg)translateX(-20px) translateZ(20px) translateY(00px);
}
#legR .bottom{
    width: 40px;
    height:40px;
    background-position: -80px -160px;
    -webkit-transform: rotateX(90deg) translateX(-20px) translateZ(-100px) translateY(00px);
    -moz-transform: rotateX(90deg) translateX(-20px) translateZ(-100px) translateY(00px);
}

#legL .front {
    width: 40px;
    height: 120px;
    background-position: -40px -200px;
    -webkit-transform: rotateY(180deg) translateX(20px) translateZ(-20px) translateY(0px);
    -moz-transform: rotateY(180deg) translateX(20px) translateZ(-20px) translateY(0px);
}

#legL .right {
    width: 40px;
    height: 120px;
    background-position: -0px -200px;
    -webkit-transform: rotateY(-90deg) translateX(0px) translateZ(0px) translateY(0px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateZ(0px) translateY(0px);
}

#legL .back {
    width: 40px;
    height: 120px;
    background-position: -120px -200px;
    -webkit-transform: rotateY(0deg) translateX(-20px) translateZ(-20px) translateY(0px);
    -moz-transform: rotateY(0deg) translateX(-20px) translateZ(-20px) translateY(0px);
}

#legL .left {
    width: 40px;
    height: 120px;
    background-position: -80px -200px;
    -webkit-transform: rotateY(90deg) translateX(0px) translateZ(-40px) translateY(0px);
    -moz-transform: rotateY(90deg) translateX(0px) translateZ(-40px) translateY(0px);
}

#legL .top{
    width: 40px;
    height:40px;
    background-position: -40px -160px;
    -webkit-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(-20px) translateY(00px);
    -moz-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(-20px) translateY(00px);
}
#legL .bottom{
    width: 40px;
    height:40px;
    background-position: -80px -160px;
    -webkit-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(100px) translateY(00px);
    -moz-transform: rotateX(-90deg) rotateZ(180deg) translateX(20px) translateZ(100px) translateY(00px);
}
@-webkit-keyframes headAni {
   0%{-webkit-transform:  translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
   25%{-webkit-transform: translateY(-40px) rotateY(-10deg) rotateX(10deg);}
   50%{-webkit-transform: translateY(-40px) rotateY(10deg) rotateX(10deg);}
   75% {-webkit-transform: translateY(-40px) rotateY(10deg) rotateX(-10deg);}
   100%{-webkit-transform: translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
}
@-webkit-keyframes headAni {
   0%{-webkit-transform:  translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
   25%{-webkit-transform: translateY(-40px) rotateY(-10deg) rotateX(10deg);}
   50%{-webkit-transform: translateY(-40px) rotateY(10deg) rotateX(10deg);}
   75% {-webkit-transform: translateY(-40px) rotateY(10deg) rotateX(-10deg);}
   100%{-webkit-transform: translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
}
@-webkit-keyframes armRAni{
    0%  {-webkit-transform: translateX(-60px) translateY(20px) rotateZ(10deg) rotateX(-25deg);}
    50%  {-webkit-transform: translateX(-60px) translateY(20px) rotateZ(10deg) rotateX(25deg);}
    100%  {-webkit-transform: translateX(-60px) translateY(20px) rotateZ(10deg) rotateX(-25deg);}

}
@-webkit-keyframes armLAni{
    0%  {-webkit-transform: translateX(60px) translateY(20px) rotateZ(-10deg) rotateX(25deg);}
    50%  {-webkit-transform: translateX(60px) translateY(20px) rotateZ(-10deg) rotateX(-25deg);}
    100%  {-webkit-transform: translateX(60px) translateY(20px) rotateZ(-10deg) rotateX(25deg);}

}
@-webkit-keyframes legRAni{
    0%{-webkit-transform: translateX(-20px) translateY(120px) rotateX(35deg);}
    50%{-webkit-transform: translateX(-20px) translateY(120px) rotateX(-35deg);}
    100%{-webkit-transform: translateX(-20px) translateY(120px) rotateX(35deg);}

}
@-webkit-keyframes legLAni{
    0%{-webkit-transform: translateX(20px) translateY(120px) rotateX(-35deg);}
    50%{-webkit-transform: translateX(20px) translateY(120px) rotateX(35deg);}
    100%{-webkit-transform: translateX(20px) translateY(120px) rotateX(-35deg);}

}@-moz-keyframes headAni {
   0%{-moz-transform:  translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
   25%{-moz-transform: translateY(-40px) rotateY(-10deg) rotateX(10deg);}
   50%{-moz-transform: translateY(-40px) rotateY(10deg) rotateX(10deg);}
   75% {-moz-transform: translateY(-40px) rotateY(10deg) rotateX(-10deg);}
   100%{-moz-transform: translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
}
@-moz-keyframes headAni {
   0%{-moz-transform:  translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
   25%{-moz-transform: translateY(-40px) rotateY(-10deg) rotateX(10deg);}
   50%{-moz-transform: translateY(-40px) rotateY(10deg) rotateX(10deg);}
   75% {-moz-transform: translateY(-40px) rotateY(10deg) rotateX(-10deg);}
   100%{-moz-transform: translateY(-40px) rotateY(-10deg) rotateX(-10deg);}
}
@-moz-keyframes armRAni{
    0%  {-moz-transform: translateX(-60px) translateY(20px) rotateZ(10deg) rotateX(-25deg);}
    50%  {-moz-transform: translateX(-60px) translateY(20px) rotateZ(10deg) rotateX(25deg);}
    100%  {-moz-transform: translateX(-60px) translateY(20px) rotateZ(10deg) rotateX(-25deg);}

}
@-moz-keyframes armLAni{
    0%  {-moz-transform: translateX(60px) translateY(20px) rotateZ(-10deg) rotateX(25deg);}
    50%  {-moz-transform: translateX(60px) translateY(20px) rotateZ(-10deg) rotateX(-25deg);}
    100%  {-moz-transform: translateX(60px) translateY(20px) rotateZ(-10deg) rotateX(25deg);}

}
@-moz-keyframes legRAni{
    0%{-moz-transform: translateX(-20px) translateY(120px) rotateX(35deg);}
    50%{-moz-transform: translateX(-20px) translateY(120px) rotateX(-35deg);}
    100%{-moz-transform: translateX(-20px) translateY(120px) rotateX(35deg);}

}
@-moz-keyframes legLAni{
    0%{-moz-transform: translateX(20px) translateY(120px) rotateX(-35deg);}
    50%{-moz-transform: translateX(20px) translateY(120px) rotateX(35deg);}
    100%{-moz-transform: translateX(20px) translateY(120px) rotateX(-35deg);}

}
#head {
    -webkit-animation: headAni 5s infinite;
    -moz-animation: headAni 5s infinite;
}
#armR {
    -webkit-animation: armRAni .7s linear infinite;
    -moz-animation: armRAni .7s linear infinite;
}
#armL {
    -webkit-animation: armLAni .7s linear infinite;
    -moz-animation: armLAni .7s linear infinite;
}
#legR {
    -webkit-animation: legRAni .7s linear infinite;
    -moz-animation: legRAni .7s linear infinite;
}
#legL {
    -webkit-animation: legLAni .7s linear infinite;
    -moz-animation: legLAni .7s linear infinite;
}
