.custom-timeline {
    position: relative;
    max-width: 1100px;
    margin: auto;
}

.custom-timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #ddd;
    top: 0;
    bottom: 0;
    left: 50%;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 30px 40px;
}

.timeline-item.left {
    left: 0;
    text-align: right;
}

.timeline-item.right {
    left: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #000;
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 2;
}

/* Dot positions */

.dot-top .timeline-item::after{
    top:25px;
}

.dot-center .timeline-item::after{
    top:50%;
    transform:translateY(-50%);
}

.dot-bottom .timeline-item::after{
    bottom:25px;
}

.timeline-item.left::after {
    right:-7px;
}

.timeline-item.right::after {
    left:-7px;
}

.timeline-date{
    display:block;
    font-weight:bold;
    margin-bottom:5px;
}

.timeline-title{
    margin-bottom:8px;
}

.timeline-desc{
    line-height:1.6;
}

/* Mobile */

@media (max-width:768px){

.custom-timeline::after{
    left:20px;
}

.timeline-item{
    width:100%;
    padding-left:60px;
    padding-right:20px;
}

.timeline-item.left,
.timeline-item.right{
    left:0;
    text-align:left;
}

.timeline-item::after{
    left:14px;
}

}