.main-timeline {
    font-family: 'Ubuntu', sans-serif;
}

    .main-timeline .timeline {
        padding: 75px 0 0 0;
        margin: -5px 0 0 0;
        position: relative;
    }

        .main-timeline .timeline:after {
            content: '';
            display: block;
            clear: both;
        }

    .main-timeline .timeline-content {
        color: #111;
        width: 53.5%;
        padding: 15px;
        border: 5px solid #2C9F96;
        border-left-width: 0;
        display: inline-block;
        float: right;
    }

        .main-timeline .timeline-content:hover {
            color: #111;
            text-decoration: none;
        }

    .main-timeline .timeline-icon {
        color: #fff;
        background-color: #2C9F96;
        font-size: 40px;
        text-align: center;
        line-height: 80px;
        height: 80px;
        width: 80px;
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 1;
    }

    .main-timeline .title {
        color: #2C9F96;
        font-size: 22px;
        font-weight: 600;
        margin: 0 0 5px 0;
    }

    .main-timeline .description {
        font-size: 15px;
        letter-spacing: 1px;
        margin: 0;
    }

    .main-timeline .timeline:nth-child(even) .timeline-content {
        border-left-width: 5px;
        border-right-width: 0;
        float: left;
    }

    .main-timeline .timeline:nth-child(4n+2) .timeline-content {
        border-color: #A9232E;
    }

    .main-timeline .timeline:nth-child(4n+2) .timeline-icon {
        background-color: #A9232E;
    }

    .main-timeline .timeline:nth-child(4n+2) .title {
        color: #A9232E;
    }

    .main-timeline .timeline:nth-child(4n+3) .timeline-content {
        border-color: #27AAE2;
    }

    .main-timeline .timeline:nth-child(4n+3) .timeline-icon {
        background-color: #27AAE2;
    }

    .main-timeline .timeline:nth-child(4n+3) .title {
        color: #27AAE2;
    }

    .main-timeline .timeline:nth-child(4n+4) .timeline-content {
        border-color: #58596D;
    }

    .main-timeline .timeline:nth-child(4n+4) .timeline-icon {
        background-color: #58596D;
    }

    .main-timeline .timeline:nth-child(4n+4) .title {
        color: #58596D;
    }

@media only screen and (max-width:576px) {
    .main-timeline .timeline-content {
        width: 100%;
    }

    .main-timeline .timeline:nth-child(even) .timeline-content {
        border-right-width: 5px;
        border-left-width: 0;
    }

    .main-timeline .timeline-icon {
        transform: translateX(0);
        left: 0;
    }
}