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

  to {
    left: 50%;
  }
}

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

.spotlight_banner {display:none;}

/* 2 Steps
================================================== */

ul.checkout-bar4 {
  margin: 0 20px;
}
ul.checkout-bar4 li {
  color: #ccc;
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 20px 14px 80px;
  position: relative;
}
ul.checkout-bar4 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-bar4 li.active {
  color: #46ce27;
  font-weight: bold;
}
ul.checkout-bar4 li.active:before {
  background: #46ce27;
  z-index: 9999;
}
ul.checkout-bar4 li.visited {
  color: #57aed1;
  z-index: 9999;
}
ul.checkout-bar4 li.visited:before {
  background: #57aed1;
  z-index: 9999;
}
ul.checkout-bar4 li:nth-child(1):before {
  content: "1";
}
ul.checkout-bar4 li:nth-child(2):before {
  content: "2";
}
ul.checkout-bar4 li:nth-child(3):before {
  content: "3";
}
ul.checkout-bar4 li:nth-child(4):before {
  content: "4";
}
ul.checkout-bar4 li:nth-child(5):before {
  content: "5";
}
ul.checkout-bar4 li:nth-child(6):before {
  content: "6";
}
ul.checkout-bar4 a {
  color: #57aed1;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* 3 Steps
================================================== */

ul.checkout-bar {
  margin: 0 20px;
}
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: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: #46ce27;
  font-weight: bold;
}
ul.checkout-bar li.active:before {
  background: #46ce27;
  z-index: 9999;
}
ul.checkout-bar li.visited {
  color: #46ce27;
  z-index: 9999;
}
ul.checkout-bar li.visited:before {
  background: #46ce27;
  z-index: 9999;
}
ul.checkout-bar li:nth-child(1):before {
  content: "1";
  display: block;
}
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;
}

/* 4 Steps
================================================== */

ul.checkout-bar4 {
  margin: 0 20px;
}
ul.checkout-bar4 li {
  color: #ccc;
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 20px 14px 80px;
  position: relative;
}
ul.checkout-bar4 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-bar4 li.active {
  color: #ec9229;
  font-weight: bold;
}
ul.checkout-bar4 li.active:before {
  background: #46ce27;
  z-index: 9999;
}
ul.checkout-bar4 li.visited {
  color: #46ce27;
  z-index: 9999;
}
ul.checkout-bar4 li.visited:before {
  background: #46ce27;
  z-index: 9999;
}
ul.checkout-bar4 li:nth-child(1):before {
  content: "1";
}
ul.checkout-bar4 li:nth-child(2):before {
  content: "2";
}
ul.checkout-bar4 li:nth-child(3):before {
  content: "3";
}
ul.checkout-bar4 li:nth-child(4):before {
  content: "4";
}
ul.checkout-bar4 li:nth-child(5):before {
  content: "5";
}
ul.checkout-bar4 li:nth-child(6):before {
  content: "6";
}
ul.checkout-bar4 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: 8px;
    width: 100%;
    left: 50%;
    position: absolute;
    top: -50px;
    z-index: 0;
	border-radius:15px;
  }*/

  .checkout-wrap {
	margin: 20px 0 90px 10px;
	padding-bottom: 1px;
  }
  
	/* 2 Steps
	================================================== */

  ul.checkout-bar2 {
    -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: 8px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width:45%;
  }
  ul.checkout-bar2: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: 8px;
    left: 0;
    position: absolute;
    width: 20%;
  }
  ul.checkout-bar2 li {
    display: inline-block;
    margin: 50px 0 0;
    padding: 0;
    text-align: center;
    width: 47%;
  }
  ul.checkout-bar2 li:before {
    height: 35px;
    left: 40%;
    line-height: 38px;
    position: absolute;
    top: -65px;
    width: 35px;
    z-index: 99;
  }
  ul.checkout-bar2 li.visited {
    background: none;
  }
  ul.checkout-bar2 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: 8px;
    left: 50%;
    position: absolute;
    top: -50px;
    width: 100%;
    z-index: 99;
  }
  
	/* 3 Steps
	================================================== */

  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: 8px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 68%;
  }
  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: 8px;
    left: 0;
    position: absolute;
    width: 15%;
  }
  ul.checkout-bar li {
    display: inline-block;
    margin: 50px 0 0;
    padding: 0;
    text-align: center;
    width: 32%;
  }
  ul.checkout-bar li:before {
    height: 35px;
    left: 40%;
    line-height: 38px;
    position: absolute;
    top: -65px;
    width: 35px;
    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: 8px;
    left: 50%;
    position: absolute;
    top: -50px;
    width: 100%;
    z-index: 99;
  }
  
	  /* 4 Steps
	================================================== */

  ul.checkout-bar4 {
    -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: 8px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    width: 100%;
  }
  ul.checkout-bar4:before {
    background-size: 35px 35px;
    /*background-color: grey;*/
    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: 8px;
    left: 0;
    position: absolute;
    width: 15%;
  }
  ul.checkout-bar4 li {
    display: inline-block;
    margin: 35px 0 0 18px;
    padding: 0;
    text-align: center;
    width: 29%;
  }
  ul.checkout-bar4 li:before {
    height: 35px;
    left: 38%;
    line-height: 38px;
    position: absolute;
    top: -52px;
    width: 35px;
    z-index: 99;
  }
  ul.checkout-bar4 li.visited {
    background: none;
  }
  ul.checkout-bar4 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: 8px;
    left: 50%;
    position: absolute;
    top: -35px;
    width: 100%;
    z-index: 99;
  }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
	/* 2 Steps
	================================================== */

	ul.checkout-bar2 li {
			padding:0px;
			margin-bottom:30px;
		}		
		
	/* 3 Steps
	================================================== */

	ul.checkout-bar li {
			padding:0px;
			margin-bottom:30px;
		}
		
	/* 4 Steps
	================================================== */

	ul.checkout-bar4 li {
			padding:0px;
			margin-bottom:30px;
		}
		

		}
		
@media only screen and (min-width: 768px) and (max-width: 799px) {
	
	/* 2 Steps
	================================================== */
	ul.checkout-bar2 {
	margin: 0px 10px;
	}
	ul.checkout-bar2 li {
			padding:0px;
		}
		
	ul.checkout-bar2 li:before {
			width: 45px;
			height: 45px;
			line-height: 47px;
			top: -15px;
			left: 40px;
		}

	ul.checkout-bar2 li.active span {
	  display:block;
	  font-size:17px;	 
	 }		
	 
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		font-weight: bold;
	}
	
	/* 3 Steps
	================================================== */
	ul.checkout-bar {
	margin: 0px 10px;
	}
	ul.checkout-bar li {
			padding:0px;
		}
		
	ul.checkout-bar li:before {
			width: 45px;
			height: 45px;
			line-height: 47px;
			top: -15px;
			left: 40px;
		}

	ul.checkout-bar li.active span {
	  display:block;
	  font-size:17px;	 
	 }		
	 
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		font-weight: bold;
	}
	
	/* 4 Steps
	================================================== */
	ul.checkout-bar4 {
	margin: 0px 10px;
	}
	ul.checkout-bar4 li {
			padding:0px;
		}
		
	ul.checkout-bar4 li:before {
			width: 45px;
			height: 45px;
			line-height: 47px;
			top: -15px;
			left: 40px;
		}

	ul.checkout-bar4 li.active span {
	  display:block;
	  font-size:17px;	 
	 }		
	 
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		font-weight: bold;
	}
}	

@media only screen and (max-width: 767px) {
	
	/* 2 Steps
	================================================== */
	ul.checkout-bar2 {
	margin: 0px;
	}
	ul.checkout-bar2 li {
			padding:0px;
		}
		
	ul.checkout-bar2 li:before {
			width: 45px;
			height: 45px;
			line-height: 47px;
			top: -52px;
			left: 40px;
		}

	ul.checkout-bar2 li.active span {
	  display:block;
	  font-size:17px;	 
	 }
	 
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		display: block;
		font-weight: bold;
	}
	
	/* 3 Steps
	================================================== */
	ul.checkout-bar {
	margin: 0px;
	}
	ul.checkout-bar li {
			padding:0px;
		}
		
	ul.checkout-bar li:before {
			width: 45px;
			height: 45px;
			line-height: 47px;
			top: -52px;
			left: 40px;
		}

	ul.checkout-bar li.active span {
	  display:block;
	  font-size:17px;	 
	 }
	 
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		display: block;
		font-weight: bold;
	}	
	
	/* 4 Steps
	================================================== */
	ul.checkout-bar4 {
	margin: 0px;
	}
	ul.checkout-bar4 li {
			padding:0px;
		}
		
	ul.checkout-bar4 li:before {
			width: 45px;
			height: 45px;
			line-height: 47px;
			top: -52px;
			left: 40px;
		}

	ul.checkout-bar4 li.active span {
	  display:block;
	  font-size:17px;	 
	 }
	 
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		display: block;
		font-weight: bold;
	}	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

		
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
	/* 2 Steps
	================================================== */

	 ul.checkout-bar2 li:before {
		width: 45px;
		height: 45px;
		line-height: 47px;
		top: -52px;
		left: 40px;
	}
	
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		display: block;
		font-weight: bold;
	}
		
	/* 3 Steps
	================================================== */

	 ul.checkout-bar li:before {
		width: 45px;
		height: 45px;
		line-height: 47px;
		top: -52px;
		left: 40px;
	}
	
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		display: block;
		font-weight: bold;
	}
	
	/* 4 Steps
	================================================== */

	 ul.checkout-bar4 li:before {
		width: 45px;
		height: 45px;
		line-height: 47px;
		top: -52px;
		left: 40px;
	}
	
	 .checkout-wrap {
		margin: 10px 0 30px 0;
		display:block;
	}
	
	.checkout-wrap span {
		line-height: 30px;
		font-size: 16px;
		display: block;
		font-weight: bold;
	}
	
	}