.progressbar-wrapper {
    /*background: #fff;*/
	margin: 20px 0px 20px 0;
	float:left;
	width:800px;
}
.progressbar-wrapper ul{
	margin-left: -30px;
}

.progressbar li {
      list-style-type: none;
      width: 20%;
      float: left;
      font-size: 14px;
      position: relative;
      text-align: center;
      /*text-transform: uppercase;*/
      color: #959595;
}


/**/

.progressbar li:before {
    width: 30px;     /*m*/
    height: 30px;
    content: "";
    line-height: 28px;  /*m*/
    border: 2px solid #959595;
    display: block;
    text-align: center;
    margin: 0px auto 0px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.progressbar li:after {
     width: 100%;
     height: 3px;
     content: '';
     position: absolute;
     background-color: #959595;
     top: 14px; /*m*/
     left: -50%;
     z-index: 0;
}
.progressbar li:first-child:after {
     content: none;
}



/**/


.progressbar li.active {
    color: #f37f1a;
    /*background-color: #fff;*/
}
.progressbar li.active:before {
    border: 2px solid #f37f1a;
	background-color: #fff;
}

.progressbar li.active + li:after {
    background-color: #f37f1a;
}


/*
.progressbar li.active + li:after{
 background: red;
}
.progressbar li.active + li:before{
border-color: green;
background: #3aac5d;
color: white
}
*/

/**/



.progressbar li.active:before {
    /*background: #f37f1a  url(user.svg) no-repeat center center;
    background-size: 60%;*/
}
.progressbar li.full:before {
    background: #f37f1a  /* url(user.svg) */ no-repeat center center;
	color:#fff;
}
.progressbar li::before {
    background: #fff /* url(user.svg) */ no-repeat center center;
    background-size: 60%;
}



/**/



.progressbar {
    counter-reset: step;
}
.progressbar li:before {
    content: counter(step);
    counter-increment: step; 
	font-size: 16px!important;
	background-color: #e3e3e3;
}


.progressbar_cart, .progressbar_billing_info, .progressbar_receiptmethod, .progressbar_paymenttype{
	cursor:pointer;
}