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

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

.frame-1{
  position: absolute;
  display: block;
}


.texto-1{
  position: absolute;
  display: block;
  height: 74px;
  width: 191px;
  background-image: url(../img/texto-01.png);
  top: 90px;
  left: 68px;
}

.muesli{
  position: absolute;
  display: block;
  height: 104px;
  width: 121px;
  background-image: url(../img/muesli.png);
  top: 178px;
  left: 98px;
  cursor:auto;
  z-index: 3;
}

.bol-vacio{
  position: absolute;
  display: block;
  height: 104px;
  width: 178px;
  background-image: url(../img/bol-vacio.png);
  top: 353px;
  left: 69px;
  cursor: auto;
}

.bol-vacio-2{
  position: absolute;
  display: block;
  height: 104px;
  width: 178px;
  background-image: url(../img/bol-sintapa.png);
  top: 353px;
  left: 69px;
  cursor: auto;
  opacity: 0.5;
  z-index: 4;
}

.flecha{
  position: absolute;
  display: block;
  height: 49px;
  width: 18px;
  background-image: url(../img/flecha.png);
  top: 288px;
  left: 149px;
  cursor: auto;
  animation: flecha 1s ease infinite;
}
@keyframes flecha {
  0%   { opacity: 0.2; }
  50% { opacity: 1; }
  100%   { opacity: 0.2; }
}


.frame-2{
  position: absolute;
  display: block;
  display: none;
}

.texto-2{
  position: absolute;
  display: block;
  height: 74px;
  width: 191px;
  background-image: url(../img/texto-02.png);
  top: 90px;
  left: 68px;
}

.boteroto{
  position: absolute;
  display: block;
  height: 238px;
  width: 191px;
  background-image: url(../img/boteroto.png);
  top: 190px;
  left: 60px;
}

.roto{
  position: absolute;
  display: block;
  height: 68px;
  width: 91px;
  background-image: url(../img/roto.png);
  top: 176px;
  left: 47px;
}

.flechas{
  position: absolute;
  display: block;
  height: 59px;
  width: 65px;
  background-image: url(../img/flechas.png);
  top: 146px;
  left: 9px;
  cursor: auto;
  animation: flechas 1s ease infinite;
}
@keyframes flechas {
  0%   { opacity: 0.2; }
  50% { opacity: 1; }
  100%   { opacity: 0.2; }
}

.frame-3{
  position: absolute;
  display: block;
/*display: none;*/
}

.texto-3{
  position: absolute;
  display: block;
  height: 63px;
  width: 131px;
  background-image: url(../img/texto-03.png);
  top: 90px;
  left: 98px;
}

.giro{
  position: absolute;
  display: block;
  height: 31px;
  width: 41px;
  background-image: url(../img/giro.png);
  top: 166px;
  left: 29px;
  cursor: auto;
  animation: giro 1s ease infinite;
}
@keyframes giro {
  0%   { opacity: 0.2; }
  50% { opacity: 1; }
  100%   { opacity: 0.2; }
}


.boteroto-2{
  position: absolute;
  display: block;
  height: 238px;
  width: 191px;
  background-image: url(../img/boteroto.png);
  top: 190px;
  left: 60px;
  z-index: 1;
}

.leche-bol{
  position: absolute;
  display: block;
  height: 93px;
  width: 157px;
  background-image: url(../img/leche-bol.png);
  top: 336px;
  left: 8px;
  animation: bol 1s ease;
}
@keyframes bol {
  0%   { opacity: 0; }
  100% { opacity: 1; }

}

.leche-chorro{
  position: absolute;
  display: block;
  height: 0px;
  width: 47px;
  background-image: url(../img/leche-chorro.png);
  top: 240px;
  left: 50px;
}

.leche{
  position: absolute;
  display: block;
  height: 0px;
  width: 157px;
  background-image: url(../img/leche.png);
  top: 292px;
  left: 10px;
  z-index: 1;
}

.bollecheentero{
  position: absolute;
  display: block;
  height: 98px;
  width: 163px;
  background-image: url(../img/bollecheentero.png);
  top: 333px;
  left: 5px;
  opacity: 0.8;
}

.frame-4{
  position: absolute;
  display: block;
  display: none;
}

.texto-4{
  position: absolute;
  display: block;
  height: 74px;
  width: 131px;
  background-image: url(../img/texto-04.png);
  top: 90px;
  left: 98px;
}

.bollecheentero2{
  position: absolute;
  display: block;
  height: 98px;
  width: 163px;
  background-image: url(../img/bollecheentero.png);
  top: 329px;
  left: 82px;
}

.flecha-2{
  position: absolute;
  display: block;
  height: 49px;
  width: 18px;
  background-image: url(../img/flecha.png);
  top: 210px;
  left: 149px;
  cursor: auto;
  animation: flecha-2 1s ease infinite;
}
@keyframes flecha-2 {
  0%   { opacity: 0.2; }
  50% { opacity: 1; }
  100%   { opacity: 0.2; }
}

.arandanos {
    position: absolute;
    display: block;
    height: 78px;
    width: 96px;
    background-image: url(../img/arandanos.png);
    top: 198px;
    left: 172px;
}
.frambuesas {
  position: absolute;
  display: block;
  height: 61px;
  width: 96px;
  background-image: url(../img/frambuesas.png);
  top: 198px;
  left: 42px;
}

.bolconfruta{
  position: absolute;
  display: block;
  height: 118px;
  width: 163px;
  background-image: url(../img/bolconfruta.png);
  top: 307px;
  left: 82px;
  display: none;
}