/* Estilos generales */
body {
  background: #123;
  font-family: 'TrebuchetMS', sans-serif;
}
h1 {
  width: 960px;
  margin: 1em auto;
  color: #fff;
  font-weight: lighter;
}
.wrapper {
  position: relative;
  margin: 0 auto;
  width: 960px;
  overflow: hidden;
}
.wrapper ul {
  overflow: hidden;
  width: 100%;
  height: 540px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrapper ul > li {
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  height: 540px;
  overflow: hidden;
  display: none;
}
.wrapper ul > li.home {
  display: block;
}
.wrapper .img,
.wrapper .btn-home,
.wrapper .btn-prev,
.wrapper .btn-next,
.wrapper .btn-cerrar-lb {
  position: absolute;
  display: block;
  -webkit-transition: .5s ease all;
  -o-transition: .5s ease all;
  transition: .5s ease all;
}
.wrapper .img img {
  max-width: 100%;
  display: block;
}
.btn-home {
  width: 156px;
  height: 68px;
  left: 10px;
  bottom: 0;
}
.btn-prev,
.btn-next {
  width: 100px;
  height: 94px;
  bottom: 0;
  right: 10px;
}
.btn-prev {
  right: 120px;
}
#slide8 .btn-prev {
  right: 10px;
}
.btn-cerrar-lb {
  width: 112px;
  height: 53px;
  top: 20px;
  right: 20px;
}
.btn-home:hover,
.btn-prev:hover,
.btn-next:hover,
.btn-cerrar-lb:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.clickable {
  cursor: pointer;
}
.drag,
.drop {
  position: absolute;
  display: block;
  cursor: pointer;
}
.drop {
  cursor: default;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15,31,63,.8);
  display: none;
}
.lightbox {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 655px;
  height: 524px;
  margin-top: -262px;
  margin-left: -327px;
  background: url('../images/lb-background.png') no-repeat center;
}
.lightbox img {
  position: absolute;
  top: 0;
  left: 0;
}
.texto {
  cursor: pointer;
}
/* Slide 1 */
#slide1 {
  background: url('../images/slide1/background.jpg') no-repeat center;
}
#slide1 .mono {
  left: 240px;
  top: -10px;
}
#slide1 .pez {
  top: 5px;
  right: 5px;
}
#slide1 .texto1 {
  top: 15px;
  right: 80px;
}
#slide1 .texto2 {
  top: 75px;
  right: 80px;
}
#slide1 .ballena {
  left: 250px;
  top: 220px;
}
#slide1 .tucan {
  right: 135px;
  bottom: 55px;
}
#slide1 .cangrejo {
  bottom: 50px;
  left: 360px;
}
#slide1 .agua {
  left: 250px;
  top: 250px;
}
#slide1 .hojas {
  right: 100px;
  bottom: 0;
}

/* Slide2 */
#slide2 {
  background: url('../images/slide2/background-nino.jpg') no-repeat center;
}
#slide2 .pez {
  top: 5px;
  right: 5px;
}
#slide2 .texto {
  top: 15px;
  right: 80px;
}
#slide2 .marc {
  left: 400px;
  bottom: 60px;
}
#slide2 .mono {
  top: 120px;
  right: 0;
}
#slide2 .drop {
  top: 260px;
  left: 410px;
  width: 150px;
  height: 190px;
  cursor: default;
}
#slide2 .drag1 {
  top: 400px;
  left: 160px;
}
#slide2 .drag2 {
  top: 440px;
  left: 270px;
}
#slide2 .drag3 {
  top: 440px;
  left: 600px;
}
#slide2 .drag4 {
  top: 300px;
  left: 600px;
}
#slide2 .drag5 {
  top: 280px;
  left: 720px;
}
#slide2 .preview {
  width: 250px;
  height: 54px;
  left: 250px;
  bottom: 200px;
}
#slide2 .preview .mano {
  display: block;
  width: 45px;
  height: 54px;
  background-image: url('../images/hand_sprite.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  position: relative;
  opacity: 0.5;
}
/* Slide3 */
#slide3 {
  background: url('../images/slide3/background.jpg') no-repeat center;
}
#slide3 .pez {
  top: 5px;
  right: 5px;
}
#slide3 .texto {
  top: 15px;
  right: 80px;
}
#slide3 .mono {
  top: 120px;
  right: 0;
}
#slide3 .drag1 {
  top: 310px;
  left: 420px;
  z-index: 99;
}
#slide3 .drop {
  width: 160px;
  height: 210px;
}
#slide3 .caneca {
  background: url('../images/slide3/caneca.png') no-repeat center bottom;
  bottom: 70px;
  left: 145px;
}
#slide3 .vacio { 
  right: 190px;
  bottom: 70px;
}
#slide3 .flecha1 { right: 220px;bottom: 100px; display: none;}
#slide3 .flecha2 { left: 180px; bottom: 220px; display: none;}
/* Slide4 */
#slide4 {
  background: url('../images/slide4/background.jpg') no-repeat center;
}
#slide4 .pez {
  top: 5px;
  right: 5px;
}
#slide4 .texto {
  top: 15px;
  right: 80px;
}
#slide4 .marc1 {
  bottom: 0;
  left: 130px;
  display: none;
}
#slide4 .marc2 {
  bottom: 0;
  left: 300px;
}

/* Slide5 & Slide6 */
#slide5 {
  background: url('../images/slide5/background.jpg') no-repeat center;
}
#slide5 .pez {
  top: 5px;
  right: 5px;
}
#slide5 .texto {
  top: 15px;
  right: 80px;
}
#slide5 .pepe {
  top: 130px;
  left: 50px;
}
#slide5 .viviana {
  top: 0;
  left: 360px;
}
#slide5 .marc {
  top: 80px;
  left: 170px;
}
#slide5 .estrella,
#slide6 .estrella {
  top: 310px;
  left: 330px;
}
#slide5 .medusa,
#slide6 .medusa {
  top: 370px;
  left: 410px;
}
#slide5 .concha,
#slide6 .concha {
  bottom: 0;
  left: 200px;
}
#slide5 .botella,
#slide6 .botella {
  top: 200px;
  right: 420px;
}
#slide5 .ballena,
#slide6 .ballena {
  top: 70px;
  right: 270px;
}
#slide6 .ballena {
  -webkit-transform: rotateZ(180deg);
  -ms-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
#slide5 .papel,
#slide6 .papel {
  top: 110px;
  right: 210px;
}
#slide5 .tortuga {
  top: 200px;
  right: 130px;
}
#slide5 .cangrejo,
#slide6 .cangrejo {
  right: 200px;
  bottom: 30px;
}
#slide5 .pescaditos,
#slide6 .pescaditos {
  top: 100px;
  right: 0;
}
#slide5 .burbujas1,
#slide6 .burbujas1 {
  top: 0;
  left: 300px;
}
#slide5 .burbujas2,
#slide6 .burbujas2 {
  top: 20px;
  right: 20px;
}
/* Slide*/
#slide6 {
  background: url('../images/slide6/background.jpg') no-repeat center;
}
#slide6 .pez {
  top: 5px;
  right: 5px;
}
#slide6 .texto {
  top: 15px;
  right: 80px;
}
#slide6 .pepe {
  top: 100px;
  left: 100px;
}
#slide6 .viviana {
  top: 60px;
  left: 350px;
}
#slide6 .marc {
  top: 50px;
  left: 160px;
}
#slide6 .agua-sucia {
  top: 0;
  left: 0;
  background: rgba(234,187,86,.3);
}
#slide6 .tortuga {
  top: 120px;
  right: 150px;
}

/* Slide7 */
#slide7 {
  background: url('../images/slide7/background.jpg') no-repeat center;
}
#slide7 .pez {
  top: 5px;
  right: 5px;
}
#slide7 .texto {
  top: 15px;
  right: 80px;
}
#slide7 .ninos,
#slide7 .ninos-agua {
  bottom: 0;
  left: 0;
}
#slide7 .agua {
  bottom: -5px;
  left: 0;
}
#slide7 .basura1 {
  top: 260px;
  left: 30px;
}
#slide7 .basura2 {
  top: 350px;
  left: 140px;
}
#slide7 .basura3 {
  top: 250px;
  left: 220px;
}
#slide7 .basura4 {
  top: 420px;
  left: 500px;
}
#slide7 .basura5 {
  top: 230px;
  left: 690px;
}

/* Slide8 */
#slide8 {
  background: url('../images/slide8/background.jpg') no-repeat center;
}
#slide8 .pez {
  top: 5px;
  right: 5px;
}
#slide8 .texto {
  top: 15px;
  right: 80px;
}
#slide8 .ninos {
  top: 190px;
  left: 400px;
}
#slide8 .mono {
  left: 240px;
  top: -10px;
}
#slide8 .tucan {
  right: 135px;
  bottom: 55px;
}
#slide8 .cangrejo {
  bottom: 80px;
  left: 160px;
}
#slide8 .hojas {
  right: 100px;
  bottom: 0;
}