ul.timeline {
    list-style: none;
    padding: 20px 0px 0px;
    position: relative;
	}
    ul.timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
		background-color: #86a1aa;
        left: 50%;
        margin-left: -1.5px;
		}
    ul.timeline > li {
        margin-bottom: 20px;
        position: relative;
		}
        ul.timeline > li:before,
        ul.timeline > li:after {
            content: " ";
            display: table;
			}
        ul.timeline > li:after {
            clear: both;
			}
		.timeline>li:last-child {
			margin-bottom: 0px;
			background-color: #ffffff;
			}
        ul.timeline > li:before,
        ul.timeline > li:after {
            content: " ";
            display: table;
			}
        ul.timeline > li:after {
            clear: both;
			}
        ul.timeline > li > .timeline-panel {
                width: 46%;
                float: left;
                background-color: #efefef;
                border-radius: 4px;
                margin: 0px -20px;
                padding: 30px;
                box-sizing: border-box;
                position: relative;
                display: block;
                clear: both;
                margin-bottom: 20px;
			}
            ul.timeline > li > .timeline-panel:before {
                position: absolute;
                top: 30px;
                right: 10px;
                display: inline-block;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid #f2f2f2;
                content: " ";
                z-index: 50;
				}
            ul.timeline > li > .timeline-panel:after {
				position: absolute;
				top: 30px;
				right: -15px;
				display: inline-block;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				border-left: 15px solid #f2f2f2;
				content: " ";
				z-index: 50;
				}
        ul.timeline > li > .timeline-date {
            color: #333;
			width: 80px;
			height: 80px;
			text-align: center;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -40px;
			background-color: #999999;
			z-index: 50;
			border-top-right-radius: 50%;
			border-top-left-radius: 50%;
			border-bottom-right-radius: 50%;
			border-bottom-left-radius: 50%;
			}
		ul.timeline > li > .timeline-date h6 { margin: 0px; line-height: 80px; }
        ul.timeline > li.timeline-inverted > .timeline-panel { float: right; }
            ul.timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
				}
            ul.timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
				}
.timeline-date.cat1 { background-color: #8D734A !important; }
.timeline-date.cat2 { background-color: #0d4354 !important; }
.timeline-date.cat3 { /*background-color: #4b4f55 !important;*/ background-color: #317084 !important; }
.timeline-date.cat4{ background-color: #86a1aa !important; }
.timeline-title {
	margin: 0px 0px 5px;
	color: #094253;
	}
.timeline-body a {
    font-size: 38px;
    font-weight: bold;
    color: #094253;
    position: absolute;
    right: 15px;
    bottom: 15px;
	}	
.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
	}
	.timeline-body  p { float: none; }
    .timeline-body > p + p {
        margin-top: 5px;
    }
	.timeline-body > p { color: #4a4f55; }

@media only screen and (min-width : 300px) and (max-width : 480px) {    
    ul.timeline > li > .timeline-panel { 
        padding: 10px; 
        width: -webkit-calc(100% - 60px) !important;
        }
    ul.timeline > li > .timeline-date {
        width: 50px;
        height: 50px;
        left: 15px;
        }
        ul.timeline > li > .timeline-date h6 { line-height: 50px; }
        ul.timeline:before { left: 30px !important; }
}

@media (max-width: 1024px) {
    ul.timeline:before {
        left: 45px;
		}
    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
		}
    ul.timeline > li > .timeline-date {
        left: 5px;
        margin-left: 0;
        top: 0px;
    }
    ul.timeline > li > .timeline-panel {
        float: right;
		margin: 0px;
		}
        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
			}
        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
			}
}