.clear {
    clear: both
}

.timeline-box {
    background: #fff;
    padding: 20px 8px;
    position: relative;
    opacity: 0.9;
}

.timeline-main {
    position: relative;
}

.timeline-main>h1 {
    font-size: 18px;
    background: #fff;
    z-index: 1;
    position: relative;
    color: #f6f7fb;
    margin-left: 33%;
    margin-left: -moz-calc(35% - 7px);
    margin-left: -webkit-calc(35% - 7px);
    margin-left: calc(35% - 7px)
}

.timeline-main>h1>i {
    padding-right: 10px;
    font-size: 20px
}

.timeline-main>h1>span {
    display: none
}

.timeline-main h2,
.timeline-main h3 {
    width: 31%;
    text-align: right
}

.timeline-main h2,
.timeline-main h2>a {
    font-size: 16px;
    margin: 5px 0;
    color: #01438a
}

.timeline-main h3,
.timeline-main h3>a {
    font-size: 14px;
    margin: 2px 0;
    color: #ff5722
}

.timeline-month>ul>li {
    padding: 10px 0
}

.timeline-month>ul>li .h4 {
    display: inline-block;
    width: 31%;
    text-align: right;
    float: left
}

.date {
    display: inline-block;
    padding: 2px 5px;
    color: #f6f7fb;
    font-size: 15px;
    margin-top: 5px
}

.dot-circle {
    color: #ff7c01;
    width: 8%;
    text-align: center;
    font-size: 22px;
    z-index: 1;
    position: relative;
    background: #fff;
    float: left
}

.content {
    max-width: 50%;
    float: left;
    padding: 20px;
    margin-left: 10px;
    position: relative;
    z-index: 1;
    border: #3D3D3D;
    background: #01438A;
    color: #FFFFFF;
}

.content img {
    width: 100%
}

.content::before {
    position: absolute;
    left: -20px;
    top: 6px;
    height: 0;
    width: 0;
    content: '';
    border: 10px solid rgba(255, 255, 255, .4);
    border-top: 6px solid rgba(255, 255, 255, .4);
    border-bottom: 6px solid rgba(255, 255, 255, .4);
    border-right-color: #01438A
}

.timeline-line {
    position: absolute;
    left: 35%;
    top: 0;
    height: 100%;
    width: 2px;
    background: #484348;
    z-index: 0
}

.timeline-year {
    margin: 10px 0
}

@media(min-width:768px) {
    .timeline-box {
        background: #fff;
        padding: 40px 15px;
        position: relative;
    }
    .timeline-main>h1 {
        font-size: 26px;
        margin-left: 16%;
        margin-left: -moz-calc(18% - 13px);
        margin-left: -webkit-calc(18% - 13px);
        margin-left: calc(18% - 13px)
    }
    .timeline-main>h1>i {
        font-size: 30px
    }
    .timeline-main>h1>span {
        display: inline
    }
    .timeline-main h2,
    .timeline-main h3 {
        width: 16%
    }
    .timeline-main h2,
    .timeline-main h2>a {
        font-size: 24px
    }
    .timeline-main h3,
    .timeline-main h3>a {
        font-size: 20px
    }
    .timeline-month>ul>li .h4 {
        width: 16%
    }
    .dot-circle {
        width: 4%;
        font-size: 22px
    }
    .content {
        max-width: 70%
    }
    .timeline-line {
        left: 18%
    }
}

@media(min-width:992px) {
    .timeline-main>h1 {
        font-size: 34px;
        background: #fff;
        z-index: 1;
        position: relative;
        color: #ff7c01;
        margin-left: 17%;
        margin-left: -moz-calc(18% - 16px);
        margin-left: -webkit-calc(18% - 16px);
        margin-left: calc(18% - 16px)
    }
    .timeline-main>h1>i {
        font-size: 36px
    }
    .timeline-main h2,
    .timeline-main h2>a {
        font-size: 30px
    }
    .timeline-main h3,
    .timeline-main h3>a {
        font-size: 24px
    }
}