<div class="container">
  <h3 class="text-center">Vertical Responsive Timeline</h3>
  <div class="experience">
    <div class="item">
      <h5 class="company-name">AIV Dubai</h5>
      <div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Dubai</div>
      <div class="job-info">
        <div class="title">Sales Engineer</div>
        <div>2014 - Present</div>
      </div>
      <div>
        <ul class="fa-ul">
          <li><i class="fa-li fa fa-hand-o-right"></i>Achieved 35% & 50% increase in sales from previous year in first two years</li>
          <li><i class="fa-li fa fa-hand-o-right"></i>Identified & followed up on potential inquiries after analysing the market. Handled orders from quote to cash stage</li>
          <li><i class="fa-li fa fa-hand-o-right"></i>Played an important role in moving from sales-only office to setting up the warehouse & training sales assistant</li>
        </ul>
      </div>
    </div>

    <div class="item">
      <h5 class="company-name">Pentair Middle East</h5>
      <div class="location"><i class="fa fa-map-marker" aria-hidden="true"></i>Dubai</div>
      <div class="job-info">
        <div class="title">Project Engineer</div>
        <div>2011 - 2014</div>
      </div>
      <div>
        <ul class="fa-ul">
          <li><i class="fa-li fa fa-hand-o-right"></i>Single point of contact for the customer & successfully managed many multi-million dollar oil & gas, process & power projects from leading EPCs for the supply of different types of products like valves, actuators, interlocks etc.</li>
          <li><i class="fa-li fa fa-hand-o-right"></i>Developed proper documentation procedure, project managing tools & commercial tasks tracking lists for the project management team</li>
          <li><i class="fa-li fa fa-hand-o-right"></i>Prepared, analysed & presented monthly & quarterly revenue forecast & financial reports for the team</li>
        </ul>
      </div>
    </div>
  </div>
</div>

h3 {
  margin: 20px 0;
}

.experience {
  border-left: 3px solid $primaryColor;
  padding: 0 30px;
  margin-left: 185px;
  @media (max-width: 767px) {
    margin-left: 0;
    padding-right: 0;
  }
  .item {
    position: relative;
    margin-bottom: 40px;
    &::before {
      @include round-btn(-43px, 0, 22px, 22px, $bgColor);
      border: 3px solid $primaryColor;
    }
    &::after {
      @include round-btn(-37px, 6px, 10px, 10px, $primaryColor);
    }
  }
  .company-name {
    color: $primaryColor;
  }
  .location {
    position: absolute;
    right: 0;
    top: 2px;
    .fa {
      margin-right: 8px;
    }
  }
  .job-info {
    position: absolute;
    left: -185px;
    top: 0;
    .title {
      color: $primaryColor;
    }
    @media (max-width: 767px) {
      position: static;
      margin-bottom: 1rem;
    }
  }
}