<!--    muchos disgustimos   -->
<div class="breadcrumb-pagination">
  
  <div class="completed">
    <span></span>
    <p>Items in order</p>   
  </div>

  <div class="active">
    <span>2</span>
    <p>Customer information</p>
  </div>

  <div class="todo">
    <span>3</span>
    <p>Shipping</p>
  </div>
  
</div>

/*  -- just styling for this mockup  */
body {background-color:#F8F9FB; padding: 80px 0 80px 30px;}
.clearfix {clear:both;min-height:15px;}


body {
    font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    -webkit-font-smoothing:antialiased;
    font-size:14px;
  }
  
.breadcrumb-pagination {
    width:100%;
    border-bottom:1px solid #E1E6EB;
    text-align:center;
    float:left;
    color:#B3B7C1;
  }

.breadcrumb-pagination div {
    width: 25%;
    display:inline-block;
  }
  
.breadcrumb-pagination div span {
    margin:0 auto;
    display:block;
    border-radius:100%;
    height:30px;
    width:36px;
    padding:6px 0 0 0px;
    font-size:20px;
  }  
  
.completed span {
    background-color:NONE;
    color:#95db89;
    border:2px solid #95db89;
  }
    
.active span {
    background-color:#00abc9;
    color:#fff;
  }
    
.todo span {
    background-color:none;
    color:#E1E6EB;
    border:2px solid #E1E6EB;
  }
    
.breadcrumb-pagination div p {
    text-align:center;
    line-height:0;
    margin:30px auto 25px;
  }
    
.active p {
   border-bottom:2px solid #00abc9;
   padding-bottom:27px;
   margin-bottom:0px !important;
   color: #3c4043;
   font-weight:700;
}
    
.completed p {
    color:#bsb7c1;
  }

.completed span::before { 
  content: '\2713' 
}