@-webkit-keyframes myanimation {
  from {
    left: 0%;
  }
  to {
    left: 50%;
  }
}

h1 {
  text-align: center;
  font-family: 'PT Sans Caption', sans-serif;
  font-weight: 400;
  font-size: 20px;
  padding: 20px 0;
  color: #777;
}

.checkout-wrap {
  color: #444;
  font-family: 'PT Sans Caption', sans-serif;
  margin: 40px auto;
  max-width: 1200px;
  position: relative;
}

ul.checkout-bar li {
  color: #ccc;
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 20px 14px 80px;
  position: relative;
}
ul.checkout-bar li .desc {
  display: inline-block;
  height: 85px;
  width: 90%;
  
  font-size: 12px;
  font-weight: 500;
  color: #000;
}
ul .checkout-imgholder {
  height: 70px;
  display: block;
}
ul .checkout-imgholder img {
  margin-top: 35px;
  top: 50%;
  transform: translateY(-50%);
}
ul.checkout-bar li:before {
  -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
  background: #ddd;
  border: 2px solid #FFF;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  left: 20px;
  line-height: 37px;
  height: 35px;
  position: absolute;
  text-align: center;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  top: 4px;
  width: 35px;
  z-index: 999;
}

ul.checkout-bar li.active {
  color: #8bc53f;
  font-weight: bold;
}

ul.checkout-bar li.active:before {
  background: #8bc53f;
  z-index: 99999;
}

ul.checkout-bar li.visited {
  background: #ECECEC;
  color: #57aed1;
  z-index: 99999;
}

ul.checkout-bar li.visited:before {
  background: #57aed1;
  z-index: 99999;
}

ul.checkout-bar li:nth-child(1):before {
  content: "1";
}

ul.checkout-bar li:nth-child(2):before {
  content: "2";
}

ul.checkout-bar li:nth-child(3):before {
  content: "3";
}

ul.checkout-bar li:nth-child(4):before {
  content: "4";
}

ul.checkout-bar li:nth-child(5):before {
  content: "5";
}

ul.checkout-bar li:nth-child(6):before {
  content: "6";
}

ul.checkout-bar a {
  color: #57aed1;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

@media all and (min-width: 800px) {
  .checkout-bar li.active:after {
    -webkit-animation: myanimation 3s 0;
    background-size: 35px 35px;
    background-color: #8bc53f;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    content: "";
    height: 15px;
    width: 100%;
    left: 50%;
    position: absolute;
    top: -50px;
    z-index: 0;
  }
  .checkout-wrap {
    margin: 80px auto;
    margin-bottom: 220px;
  }
  ul.checkout-bar {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    background-size: 35px 35px;
    background-color: #EcEcEc;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 15px;
    height: 15px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 100%;
  }
  ul.checkout-bar:before {
    background-size: 35px 35px;
    background-color: #57aed1;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    content: " ";
    height: 15px;
    left: 0;
    position: absolute;
    width: 0%;
  }
    
  ul.checkout-bar li {
    display: inline-block;
    margin: 50px 0 0;
    padding: 0;
    text-align: center;
    width: 19%;
  }
  ul.checkout-bar li:before {
    height: 45px;
    left: 40%;
    line-height: 45px;
    position: absolute;
    top: -65px;
    width: 45px;
    z-index: 99;
  }
  ul.checkout-bar li.visited {
    background: none;
  }
  ul.checkout-bar li.visited:after {
    background-size: 35px 35px;
    background-color: #57aed1;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    content: "";
    height: 15px;
    left: 50%;
    position: absolute;
    top: -50px;
    width: 100%;
    z-index: 99;
  }
}

ul.checkout-bar.w1:before{width: 1%;}
ul.checkout-bar.w2:before{width: 2%;}
ul.checkout-bar.w3:before{width: 3%;}
ul.checkout-bar.w4:before{width: 4%;}
ul.checkout-bar.w5:before{width: 5%;}
ul.checkout-bar.w6:before{width: 6%;}
ul.checkout-bar.w7:before{width: 7%;}
ul.checkout-bar.w8:before{width: 8%;}
ul.checkout-bar.w9:before{width: 9%;}
ul.checkout-bar.w10:before{width: 10%;}
ul.checkout-bar.w11:before{width: 11%;}
ul.checkout-bar.w12:before{width: 12%;}
ul.checkout-bar.w13:before{width: 13%;}
ul.checkout-bar.w14:before{width: 14%;}
ul.checkout-bar.w15:before{width: 15%;}
ul.checkout-bar.w16:before{width: 16%;}
ul.checkout-bar.w17:before{width: 17%;}
ul.checkout-bar.w18:before{width: 18%;}
ul.checkout-bar.w19:before{width: 19%;}
ul.checkout-bar.w20:before{width: 20%;}
ul.checkout-bar.w21:before{width: 21%;}
ul.checkout-bar.w22:before{width: 22%;}
ul.checkout-bar.w23:before{width: 23%;}
ul.checkout-bar.w24:before{width: 24%;}
ul.checkout-bar.w25:before{width: 25%;}
ul.checkout-bar.w26:before{width: 26%;}
ul.checkout-bar.w27:before{width: 27%;}
ul.checkout-bar.w28:before{width: 28%;}
ul.checkout-bar.w29:before{width: 29%;}
ul.checkout-bar.w30:before{width: 30%;}
ul.checkout-bar.w31:before{width: 31%;}
ul.checkout-bar.w32:before{width: 32%;}
ul.checkout-bar.w33:before{width: 33%;}
ul.checkout-bar.w34:before{width: 34%;}
ul.checkout-bar.w35:before{width: 35%;}
ul.checkout-bar.w36:before{width: 36%;}
ul.checkout-bar.w37:before{width: 37%;}
ul.checkout-bar.w38:before{width: 38%;}
ul.checkout-bar.w39:before{width: 39%;}
ul.checkout-bar.w40:before{width: 40%;}
ul.checkout-bar.w41:before{width: 41%;}
ul.checkout-bar.w42:before{width: 42%;}
ul.checkout-bar.w43:before{width: 43%;}
ul.checkout-bar.w44:before{width: 44%;}
ul.checkout-bar.w45:before{width: 45%;}
ul.checkout-bar.w46:before{width: 46%;}
ul.checkout-bar.w47:before{width: 47%;}
ul.checkout-bar.w48:before{width: 48%;}
ul.checkout-bar.w49:before{width: 49%;}
ul.checkout-bar.w50:before{width: 50%;}
ul.checkout-bar.w51:before{width: 51%;}
ul.checkout-bar.w52:before{width: 52%;}
ul.checkout-bar.w53:before{width: 53%;}
ul.checkout-bar.w54:before{width: 54%;}
ul.checkout-bar.w55:before{width: 55%;}
ul.checkout-bar.w56:before{width: 56%;}
ul.checkout-bar.w57:before{width: 57%;}
ul.checkout-bar.w58:before{width: 58%;}
ul.checkout-bar.w59:before{width: 59%;}
ul.checkout-bar.w60:before{width: 60%;}
ul.checkout-bar.w61:before{width: 61%;}
ul.checkout-bar.w62:before{width: 62%;}
ul.checkout-bar.w63:before{width: 63%;}
ul.checkout-bar.w64:before{width: 64%;}
ul.checkout-bar.w65:before{width: 65%;}
ul.checkout-bar.w66:before{width: 66%;}
ul.checkout-bar.w67:before{width: 67%;}
ul.checkout-bar.w68:before{width: 68%;}
ul.checkout-bar.w69:before{width: 69%;}
ul.checkout-bar.w70:before{width: 70%;}
ul.checkout-bar.w71:before{width: 71%;}
ul.checkout-bar.w72:before{width: 72%;}
ul.checkout-bar.w73:before{width: 73%;}
ul.checkout-bar.w74:before{width: 74%;}
ul.checkout-bar.w75:before{width: 75%;}
ul.checkout-bar.w76:before{width: 76%;}
ul.checkout-bar.w77:before{width: 77%;}
ul.checkout-bar.w78:before{width: 78%;}
ul.checkout-bar.w79:before{width: 79%;}
ul.checkout-bar.w80:before{width: 80%;}
ul.checkout-bar.w81:before{width: 81%;}
ul.checkout-bar.w82:before{width: 82%;}
ul.checkout-bar.w83:before{width: 83%;}
ul.checkout-bar.w84:before{width: 84%;}
ul.checkout-bar.w85:before{width: 85%;}
ul.checkout-bar.w86:before{width: 86%;}
ul.checkout-bar.w87:before{width: 87%;}
ul.checkout-bar.w88:before{width: 88%;}
ul.checkout-bar.w89:before{width: 89%;}
ul.checkout-bar.w90:before{width: 90%;}
ul.checkout-bar.w91:before{width: 91%;}
ul.checkout-bar.w92:before{width: 92%;}
ul.checkout-bar.w93:before{width: 93%;}
ul.checkout-bar.w94:before{width: 94%;}
ul.checkout-bar.w95:before{width: 95%;}
ul.checkout-bar.w96:before{width: 96%;}
ul.checkout-bar.w97:before{width: 97%;}
ul.checkout-bar.w98:before{width: 98%;}
ul.checkout-bar.w99:before{width: 99%;}
ul.checkout-bar.w100:before{width: 100%;}