/* Simple progress bar. 
   Inspired by Himanshu Chaudhary's 2013 Pen Form Progress Bar. 
*/
.profile-progress {
	width: 100%;
	border: 2px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.profile-progress .task .task-label {
	color: #b5b5ba;
}

/* Small screens */
@media all and (max-width: 500px) {
	.profile-progress .task .task-label {
		display: inline-block;
		background: #fff;
		width: 18px; height: 18px;
		border-radius: 18px;
		border: 1px solid #d5d5da;
		padding-left: 3px;
		padding-bottom: 3px;
	}
	
/*	.profile-progress .task @last {
		border-bottom: 1px solid black;
		height: 100%;
	}
*/
	.profile-progress .task.active .task-label {
		background: #0c95be;
		color: #FFF;
	}
	.profile-progress .task.done .task-label {
		color: #FFF;
		background: #8bc435;
		box-shadow: inset 0 0 2px rgba(0,0,0,.2) solid;
		font-size: 14px;
	}

	.profile-progress .task .task-title {
		color: #b5b5ba;
		font-size: 18px;
		line-height: 30px;
	}
}

/* Large screens */
@media all and (min-width: 500px) {
	.profile-progress {
		width: 100%;
		margin: 20px auto;
		text-align: center;
	}
	
	.profile-progress .task {
		height: 100px;
	}
	.profile-progress .task,
	.profile-progress .bar {
		display: inline-block;
		background: #fff;
		width: 40px; height: 40px;
		border-radius: 40px;
		border: 1px solid #d5d5da;
	}
	.profile-progress .bar {
		position: relative;
		width: 20%;
		height: 10px;
		margin: 0 -5px 17px -5px;
		border-left: none;
		border-right: none;
		border-radius: 0;
		top: -17px;
	}
	.profile-progress .task .task-label {
		display: inline-block;
		width: 32px;
		height: 32px;
		line-height: 32px;
		border-radius: 32px;
		margin: 4px;
		color: #b5b5ba;
		font-size: 20px;
		font-weight: normal;
	}
	.profile-progress .task .task-title {
		color: #b5b5ba;
		font-size: 13px;
		line-height: 30px;
		white-space: nowrap;
		position: relative;
		left: -10px;
	}

	/* Done / Active */
	.profile-progress .bar.done,
	.profile-progress .task.done {
		background: #eee;
	}
	.profile-progress .bar.done-left {
		background: linear-gradient(to right, #EEE 40%, #FFF 60%);
	}

	.profile-progress .bar.done-right {
		background: linear-gradient(to left, #EEE 40%, #FFF 60%);
	}

	.profile-progress .task.done .task-label {
		color: #FFF;
		background: #8bc435;
		box-shadow: inset 0 0 2px rgba(0,0,0,.2);
	}
	.profile-progress .task.done .task-title {
		color: #444;
	}
	.profile-progress .task.active .task-label {
		color: #FFF;
		background: #0c95be;
		box-shadow: inset 0 0 2px rgba(0,0,0,.2);
	}
	.profile-progress .task.active .task-title {
		color: #0c95be;
	}
}