.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
    margin-top: 50px
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background: url(../images/time-line.png) repeat-y 0 0;
    left: 50%;
    margin-left: -1.5px
}
.timeline:after {
    bottom: -2px;
    position: absolute;
    content: "";
    width: 28px;
    height: 14px;
    background: url(../images/timeline-down-arrow.png) no-repeat 0 0;
    left: 50%;
    margin-left: -14px
}
.timeline > li {
    margin-bottom: 20px;
    position: relative;
    text-align: right
}
.timeline > li.timeline-inverted {
    text-align: left
}
.timeline > li p {
    line-height: 20px;
    font-size: 15px;
    font-family: "ralewaylight";
}
.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table
}
.timeline > li:after {
    clear: both
}
.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table
}
.timeline > li:after {
    clear: both
}
.timeline > li > .timeline-panel {
    width: 38%;
    float: left;
    border: 1px solid #EBEBEB;
    padding: 20px;
    position: relative;
    background: #fff
}
.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #EBEBEB;
    border-right: 0 solid #EBEBEB;
    border-bottom: 15px solid transparent;
    content: " "
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -13px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " "
}
.timeline > li > .timeline-badge {
    color: #fff;
    width: 95px;
    height: 95px;
    line-height: 125px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: -18px;
    left: 50%;
    margin-left: -62.5px;
    background: #fff;
    z-index: 100;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%
}
.timeline > li.timeline-inverted > .timeline-panel {
    float: right
}
.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 14px;
    left: -15px;
    right: auto
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto
}
.timeline-badge.primary {
    background-color: #2e6da4 !important
}
.timeline-badge.success {
    background-color: #3f903f !important
}
.timeline-badge.warning {
    background-color: #f0ad4e !important
}
.timeline-badge.danger {
    background-color: #d9534f !important
}
.timeline-badge.info {
    background-color: #5bc0de !important
}
.timeline-title {
    margin-top: 0;
    color: inherit
}
.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0
}
.timeline-body > p + p {
    margin-top: 5px
}
.timeline-panel h4 {
    color: #17479e;
    font-size: 18px;
    line-height: 20px;
    margin: 0 0 8px 0;
    font-weight: normal;
    font-family: "ralewaybold";
}

.timeline-panel:hover h4{
    color: #00b1ff;
}

.timeline-panel h4 span {
    color: #2099C1
}
.timeline > li > .ser1 {
    background: #00b1ff url(../images/service_icon1.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
.timeline > li > .ser2 {
    background: #011b40 url(../images/service_icon2.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
.timeline > li > .ser3 {
    background: #00b1ff url(../images/service_icon3.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
.timeline > li > .ser4 {
    background: #011b40 url(../images/service_icon4.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
.timeline > li > .ser5 {
    background: #00b1ff url(../images/service_icon6.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}
/*.timeline > li > .ser6 {
    background: #011b40 url(../images/service_icon6.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}*/


@media (max-width: 990px) {
    .timeline > li > .timeline-badge {
        height: 100px;
        line-height: 100px;
        margin-left: -50px;
        top: -5px;
        width: 100px
    }
}
@media (max-width: 860px) {
    ul.timeline:before,
    ul.timeline:after {
        left: 65px
    }
    ul.timeline > li > .timeline-panel {
        width: 72%
    }
    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: -9px
    }
    ul.timeline > li > .timeline-panel {
        float: right
    }
    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
    }
    ul.timeline > li {
        text-align: left
    }
}
@media (max-width: 485px) {
    ul.timeline > li > .timeline-panel {
        width: 68%
    }
}
@media (max-width: 400px) {
    .timeline > li > .timeline-badge {
        height: 80px;
        line-height: 80px;
        margin-left: -40px;
        top: -5px;
        width: 80px
    }
    ul.timeline:before,
    ul.timeline:after {
        left: 39px
    }
    ul.timeline > li > .timeline-badge {
        top: 0;
        left: 0
    }
    ul.timeline > li > .timeline-panel {
        width: 65%
    }
}

.bluecolor {
    color: #00b1ff !important;
}