body {
    background: #222;
  }
  
  h4 {
    margin-top: 100px;
    font-size: 36px;
    font-weight: 300;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: #CCC;
  }
 
  .progress-container {
    z-index: -99;
    position: relative;
    margin: 50px auto 50px;
    padding: 4px 0 0;
    width: 600px;
    height: 6px;
    background: #444;
    -moz-box-shadow: inset 0 0 2px #666;
        -webkit-box-shadow: inset 0 0 2px #666;
         box-shadow: inset 0 0 2px #666;
    
    ul li {
      position: absolute;
      top: -1px;
      left: 0;
      margin: 0;
      padding: 0;
      display: inline-table;
      height: 10px;
      width: 10px;
      background: #14BFCC;
      border-radius: 50%;
      
      &:nth-child(2) {
        margin-left: 190px;
      }
      
      &:nth-child(3) {
        margin-left: 400px;
      }
      
      &:last-child {
        margin-left: 600px;
      }
      
      &:before {
        z-index: -99;
        position: absolute;
        top: -5px;
        left: -5px;
        content:'';
        height: 20px;
        width: 20px;
        background: #444;
        border-radius: 50%;
      }
    }

  }