/* __________________________________________ HEADER */
header {
  background-color: #003107;
  background-image: url(/img/investigacion/header.jpg);
  height: 100vh;
}

#massoni {
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 500px;
  position: fixed;
  top: 50%;
  right: 13%;
}

/* __________________________________________ TIMELINE */
#timeline-bg {
  min-height: 55vh;
  width: 80%;
  margin: 0 auto 25px auto;
  z-index: 0;
  border-top: 60px solid transparent;
  margin-top: -60px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

#timeline-text {
  margin: 0px auto;
  padding: 50px 0;
  max-width: 500px;
}
/* __________________________________________ MAIN */
.logo {
  position: absolute;
  left: 10%;
}

.li-text {
  padding: 5px 0 20px 0;
}

#link {
  color: black;
  padding-bottom: 50px;
}

#bajada {
  font-size: 0.8rem;
  margin-bottom: 20px;
}

.text-wrap {
  padding-bottom: 50px;
}

#TIC {
  margin-top: 50px;
  margin-bottom: 10px;
}

#metodologia {
  width: 90%;
  display: flex;
  justify-content: center;
}

#metodologia img {
  max-height: 400px;
  max-width: 400px;
  min-width: 400px;
  flex-basis: 50%;
}

#metodologia div {
  flex-basis: 50%;
  position: relative;
}

.padlet-embed {
  margin-top: 25px;
}

#mapa ul {
  margin-top: 10px;
}

/* __________________________________________ MEDIA QUERIES */

@media screen and (max-width: 1200px) {
  .logo {
    left: 5%;
  }

  #metodologia {
    right: 10px;
    position: relative;
    right: 20px;
    width: 80%;
  }
}

@media screen and (max-width: 992px) {
  .logo {
    display: none;
  }

  #metodologia {
    width: 75%;
    flex-direction: column-reverse;
    align-items: center;
    right: 0px;
  }
}

@media screen and (max-width: 768px) {
  header {
    display: none;
  }

  #timeline-text {
    padding: 60px 20px 20px 20px;
  }

  #timeline-text h2 {
    margin: 5px;
  }

  #timeline-bg {
    display: none;
  }

  .sidenav.timeline {
    display: none;
  }

  #metodologia {
    width: 90%;
  }
}

@media screen and (max-width: 480px) {
  #metodologia img {
    display: none;
  }
}