.timeline{
	position:relative;}

.timeline:before{
	top:0;
	left:197px;
	bottom:0;
	display:block;
    content:"";
    position: absolute;
	border:3px solid #ccc;
	width:0px;
	height:100%;}


.timeline li{
	position:relative;
	margin:0px 0px 20px 0px;}


.timeline li div.mark{
	height:60px;
	width:60px;
	padding:0px;
	border:#ccc 5px solid;
	background-color:#fff;
	-webkit-border-radius: 200px !important;
     -moz-border-radius: 200px !important;
          border-radius: 200px !important;
		  position:absolute;
		  left:170px;
		  top:0px;
		  z-index:2;}
		  
.timeline li div.mark i{
	font-size:30px;
	width:auto;
	color:#fff;
	padding:7px;
	height:50px;
	width:50px;
	border:2px solid #fff;
	-webkit-border-radius: 200px !important;
     -moz-border-radius: 200px !important;
          border-radius: 200px !important;
	line-height:33px}
		  
.timeline li div.time{
	position:absolute;
	left:15px;
	width:135px;
	text-align:right;}

.timeline li div.time h3{
	font-size:32px;
	margin:3px 0px 0px 0px;}

	
.timeline li div.body{
	padding:15px;
	position:relative;
	color:#fff;
	margin:0px 0px 0px 275px;}
	
.timeline li div.body:after{
	position:absolute;
	border:11px solid;
	border-right-color:transparent;
	border-left-color:#fff;
	border-top-color:#fff;
	border-bottom-color:#fff;
	right:100%;
	top:23px;
	content:"";}
	
.timeline li div.body h2{
	margin:0px 0px 15px 0px;
	line-height:32px;}

.timeline li div.body h2 small{
	color:#fff;}




/**********************
COLORS
**********************/

.timeline li.yellow div.body, .timeline li.yellow div.mark, .timeline li.yellow div.body:after{
	background-color:#F2AE43;}
.timeline li.yellow div.time h3 {
	color:#F2AE43;}
	
.timeline li.blue div.body, .timeline li.blue div.mark, .timeline li.blue div.body:after{
	background-color:#30abe0;}
.timeline li.blue div.time h3 {
	color:#30abe0;}
	
.timeline li.green div.body, .timeline li.green div.mark, .timeline li.green div.body:after{
	background-color:#66c88d;}
.timeline li.green div.time h3 {
	color:#66c88d;}
	
.timeline li.red div.body, .timeline li.red div.mark, .timeline li.red div.body:after{
	background-color:#f06060;}
.timeline li.red div.time h3 {
	color:#f06060;}
	
.timeline li.purple div.body, .timeline li.purple div.mark, .timeline li.purple div.body:after{
	background-color:#c180e6;}
.timeline li.purple div.time h3 {
	color:#c180e6;}
	
.timeline li.brown div.body, .timeline li.brown div.mark, .timeline li.brown div.body:after{
	background-color:#bea881;}
.timeline li.brown div.time h3 {
	color:#bea881;}
	
.timeline li.pink div.body, .timeline li.pink div.mark, .timeline li.pink div.body:after{
	background-color:#ec2f87;}
.timeline li.pink div.time h3 {
	color:#ec2f87;}



@media (max-width: 767px) {
	
	.timeline li div.time{
		right:0px;
		left:auto;
		z-index:3;
		bottom:100%;
		color:#ccc;
		width:auto;
		margin-bottom:10px;}
		
	.timeline li div.time h3{
		font-size:16px;
		color:#ccc !important;
		display:inline;}
	
	}

@media (min-width: 480px) and (max-width: 767px) {
	
	.timeline:before{
	left:28px;}
	
	.timeline li div.mark{
		left:0px;}
		
	.timeline li div.body{
		margin:60px 0px 0px 110px;}
		

}


@media (max-width: 480px){
	
	.timeline li div.body{
		margin:60px 0px 0px 0px;}
		
	.timeline li div.mark{
		display:none;}
		
	.timeline:before{
		display:none;}
		
	.timeline li div.body:after{
		right:10px;
		top:auto;
		bottom:100%;
		border-right-color:#fff;
		border-left-color:#fff;
		border-top-color:#fff;
		border-bottom-color:transparent;
		}
	
	}