.draftaday_animation {
  height: 30em;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.draftaday_animation .event {
  background-color: white;
  /* Anchor the “drawing” at top-left */
  transform-origin: top left;
  /* Start completely collapsed */
  transform: scale(0, 0);
  /* Run the draw animation */
  animation: drawIn 1s ease-out forwards;
  position: absolute;

  border: 4px solid #000;
  border-radius: 4px;
  box-sizing: border-box;
  padding:10px;
  text-align: center;

}

.draftaday_animation .event .inside {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  animation: fadeIn 0.3s ease-in forwards;
  opacity: 0;
}

/* Stagger the three rectangles */
.draftaday_animation .event.one { /* purple */
  animation-delay: 0s;
  top: 15%;
  left: 5%;
  width: 45%;
  height: 25%;
  background-color: #bc78c8;
}
.draftaday_animation .event.one .inside {
  animation-delay: 0.8s;
}

.draftaday_animation .event.two {  /* orange */
  animation-delay: 0.7s;
  top: 23%;
  left: 60%;
  width: 25%;
  height: 52%;
  background-color: #FF5722;
  
}
.draftaday_animation .event.two .inside {
  animation-delay: 1.6s;
}

.draftaday_animation .event.three {  /* import (middle) */
  animation-delay: 1.7s;
  top: 52%;
  left: 38%;
  width: 20%;
  height: 15%;
}
.draftaday_animation .event.three .inside {
  animation-delay: 2.6s;
}

.draftaday_animation .event.four {  /* checkable (left) */
  animation-delay: 2.7s;
  top: 58%;
  left: 7%;
  width: 29%;
  height: 23%;
}
.draftaday_animation .event.four .inside {
  animation-delay: 3.6s;
}

    .draftaday_animation .event.four span {
        padding-right: 10px;
        padding-left: 5px;
    }

.draftaday_animation .event.five {  /* pin (lower left) */
  animation-delay: 3.7s;
  top: 73%;
  left: 33%;
  width: 25%;
  height: 13%;
}
.draftaday_animation .event.five .inside {
  animation-delay: 4.6s;
}

/* Keyframe: scale from 0→1 */
@keyframes drawIn {
  to {
    transform: scale(1, 1);
  }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.draftaday_animation .line {
  position: absolute;
  left: 0;
  width: 88%;
  height: 4px;
  background-color: black;
}
.draftaday_animation .line:nth-child(1) { top: 10%; }
.draftaday_animation .line:nth-child(2) { top: 30%; }
.draftaday_animation .line:nth-child(3) { top: 50%; }
.draftaday_animation .line:nth-child(4) { top: 70%; }
.draftaday_animation .line:nth-child(5) { top: 90%; }

.draftaday_animation .hour {
  position: absolute;
  left: 90%;
  margin-top:-9px;
  font-weight: bold;
}
.draftaday_animation .hour:nth-child(6) { top: 10%; }
.draftaday_animation .hour:nth-child(7) { top: 30%; }
.draftaday_animation .hour:nth-child(8) { top: 50%; }
.draftaday_animation .hour:nth-child(9) { top: 70%; }
.draftaday_animation .hour:nth-child(10) { top: 90%; }

.draftaday_animation .line.afterHour {
  left: 94%;
  width: 6%;
}
.draftaday_animation .afterHour:nth-child(11) { top: 10%; }
.draftaday_animation .afterHour:nth-child(12) { top: 30%; }
.draftaday_animation .afterHour:nth-child(13) { top: 50%; }
.draftaday_animation .afterHour:nth-child(14) { top: 70%; }
.draftaday_animation .afterHour:nth-child(15) { top: 90%; }

@keyframes moveDivider {
  from {
    background-size: 100% 200px;
  }
  to {
    background-size: 100% 650px;
  }
}

.column.software {
  background: linear-gradient(to bottom, #F57F17 50%, #FFCA28 50%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  animation: moveDivider 16s forwards;
}



@media only screen and (max-width: 678px) {

    .draftaday_animation {
        height:  40em;
    }

    .column.software {
        background: none;
        filter: none;
    }

    .draftaday_animation .event .inside {
        font-size: 0.8em;
    }

}