.timeline {
    color: #666;
    padding: 35px 0px 0px;
    background: #fff; 
}
.timeline ul {padding: 15px 0 0;}
.timeline ul li {
	background: #ddd;
	position: relative;
	margin: 0 auto;
	width: 3px;
	padding-bottom: 0px;
	list-style-type: none;
}
.timeline ul li:last-child {
	padding-bottom: 7px;
	background: none;
}
.timeline .number {
    position: absolute;
    left: -14px;
    top: 10px;
    z-index: 3;
}
.timeline .number img {
	width:30px;
}
.timeline ul li:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;
}
.timeline ul li:after {
    display: block;
    content: "";
	position: absolute;
	left: 50%;
	top: -3px;
	width: 56px;
	height: 56px;
	background:#ccc;
	-webkit-transform:translateX(-50%);
	-moz-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	-o-transform:translateX(-50%);
	transform: translateX(-50%);
	border-radius:50%;
	z-index:0
}
.timeline ul li .hidden {opacity: 0;}
.timeline ul li .content {
	position: relative;
	top: 0px;
	width: 470px;
	padding: 20px;
	background:#f5f5f552;
	border:2px solid #ccc;
	border-radius:10px;
	top:-20px;
}
.timeline ul li .content h2 {
	color: #db2900;
	font: 700 20px/20px 'Titillium Web', sans-serif;
	padding: 0 0 3px;
	text-align: left;
	margin: 0;
}
.timeline ul li:nth-child(even) .content h2 {
  text-align: right;
}
.timeline ul li .content p {
  text-align: left;
}
.timeline ul li:nth-child(even) .content p {
  text-align: right;
}
.timeline ul li .content:before {
	content: '';
	background: transparent;
	position: absolute;
	top: 30px;
	width: 20px;
	height: 20px;	
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;   
	border-right:15px solid #ccc; 
}

.timeline ul li:nth-child(even) .content:before {
	content: '';
	background: transparent;
	position: absolute;
	top: 30px;
	width: 20px;
	height: 20px;	
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;   
	border-left:15px solid #aaa;    
	border-right:0 solid #fff; 
}
.timeline ul li:nth-child(odd) .content {
  left: 50px;
}
.timeline ul li:nth-child(odd) .content:before {
  left: -20px;
}
.timeline ul li:nth-child(even) .content {
  left: calc(-470px - 50px);
}
.timeline ul li:nth-child(even) .content:before {
  right: -20px;
}

@media screen and (max-width: 1399px) {
  .timeline ul li .content {
    width: 200px;
  }

  .timeline ul li:nth-child(even) .content {
    left: calc(-200px - 70px);
  }
}
@media screen and (max-width: 767px) {
	.timeline ul li {margin-left: 25px;padding-bottom: 15px}
	.timeline ul li .content {width: 200px;}
	.timeline ul li:nth-child(even) .content h2{text-align: left;}
	.timeline ul li:nth-child(even) .content p {text-align: left;}
	.timeline ul li:nth-child(even) .content {left: 50px;}
	.timeline ul li:nth-child(even) .content:before {left: -20px;}
	.timeline ul li .content {
		width: 370px;
		padding: 0 40px;
		padding: 10px;
	}
	/* .timeline ul li:nth-child(odd) .content {
	left: 0px;
	}
	.timeline ul li:nth-child(even) .content {
	left: 0px;
	} */
	.timeline ul li .content:before {display:none;}
}
@media screen and (max-width: 575px) {
	.timeline ul li .content {width: 260px ;}
}
@media screen and (max-width: 380px) {
	.timeline ul li .content {width: 220px ;}
}
@media screen and (max-width: 320px) {
	.timeline ul li .content {
		width: 220px ;
		padding: 20px 10px 20px 40px;
	}
	.timeline ul li:nth-child(odd) .content, .timeline ul li:nth-child(even) .content {
		left: 0px;
	}
	.timeline ul li .content {
		border-radius: 0px;
		border-bottom:0;
	}
	.timeline ul li {
		padding-bottom: 0px;
	}
	.timeline ul li:last-child .content {
		border: 2px solid #ccc;
	}
}