@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);
@import url(http://fonts.googleapis.com/css?family=Walter+Turncoat);

// ------------------
// Inicio -----------
// ------------------
#inicio {
  position: absolute;
  width: 480px;
  left: 80px;
  top: 130px;

  text-align: center;
}

#inicio_globo {
  position: absolute;
  left: 480px;
  top: 20px;
  z-index: 2;
}

#inicio_mensaje {
  padding: 20px;
}

#comenzar_cuestionario {
  top: 10px;
}

#camarografo {
  position: absolute;
  background-image: url("images/camarografo.png");
  width: 243px;
  height: 138px;

  top: 250px;
  left: 30px;

}


// ------------------
// Objetos paseadores
// ------------------
#avion {
  position: absolute;
  background-image: url("images/avion.png");
  width: 109px;
  height: 81px;

  top: 50px;
  left: 100px;
}

#nena_inicio {
  position: absolute;
  background-image: url("images/nena_inicio.png");
  width: 204px;
  height: 285px;

  left: 510px;
  top: 100px;
}

#slider_personaje {
  position: absolute;
  background: url("images/slider_personaje.png") no-repeat;
  width: 80px;
  height: 66px;
  top: -50px;
  left: -5px;
}

#slider_linea_progreso {
  position: absolute;
  background: url("images/slider_linea_progreso.png") no-repeat;
  width: 517px;
  height: 18px;
  top: 50px;
  left: 50px; // min: 50px y max: 400px (hay 350 de diferencia)
}

#slider_fin {
  position: absolute;
  background: url("images/slider_fin.png") no-repeat;
  width: 43px;
  height: 38px;
  top: 5px;
  left: 635px;
}

#bloque_slider {
  position: absolute;
  width: 550px;
  height: 100px;
  left: 120px;
  top: -15px;
  overflow: hidden;
}