.progress-bar {
  position: relative;
  border-top: 4px solid $colour-blue;
  background-color: #00BEC9; 

  @include breakpoint($screen-md) {    
    .progress-bar__steps-1 li {
      width: 100%;
    }
  
    .progress-bar__steps-2 li {
      width: 50%;
    }
  
    .progress-bar__steps-3 li {
      width: 33.3%;
    }
  
    .progress-bar__steps-4 li {
      width: 25%;
    }
  
    .progress-bar__steps-5 li {
      width: 20%;
    }
  }

  ul {
    overflow: hidden; 
  }

  li {
    display: none;
    margin-bottom: 0px; 

    @include breakpoint($screen-md) {
      height: 120px;
      display: block;
      float: left;
    }

    &.progress-bar--active {
      display: block;
      background-color: #009DB1;
      font-family: 'GT-Walsheim-Medium';

      .progress-bar__title {
        @include breakpoint($screen-md) {
          background: transparent url($image-path + "navbar-sprite.png") right 5px no-repeat;
          margin-left: 25px;
          padding-right: 25px;
        }
      }
    }
    
    &.progress-bar--done {
      display: none;
      
      @include breakpoint($screen-md) {
        display: block;
      }
      .progress-bar__title {
        @include breakpoint($screen-md) {
          background: transparent url($image-path + "navbar-sprite.png") right 5px no-repeat;
          margin-left: 25px;
          padding-right: 25px;
        }
      }
    }
  }
}

.progress-bar--active {
  @include breakpoint($screen-md) {
    background: rgb(51, 51, 51);
    background: rgba(51, 51, 51, 0.25);
  }
}

.progress-bar__inner {
  @include container; 
  margin: 0px auto;
  max-width: 1200px;
}

.progress-bar__back-link {
  background: transparent url($image-path + "navbar-sprite.png") 0 -77px no-repeat;
  position: absolute;
  top: 16px;
  left: 10px;
  text-indent: -9999px;
  height: 20px;
  width: 40px;

  @include breakpoint($screen-md) {
    display: none;
  }
}

.progress-bar__step-link {
  color: $colour-white;
  display: block;
  height: 100%;
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 15px 0;

  @include breakpoint($screen-md) {
    padding: 25px 0;
  }
}

.progress-bar__step {
  @include breakpoint($screen-md) {
    display: none;
  }
}