#timeline{
  display: flex;
  justify-content: space-between;
  margin: 1.8rem 0;

  a{
    @include relative-font-size(0.900);
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 140px;
    box-sizing: border-box;
    height: 140px;
    color: $brand-color;
    border:8px solid $brand-color;
    font-weight: 700;
    border-radius: 50%;

    .startdate{
      font-style: italic;
      @include relative-font-size(0.750);
    }

    i{
      display: none;
    }

    &:hover{
      i{
        display: inline;
        color: $hoou_blue;
      }
      span{
        display: none;
      }
      border-color: $hoou_blue;
    }

    .lawSymbol{
      font-size: 4.5rem;
      font-style: normal;
      font-weight: 700;
    }

    .startdate{
      display: none;
    }

    &[href="#"]{
      pointer-events: none;
      cursor: default;
      color: $brand-color;
      background-color: lighten($hoou_blue, 53%);
      border-color: lighten($hoou_blue, 53%);

      .startdate{
        display: inline;
      }
    }
  }

  @include media-query($on-laptop) {
    flex-wrap: wrap;
    a{
      margin-bottom: 1rem;
    }
  }

  @include media-query($on-palm) {
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;

    a{
      margin: 1rem;
    }
  }
}