.checkout-progress-panel {width:100%; text-align:center;}
.checkout-progress {
  list-style: none;
  overflow: hidden;
  font-size: 11pt;
  height:26px;
  display: inline-block;
  margin: 20px auto;
  padding: 0 40px 0 0;
}
.checkout-progress li {
  float: left;list-style: none;
}
.checkout-progress li a {
  color: white;
  font-size: 10pt;
  font-weight:700;
  text-decoration: none;
  text-transform: uppercase;
  transition:none;
  padding: 5px 10px 5px 75px;
  background: #ADADAD;
  position: relative;
  display: block;
  float: left;
}

.checkout-progress li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #ADADAD;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.checkout-progress li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 10px;
  left: 100%;
  z-index: 1;
}

.checkout-progress li:first-child a {
  padding-left: 30px;
}

.checkout-progress li a.active {background:#383838;}
.checkout-progress li a.active:after {border-left-color: #383838;}

.checkout-progress li a:hover {
  /*background:#9E009E;*/
}
.checkout-progress li a:hover:after {
  /*border-left-color: #9E009E !important;*/
}

/* Small devices and phones */
@media only screen and (max-width: 767px) and (min-width: 100px) {
 .checkout-progress {padding:0 10px;margin:10px 0 0 0;}
 .checkout-progress li {font-size:10pt;padding:0 2px 0 0;}
 .checkout-progress li a{font-size:10pt;padding:5px 5px 5px 10px;}
 .checkout-progress li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 5px solid #ADADAD;
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 100%;
  z-index: 2;
 }

.checkout-progress li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 5px solid #ffffff;
  position: absolute;
  top: 50%;
  margin-top: -16px;
  margin-left: 2px;
  left: 100%;
  z-index: 1;
 }
 .checkout-progress li:first-child a {padding-left: 5px;}
}

/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
 .checkout-progress {padding:0 10px;margin:10px 0 0 0;}
 .checkout-progress li {font-size:10pt;padding:0 2px 0 0;}
 .checkout-progress li a{font-size:10pt;padding:5px 5px 5px 8px;}
 .checkout-progress li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 5px solid #ADADAD;
  position: absolute;
  top: 50%;
  margin-top: -16px;
  left: 100%;
  z-index: 2;
 }

.checkout-progress li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 5px solid #ffffff;
  position: absolute;
  top: 50%;
  margin-top: -16px;
  margin-left: 2px;
  left: 100%;
  z-index: 1;
 }
 .checkout-progress li:first-child a {padding-left: 5px;}
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
 .checkout-progress {padding:0 40px 0 0;margin:10px 0 0 0;}
 .checkout-progress li {font-size:10pt;padding:0 2px 0 0;}
 .checkout-progress li a{font-size:10pt;padding: 5px 10px 5px 75px; }
.checkout-progress li a::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid #ADADAD;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index: 2;
}

.checkout-progress li a::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  margin-left: 10px;
  left: 100%;
  z-index: 1;
}

.checkout-progress li:first-child a {
  padding-left: 30px;
}
}