.timeline {
  position: relative;
  min-height: 15rem;
}

.line {
  background-color: #FFFFFF;
  position: absolute;
  z-index: 2;
/*  left: calc(50% - 1px);
*/  width: 2px;
  top: -5rem;
  bottom: -5rem;
  display: none;
}

.line::before,
.line::after {
  background-color: #FFFFFF;
  position: absolute;
  display: block;
  content: "";
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}

.line::after {
  bottom: 0;
}

.section {
  display: flex;
  opacity: 0;
  transform: translateX(-100%);
  transition: 600ms ease;
  position: relative;
  z-index: 1;
  margin: 5rem 0;
  padding: 1rem;
  border-radius: 1rem;
  background-color: transparent;
  align-items: center;
/*  min-height: 30rem;
*/}

h4 {
  color: var(--color-blue);
  font-weight: 400;
}

.bead {
  position: absolute;
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  background-color: #FFFFFF;
  left: 0;
  top: 20%;
  transform: translateX(-50%);
}

.show-me:nth-child(n) {
  transform: none;
  opacity: 1;
}

h1 {
  font-weight: 400;
  letter-spacing: 1px;
}

.folio-content{
  text-align:center;
}
.folio-card{
  box-shadow: rgb(0 0 0 / 25%) 0px 14px 28px, rgb(0 0 0 / 22%) 0px 10px 10px;
}
.timeline p{
  font-size:120%;
  font-weight:400;
  margin-bottom:0;
}

/*Beads*/
#day1Bead{
  top: 292px !important;
}
#gfcShieldBead{
  top: 184px !important;
}
#landingPagesBead{
  top: 300px !important;
}
#pandemicBead{
  top: 250px !important;
}
#wordpressBead{
  top: 185px !important;
}
#craftBead{
  top: 299px !important;
}

.folio-card:hover .folio-overlay {
    opacity: 0;
    visibility: hidden !important
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /*Beads*/
  #day1Bead{
    top: 67% !important;
  }
  #gfcShieldBead{
    top: 46% !important;
  }
  #landingPagesBead{
    top: 64.5% !important;
  }
  #pandemicBead{
    top: 54.5% !important;
  }
  #wordpressBead{
    top: 51.5% !important;
  }
  #craftBead{
    top: 54% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .line {
    left: calc(50% - 1px);
  }
  .bead {
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
  }
  .section.left {
    flex-direction: row-reverse;
/*    transform: translateX(100%);
*/    // text-align: left;
  }
  .section.right {
    text-align: right;
  }
  /*.content {
    width: calc(50% - 2rem);
  }*/
  .timeline .folio-card {
    max-width:350px;
    margin-left:auto;
  }
  .right-row {
    flex-direction: row-reverse;
  }
  /*Beads*/
  #day1Bead{
    top: 22% !important;
  }
  #gfcShieldBead{
    top: 15% !important;
  }
  #landingPagesBead{
    top: 17.5% !important;
  }
  #pandemicBead{
    top: 13% !important;
  }
  #wordpressBead{
    top: 17.5% !important;
  }
  #craftBead{
    top: 13% !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /*Beads*/
  #day1Bead{
    top: 20% !important;
  }
  #gfcShieldBead{
    top: 16% !important;
  }
  #landingPagesBead{
    top: 19.5% !important;
  }
  #pandemicBead{
    top: 17% !important;
  }
  #wordpressBead{
    top: 17.5% !important;
  }
  #craftBead{
    top: 15% !important;
  }
  .folio-card:hover .folio-overlay {
    opacity: 1;
    visibility: visible !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /*Beads*/
  #day1Bead{
    top: 17% !important;
  }
  #gfcShieldBead{
    top: 20% !important;
  }
  #landingPagesBead{
    top: 16.5% !important;
  }
  #pandemicBead{
    top: 18% !important;
  }
  #wordpressBead{
    top: 23% !important;
  }
  #craftBead{
    top: 16.5% !important;
  }
}