div.multi-step {  
  display: table;  width: 100%;  
  font-size: 1em;  border-radius: 0.75em;  
  overflow: hidden;  
  box-shadow: 0 0.125em 0.5em rgba(0,0,0,0.08);  
  background: #fff;
  max-width: 100%;
  box-sizing: border-box;
}

div.multi-step ol {
  counter-reset: li;  
  display: table-row;  
  margin: 0;  
  padding: 0;
}

div.multi-step ol > li {  
  display: table-cell;  
  list-style: none;  
  padding: 0;  
  position: relative;  
  color: #333;  
  transition: background 0.3s, color 0.3s;
  vertical-align: middle;

}

div.multi-step ol > li.current {  
  background: #ff6f00;  
  color: #fff;  
  font-weight: 600;
}

div.multi-step ol > li .wrap { 
  display: inline-block;
  min-height: 1.25em;  
  padding: 0.75em 0.75em 0.75em 3em;  
  vertical-align: middle;
}

div.multi-step ol > li .wrap:before {
  content: counter(li);  
  counter-increment: li;  
  position: absolute;  
  top: 50%;  
  left: 1em;  
  transform: translateY(-50%);  
  border: 0.125em solid currentColor;  
  border-radius: 50%;  
  width: 1.625em;  
  height: 1.625em;  
  line-height: 1.5em;  
  font-size: 0.85em;  
  font-weight: bold;  
  text-align: center;  
  background: #444c64 !important;  
  color: inherit;
}

div.multi-step ol > li.current .wrap:before { 
  background: #fff !important;  
  color: #ff4a4a; /* highlight number inside circle */  
  border-color: #fff;
}

div.multi-step ol > li p {
  margin: 0 !important;
}

div.multi-step ol > li .title { 
  font-weight: 600;  
  line-height: 1.2;
}

div.multi-step ol > li .subtitle {  
  font-size: 0.8em;  
  opacity: 0.8;  
  margin-top: 0.3em;
}

div.multi-step ol > li.current .title {
  color: #ff3030 !important;
}

div.multi-step ol > li .title {	
  color: #657dc7 !important;
}


@media (max-width: 768px) {
  div.multi-step ol {
    display: block; 
  }
  div.multi-step ol > li {
    display: block;
    width: 100%;
  }
  div.multi-step ol > li .wrap {
    padding-left: 2.5em;
    display: block;
  }
}