.timeline1 { list-style: none; margin: 0 0 30px 120px; padding-left: 30px; border-left: 3px solid var(--bborder); li { margin: 0; position: relative; } p { margin: 0 0 15px; } } .timeline1-date { margin-top: -18px; top: 50%; left: -150px; font-size: 0.95em; line-height: 20px; position: absolute; padding: 5px 10px 5px 10px; border: 1px solid var(--bborder); } .timeline1-circle, .timeline1-circle-start, .timeline1-circle-end { border: 3px solid var(--bborder); border-radius: 50%; display: block; position: absolute; } .timeline1-circle { margin-top: -10px; top: 50%; left: -40px; width: 10px; height: 10px; background: tomato; } .timeline1-circle-start, .timeline1-circle-end { width: 20px; height: 20px; background: var(--box-bg); left: -45px; margin-top: 0; } .timeline1-circle-start { top: 0; } .timeline1-circle-end { top: 100%; } .timeline1-content { padding: 50px 20px 0; border-radius: 0.5em; position: relative; } .timeline1-content p { text-align: justify; } .timeline1 label { font-size: 1.3em; position: absolute; z-index: 90; top: 20px; } .timeline1-radio, .timeline1-break { display: none; } @media only screen and (max-width: 600px) { .timeline1-date { margin: 0; font-size: 0.95em; position: inherit; padding: 0; border: none; } .timeline1 { margin: 0 0 0 .5rem; } }