html, body {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    max-width: 320px;
    max-height: 480px;
}

.conteiner{
  width: 320px;
  position: relative;
  margin: auto;
  height: 480px;
  -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
}

.bg-frame1 {
  position: absolute;
  display: block;
  height: 480px;
  width: 320px;
  background: url("../img/background.jpg");
}

.bg-frame2{
  position:absolute;
  width:320px;
  height:480px;
  background-image:url("../img/background02.jpg");
  top: 0px;
  z-index: -99;
}

.bg2{
  width: 300px;
  margin:0 auto;
  height: 600px;
  background-image: url("../img/bg2.jpg");
  z-index: -999;
}

.canvas {
  position: absolute;
  top: 0;
  width: 300px;
  cursor: cell;
}


.bg3{
  width: 300px;
  margin:0 auto;
  height: 600px;
  background-image: url("../img/bg3.jpg");
  display: none;
  z-index: 2;
  position: absolute;
  top: 0;
}
.clickTag{
  width: 300px;
  margin:0 auto;
  height: 600px;
  display: none;
  z-index: 3;
  position: absolute;
  top: 0;
}


.box-deslizar{
  width: 227px;
  height: 232px;
  background: url(../img/deslizar.png);
  position: absolute;
  display: block;
  z-index: 9;
  left: 50px;
  top: 110px;
}

#mano {
  position: absolute;
  display: block;
  width: 46px;
  height: 100px;
  background: url(../img/mano.png) no-repeat;
  left: 90px;
  animation: mano 2s infinite;
  top: 30px;
}

@keyframes mano {
  0% {
     bottom: 20px;
   }
   100% {
     top: 50px;
   }}

.maquinilla{
  width: 105px;
  height: 342px;
  background-image: url(../img/maquinilla.png);
  background-repeat: no-repeat;
  position: absolute;
  display: block;
  z-index: 9;
  left: 100px;
  top: -200px;
  cursor:auto;
}

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: transparent !important;
    border-color: #bbb;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}