/*******************
  Timeline
********************/

.block-timeline {
display: flex;
flex-basis: 100%;
flex-direction: column;
position: relative;
}

.block-timeline-inner {
overflow-y: visible;
overflow-x: scroll;
width: 100%;
}

.block-timeline-inner:empty {
padding: 2rem;
}

/*------------ TABS -------------*/

.block-timeline-tabs {
  display: inline-flex;
  flex-basis: 100%;
  background-color: var(--body-bg);
}

.block-timeline-tabs:after {
    content: '';
    display: block;
    z-index: 1;
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    right: 0rem;
    height: 1px;
    border-bottom: 1px solid var(--black-40);
    width: 100%;
    transform: translateX(-50%);
}

.block-timeline-tabs ul.block-timeline-tabs-inner {
    display: flex;
    gap: 2rem;
    list-style-type: none;
    list-style-position: inside;
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 0rem 1rem;
    background-color: transparent;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
}

.block-timeline-tabs li {
    z-index: 2;
    margin: 0rem !important;
}

.block-timeline-tabs li::marker {
    content: "" !important;
}

.block-timeline-tabs li .cta {
  display: inline-block;
  cursor: pointer;
  padding: 0.5rem 1.5rem 0.875rem;
  margin: 1rem 0rem !important;
  font-size: 1rem;
  font-weight: 600;
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  line-height: 1.25 !important;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.block-timeline-tabs li .cta:before {
  content: '';
  display: inline-flex;
  height: 0.25rem;
  width: 0.25rem;
  position: absolute;
  left: 50.125%;
  bottom: -0.75rem;
  transform: translateX(-50%);
  background-color: var(--steadfast-gold);
  border: 0.125rem solid var(--white);
  border-radius: 100%;
  z-index: 1;
}

.block-timeline-tabs li.active .cta:before {
  background-color: var(--black);
}

.block-timeline-tabs li .cta:after {
  content: '';
  height: 100%;
  width: 1px;
  position: absolute;
  left: 50%;
  top: 0%;
  bottom: 0%;
  transform: translateY(50%);
  z-index: -1;
}

.block-timeline-tabs li .cta:after {
    background: linear-gradient(0deg, transparent 30%, rgba(0,0,0,0.4) 4%, rgba(0,0,0,0.4) 30%, transparent 70%);
}

.block-timeline-tabs li.active .cta:after {
  background: linear-gradient(0deg, transparent 0%, rgba(0,0,0,0.4) 4%, rgba(0,0,0,0.4) 96%, transparent 100%);
}

.block-timeline-tabs li.active .cta {
    font-weight: 600;
    color: var(--white);
    background: var(--black);
}

.block-timeline-tabs li .cta .tab-decor {
  position: absolute;
  bottom: 0.125rem;
  left: 0.125rem;
  right: 0.125rem;
  display: block;
  width: auto;
  height: 0.25rem;
  border: 0.125rem solid var(--steadfast-gold);
  border-top: 0;
  border-radius: 0.25rem;
  opacity: 0;
}

.block-timeline-tabs li.active .cta .tab-decor {
  opacity: 1;
}

/*
.block-timeline-background-white {
background-color: var(--white);
}
.block-timeline-background-lightgray {
background-color: var(--gray-lightest);
}

.block-timeline-background-black {
background-color: var(--black);
color: var(--white);
}

.block-timeline-background-blue {
background-color: var(--steadfast-blue);
color: var(--white);
}

.block-timeline-background-gold {
}

.block-timeline-background-gold:before {
}

.block-timeline-background-gold:after {
}
*/


.milestones-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding-top: 0rem;
  gap: 1.5rem;
}

.block-timeline-decades-and-events {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: calc(100vw - 3rem);
  height: clamp(30rem, 56vh,42rem);
  /*background: red;*/
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 0rem;
  box-shadow: inset 0rem 0rem 4rem var(--black-10);
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
}

.decade-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.milestone-item {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 24.563rem;
  background: var(--white);
  border: 1px solid var(--black-20);
  box-shadow: 0 2px 1px 0 var(--black-20);
  /*margin-right: 1.5rem;*/
  padding: 1rem;
  transform: scale(.6);
  transform-origin: center;
  transition: all 1s ease;
}

.milestone-item.active {
  transform: scale(.8);
}

.milestone-item:not(.active) {
  /*filter: blur(2px);*/
  opacity: .8;
}

.milestone-item:not(.active):hover {
  /*filter: blur(0px);*/
  opacity: 1;
  transform: scale(.8);
}


.milestone-item.has-image {

}

.milestone-item-image {
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--light);
  min-height: 24vh;
  margin-bottom: 0.75rem;
}

.milestone-item-image img {
  opacity: 0;
  pointer-events: none;
}

.milestone-item-heading-and-excerpt {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.milestone-item-heading-and-excerpt .milestone-item-year {
    margin: 0rem auto 0.75rem !important;
}

.milestone-item-heading-and-excerpt .milestone-item-heading {
display: grid;
    margin: 0rem !important;
}

.milestone-item-heading-and-excerpt .milestone-item-excerpt:empty {
display: none;
}

.milestone-item-heading-and-excerpt .milestone-item-controls {
margin-top: 1rem;
}

/*--------- POSITION THE TABS AND ITEMS -------------------------------------------------------------------------------*/

@media (min-width: 1024px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 1.5rem;
  }
}

@media (min-width: 1200px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 4.5vw;
  }
}

@media (min-width: 1300px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 7.5vw;
  }
}

@media (min-width: 1400px),
@media (min-width: 1600px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 4vw;
  }
}

@media (min-width: 1500px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 3vw;
  }
}

@media (min-width: 1600px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 5vw;
  }
}

@media (min-width: 1680px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 7.5vw;
  }
}

@media (min-width: 1920px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 6.5vw;
  }
}

@media (min-width: 2560px){
  .block-timeline-tabs ul.block-timeline-tabs-inner,
  .block-timeline-decades-and-events {
    padding: 0rem 8vw;
  }
}


/* ------------------------- MODALS/ FANCY BOX CONTENT -------------------------- */

.fancybox__container.modal-sheet-large .milestone-item,
.fancybox__container.modal-sheet-medium .milestone-item,
.fancybox__container.modal-sheet-large .milestone-item:hover,
.fancybox__container.modal-sheet-medium .milestone-item:hover {
  padding: 1.5rem 0rem 0rem;
  border: none;
  box-shadow: none;
  width: 100%;
  order: 1;
  transform: scale(1);
  opacity: 1;
  min-width: auto;
  max-width: 33.25rem;
}

.fancybox__container.modal-sheet-large .fancybox__content > button.carousel__button.is-close,
.fancybox__container.modal-sheet-medium .fancybox__content > button.carousel__button.is-close {
  position: sticky;
  top: 0rem;
  color: var(--black);
  z-index: 4;
  background-color: var(--white);
  border: 0;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.fancybox__container.modal-sheet-large .milestone-item-image,
.fancybox__container.modal-sheet-medium .milestone-item-image {
  background-color: transparent;
}

.fancybox__container .milestone-item-year {
  position: sticky;
  top: -2.5rem;
  padding-top: 2rem;
  background-color: var(--white);
  z-index: 1;
  width: 100%;
}

.fancybox__container .milestone-item-heading {
  position: sticky;
  top: 2.25rem;
  padding-top: 1rem;
  background-color: var(--white);
  z-index: 1;
  width: 100%;
}

/* ------------------------- SCROLLBARS -------------------------- */

@media (min-width: 767px){

  .block-timeline-tabs ul.block-timeline-tabs-inner::-webkit-scrollbar,
  .block-timeline-decades-and-events::-webkit-scrollbar {
    height: .5rem;              /* height of horizontal scrollbar ← You're missing this */
    width: .5rem;               /* width of vertical scrollbar */
    /*border: .125rem solid var(--black-10);*/
  }

  /*.block-timeline-tabs ul.block-timeline-tabs-inner::-webkit-scrollbar-button,
  .block-timeline-decades-and-events::-webkit-scrollbar-button {
    border-radius: .75rem;
    background-color: var(--black-20);
  }*/

  .block-timeline-tabs ul.block-timeline-tabs-inner::-webkit-scrollbar-track,
  .block-timeline-decades-and-events::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 .325rem var(--black-20);
    border-radius: .75rem;
  }

  .block-timeline-tabs ul.block-timeline-tabs-inner::-webkit-scrollbar-thumb,
  .block-timeline-decades-and-events::-webkit-scrollbar-thumb {
    border-radius: .75rem;
    height: .5rem;              /* height of horizontal scrollbar ← You're missing this */
    width: .5rem;
    background-color: var(--black-20);
  }

}