.main-timeline-section{
  position: relative; 
  width: 100%;  
  margin:auto; 
  height:300px;
  text-align: center;
}
.main-timeline-section .timeline-start,
.main-timeline-section .timeline-end{
  position: absolute;
  background:#A8A8A8;
  border-radius:100px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
}
.main-timeline-section .timeline-end{
  right:0px;
}
.main-timeline-section .conference-center-line{
  	position: absolute;
    width: 70%;
    height: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: #A8A8A8;
    margin-left: 15%;
    margin-right: 15%;
}
.timeline-article{
    width: 17%;
    position: relative;
    min-height: 300px;
    float:right;
}


.timeline-article .content-title-one{
    position: absolute;
    top: 60%;
    left: -20px; 
    font-size:18px;
    color:#4675c2;
}

.timeline-article .content-title-two{
    position: absolute;
    top: 60%;
    left: -30px; 
    font-size:18px;
    color:#eb7d3c;
}

.timeline-article .content-title-three{
    position: absolute;
    top: 60%;
    left: -20px; 
    font-size:18px;
    color:#a5a5a5;
}

.timeline-article .content-title-four{
    position: absolute;
    top: 60%;
    left: -0px; 
    font-size:18px;
    color:#fdbf2d;
}

.timeline-article .content-title-five{
    position: absolute;
    top: 60%;
    left: -20px; 
    font-size:18px;
    color:#5c9bd5;
}




.timeline-article .meta-date-one{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
    width:55px;
    height:55px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #4675c2;
    background-image: url('/media/1281/step-one-min.png');
    background-repeat: no-repeat;
    background-position: center;    
}

.timeline-article .meta-date-two{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
	width:55px;
    height:55px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #eb7d3c;
	background-image: url('/media/1278/step-two-min.png');
    background-repeat: no-repeat;
    background-position: center;
}


.timeline-article .meta-date-three{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
	width:55px;
    height:55px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #a5a5a5;
	background-image: url('/media/1277/step-three-min.png');
    background-repeat: no-repeat;
    background-position: center;
}


.timeline-article .meta-date-four{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
	width:55px;
    height:55px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #fdbf2d;
	background-image: url('/media/1280/step-four-min.png');
    background-repeat: no-repeat;
    background-position: center;
}


.timeline-article .meta-date-five{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%); 
  	width:55px;
    height:55px;
    border-radius: 100%;
    background:#fff;
    border:1px solid #5c9bd5;
	background-image: url('/media/1279/step-five-min.png');
    background-repeat: no-repeat;
    background-position: center;
}

.timeline-article .content-box{
  /*box-shadow: 2px 2px 4px 0px #c1c1c1;
  border:1px solid #A8A8A8;
  border-radius: 5px;
  background-color: #fff;*/
  width: 250px;
  position: absolute;
  top: 80%;
  left: -90px; 
  /* padding:10px; */
}

.timeline-article-bottom .content-title-two, .timeline-article-bottom .content-title-four{
  top: -10%;
}
.timeline-article-bottom .content-box{
  top: 10%;
}


@media (min-width: 768px){
	
	.timeline-article .content-title-one{
		top: 70%;
		left: -40px; 
		font-size:18px;
	}
	
	.timeline-article .content-title-two{
		top: 70%;
		left: -40px; 
		font-size:18px;
	}
	
	.timeline-article .content-title-three{
		top: 70%;
		left: -10px; 
		font-size:18px;
	}
	
	.timeline-article .content-title-four{
		top: 70%;
		left: -10px; 
		font-size:18px;
	}
	
	.timeline-article .content-title-five{
		top: 70%;
		left: -30px; 
		font-size:18px;
	}
	
	.timeline-article-bottom .content-title-two, 
	.timeline-article-bottom .content-title-four{
    	top: 0%;
	}
}

@media (min-width: 992px){
	
	.timeline-article .content-title-one{
		top: 70%;
		left: -40px; 
		font-size:20px;
	}
	
	.timeline-article .content-title-two{
		top: 70%;
		left: -40px; 
		font-size:20px;
	}
	
	.timeline-article .content-title-three{
		top: 70%;
		left: -10px; 
		font-size:20px;
	}
	
	.timeline-article .content-title-four{
		top: 70%;
		left: -10px; 
		font-size:20px;
	}
	
	.timeline-article .content-title-five{
		top: 70%;
		left: -20px; 
		font-size:20px;
	}
	
	.timeline-article-bottom .content-title-two, 
	.timeline-article-bottom .content-title-four{
    	top: 0%;
	}
}

@media (min-width: 1200px){
	
	.timeline-article .content-title-one{
		top: 70%;
		left: -40px; 
		font-size:22px;
	}
	
	.timeline-article .content-title-two{
		top: 70%;
		left: -40px; 
		font-size:22px;
	}
	
	.timeline-article .content-title-three{
		top: 70%;
		left: -10px; 
		font-size:18px;
	}
	
	.timeline-article .content-title-four{
		top: 70%;
		left: -10px; 
		font-size:22px;
	}
	
	.timeline-article .content-title-five{
		top: 70%;
		left: -20px; 
		font-size:22px;
	}
	
	.timeline-article-bottom .content-title-two, 
	.timeline-article-bottom .content-title-four{
    	top: 0%;
	}
}