#progressbar {
    margin: 2em 0 30px 0;
    padding: 0;
    overflow: hidden;
    /*counter-reset: step;*/
  }
  
  #progressbar li {
    font-family: 'Roboto', Helvetica;
    list-style-type: none;
    color: #797979;
    text-transform: uppercase;
    font-size: 12px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 600;
    text-align: center;
  }
  
    #progressbar li p{
      font-family: 'Roboto', Helvetica;
      font-size: 11px;
      font-weight: 500;
      color: #797979;
      line-height: 2;
      padding: 0;
      margin: 0;
    }
  
  /*     #progressbar li:first-child:before {
          content: "\f47d";
      }
      #progressbar li:nth-child(2):before {
          content: "\f443";
  
      }
      #progressbar li:nth-child(3):before {
          content: "\f47c";
      }
      #progressbar li:last-child:before {
          content: "\f3a3";
      } */
      #progressbar li:first-child:before {
        content: " ";
      }
      #progressbar li:nth-child(2):before {
        content: " ";
  
      }
      #progressbar li:nth-child(3):before {
        content: " ";
      }
      #progressbar li:last-child:before {
        content: " ";
      }
      #progressbar li:before {
          /*content: counter(step);*/
          /*counter-increment: step;*/
          width: 40px;
          height: 40px;
          font-family: Ionicons;
          font-size: 25px;
          line-height: 40px;
          border-radius: 50%;
          border: 2px solid #797979;
          background-color: white;
          display: block;
          margin: 0 auto 5px auto;
      }
      #progressbar li:after {
          content: '';
          width: 100%;
          height: 2px;
          background-color: #797979;
          position: absolute;
          top: 20px;
          z-index: -1;
          left: -50%;
      }
      #progressbar li:first-child:after {
          content: none;
      }
  
      #progressbar li.active:before, #progressbar li.active:after, #progressbar li.active   {
          border-color: #2db36f;
          color: #2db36f;
      }
  
      #progressbar li.active + li:after{
          background-color: #2db36f;
          content: '';
      }
  
      #progressbar li.active:before {
          content: '\2713';
          background: #2db36f;
          color: #fff;
          font-weight: bold;
    }