/*-- -------------------------- -->
<---          Timeline          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #timeline-1517 {
      /* 60px - 140px */
      padding: clamp(3.75rem, 7.82vw, 8.75rem) 1rem;
      /* clips the white line through the bullets */
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #timeline-1517:before {
      content: '';
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: .05;
      /* prevents the mouse from interacting with it */
      pointer-events: none;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
    }
    #timeline-1517 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #timeline-1517 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
      /* 20px - 40px */
      gap: clamp(1.25rem, 4vw, 2.5rem);
    }
    #timeline-1517 .cs-flex {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
    }
    #timeline-1517 .cs-topper {
      color: var(--secondary);
    }
    #timeline-1517 .cs-title {
      max-width: 20ch;
    }
    #timeline-1517 .cs-image-group {
      width: 100%;
      max-width: 38.75rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    #timeline-1517 .cs-picture {
      width: 100%;
      height: auto;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      position: relative;
      z-index: 1;
      cursor: pointer;
    }
    #timeline-1517 .cs-picture img {
      width: 100%;
      height: auto;
    }
    #timeline-1517 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* changes at tablet */
      gap: 1.5rem;
      position: relative;
    }

    li{
      font-size: 14px;
    }
    #timeline-1517 .cs-card-group:before {
      /* white line through the bullets */
      content: "";
      width: 2px;
      background: #E8E8E8;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      /* send it way down to reach the bottom of the section, and have some overlap so if you add content and the ul gets longer, it will still be at the bottom */
      bottom: -18.75rem;
      /* half the width of the bullet */
      left: 0.5625rem;
    }
    #timeline-1517 .cs-item {
      width: 100%;
      max-width: 25rem;
      list-style: none;
      padding: 0 0 0 2.75rem;
      grid-column: span 12;
      position: relative;
    }
    #timeline-1517 .cs-item:hover .cs-date {
      color: var(--primary);
    }
    #timeline-1517 .cs-item:hover:before {
      background-color: var(--primary);
      border-color: #5323e2;
    }
    #timeline-1517 .cs-item:before {
      /* bullet circle */
      content: "";
      width: 1.25rem;
      height: 1.25rem;
      background: #FFF8F5;
      border: 2px solid #bababa;
      /* prevents border from affecting height and width */
      box-sizing: border-box;
      border-radius: 50%;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      transition: background-color 0.3s, border-color 0.3s;
    }
    #timeline-1517 .cs-date {
      font-size: 1rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0 0 1rem 0;
      color: var(--bodyTextColor);
      display: block;
      transition: color .3s;
    }
    #timeline-1517 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      /* changes to 100% at tablet */
      width: 80%;
      margin: 0;
      color: var(--headerColor);
      position: relative;
    }
    #timeline-1517 .cs-item-text {
      /* 14px - 16px */
      font-size: 14px;
      line-height: 1.5em;
      margin: 0.5rem 0 0 0;
      color: var(--bodyTextColor);
    }
    #timeline-1517 .cs-floater {
      width: 14.375rem;
      height: auto;
      display: none;
      position: absolute;
    }
    #timeline-1517 .cs-floater1 {
      bottom: 1.5625rem;
      left: 0;
    }
    #timeline-1517 .cs-floater2 {
      top: 1.25rem;
      right: -4.5rem;
    }
    #timeline-1517 .cs-background {
      --backgroundBG: #fff;
      width: 100%;
      min-width: 120rem;
      height: auto;
      position: absolute;
      left: 0;
    }
    #timeline-1517 .cs-background-top {
      top: 0;
    }
    #timeline-1517 .cs-background-bottom {
      bottom: 0;
      transform: rotateX(180deg);
    }


    .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 10px;
      color: #1a1a1a;
      min-width: 8%;
      padding: 2px;
      border-radius: 5px;
      background-color: var(--secondary);
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color 0.3s;
  }

  .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    border-radius: 5px;
}

  /* change color of button font when you hover*/
  .cs-button-solid:hover {
    color: #ffffff;
  }
  
  /* adjusts hover transition size when you hover*/
  .cs-button-solid:hover:before {
    width: 100%;
  }



  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #timeline-1517 .cs-container {
      max-width: 80rem;
    }
    #timeline-1517 .cs-card-group {
      /* clips the lines */
      overflow: hidden;
      flex-direction: row;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
      row-gap: 3rem;
    }
    #timeline-1517 .cs-card-group:before {
      display: none;
    }
    #timeline-1517 .cs-item {
      padding: 3.75rem 0 0 0;
      grid-column: span 3;
    }
    #timeline-1517 .cs-item:after {
      /* moved the line to the list item so we can have multiple rows */
      content: "";
      width: 110%;
      height: 2px;
      background: #E8E8E8;
      /* prevents border from affecting height and width */
      box-sizing: border-box;
      opacity: 1;
      position: absolute;
      display: block;
      top: 0.5625rem;
      left: 0;
      z-index: -1;
      transition: background-color 0.3s, border-color 0.3s;
    }
    #timeline-1517 .cs-h3 {
      width: 100%;
    }

    cite sup a{
      color: #D31243;
      text-decoration: none;
    }

    a{
      text-decoration: none;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #timeline-1517 .cs-content {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
    #timeline-1517 .cs-flex {
      text-align: left;
      align-items: flex-start;
    }
  }
  /* Larger Desktop - 1600px */
  @media only screen and (min-width: 100rem) {
    #timeline-1517 .cs-floater {
      display: block;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #timeline-1517 .cs-date {
      color: var(--secondary);
    }
    body.dark-mode #timeline-1517 .cs-title,
    body.dark-mode #timeline-1517 .cs-text,
    body.dark-mode #timeline-1517 .cs-h3,
    body.dark-mode #timeline-1517 .cs-item-text {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #timeline-1517 .cs-card-group:before {
      opacity: .2;
    }
    body.dark-mode #timeline-1517 .cs-item:before {
      background-color: var(--dark);
      border-color: var(--accent);
    }
    body.dark-mode #timeline-1517 .cs-text,
    body.dark-mode #timeline-1517 .cs-item-text {
      opacity: .8;
    }
    body.dark-mode #timeline-1517 .cs-background {
      --backgroundBG: var(--dark);
    }
  }