/*Applies to all elements*/


a {
  color: forestgreen;
  text-decoration: underline;
}

.grid-col-span-4 {
  grid-column: span 4;}

.grid-col-span-3 {
    grid-column: span 3;
  }

.grid {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(4, 1fr);
    padding-left: 2em;
    padding-right: 2em;
  }

  .video-section {
  background-color: #0D3B66;
}

.video-section {
  background-color: #0D3B66;
  padding: 2rem 1rem;
}

/* Container */
.video-container {
  margin: 0 auto;
  width: 100%;
}

/* Aspect ratio wrapper (REQUIRED) */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Credit */
.video-credit {
  margin-top: 1rem;
  color: #fff;
  text-align: right;
  font-size: 0.9rem;
}

.video-credit a {
  color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
  .video-container {
    max-width: 100%;
  }

  .video-credit {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .video-container {
    max-width: 85%;
  }

  .video-wrapper {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  }
}




/* The actual timeline (the vertical ruler) */
.main-timeline-2 {
    position: relative;

  }
  
  /* The actual timeline (the vertical ruler) */
  .main-timeline-2::after {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #288159;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
  }
  
  /* Container around content */
  .timeline-2 {
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .timeline-2::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    right: -11px;
    background-color: hsl(153, 58%, 32%);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
  }
  
  /* Place the container to the left */
  .left-2 {
    padding: 0px 40px 20px 0px;
    left: 0;
  }
  
  /* Place the container to the right */
  .right-2 {
    padding: 0px 0px 20px 40px;
    left: 50%;
  }
  
  /* Add arrows to the left container (pointing right) */
  .left-2::before {
    content: " ";
    position: absolute;
    top: 10px;
    z-index: 1;
    right: 20px;
    border: medium solid white;
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent forestgreen;
  }
  
  /* Add arrows to the right container (pointing left) */
  .right-2::before {
    content: " ";
    position: absolute;
    top: 10px;
    z-index: 1;
    left: 20px;
    border: medium solid white;
    border-width: 20px 20px 20px 0;
    border-color: transparent forestgreen transparent transparent;
  }
  
  /* Fix the circle for containers on the right side */
  .right-2::after {
    left: -14px;
  }


  /*XS Screen*/

@media (max-width: 575px) {
  .desktop{
    display: none;
  }
  .bi {
    color: forestgreen;
    font-size: 1em;
  }
  .recap{
    font-size: 1em;
  }
      .date {
         display:none;
      }
      .fact {
        display: none;
      }
      .toc {
        display:none;
      } 

      .grid{
        position: relative;
      }
      .float {
        position:absolute;
        display:flex;
        top:1000px; /* the height you want here*/
        left:0;
        right:70%;
        bottom:0;
        pointer-events:none;
    
        
        }

      .float ul {
        position: sticky;
        z-index:999;
        margin:auto 3em 3em auto;
        bottom: 1em;
        background: rgba(34, 139, 34, 0.25);
        padding: 1em 1em;
        pointer-events:initial;
        list-style: none;
        color: rgb(0,0,0);

        }

        .float li{
 
          padding-bottom: .35em;
        }
      .float ul a{
        padding: 1em;
        text-decoration: none;
        font-size: 1em;
        font-weight: bold;
        color: forestgreen;
        opacity: .8;
      }
     

        /* Place the timelime to the left */
        .main-timeline-2::after {
          left: 31px;
        }
      
        /* Full-width containers */
        .timeline-2 {
          width: 100%;
          padding-right: 1em;
        }
      
        /* Make sure that all arrows are pointing leftwards */
        .timeline-2::before {
          display: none;   }
      
        /* Make sure all circles are at the same spot */
        .left-2::after,
        .right-2::after {
          display: none;
        }
      
        .left-2::before {
          display: none;
        }
      
        /* Make all right containers behave like the left ones */
        .right-2 {
          left: 0%;
          padding: 0 0 1em 0;
        }
        .main-timeline-2::after {
          display: none;
        }
        .left-2
        { padding: 0 0 1em 0;}
      }

  
/*Small Screens*/

@media (min-width: 576px) and (max-width: 768px) {
  .desktop{
    display: none;
  }
  .bi {
    color: forestgreen;
    font-size: 1em;
  }
  .recap{
    font-size: 1em;
  }
  .fact{
    display:none;}

.date{
  display: none;
}
    .float{
    display:none;
}

.toc {
      z-index: 100;
       margin-left: -2em;
       margin-right: -2em;
       margin-bottom:1em;
      background-color: transparent;
    }

  .toc a{
  text-decoration: none;
  color: white;}

  .color{
    background-color: #71b689;
    border-style: solid;
    border-color: #74dbdb;
    border-radius: 15%;
  }

 
  /* Place the timelime to the left */
 .main-timeline-2::after {
  left: 31px;
}

/* Full-width containers */
.timeline-2 {
  width: 100%;
  padding-right: 1em;
}

/* Make sure that all arrows are pointing leftwards */
.timeline-2::before {
  display: none;   }

/* Make sure all circles are at the same spot */
.left-2::after,
.right-2::after {
  display: none;
}

.left-2::before {
  display: none;
}

/* Make all right containers behave like the left ones */
.right-2 {
  left: 0%;
  padding: 0 0 1em 0;
}
.main-timeline-2::after {
  display: none;
}
.left-2
{ padding: 0 0 1em 0;}

}


  /*MD and Larger Screens*/

@media (min-width: 768px)  {
  .mobile{display: none;}
    .fact{
        display:none;}
    .main-timeline-2 {
        padding-left: 5.5em;
        padding-right: 5.5em;
        height: 1250em;
      }
    .recap{
          font-size: 1.15em;
        }
    .bi {
          font-size: 1.25em;
          color: forestgreen;
        }
    .date{
      display: none;
    }
        .float{
        display:none;
    }

    .toc {
          z-index: 100;
           margin-left: -2em;
           margin-right: -2em;
           margin-bottom:1em;
          background-color: transparent;
        }

      .toc a{
      text-decoration: none;
      color: white;}

      .color{
        background-color: #71b689;
        border-style: solid;
        border-color: #74dbdb;
        border-radius: 15%;
        height: 2.5em;
        width: 4.5em;
        font-size: 1.25em;
      }

      .timeline-2:nth-child(1) {
          top: 0em;
        }
        .timeline-2:nth-child(2) {
          top: -30em;
        }
        .timeline-2:nth-child(3) {
          top: -40em;
        }
        .timeline-2:nth-child(4) {
          top: -60em;
        }
        .timeline-2:nth-child(5) {
          top: -80em;
        }
        .timeline-2:nth-child(6) {
          top: -90em;
        }
        .timeline-2:nth-child(7) {
          top: -110em;
        }
        .timeline-2:nth-child(8) {
          top: -110em;
        }
        .timeline-2:nth-child(9) {
          top: -130em;
        }
        .timeline-2:nth-child(10) {
          top: -135em;
        }
        .timeline-2:nth-child(11) {
          top: -135em;
        }
        .timeline-2:nth-child(12) {
          top: -135em;
        }
        .timeline-2:nth-child(13) {
          top: -170em;
        }
        .timeline-2:nth-child(14) {
          top: -170em;
        }
        .timeline-2:nth-child(15) {
          top: -175em;
        }
        .timeline-2:nth-child(16) {
          top: -190em;
        }
        .timeline-2:nth-child(17) {
          top: -190em;
        }
        .timeline-2:nth-child(18) {
          top: -200em;
        }
        .timeline-2:nth-child(19) {
          top: -200em;
        }
        .timeline-2:nth-child(20) {
          top: -205em;
        }
        .timeline-2:nth-child(21) {
          top: -235em;
        }
        .timeline-2:nth-child(22) {
          top: -225em;
        }
        .timeline-2:nth-child(23) {
          top: -240em;
        }
        .timeline-2:nth-child(24) {
          top: -235em;
        }
        .timeline-2:nth-child(25) {
          top: -270em;
        }
        .timeline-2:nth-child(26) {
          top: -270em;
        }
        .timeline-2:nth-child(27) {
          top: -275em;
        }
        .timeline-2:nth-child(28) {
          top: -300em;
        }
        .timeline-2:nth-child(29) {
          top: -305em;
        }
        .timeline-2:nth-child(30) {
          top: -335em;
        }
        .timeline-2:nth-child(31) {
          top: -340em;
        }
        .timeline-2:nth-child(32) {
          top: -360em;
        }
        .timeline-2:nth-child(33) {
          top: -370em;
        }
        .timeline-2:nth-child(34) {
          top: -400em;
        }
        .timeline-2:nth-child(35) {
          top: -410em;
        }
        .timeline-2:nth-child(36) {
          top: -410em;
        }
        .timeline-2:nth-child(37) {
          top: -425em;
        }
        .timeline-2:nth-child(38) {
          top: -440em;
        }
        .timeline-2:nth-child(39) {
          top: -450em;
        }
        .timeline-2:nth-child(40) {
          top: -465em;
        }
        .timeline-2:nth-child(41) {
          top: -475em;
          margin-bottom:-475em ;
        }


        /* Continue as needed */
      }
    
      @media (min-width: 887px)  {
        .main-timeline-2{
          height: 1170em;}
        }

      @media (min-width: 1500px) {
        .main-timeline-2{
        height: 1250em;
        }
      }

      @media (min-width: 1700px) 
      {
        .main-timeline-2{
          height: 1330em;
        }
      }
  
      @media (min-width: 1950px)  {
       .main-timeline-2{
        height: 1450em;
       }
      }