.timeline {
    position: relative;
    width: 960px;
    margin: 0 auto;
    margin-top: 4em;
}
.timeline .line {
    width: 2px;
    z-index: -1;
    top: 0;
    height: 1365px;
    margin-right: 478px;
    background-color: rgba(72, 133, 205, 0.6);
    margin-bottom: 115px;
}
.timeline .nodes {
    width: 52px;
    margin: 0 auto;
    position: absolute;
    left: 455px;
    top: -48px;
}
.timeline .nodes .year {
    color: #FFFFFF;
    background: #2196F3;
    border-radius: 50%;
    line-height: 59px;
    width: 59px;
    height: 59px;
    text-align: center;
    margin-right: -3px;
}
.timeline .nodes .year.y85 {
    margin-top: 15px;
}
.timeline .nodes .year.y87 {
    margin-top: 15px;
}
.timeline .nodes .year.y88 {
    margin-top: 22px;
}
.timeline .nodes .year.y90 {
    margin-top: 20px;
}
.timeline .nodes .year.y91 {
    margin-top: 30px;
}
.timeline .nodes .year.y92 {
    margin-top: 17px;
}
.timeline .nodes .year.yq {
    line-height: 55px;
}
.timeline .nodes .node {
    position: relative;
}
.timeline .nodes .node.right .box {
    left: 65px;
}
.timeline .nodes .node.left .box {
    right: 65px;
}
.timeline .nodes .node.left .box .starter .arrow {
    background-position: 0 0;
    left: auto;
    right: -9px;
}
.timeline .nodes .node .marker {
    background: #2196F3;
    width: 15px;
    height: 15px;
    margin: 0 18px;
    line-height: 20px;
    border-radius: 50%;
}
.timeline .nodes .node .box {
    -webkit-transition-delay: 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
    width: 429px;
    background: #fff;
    position: absolute;
    top: -12px;
}
.timeline .nodes .node .box:hover {
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
}
.timeline .nodes .node .box:hover {
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 5px #CCC;
}
.timeline .nodes .node .box:hover p {
}
.timeline .nodes .node .box .starter {
    padding: 10px;
    margin: 0;
}
.timeline .nodes .node .box .starter.blue {
    background: #2196F3;
}
.timeline .nodes .node .box .starter.red {
    background: #e91e63;
}
.timeline .nodes .node .box .starter h3 {
    color: #FFFFFF;
    text-align: right;
    margin: 0;
    font-weight: 100;
}
.timeline .nodes .node .box .starter .arrow {
    width: 9px;
    height: 26px;
    background-position: 9px 0;
    position: absolute;
    top: 10px;
    left: -9px;
}
.timeline .nodes .node .box .starter .blue-arrow {
    /* background-image: url(../images/image-blue-arrow.png) */}
.timeline .nodes .node .box .starter .red-arrow {
    background-image: url(../images/image-red-arrow.png);
}
.timeline .nodes .node .box p {
    color: #8a92a5;
    line-height: 26px;
    text-align: right;
    margin: 0;
}
.timeline .nodes .node .box .date {
    padding-top: 8px;
    text-align: left;
}
.timeline .nodes .node .box .date span {
    overflow: hidden;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    text-align: left;
    height: 18px;
}
.timeline .nodes .node .box:hover .date span {
    background-position: 0 -18px;
}
.timeline .nodes .node.n1 {
    margin-top: 15px;
    z-index: 1;
}
.timeline .nodes .node.n2 {
    margin-top: 15px;
    z-index: 2;
}
.timeline .nodes .node.n3 {
    margin-top: 130px;
    z-index: 3;
}
.timeline .nodes .node.n4 {
    margin-top: 40px;
    z-index: 4;
}
.timeline .nodes .node.n5 {
    margin-top: 80px;
    z-index: 5;
}
.timeline .nodes .node.n6 {
    margin-top: 15px;
    z-index: 6;
}
.timeline .nodes .node.n7 {
    margin-top: 35px;
    z-index: 7;
}
.timeline .nodes .node.n8 {
    margin-top: 145px;
    z-index: 8;
}
.timeline .nodes .node.n9 {
    margin-top: 20px;
    z-index: 9;
}
.timeline .nodes .node.n10 {
    margin-top: 15px;
    z-index: 10;
}
.node.n11.left {
    margin-top: 65px;
}

.node.n12.right {
    margin-top: 35px;
}

.node.n13.left {
    margin-top: 15px;
}

.node.n14.right {
    margin-top: 55px;
}
.content-timeline {
  overflow: hidden;
  border: 1px solid #DBDBDB;
  border-top: none;
  padding: 10px;
}
@media ( max-width: 960px ) {
    .line {
    margin-right: 26px !important;
    height: 2935px !important;
    position: absolute;
    }

    .nodes {
    margin-right: 0 !important;
    left: inherit;
    right: 0;
    }

    .timeline .nodes .node {
    float: right;
    margin-right: 70px;
    margin-top: 15px !important;
    }

    .timeline .nodes .node .box {
    position: initial;
    float: right;
    }

    .timeline .nodes {
    width: auto;
    position: initial;
}

    .timeline .nodes .node .marker {
    position: absolute;
    right: -50px;
    margin-right: 0;
    }

    .year {
    float: right;
    }

    section.timeline {
    width: 510px;
    }
}
@media ( max-width: 520px ) {
.line {
    display: none;
}

.marker {
    display: none;  
}

.year {
    display: none;
}

.node {
    margin-right: 0 !important;
    width: 100% !important;
}

.nodes {
    width: 100% !important;
}

section.timeline {
    width: 100%;
    overflow: hidden;
    margin: 5px;
}

.timeline .nodes .node .box {
    width: 100%;
}
}