.timeline { position: relative; margin: 0 auto; width: 100%; }
.timeline ul, .timeline li { margin: 0; padding: 0; }
.timeline ul li { margin-bottom: 50px; list-style-type: none; display: flex; flex-direction: row; align-items: center; }
.timeline ul li:last-child  { margin-bottom: 0; }
.point { min-width: 20px; height: 20px; border: 1px #666 solid; background-color: #eee; border-radius: 100%; z-index: 2; position: relative; left: 1px; }
.timeline ul li .content { width: 50%; padding: 0 20px; }
.timeline ul li:nth-child(odd) .content { padding-left: 0; }
.timeline ul li:nth-child(odd) .date { padding-right: 0; }
.timeline ul li:nth-child(even) .content { padding-right: 0; }
.timeline ul li:nth-child(even) .date { padding-left: 0; }
.timeline ul li .date { width: 50%; padding: 20px; font-weight: normal; }
.timeline ul li .date h4 { font-size: 1.25rem; width: 120px; text-align: center; padding: 5px 10px; border-radius: 0.25rem; border: 1px #666 solid; background-color: #dee2e6; color: #000; }
.timeline ul li .content h3 { font-size: 1.5rem; padding: 10px 20px; margin-bottom: 0; text-align: center; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; background-color: #dee2e6; color: #000; border: 1px #666 solid; border-bottom: none; }
.timeline ul li .content p { padding: 10px 20px; margin-top: 0; text-align: center; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; border-top: none; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; border: 1px #666 solid; background-color: #fff; }
.timeline ul li:nth-child(even) { flex-direction: row-reverse; }
.timeline ul li:nth-child(even) .date h4 { float: right; }
.timeline::before { content: ""; position: absolute; height: 100%; width: 1px; left: 50%; background-color: #666; }
@media (max-width: 991px) {
    .point { min-width: 15px; height: 15px; }
    .timeline { font-size: 1rem; }
}
@media (max-width: 767px) {
    .timeline { font-size: 0.9rem; }
    .point { min-width: 11px; height: 11px; }
}
@media (max-width: 575px) {
    .timeline { font-size: 0.8rem; }
    .timeline ul li .content p { padding: 10px; }
}