<div id="bar-chart">
  <div class="graph">
    <ul class="x-axis">
      <li><span>2010</span></li>
      <li><span>2012</span></li>
      <li><span>2013</span></li>
      <li><span>2014</span></li>
      <li><span>2015</span></li>
    </ul>
    <ul class="y-axis">
      <li><span>20</span></li>
      <li><span>15</span></li>
      <li><span>10</span></li>
      <li><span>5</span></li>
      <li><span>0</span></li>
    </ul>
    <div class="bars">
      <div class="bar-group">
        <div class="bar bar-1 stat-1" style="height: 51%;">      
          <span>4080</span>
        </div>
        <div class="bar bar-2 stat-2" style="height: 71%;">
          <span>5680</span>
        </div>
        <div class="bar bar-3 stat-3" style="height: 13%;">
          <span>1040</span>
        </div>
      </div>
      <div class="bar-group">
        <div class="bar bar-4 stat-1" style="height: 76%;">
          <span>6080</span>
        </div>
        <div class="bar bar-5 stat-2" style="height: 86%;">
          <span>6880</span>
        </div>
        <div class="bar bar-6 stat-3" style="height: 22%;">
          <span>1760</span>
        </div>
      </div>
      <div class="bar-group">
        <div class="bar bar-7 stat-1" style="height: 78%;">
          <span>6240</span>
        </div>
        <div class="bar bar-8 stat-2" style="height: 72%;">
          <span>5760</span>
        </div>
        <div class="bar bar-9 stat-3" style="height: 36%;">
          <span>2880</span>
        </div></div>
      <div class="bar-group">
        <div class="bar bar-10 stat-1" style="height: 44%;">
          <span>3520</span>
        </div>
        <div class="bar bar-11 stat-2" style="height: 64%;">
          <span>5120</span>
        </div>
        <div class="bar bar-12 stat-3" style="height: 59%">
          <span>4720</span>
        </div>
      </div>
      <div class="bar-group">
        <div class="bar bar-13 stat-1" style="height: 28%;">
          <span>2240</span>
        </div>
        <div class="bar bar-14 stat-2" style="height: 33%;">
          <span>2640</span>
        </div>
        <div class="bar bar-15 stat-3" style="height: 94%;">
          <span>7520</span>
        </div>
      </div>
    </div>
  </div>
</div>

// VARIABLES
$default-delay: .2s;
$bars: 15;
$graph-height: 253px;

// MIXINS

//Horizontal Bar Color Mixin 
@mixin stat-bar($color-dark, $color-light, $direction, $dir-webkit) {
  background-image: -webkit-linear-gradient($dir-webkit, $color-light 0%, $color-light 47%, $color-dark 50%, $color-dark 100%);
  background-image: linear-gradient($direction, $color-light 0%, $color-light 47%, $color-dark 50%, $color-dark 100%);
}
// Animation Mixin 
@mixin bar-animation($time, $dimension) {
  visibility: hidden;
  @if $dimension == width {
    width: 0;
    -webkit-animation: animate-width; 
    -moz-animation: animate-width;
    animation: animate-width;
  }
  @if $dimension == height {
    height: 0;
    -webkit-animation: animate-height; 
    -moz-animation: animate-height;
    animation: animate-height;
  }
  animation-timing-function: cubic-bezier(.35,.95,.67,.99);
  -webkit-animation-timing-function: cubic-bezier(.35,.95,.67,.99);
  -moz-animation-timing-function: cubic-bezier(.35,.95,.67,.99);
  animation-duration: $time*2;
  -webkit-animation-duration: $time*2;
  -moz-animation-duration: $time*2;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@-moz-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}
@-webkit-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
@-moz-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}
@keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}

//STYLES
body {
  background-color: #3b4150; 
  font-family: arial, sans-serif;
  color: #cdcdcd;
}
#bar-chart {
  height: 380px;
  width: 70%;
  position: relative;
  margin: 50px auto 0;
  * {
   box-sizing: border-box; 
  }
  .graph {
    height: 283px;
    position: relative; 
  }
  .bars {
    height: $graph-height;
    padding: 0 2%;
    position: absolute;
    width: 100%;
    z-index: 10; 
  }
  .bar-group {
    display: block;
    float: left;
    height: 100%;
    position: relative;
    width: 12%;
    margin-right: 10%;
    &:last-child {
     margin-right: 0; 
    }
    .bar {
      @include bar-animation($default-delay, height);
      box-shadow: 1px 0 2px rgba(0,0,0,.15);
      border: 1px solid #2d2d2d; 
      border-radius: 3px 3px 0 0;
      bottom: 0;
      cursor: pointer;
      height: 0;
      position: absolute;
      text-align: center;
      width: 25%; 
      &:nth-child(2) {
        left: 35%;
      }
      &:nth-child(3) {
        left: 70%;
      }
      span {
       display: none; 
      }
    }
    @for $i from 1 through 15 {
      .bar-#{$i} {
        animation-delay: $default-delay+.1*$i;
        -webkit-animation-delay: $default-delay+.1*$i;
      }
    }
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .x-axis {
    bottom: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    li {
      float: left;
      margin-right: 10.5%;
      font-size: 11px;
      width: 11.5%;
      &:last-child {
       margin-right: 0; 
      }
    }
  }
  .y-axis {
    position: absolute;
    text-align: right;
    width: 100%; 
    li {
      border-top: 1px solid #4e5464;
      display: block;
      height: $graph-height/4;
      width: 100%;
      span {
        display: block;
        font-size: 11px;
        margin: -10px 0 0 -60px;
        padding: 0 10px;
        width: 40px;  
      }
    }
  }
  .stat-1 {
    @include stat-bar(#cf3a02, #ff4500, to right, left);
  }
  .stat-2 { 
    @include stat-bar(#79a602, #b8f123, to right, left);
  }
  .stat-3 {
    @include stat-bar(#0383a9, #00c5ff, to right, left);
  }
}