/*progressbar*/
#progressbar {
	margin-bottom: 10px;
	margin-top: 20px;

	overflow: hidden;

	/*CSS counters to number the steps*/
	counter-reset: step;
	display: inline-block;
}
#progressbar li, #progressbar a {
	list-style-type: none;
	color: #999999;
	font-size: 15px;
	font-weight: 100;
	min-width:140px;
	float: left;
	position: relative;
}

#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 70px;
	height: 70px;
	line-height: 63px;
	display: block;
	font-size: 40px;
	color: #fff;
	background: #e1e4e6;
	border-radius: 50px;
	margin: 0 auto 5px auto;
	font-weight: 600;

}
/*progressbar connectors*/
#progressbar li:after, #progressbar a:link:after {
	content: '';
	width: 100%;
	height: 3px;
	background: #e1e4e6;
	position: absolute;
	left: -50%;
	top: 35px;
	z-index: -1; /*put it behind the numbers*/

}
#progressbar li:first-child:after, #progressbar a:link:first-child:after {
	/*connector not needed before the first step*/
	content: none; 

}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #2c97de;
	color: #fff;
	border: none;
	line-height: 70px;


}


@media (max-width: 768px) { 

#progressbar  {
	display: none;
}

}