@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
html {
  font-size: 17px;
}

div.timeline {
  margin: 0;
  position: relative;
  display: grid;
  align-items: center;
}
@media screen and (min-width: 1024px) {
  div.timeline {
    margin: 2rem;
  }
}
div.timeline div.timeline-progressbar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: -1;
}
div.timeline div.timeline-item {
  display: grid;
  grid-template-areas: "timeline-date timeline-image" "timeline-date timeline-title" "timeline-date timeline-description";
  grid-template-columns: 100px 1fr;
  grid-auto-flow: column;
  column-gap: 1rem;
  align-items: center;
}
div.timeline div.timeline-item .timeline-date {
  text-align: center;
  color: #CCCCCC;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 38px;
  grid-area: timeline-date;
  background: #FFFFFF;
  display: grid;
  align-self: stretch;
  align-items: center;
  transition-property: color;
  transition-delay: 0s;
  transition-duration: 500ms;
}
div.timeline div.timeline-item .timeline-date.morison.active {
  color: #610C53;
}
div.timeline div.timeline-item .timeline-date.rewit.active {
  color: #BE101D;
}
div.timeline div.timeline-item .timeline-date.moore.active {
  color: #03adef;
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item .timeline-date.animateNow {
    animation: bounceInUp;
    animation-duration: 1s;
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item .timeline-date.animateOut {
    animation: slideOutDown;
    animation-duration: 1s;
  }
}
div.timeline div.timeline-item .timeline-date:before, div.timeline div.timeline-item .timeline-date:after {
  content: "";
  width: 2px;
  background: #CCCCCC;
  position: relative;
  height: 100%;
  left: calc(50% - 1px);
}
div.timeline div.timeline-item:first-child .timeline-date:before {
  background: none;
}
div.timeline div.timeline-item:last-child .timeline-date:after {
  background: none;
}
div.timeline div.timeline-item .timeline-content {
  padding: 2rem 0;
}
div.timeline div.timeline-item .timeline-content .timeline-title {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  padding: 20px 15px;
  background: #E5F7FD;
  text-align: center;
  margin-bottom: 0;
  grid-area: timeline-title;
}
div.timeline div.timeline-item .timeline-content .timeline-title:before {
  content: "";
  position: absolute;
  width: 90%;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  left: 50%;
  border-radius: 50%;
  filter: blur(4px);
  transform: translate(-50%, 50%);
  top: calc(100% - 0.5rem);
  z-index: -1;
}
div.timeline div.timeline-item .timeline-content .timeline-title.morison {
  background: #610C53;
  color: #FFFFFF;
}
div.timeline div.timeline-item .timeline-content .timeline-title.morison:after {
  background: #3A0A39;
}
div.timeline div.timeline-item .timeline-content .timeline-title.rewit {
  background: #BE101D;
  color: #FFFFFF;
}
div.timeline div.timeline-item .timeline-content .timeline-title.rewit:after {
  background: #7C0B19;
}
div.timeline div.timeline-item .timeline-content .timeline-title.moore {
  background: #03adef;
  color: #FFFFFF;
}
div.timeline div.timeline-item .timeline-content .timeline-title.moore:after {
  background: #007C99;
}
div.timeline div.timeline-item .timeline-content .timeline-title:after {
  content: "";
  display: grid;
  width: 1.2rem;
  aspect-ratio: 1;
  background: #E5F7FD linear-gradient(rgba(0, 0, 0, 0.1) 100%, transparent);
  position: absolute;
  top: 100%;
}
div.timeline div.timeline-item .timeline-content .timeline-description {
  text-align: left;
  box-sizing: border-box;
  place-content: center;
  grid-area: timeline-description;
  border-bottom: 2px solid transparent;
  padding: 1.5rem 25px 1.35rem 25px;
  font-size: 0.85rem;
  border-image-source: linear-gradient(0.25turn, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.01));
  border-image-slice: 1;
  font-family: "Montserrat", sans-serif;
}
div.timeline div.timeline-item .timeline-content .timeline-title.morison + .timeline-description li::marker {
  color: #610C53;
}
div.timeline div.timeline-item .timeline-content .timeline-title.rewit + .timeline-description li::marker {
  color: #BE101D;
}
div.timeline div.timeline-item .timeline-content .timeline-title.moore + .timeline-description li::marker {
  color: #0F88B8;
}
div.timeline div.timeline-item .timeline-image {
  width: 100%;
  height: auto;
  grid-area: timeline-image;
}
div.timeline div.timeline-item:nth-child(odd) .timeline-content {
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(odd) .timeline-content {
    opacity: 0;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(odd) .timeline-content.animateNow {
    animation: fadeInUp;
    animation-duration: 1s;
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(odd) .timeline-content.animateOut {
    animation: slideOutDown;
    animation-duration: 1s;
  }
}
div.timeline div.timeline-item:nth-child(odd) .timeline-content .timeline-title:after {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  left: 0;
}
div.timeline div.timeline-item:nth-child(odd) .timeline-image {
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(odd) .timeline-image {
    opacity: 0;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(odd) .timeline-image.animateNow {
    animation: fadeInUp;
    animation-duration: 1s;
    opacity: 1;
  }
}
div.timeline div.timeline-item:nth-child(even) .timeline-content {
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(even) .timeline-content {
    opacity: 0;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(even) .timeline-content.animateNow {
    animation: fadeInUp;
    animation-duration: 1s;
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(even) .timeline-content.animateOut {
    animation: slideOutDown;
    animation-duration: 1s;
  }
}
div.timeline div.timeline-item:nth-child(even) .timeline-content .timeline-title:after {
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  right: 0;
}
div.timeline div.timeline-item:nth-child(even) .timeline-image {
  opacity: 1;
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(even) .timeline-image {
    opacity: 0;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(even) .timeline-image.animateNow {
    animation: fadeInUp;
    animation-duration: 1s;
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  div.timeline div.timeline-item:nth-child(even) .timeline-image.animateOut {
    animation: slideOutDown;
    animation-duration: 1s;
  }
}

@media screen and (min-width: 1025px) {
  div.timeline div.timeline-item {
    grid-template-areas: "timeline-content timeline-date timeline-image";
    grid-template-columns: 1fr 100px 1fr;
    grid-auto-flow: column;
    column-gap: 2rem;
  }
  div.timeline div.timeline-item .timeline-date {
    grid-area: timeline-date;
  }
  div.timeline div.timeline-item .timeline-image {
    grid-area: timeline-image;
    display: grid;
    justify-items: center;
  }
  div.timeline div.timeline-item .timeline-image img {
    max-width: 80%;
  }
  div.timeline div.timeline-item .timeline-title {
    grid-area: timeline-content;
  }
  div.timeline div.timeline-item .timeline-description {
    grid-area: timeline-content;
  }
  div.timeline div.timeline-item:nth-child(even) {
    grid-template-areas: "timeline-image timeline-date timeline-content";
  }
}

/*# sourceMappingURL=timeline.css.map */