<!-- *** Matrix Widget timeline 01 *** -->
<div class="timeline-item primary-color pull-top-10" date-is="12-02-2016">
    <h3>
        Single responsive timeline!
    </h3>

    <p>
        I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far...
        While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
    </p>
</div>

<!-- *** Matrix Widget timeline 02 *** -->
<style>
 /*<![CDATA[*/
.timeline-item.style2::after {
    width: 15px;
    height: 15px;
    display: block;
    border-radius:500px;
    top: 1.1em;
    position: absolute;
    left: -10px;
    content: '';
}
 /*]]>*/
</style>

<div class="timeline-item style2 primary-color pull-top-10" date-is="12-02-2016" style="color:#003be0;">
    <h3>
        Single responsive timeline!
    </h3>

    <p>
        I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far...
        While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
    </p>
</div>

<!-- *** Matrix Widget timeline 03 *** -->
<style>
 /*<![CDATA[*/
.timeline-item.style3::after {
    width: 15px;
    height: 13px;
    display: block;   
    top: 1.1em;
    position: absolute;
    left: -10px;
    content: '';
}
 /*]]>*/
</style>
<div class="timeline-item style3 primary-color pull-top-10" date-is="12-02-2016" style="color:#eca825;">
    <h3>
        Single responsive timeline!
    </h3>

    <p>
        I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far...
        While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card.
    </p>
</div>