header {
  background: linear-gradient(#559bb6, #dbedf5);
  height: 180px;
}

html,
body,
#page,
header {
  height: 100%;
}

/* __________________________________________ MAIN */

main {
  padding: 200px 0 50px 0;
  background-color: #dbebf5;
  background-image: url(/img//multimedia/header.jpg);
  background-size: contain;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100% - 240px);
}

#rueda {
  background-image: url(/img/multimedia/rueda.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 400px;
  height: 400px;
  position: relative;
}

#rueda p {
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Roboto Slab", serif;
  display: none;
}

.multisection {
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  transition: all 0.2s ease-in-out;
}

.multisection.horario:hover {
  transform: scale(1.3) rotate(15deg);
}

.multisection.anti-horario:hover {
  transform: scale(1.3) rotate(-15deg);
}

#infografías {
  background-image: url(/img/multimedia/infografías.svg);
  left: 105px;
  top: 65px;
}

#audios {
  background-image: url(/img/multimedia/audios.svg);
  left: -25px;
  top: 120px;
}

#comunicanciones {
  background-image: url(/img/multimedia/comunicanciones.png);
  left: 10px;
  bottom: 35px;
}


#videos {
  background-image: url(/img/multimedia/videos.svg);
  right: 80px;
  top: -10px;
}

#entrevistas {
  background-image: url(/img/multimedia/entrevistas.svg);
  right: 100px;
  bottom: -10px;
}

#artículos {
  background-image: url(/img/multimedia/articulos_p12.svg);
  right: -30px;
  bottom: 150px;
}

@media screen and (max-width: 992px) {
  #rueda {
    margin: 80px 0 40px 0;
  }
}

@media screen and (max-width: 768px) {
  main {
    padding: 30px 0;
    height: 90vh;
    background-image: url(/img//multimedia/header-mob.jpg);
  }
}

@media screen and (max-width: 480px) {
  #rueda {
    width: 250px;
    height: 250px;
  }

  #artículos {
    right: -15px;
    bottom: 90px;
  }

  #audios {
    left: -25px;
    top: 80px;
  }

  #videos {
    right: 55px;
    top: -10px;
  }

  #infografías {
    left: 60px;
    top: 40px;
  }

  .multisection {
    width: 50px;
    height: 50px;
  }
}