<header>
  <div class="logo-holder">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path data-name="Yellow BG" fill="#ffcc00" d="M0 0h100v100H0z"/>
    <path d="M33.5 21.8L9.1 74.7h11.8l4.6-10H37v10h10.2V21.8H33.5zm-3 32.3L37 40v14.1h-6.5z" fill="#231f20"/>
    <path data-name="A" d="M71.1 21.8L46.7 74.7h11.8l4.6-10h11.4v10h10.2V21.8H71.1zM68 54.1L74.5 40v14.1H68z" fill="#231f20"/>
  </svg>
  </div>
  <div id="progress">
  <ul>
    <li>
      <a href="#" class="btn active" tabindex="0">
        You and your car
        <svg class="icon-validation-valid" data-name="Tick Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 358">
          <title>Tick icon</title>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="52" d="M26 179l153 153L486 26"></path>
        </svg>
      </a>
      <div class="joiner-line"></div>
    </li>
    <li>
      <a href="#" class="btn" tabindex="0">
        Your quote
        <svg class="icon-validation-valid" data-name="Tick Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 358">
          <title>Tick icon</title>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="52" d="M26 179l153 153L486 26"></path>
        </svg>
      </a>
      <div class="joiner-line"></div>
    </li>
    <li>
      <a href="#" class="btn" tabindex="0">
        Your payment
        <svg class="icon-validation-valid" data-name="Tick Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 358">
          <title>Tick icon</title>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="52" d="M26 179l153 153L486 26"></path>
        </svg>
      </a>
      <div class="joiner-line"></div>
    </li>
    <li>
      <a href="#" class="btn done" tabindex="0">
        Done
        <svg class="icon-validation-valid" data-name="Tick Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 358">
          <title>Tick icon</title>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="52" d="M26 179l153 153L486 26"></path>
        </svg>
      </a>
      <div class="joiner-line"></div>
    </li>
  </ul>
</div>
</header>

body {
  flex-flow: row nowrap;
  justify-content: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

header {
  flex: 0 0;
  flex-basis: auto;
  max-width: 960px;
  width: 100%;
  display: flex;
  background: $color-brand;
  z-index: -3;
}

.logo-holder {
  flex: 0 0;
  flex-basis: auto;
  background-color: $color-brand;
  width: 7rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  @media screen and (max-width: 720px) {
    display: none;
  }
  & svg {
    width: 4rem;
    height: 4rem;
  }
}

#progress {
  flex: 1 1;
  flex-basis: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  z-index: -1;
  overflow: hidden;
  & ul {
    flex: 0 0;
    flex-basis: auto;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.75rem;
    padding: 0rem 0.5rem;
    display: flex;
    flex-flow: row nowrap;
    @media screen and (max-width: 720px) {
      flex-flow: column nowrap;
    }
    & li {
      flex: 1 1;
      flex-basis: auto;
      width: calc(100% - 2rem);
      box-sizing: border-box;
      margin: 1rem;
      position: relative;
      & a {
        position: absolute;
        flex: 0 0;
        flex-basis: auto;
        width: 100%;
        font-size: 0.75rem;
        line-height: 16px;
        padding: 0rem 0.5rem;
        box-sizing: border-box;
        background-color: $color-dark-med-gray;
        display: flex;
        align-content: center;
        align-items: center;
        color: white;
        z-index: 2;
        position: relative;
        transform: translateY(0px);
        &:hover {
          cursor: pointer;
          background-color: lighten($color-dark-med-gray, 5%);
          transform: translateY(0px);
        }
        &:focus {
          box-shadow: inset 0px 0px 1px 1px $color-dark-med-gray, 0px 4px 4px 0px rgba(27, 25, 24, 0.1);
          transform: translateY(-2px);
        }
        &:active {
          box-shadow: inset 0px 0px 1px 1px $color-dark-med-gray;
          transform: translateY(2px);
        }
        & svg {
          flex: 0 0;
          flex-basis: auto;
          padding: 0rem;
          width: 0rem;
          height: 1rem;
          stroke: white;
          fill: none;
          transform: scale(0);
          transition: $transition-med;
        }
      }
      & .joiner-line {
        display: flex;
        background-color: $color-light-gray;
        width: 2rem;
        height: 2px;
        position: absolute;
        transition: all ease 0.5s;
        top: 50%;
        margin-top: -1px;
        left: -32px;
        opacity: 0.5;
        @media screen and (max-width: 720px) {
          width: 2px;
          height: 2rem;
          top: -32px;
          left: 50%;
          margin-left: -1px;
        }
      }
      & .complete {
        background-color: $color-primary;
        opacity: 1;
        &:hover {
          background-color: lighten($color-primary, 5%);
        }
        &~.joiner-line {
          background-color: $color-primary-shadow;
          opacity: 1;
        }
        & svg {
          width: 1rem;
          padding-left: 0.5rem;
          fill: none;
          stroke: white;
          transform: scale(1);
          transition: $transition-med;
          transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
        }
      }
      & .active {
        opacity: 1;
        &~.joiner-line {
          opacity: 1;
        }
      }
    }
  }
}

.btn {
  opacity: 0.3;
}

  $("#progress a").click(function() {
    var $this = $(this)
    $this.parent('li').siblings('li').children('a').removeClass('active');
    $this.parent('li').siblings('li').children('a').removeClass('complete');
    $this.addClass('active');
    $this.parent('li').prevAll('li').children('a').addClass('complete');
    if ($this.hasClass('complete')) {
      $this.parent('li').siblings('li').children('a').removeClass('active');
      $this.parent('li').siblings('li').children('a').removeClass('complete');
      $this.removeClass('complete');
      $this.addClass('active');
      $this.parent('li').prevAll('li').children('a').addClass('complete');
    }
    if ($this.hasClass('active')) {
      nothing
    }
  });