/* http://codepen.io/whqet/pen/EJgwb/ alapjan */

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

.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
padding: 14px 20px 70px 10px;
max-width: 900px;
position: relative;
}

ul.checkout-bar {
margin: 0 20px;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 12px;
font-weight: 600;
padding: 14px 20px 14px 20px;
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: 0;
}
ul.checkout-bar li.active {
color: #d25537;
font-weight: bold;
font-size: 12px;
}
ul.checkout-bar li.active:before {
background: #d25537;
z-index: 1;
}
/* activelast majd mindenben megegyezik active-al, csak after nem kell */
ul.checkout-bar li.activelast {
color: #d25537;
font-weight: bold;
font-size: 12px;
}
ul.checkout-bar li.activelast:before {
background: #d25537;
z-index: 1;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #343786;
z-index: 1;
}
ul.checkout-bar li.visited:before {
background: #343786;
z-index: 1;
}
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 li:nth-child(7):before {
content: "7";
}
ul.checkout-bar a {
color: #343786;
font-size: 12px;
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: #d25537;
	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;
}

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: #343786;
	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: 10%;
}
ul.checkout-bar li {
	display: inline-block;
	margin: 50px 0 0;
	padding: 0;
	text-align: center;
	width: 100pt;
	vertical-align: top;
}
ul.checkout-bar li:before {
	height: 45px;
	left: 40%;
	line-height: 45px;
	position: absolute;
	top: -65px;
	width: 45px;
	z-index: 0;
}
ul.checkout-bar li.visited {
	background: none;
}
ul.checkout-bar li.visited:after {
	background-size: 35px 35px;
	background-color:#343786;
	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: 0;
}
}