.wizard-progress {
	width: 100%;
	list-style: none;
	list-style-image: none;
	padding: 0;
	margin: 0 auto;
	position: relative;
    margin-bottom:20px;
}

.wizard-progress li {
	float: left;
	text-align: center;
	position: relative;
	height: 100%;
}

li.step-done, li.step-active {
	cursor: pointer;
}

@media only screen and (max-width: 900px) {
	.wizard-progress li {
		float: none;
		width: 100% !important;
		text-align: left;
	}
}

.wizard-progress .step-num {
	vertical-align: bottom;
	text-align: center;
    text-indent:0px;
	width: 100%;
	margin-top: 10px;
	font-size: 1.4em;
	font-weight: bold;
	color: #aaaaaa;
	background-color: #eeeeee;
	border: 3px solid #eeeeee;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	display: inline-block;
	margin-top: 10px;
	line-height: 1.7em;
}

@media only screen and (max-width: 900px) {
	.wizard-progress .step-num {
		display: inline-block;
	}
}

.wizard-progress .step-num:after {
	content: "";
	display: block;
	background: #eeeeee;
	height: 5px;
	width: 131%;
	position: absolute;
	top: 1.5em;
	z-index: -1;
}

@media only screen and (max-width: 900px) {
	.wizard-progress .step-num:after {
		display: none;
	}
}

.wizard-progress .step-done .step-num:after {
	content: "";
	display: block;
	background: #58c459;
	height: 5px;
	width: 130%;
	position: absolute;
	top: 1.5em;
}

@media only screen and (max-width: 900px) {
	.wizard-progress .step-done .step-num:after {
		display: none;
	}
}

.wizard-progress li:last-of-type {
	margin-right: 0;
}

.wizard-progress li:last-of-type .step-num:after {
	display: none;
}

.wizard-progress .step-done .step-num {
	border-color: #58c459;
	background-color: #58c459;
	color:#fff;
}

@media only screen and (max-width: 900px) {
	.wizard-progress .step-done .step-num {
		display: inline-block;
	}
}

.step-status {
	display: none;
}

.step-status:before {
	content: "\e75d";
	font-family: "linearIcons";
	font-weight: bold;
	font-size: 1em;
	line-height: 1.7em;
}

.wizard-progress .step-done .step-status {
	display: block;
    color:#fff;
}

.wizard-progress .step-done .step-number {
	display: none;
}

.wizard-progress .step-active .step-num {
	border-color: #ffb74d;
	background-color: #ffb74d;
	color: #fff;
}

.step-number{
    color:#fff;
}

@media only screen and (max-width: 900px) {
	.wizard-progress .step-active .step-num {
		display: inline-block;
	}
}

.wizard-progress .step-active .step-name {
	font-weight: bold;
}

@media only screen and (max-width: 900px) {
	.wizard-progress .step-name {
		display: inline-block;
		line-height: 2.5em;
        margin-left:20px;
	}
}

.wizard-2-steps {
    margin : 0 auto;
    font-size : 16px;
    line-height : 1.5em;
}
.wizard-2-steps li {
	margin-right: 25%;
	width: 36.4%;
}
.wizard-2-steps .step-num:after {
	left:50%;
    width:170%;
}
.wizard-2-steps .step-done .step-num:after  {
    left:50%;
    width:170%;
}

.wizard-3-steps {
    margin : 0 auto;
    font-size : 16px;
    line-height : 1.5em;
}
.wizard-3-steps li {
	margin-right: 25%;
	width: 16.4%;
}
.wizard-3-steps .step-num:after {
	left:60%;
    width:240%;
}
.wizard-3-steps .step-done .step-num:after  {
    left:60%;
    width:240%;
}

.wizard-4-steps {
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.5em;
}

    .wizard-4-steps li {
        margin-right: 6.0%;
        width: 20%;
    }

    .wizard-4-steps .step-num:after {
        left: 60%;
        right:50%;
    }

    .wizard-4-steps .step-done .step-num:after {
        left: 60%;
        right: 50%;
    }
/* wizard with 5 steps */

.wizard-5-steps {
}

.wizard-5-steps li {
	margin-right: 6.9%;
	width: 14.4%;
}

.wizard-5-steps .step-num:after {
	left: 60%;
}
/* wizard with 6 steps */

.wizard-6-steps {
}

.wizard-6-steps li {
	margin-right: 4%;
	width: 11.5%;
}

.wizard-6-steps .step-num:after {
	left: 62%;
}

/* wizard with 7 steps */

.wizard-7-steps {
}

.wizard-7-steps li {
	margin-right: 5.1%;
	width: 9.6%;
}

.wizard-7-steps .step-num:after {
	left: 64%;
}

/* wizard with 8 steps */

.wizard-8-steps {
}

.wizard-8-steps li {
	margin-right: 4.1%;
	width: 8.7%;
}

.wizard-8-steps .step-num:after {
	left: 67%;
}

