<div id="timeline">
  <div id="life">
    <section class="year" style="left: 0.00px">2006</section>
    <section class="year" style="left: 50.69px">2007</section>
    <section class="year" style="left: 101.39px">2008</section>
    <section class="year" style="left: 152.22px">2009</section>
    <section class="year" style="left: 202.92px">2010</section>
    <section class="year" style="left: 253.61px">2011</section>
    <section class="year" style="left: 304.31px">2012</section>
    <section class="year" style="left: 355.14px">2013</section>
    <section class="year" style="left: 405.83px">2014</section>
    <section class="year" style="left: 456.53px">2015</section>
    <section class="year" style="left: 507.22px">2016</section>
    <section class="year" style="left: 558.06px">2017</section>
    <section class="year" style="left: 608.75px">2018</section>
    <section class="year" style="left: 659.44px">2019</section>
    <section class="year" style="left: 710.14px">2020</section>
    <div class="event education" style="margin-left: 0">
      <div class="time" style="width: 274.44px"></div>
      <b>2006-03/2010</b><a href="http://www.ftn.kg.ac.rs/">Faculty of Technical Sciences</a> (Engineering Management)
    </div>
    <div class="event" style="margin-left: 0px">
      <div class="time" style="width: 280px"></div>
      <b>2006-12/2011</b> Ultiva Records (Founder and CEO)
    </div>
    <div class="event" style="margin-left: 340px">
      <div class="time" style="width: 50px"></div>
      <b>03/2012-08/2013</b><a href="http://www.winwin.rs/">WinWin Shop</a> (Sales Executive)
    </div>
    <div class="event" style="margin-left: 390px">
      <div class="time" style="width: 55px"></div>
      <b>08/2013 - 11/2014</b><a href="http://www.winwin.rs/">WinWin Shop</a> (Marketing Manager)
    </div>
    <div class="event working" style="margin-left: 450px">
      <div class="time" style="width: 70px"></div>
      <b>02/2014 - </b><a href="http://www.winwin.rs/">WinWin Shop</a> (Front End Developer)
    </div>
  </div>
</div>

$bg-color: #1E1E20;
$link-color: #DC3522;
$work-color: #B64926;
$edu-color: #FFB03B;

html {
  font-size: 100%;
  overflow-y: scroll;
}

body {
  margin: 0;
  font-size: 14px;
  line-height: 1.61;
  font-weight: 400;
  font-family: 'Open Sans',sans-serif;
  color: #D9CB9E;
  background-color: #1E1E20;
}

a {
  color: $link-color;

  &:hover,
  &:active {
    color: darken($link-color, 10%);
    outline: 0
  }
}



#timeline {
    background-color: $bg-color;
    font-size: .9em;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
    overflow: hidden;
    transition: all 1s;
}

#life {
  border-top: 1px solid #468966;
  position: relative;
  overflow-y: hidden;
  padding-top: 40px;
  padding-bottom: 1em;

  .event {
    padding-right: 20px;
    padding-bottom: 10px;
    vertical-align: middle;
    white-space: nowrap;

    b {
        padding-right: .5em;
    }

    .time {
      display: inline-block;
      overflow: hidden;
      height: 100%;
      border: 4px solid #444;
      border-radius: 4px;
      margin-right: 10px;
      opacity: .5;
      position: relative;
      left: -2px;
      }
    }
  }

#life section.year {
    min-height: 100%;
    box-sizing: border-box;
    border-left: 1px dashed lighten($bg-color,10%);
    color: #777;
    position: absolute;
    top: 0;
    bottom: 0;
    padding-left: 10px;
    padding-top: 10px;
    pointer-events: none;
    white-space: nowrap;
}

#life {
   .working .time {
    border: 4px solid $work-color;
  }

  .education .time {
    border: 4px solid $edu-color;
  }

  .event:hover .time {
    opacity: .8;
  }
}

// --