body{font-family:Arial,sans-serif}.timeline-container{width:100%;margin:0 auto;text-align:center}.timeline{counter-reset:step-counter;position:relative;padding:0;margin:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap}.timeline li{list-style:none;flex:1;min-width:150px;position:relative;text-transform:uppercase;cursor:pointer;padding:10px}.timeline li,.timeline li:before{font-weight:700;text-align:center;transition:all .3s ease-in-out}.timeline li:before{display:flex;align-items:center;justify-content:center;counter-increment:step-counter;content:counter(step-counter);font-size:24px;width:100px;height:100px;border:3px solid #ffc815;border-radius:20px;line-height:50px;margin:0 auto 10px;background:#fff;color:#000}.timeline li:first-child:after{content:none}.timeline li.active-tl{color:#555}.timeline li.active-tl:before{background:#ffc815;color:#000}.timeline li.active-tl+li:after{background:#ffc815}.description{max-width:700px;margin:20px auto 0;padding:20px;border:1px solid #ccc;border-radius:5px;background:#f9f9f9;text-align:left}@media (max-width:600px){.timeline{flex-direction:row;align-items:center}.timeline li:after{display:none}.timeline li:first-child:after{top:50px;left:50%;height:calc(100% - 50px)}}