:root{
}

ol.circle{
		padding:0;
		list-style:none; 
		counter-reset:li;
	}

ol.circle.orange li:before{
			background-color:#fdca40;
		}

ol.circle li{
			position:relative;   
    	padding:1rem 1rem 1rem 3rem;
			margin-bottom:1rem;
		}

ol.circle li :first-child{
				margin-top:0;
			}

ol.circle li:before{
				content:counter(li);
				counter-increment:li;
				display:-webkit-box;
				display:-ms-flexbox;
				display:flex;
				-webkit-box-align:center;
				-ms-flex-align:center;
				align-items:center;
				-webkit-box-pack:center;
				-ms-flex-pack:center;
				justify-content:center;
				background-color:#7e96a7;
				height:30px;
				width:30px;
				line-height:1em;
				border-radius:50%;
				color:#fff;
				position:absolute;      
				left:1em;
				font-size:0.9em;
			}

ol.circle ol{
			padding-left:0;
			list-style:none;
			counter-reset:li;			
		}

ol.circle ol li{
				padding:0 0 0 2rem;
				margin-bottom:1rem;
			}

ol.circle ol li:before{
					left:0;
					top:0;
					content:counter(li, lower-alpha);
				}