<section>
  <div class="container">
    <h1 class="text-center">From Start to Finish with ACME Software</h1>
    <div class="timeline flex-container">

      <div class="timeline-item flex-items-default selected">
        <div class="timeline-content text-left animated bounceIn">
          <h2>Explore</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
          <div class="hexagon"></div>
          <i class="material-icons">explore</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>Plan</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
          <div class="hexagon"></div>
          <i class="material-icons">border_style</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>Production</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
          <div class="hexagon"></div>
          <i class="material-icons">format_shapes</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>Review</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
          <div class="hexagon"></div>
          <i class="material-icons">rate_review</i>
        </div>
      </div>
      <div class="timeline-item flex-items-default">
        <div class="timeline-content text-left">
          <h2>Ship</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident eveniet nulla amet, sapiente voluptatum praesentium.</p>
          <div class="hexagon"></div>
          <i class="material-icons">important_devices</i>
        </div>
      </div>

      <div class="dropdown animated bounceIn" style="left: -88px;">
        <div class="inner">
          <div class="arrow-down"></div>
        </div>
      </div>

    </div>
  </div>
</section>

$white: rgba(255, 255, 255, 1);
$black: rgba(38, 38, 38, 1);
$lightGray: rgba(245, 239, 237, 1);
$gray: rgba(213, 223, 229, 1);
$lightBlue: rgba(86, 203, 249, 1);
$blue: rgba(28, 119, 195, 1);

body {
  background-color: $lightGray;
}

section {
  height: 600px;
  background-image: linear-gradient(to bottom, rgba(0, 121, 193, 0.75) 0%, rgba(70, 93, 255, 0.75) 100%), url(http://bluebeam.com/uk/bluebeamchallenge/_assets/bg-hero.jpg);
  
  h1 {
    margin-top: 50px;
    margin-bottom: 350px;
    color: $white;
  }
  
}

p { 
  font-family: 'Source Sans Pro', sans-serif; 
  font-size: 18px;
}

h2 {
  font-family: 'Roboto', sans-serif;
}

.timeline {
  width: 100%;
  position: relative;
  perspective: 5000px;
  
  &:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 15px;
    background-color: $gray;
    border-radius: 15px;
    top: 76px;
  }
  
  .timeline-item {
    text-align: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    
    &:hover {
      
      &:after {
        transform: scale(1.5, 1.5);
      }
      
    }
    
    &.selected {
      
      &:after {
        background-color: $blue;
        border: 5px solid $lightBlue;
        transform: scale(1.5, 1.5);
      }
      
    }
    
    &:after {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 69px;
      left: 50%;
      margin-left: -15px;
      background-color: $lightGray;
      border: 5px solid $gray;
      content: "";
      border-radius: 50%;
      transition: transform .5s ease;
    }
    .timeline-content {
      position: absolute;
      top: -300px;
      display: none;
      width: 350px;
      left: -60px;
      cursor: auto;
      &.fadeIn {
        animation-delay: .2s;
      }
      &.animated {
        display: block;
      }
    }
  }
  
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.flex-items-default {
  width: 224px;
  height: 150px;
}

.dropdown {
  width: 400px;
  height: 326px;
  background: $white;
  box-shadow: 0 3px 20px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: absolute;
  top: -310px;
  // display: none;
  animation-duration: .2s;
  transition: left .3s ease;
  
  .inner {
    position: relative;
    width: 100%;
    height: 326px;
    
    .arrow-down {
      position: absolute;
      bottom: -19px;
      left: 50%;
      margin-left: -20px;
    }
    
  }
  
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid $white;
}

.animated {
  display: block;
}

.material-icons {
  position: absolute;
  top: 189px;
  left: 160px;
  width: 100%;
  color: $white;
  font-size: 33px;
}

.hexagon {
  position: relative;
  width: 75px; 
  height: 43.30px;
  background-color: $blue;
  margin: 21.65px 0;
  left: 50%;
  margin-left: -37px;
  top: 25px;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 37.5px solid transparent;
  border-right: 37.5px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 21.65px solid $blue;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 21.65px solid $blue;
}

// Globals
var prefixes         = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var $container       = $('.container');
var $timeline        = $('.timeline');
var $timelineItem    = $('.timeline-item');
var $timelineContent = $('.timeline-content');
var $dropDown        = $('.dropdown');
var $hasHovered      = true;
var hideOnExit       = false;

// mouseenter event handler
$timelineItem.on('mouseenter', function(e) {
  
  var isSelected = $(this).hasClass('selected');
  
  if ( isSelected === false ) {
  
    var leftPos = $(this).position().left,
        left    = leftPos - 88,
        $that   = $(this);

    $timelineItem.removeClass('selected');
    $(this).addClass('selected');

    if ( $hasHovered === false ) {
      // Show Bounce

        // Set Flag
        $hasHovered = true;

        // Show DD Bounce
        showBounce(left);

        // Show DD content Bounce
        showContentBounce($that);

    } else {
      // Follow

        // Change pos of DD to follow
        dropDownFollow(left);

        // Hide previous dd content
        $timelineContent.removeClass('animated fadeIn bounceIn');

        // Show hovered dd content
        $that.find($timelineContent).addClass('animated fadeIn');
    }
  }
  
});

// mouseleave event handler
$timeline.on('mouseleave', function(e) {
  
  if (hideOnExit) {
   
    //   Set Flag
    $hasHovered = false;

    // Hide DD
    hideDropDown();

    // Hide DD content
    $timelineContent.removeClass('animated fadeIn');
    
  }
  
});

// Animation end event listener
$dropDown.on(prefixes, function(e) {
  
  if ( e.originalEvent.animationName === 'fadeOut' ) {
    $dropDown.removeAttr('style');
  }
  
});

/**
* Private functions that do showing/hiding/animating
*/
function showContentBounce(that) {
  $hasBounced = true;
  that.find('.timeline-content').addClass('animated bounceIn');
}

function showBounce(pos) {
  $dropDown.css('left', pos + 'px').removeClass('fadeOut').addClass('animated bounceIn');
}

function dropDownFollow(pos) {
  $dropDown.css('left', pos + 'px');
}

function hideDropDown() {
  $timelineItem.removeClass('selected');
  $dropDown.removeClass('bounceIn').addClass('fadeOut');
}