.logo {
  max-height: 19vh;
  height: 250px;
  display: flex;
  margin-bottom: 6vh;
}

.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mochila {
  max-width: 90%;
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.mochila img {
  margin: 0 auto;
}
.mochila img.frente {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  z-index: 10;
  pointer-events: none;
}
.mochila img.final-mochila {
  opacity: 0;
}
.libro {
  cursor: pointer;
  position: absolute;
  top: 0;
}
.libro span {
  display: block;
  padding: 20px;
  padding-left: 36px;
  font-size: 19px;
  font-weight: bold;
}
.libro span {
  color: black;
}

.amarillo {
  width: 179px;
  height: 215px;
  top: -170px;
  left: 24%;
  z-index: 1;

  background: url(images/libro_amarillo.png) no-repeat center center;
}

.libro.amarillo span {
  transform: rotate(3deg);
}
.azul,
.azul2 {
  width: 196px;
  height: 223px;
  background: url(images/libro_azul.png) no-repeat center center;
  left: 30%;
  z-index: 5;
}

.azul2 {
  left: 50%;
  top: -170px;
  z-index: 2;
}
.libro.azul span,
.libro.azul2 span {
  transform: rotate(15deg);
  padding-left: 60px;
}
.rosa {
  width: 216px;
  height: 241px;
  background: url(images/libro_rosa.png) no-repeat center center;
  left: 5%;
  z-index: 4;
}

.libro.rosa span {
  transform: rotate(-21deg);
  padding-left: 14px;
  width: 169px;
  padding-top: 30px;
}
.rojo {
  width: 216px;
  height: 239px;
  background: url(images/libro_rojo.png) no-repeat center center;
  right: 10%;
  top: -60px;
  z-index: 3;
}

.libro.rojo span {
  transform: rotate(20deg);
  width: 190px;
  margin-left: 30px;
  margin-top: 20px;
}
.verde {
  width: 191px;
  height: 220px;
  background: url(images/libro_verde.png) no-repeat center center;
  left: 10%;
  top: -80px;
  z-index: 2;
}

.libro.verde span {
  transform: rotate(-10deg);
  padding-left: 22px;
  width: 168px;
}

.referencias {
  margin-top: 20px;
  font-size: 18px;
}

.mochilas {
  display: flex;
  flex-wrap: wrap;
}

.mochilas .mochila {
  max-width: 50%;
  margin-bottom: 200px;
  scale: 0.9;
}

.mochila {
  display: none;
}

.mochila.parents-0 {
  display: block;
}
h3 {
  display: none;
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 19px;
}
h3 a {
  color: black;
}
@media (max-width: 1024px) {
  .mochila {
    zoom: 0.6;
  }

  .referencias {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  h3 {
    font-size: 14px;
  }
  .mochilas {
    display: block;
  }
  .mochilas .mochila {
    width: 90%;
    max-width: 425px;
  }
}

.finalLink .libro.azul {
  left: -30%;
}
.finalLink .libro.rosa {
  left: -10%;
  top: 90px;
  z-index: 5;
}
.finalLink .libro.rojo {
  left: 10%;
}
.finalLink .libro.verde {
  top: 90px;
  left: 30%;
  z-index: 3;
}

.finalLink .libro.amarillo {
  left: 54%;
  top: 0;
}

.finalLink .libro.azul2 {
  left: 75%;
  top: 100px;
}