* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  height: 100vh;
  font-family: "Poppins";
}

main {
  overflow-x: hidden;
  display: flex;
  height: 100%;
}

section {
  min-width: 6vw;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
}

h4 {
  text-transform: uppercase;
  color: #465870;
  font-size: 1.2rem;
  margin: 0;
}

@media only screen and (max-width: 877px) {
  h4 {
    font-size: 1rem;
    line-height: 1.3rem;
  }
}

h6 {
  text-transform: uppercase;
  color: #465870;
  font-size: 0.8rem;
  margin-top: 0px;
}

@media only screen and (max-width: 877px) {
  h6 {
    font-size: 0.65rem;
    line-height: 0.65;
    margin-bottom: 10px;
  }
}

p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media only screen and (max-width: 1850px) {
  p {
    font-size: 12px;
    line-height: 18px;
  }
}

@media only screen and (max-width: 877px) {
  p {
    font-size: 11px;
    line-height: 16px;
  }
}

a {
  text-decoration: none;
}

.action-description {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

main #ss1 {
  position: relative;
}

.slider-cover-container {
  height: 100%;
  background-color: #fff;
}

.slider-cover {
  height: 100%;
  width: 40vw;
  background-image: url("/media/accionesDetalle/vector-principal.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;

  color: #fff;
}

.slider-cover-title {
  width: 100%;
  padding-top: 90px;
  margin-left: 40px;
  max-width: 350px;
}

.slider-cover-back {
  position: absolute;
  top: 120px;
  left: 40px;
  color: #fff;
}

.slider-cover-back div {
  display: flex;
  gap: 10px;
}

.slider-cover-title h1 {
  font-weight: 600;
  font-size: 4rem;
  margin: 0;
}

.first-action-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 30px;
}

.first-action {
  position: relative;
}

.first-action img {
  width: 45vw;
}

.first-action .action-description {
  position: absolute;
  right: 0px;
  /*width: 235px;
  height: 110px;*/
  background-color: #fff;
}

.first-action-container .timeline-year-mark {
  position: absolute;
  right: 0px;
  bottom: 20px;
  width: 25vw;
  margin-right: calc((45vw - 25vw));

  display: flex;
  justify-content: center;
}

.second-action-container {
  width: 60vw;
}

.second-action {
  position: relative;
  margin-left: 160px;
}

.second-action img {
  width: 42vw;
}

.second-action .action-description {
  position: absolute;
  right: 0px;
  /*width: 245px;
  height: 103px;*/
  background-color: #fff;
}

.third-action-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -20vw;

  position: relative;
}

.third-action {
  position: relative;
}

.third-action img {
  width: 53vw;
}

.third-action .action-description {
  position: absolute;
  right: 0px;
  /*width: 300px;
  height: 110px;*/
  background-color: #fff;
}

.third-action-container .timeline-year-mark {
  position: absolute;
  bottom: 20px;
  right: 0px;
  width: 28vw;
  margin-right: calc((53vw - 28vw) + 10px);

  display: flex;
  justify-content: center;
}

.fourth-action-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

.fourth-action {
  position: relative;
  margin-left: 150px;

  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.fourth-action img {
  width: 30vw;
}

.fourth-action .action-description {
  /*max-width: 415px;*/
}

.fourth-action-container .timeline-year-mark {
  position: absolute;
  bottom: 20px;
  right: 0px;
  width: 30vw;
  margin-right: calc(415px + 40px);

  display: flex;
  justify-content: center;
}

.fifth-action {
  position: relative;
  margin-left: 140px;
}

.fifth-action img {
  width: 37vw;
}

.fifth-action .action-description {
  position: absolute;
  top: -60px;
  right: 0px;
  /*max-width: 18vw;*/
  background-color: #fff;
}

.action {
  height: 50vh;

  display: flex;
  align-items: flex-end;
}

@media only screen and (max-width: 2560px) {
  .first-action .action-description {
    height: 190px;
    width: 420px;
  }
  .second-action .action-description {
    height: 200px;
    width: 560px;
  }
  .third-action .action-description {
    height: 210px;
    width: 540px;
  }
  .fifth-action .action-description {
    height: 120px;
    width: 390px;
  }
}

@media only screen and (max-width: 2160px) {
  .first-action .action-description {
    height: 175px;
    width: 385px;
  }
  .second-action .action-description {
    height: 185px;
    width: 500px;
  }
  .third-action .action-description {
    height: 185px;
    width: 485px;
  }
  .fifth-action .action-description {
    height: 120px;
    width: 340px;
  }
}

@media only screen and (max-width: 1920px) {
  .first-action .action-description {
    height: 150px;
    width: 330px;
  }
  .second-action .action-description {
    height: 160px;
    width: 410px;
  }
  .third-action .action-description {
    height: 165px;
    width: 420px;
  }
  .fifth-action .action-description {
    height: 120px;
<<<<<<< Updated upstream
    width: 300px;
=======
    width: 320px;
>>>>>>> Stashed changes
  }
}

@media only screen and (max-width: 1860px) {
  .slider-cover-back div p {
    display: none;
  }
}

@media only screen and (max-width: 1700px) {
  .first-action .action-description {
    height: 125px;
    width: 275px;
  }
  .second-action .action-description {
    height: 130px;
    width: 310px;
  }
  .third-action .action-description {
    height: 130px;
    width: 345px;
  }
  .fifth-action .action-description {
    height: 120px;
    width: 215px;
  }
}

@media only screen and (max-width: 1400px) {
  .first-action .action-description {
    height: 110px;
    width: 235px;
  }
  .second-action .action-description {
    height: 115px;
    width: 240px;
  }
  .third-action .action-description {
    height: 115px;
    width: 295px;
  }
  .fifth-action .action-description {
    height: 120px;
    width: 215px;
  }
}

@media only screen and (max-width: 1200px) {
  .first-action .action-description {
    height: 100px;
    width: 220px;
  }
  .second-action .action-description {
    height: 108px;
    width: 210px;
  }
  .third-action .action-description {
    height: 105px;
    width: 270px;
  }
  .fifth-action .action-description {
    height: 120px;
    width: 200px;
  }
}

@media only screen and (max-width: 1105px) {
  .only-desk {
    display: none;
  }
}

@media only screen and (min-width: 1105px) {
  .only-mobile {
    display: none;
  }
}

.action-mobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin-top: 35px;
}

.action-mobile .action-mobile-content {
  width: 252px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.action-mobile-separator {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: 35px;
}

.only-mobile #ss1 {
  background-color: #677587;
  height: 283px;
  color: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.header-mobile div {
  max-width: 257px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.header-mobile div h1 {
  font-size: 2.2rem;
  margin: 0;
}

.only-mobile #ss2 {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.first-action-mobile img {
  width: 252.3px;
}

.second-action-mobile img {
  width: 262.3px;
}

.only-mobile #ss3 {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.only-mobile #ss4 {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.fifth-action-mobile {
  margin-bottom: 55px;
}