.q-timeline
  padding 0
  width 100%
  list-style none
  h6
    line-height inherit

.q-timeline-title
  margin-top 0
  margin-bottom 16px

.q-timeline-subtitle
  font-size 12px
  margin-bottom 8px
  opacity .4
  text-transform uppercase
  letter-spacing 1px
  font-weight 700

.q-timeline-dot
  position absolute
  top 0
  bottom 0
  left 0
  width 15px
  &:before, &:after
    content ''
    background currentColor
    display block
    position absolute
  &:before
    border 3px solid transparent
    border-radius 100%
    height 15px
    width 15px
    top 4px
    left 0
    transition background .3s ease-in-out, border .3s ease-in-out
  &:after
    width 3px
    opacity .4
    top 24px
    bottom 0
    left 6px

.q-timeline-entry-with-icon
  .q-timeline-dot
    width 31px
    left -8px
    &:before
      height 31px
      width 31px
    &:after
      top 41px
      left 14px
    .q-icon
      position absolute
      top 8px
      left 4px
      font-size 23px
      color white
      transition color .3s ease-in-out
  .q-timeline-subtitle
    padding-top 8px

.q-timeline-dark
  color white
  .q-timeline-subtitle
    opacity .7

.q-timeline-entry
  padding-left 40px
  position relative
  line-height 22px
  &:last-child
    padding-bottom 0
    .q-timeline-dot:after
      content none
  &:hover
    .q-timeline-dot:before
      background transparent
      border 3px solid currentColor
  &.q-timeline-entry-with-icon:hover .q-timeline-dot .q-icon
    color currentColor

.q-timeline-content
  padding-bottom 24px

.q-timeline-heading
  position relative
  &:first-child .q-timeline-heading-title
    padding-top 0
  &:last-child .q-timeline-heading-title
    padding-bottom 0
.q-timeline-heading-title
  padding 32px 0
  margin 0

@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
  .q-timeline-heading
    display table-row
    font-size 200%
    > div
      display table-cell
  .q-timeline-heading-title
    margin-left -50px
  .q-timeline
    display table
  .q-timeline-entry
    display table-row
    padding 0
  .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
    display table-cell
    vertical-align top
  .q-timeline-subtitle
    text-align right
    width 35%
  .q-timeline-dot
    position relative
  .q-timeline-content
    padding-left 30px
  .q-timeline-entry-with-icon .q-timeline-content
    padding-top 8px
  .q-timeline-subtitle
    padding-right 30px

@media (min-width $breakpoint-lg-min)
  .q-timeline-heading-title
    text-align center
    margin-left 0
  .q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
    display block
    margin 0
    padding 0
  .q-timeline-dot
    position absolute
    left 50%
    margin-left -7.15px
  .q-timeline-entry-with-icon .q-timeline-dot
    left 50%
    margin-left -15px
  .q-timeline-subtitle, .q-timeline-content
    width 50%
  .q-timeline-entry-left .q-timeline-content,
  .q-timeline-entry-right .q-timeline-subtitle
    float left
    padding-right 30px
    text-align right
  .q-timeline-entry-left .q-timeline-subtitle,
  .q-timeline-entry-right .q-timeline-content
    float right
    text-align left
    padding-left 30px
  .q-timeline-entry-with-icon .q-timeline-content
    padding-top 8px
  .q-timeline-entry
    padding-bottom 24px
    overflow hidden