/*
 * PARAGRAPH timeline outer class
 */
.paragraph--type--timeline {
  padding: 0 0 50px 0;
}

/*
 * SHARED attr
 */
.timeline--header,
.timeline--footer {
  background-color: #d93447;
}

/*
 * HEADER
 */
.timeline--header {
  text-align: center;
  height: 50px;
  border-bottom: 4px solid #ffffff;
}

/*
 * BODY
 */
.timeline--body {
  height: 500px;
  overflow-y: scroll;
  background-color: #25408f;
  -webkit-box-shadow:inset 0 0 100px 0 rgba(0,0,0,.25);
  box-shadow:inset 0 0 100px 0 rgba(0,0,0,.25);
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
}

.timeline--body h3 {
  height: 50px;
}

.timeline--line::after {
  content: '';
  background-image: url(../images/timeline/timeline--ladder.png);
  background-repeat: repeat-y;
  width: 42px;
  position: absolute;
  display: block;
  top: 94px;
  bottom: 317px;
  left: -82px;
  z-index: 0;
}

.timeline--body--content {
  padding: 100px 0 50px;
}

.timeline--bubble {
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 30px;
  margin-bottom: 100px;
}

.timeline--title {
  height: 50px;
}

.timeline--pointer {
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-color: transparent #ffffff transparent transparent;
  position: relative;
  top: 25px;
  left: -48px;
}

.timeline--star {
  position: relative;
  top: -60px;
  left: -130px;
  z-index: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s ease; /* Smooth transition for the transform property */
}

.timeline--star:hover {
  transform: scale(1.2);
}

/*
 * FOOTER
 */
.timeline--footer {
  color: #ffffff;
  padding: 25px 0 25px 0;
}

.timeline--footer .timeline--nav-link,
.timeline--footer {
  color: rgba(250, 250, 250, .25);
  font-size: 20px;
  font-weight: bold;
}

.timeline--footer a:hover,
.timeline--footer a.active {
  color: #ffffff;
  text-decoration: none;
}

.is-link:hover {
  cursor: pointer;
}

.timeline--nav-link.active,
.timeline--nav-link-m.active {
  color: rgba(250, 250, 250, 1.0);
}

.timeline--nav-link-m:not(.hidden-all) {
  border-right: 3px solid rgba(250, 250, 250, .25);
  padding-right: 7px;
}

.timeline--nav-link-m.last-child {
  border-right: 0;
}

.timeline--nav-link-m:not(.hidden-all).no-pipe {
  border-right: 0;
}


.timeline--toggle--nav .timeline--pipe {
  font-size: 22px;
}

/*
 * Logo
 */
.timeline--logo {
  height: 247px;
  position: relative;
  top: -103px;
  z-index: 9999;
}

/*
 * UTILS
 */
.color-white {
  color: #ffffff !important;
}

.timeline--body h3 {
  color: #25408F;
}

.timeline--bubble--image {
  width: 100%;
  height: auto;
}

.hidden-all {
  visibility: hidden;
  display: none;
}

@media (max-width: 576px) {
  .timeline--line {
    max-width: 75%;
    margin-left: 25%;
  }

  .timeline--star {
    left: -112px;
  }

  .timeline--line::after {
    left: 27px;
    bottom: 581px;
  }

  .content-video-title-desc__title {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .timeline--star {
    left: 112px;
  }
}

@media (max-width: 370px) {
  .timeline--star {
    left: -107px;
  }
}

@media (min-width: 371px) and (max-width: 380px) {
  .timeline--star {
    left: -109px;
  }
}

@media (min-width: 381px) and (max-width: 390px) {
  .timeline--star {
    left: -112px;
  }
}

@media (min-width: 391px) and (max-width: 400px) {
  .timeline--star {
    left: -114px;
  }
}

@media (min-width: 401px) and (max-width: 410px) {
  .timeline--star {
    left: -117px;
  }
}

@media (min-width: 411px) and (max-width: 420px) {
  .timeline--star {
    left: -119px;
  }
}

@media (min-width: 421px) and (max-width: 430px) {
  .timeline--star {
    left: -122px;
  }
}

@media (min-width: 431px) and (max-width: 440px) {
  .timeline--star {
    left: -124px;
  }
}

@media (min-width: 441px) and (max-width: 450px) {
  .timeline--star {
    left: -127px;
  }
}

@media (min-width: 451px) and (max-width: 460px) {
  .timeline--star {
    left: -129px;
  }
}

@media (min-width: 451px) and (max-width: 460px) {
  .timeline--star {
    left: -129px;
  }
}

@media (min-width: 451px) and (max-width: 460px) {
  .timeline--star {
    left: -129px;
  }
}

@media (min-width: 461px) and (max-width: 470px) {
  .timeline--star {
    left: -129px;
  }
}

@media (min-width: 471px) and (max-width: 480px) {
  .timeline--star {
    left: -131px;
  }
}

@media (min-width: 481px) and (max-width: 490px) {
  .timeline--star {
    left: -136px;
  }
}

@media (min-width: 491px) and (max-width: 500px) {
  .timeline--star {
    left: -139px;
  }
}

@media (min-width: 501px) and (max-width: 510px) {
  .timeline--star {
    left: -142px;
  }
}

@media (min-width: 511px) and (max-width: 520px) {
  .timeline--star {
    left: -144px;
  }
}

@media (min-width: 521px) and (max-width: 530px) {
  .timeline--star {
    left: -147px;
  }
}

@media (min-width: 531px) and (max-width: 540px) {
  .timeline--star {
    left: -150px;
  }
}

@media (min-width: 541px) and (max-width: 550px) {
  .timeline--star {
    left: -152px;
  }
}

@media (min-width: 551px) and (max-width: 560px) {
  .timeline--star {
    left: -154px;
  }
}

@media (min-width: 561px) and (max-width: 570px) {
  .timeline--star {
    left: -157px;
  }
}

@media (min-width: 576px) and (max-width: 580px) {
  .timeline--star {
    left: -149px;
  }
}