/*= timeline css for data in one side =*/
.timeline{
	float: left; 
	width: 90%; 
	margin: 40px 5%; 
	padding-left: 40px; 
	position: relative; 
	border-left: 1px solid #333; 
	box-sizing: border-box;
}
.timeline:before, .timeline:after{
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid #333;
	position: absolute;
	left: -9px; 
	border-radius: 50%;
}
.timeline:before{top: -17px;}
.timeline:after{bottom: -17px;}
.timeline li{
	background-color: #f1f1f1; 
	border: 1px solid #333; 
	border-radius: 5px; 
	float: left; 
	margin-top: 20px; 
	padding: 10px; 
	position: relative; 
	width: 100%;
}
.timeline li:first-child{margin-top: 0;}
.timeline li:before{content: ""; width: 40px; height: 1px; background-color: #333; position: absolute; top: 50%; left: -41px;}
.timeline li:after{content: ""; width: 7px; height: 7px; background-color: #333; position: absolute; top: 50%; margin-top: -3px; left: -45px;}
.timeline-description p{margin-top: 15px; padding: 10px; }
.timeline-description p:first-child{margin-top: 0;}
/*= ttimeline css for data in one side end =*/

/* General Styles and Classes */
.sliContent { display: block; }
.sol-border, .sol-border:before { border-style: solid; border-width: 3px; }

/* Simple List */
ol.simple-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	margin: 0;
	margin-left: 3em;
	padding: 0;
	counter-reset: li-counter;
}
ol.simple-list > li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 0.5em;
	min-height: 3em;
	border-left: 2px solid #CCCCCC;
}
ol.simple-list > li:before {
	position: absolute;
	top: 0;
	left: -1em;
	width: 0.8em;
	font-size: 3em;
	line-height: 1;
	font-weight: bold;
	text-align: right;
	content: counter(li-counter);
	counter-increment: li-counter;
}

/* Tilted List */
ol.tilted-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	margin: 0;
	margin-left: 3em;
	padding: 0;
	counter-reset: li-counter;
}
ol.tilted-list > li{
	position: relative;
	margin-bottom: 20px;
	padding: 1em;
	border-left: 2px solid #CCCCCC;
}
ol.tilted-list > li:before {
	position: absolute;
	top: 0;
	left: -0.95em;
	width: 1em;
	font-size: 4em;
	line-height: 1;
	font-weight: bold;
	text-align: right;
	transform: rotate(-25deg);
	-ms-transform: rotate(-25deg);
	-webkit-transform: rotate(-25deg);
	z-index: -99;
	overflow: hidden;
	content: counter(li-counter);
	counter-increment: li-counter;
}

/* Circles List */
ol.circles-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	margin: 0;
	margin-left: 4em;
	padding: 0;
	counter-reset: li-counter;
}
ol.circles-list > li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 0.5em;
	min-height: 3em;
	background-color: transparent;
	border-bottom: 3px solid #c5c5c5;
}
ol.circles-list > li:before {
	position: absolute;
	top: 0;
	left: -1.33em;
	width: 1.2em;
	height: 1.2em;
	font-size: 2.5em;
	line-height: 1.2;
	text-align: center;
	border: 3px solid #c5c5c5;
    border-radius: 50%;
	content: counter(li-counter);
	counter-increment: li-counter;
}

/* Boxes List */
ol.boxes-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	margin: 0;
	margin-left: 3em;
	padding: 0;
	counter-reset: li-counter;
}
ol.boxes-list > li{
	position: relative;
	margin-bottom: 15px;
	padding: 1em;
}
ol.boxes-list > li:before {
	position: absolute;
	top: 0;
	left: -1em;
	width: 0.94em;
	height: 0.94em;
	font-size: 3em;
	line-height: 0.94;
	text-align: center;
	content: counter(li-counter);
	counter-increment: li-counter;
}

/* Labels */
ol.labels-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7- hack*/
	margin: 0;
	margin-left: 1em;
	padding: 0;
	counter-reset: li-counter;
}
ol.labels-list > li{
	position: relative;
	margin-bottom: 1.5em;
	padding: 1.5em;
}
ol.labels-list > li:before {
	position: absolute;
	top: -0.3em;
	left: -0.5em;
	width: 1.8em;
	height: 1.2em;
	font-size: 2em;
	line-height: 1.2;
	font-weight: bold;
	text-align: center;
	transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);
	z-index: 95;
	overflow: hidden;
	content: counter(li-counter);
	counter-increment: li-counter;
}

/* Parallelogram */
ol.parallelogram-list {
	list-style-type: none;
	list-style-type: decimal !ie; /*IE 7 hack */
	margin: 0;
	margin-left: 5em;
	padding: 0;
	counter-reset: li-counter;
}
ol.parallelogram-list > li {
	position: relative;
	margin-bottom: 15px;
	padding: 0.5em 1.1em 1em 1.1em;
	-webkit-transform: skew(20deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);
}
ol.parallelogram-list > li:before {
	position: absolute;
	top: 0;
	left: -1.1em;
	width: 0.94em;
	height: 0.94em;
	font-size: 2.8em;
	line-height: 0.94;
	text-align: center;
	content: counter(li-counter);
	counter-increment: li-counter;
}
ol.parallelogram-list > li .sliContent {
	-webkit-transform: skew(-20deg); /* Override skew */
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	margin-left: 1em;
}