@charset "UTF-8";


#progressbar{
	width: 100%;
}


.progressbar img{
	width: 60px;
	height: 60px;
	margin: 10px auto 10px auto;
	position: relative;
}

.progressbar li{
	list-style-type: none;
	float: left;
	width: 25%;
	display: block;
	position: relative;
	text-align: center;
	padding-left: 0px;
}
ul li .fa{
	background: #D3D3D3;
	width: 30px;
	height:30px;
	line-height: 30px;
	border: 1px solid #000;
	text-align: center;
	margin: 10px auto 10px auto;
	border-radius: 50%;
}
.progressbar li:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: #D3D3D3;
	top: 105px;
	left: -50%;
	z-index: -2;
}
.progressbar li:first-child:after{
	content: none;
}


.progressbar li.active:before{
	border-color: #000;
}
.progressbar li.active + li:after{
	background-color: #000;
}

@media screen and (max-width: 500px) {

  .progressbar li p {
    font-size: 8px;
  }
}