.timeline { max-width: 852px; position: relative; }

.timeline > div:nth-of-type(even) { text-align: right; padding: 100px 120px 100px 20px; }
.timeline > div:nth-of-type(odd) { padding: 100px 20px 100px 120px; }

.timeline-block {
    position: relative;
    min-height: 250px;
}

.timeline p { line-height: 24px; }

.innerBlock {
    position: absolute;
    height: 25%;
    width: 50%;
    overflow: hidden;
}

.borderLeftBottom {
    bottom: -1px;
    left: 0;
    padding-bottom: 50px;
}

.borderLeftBottom svg.corner {
    position: absolute;
    bottom: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.borderLeftBottom svg.hline {
    position: absolute;
    bottom: -9px;
    left: 10px;
}

.borderLeftBottom svg.vline {
    position: absolute;
    top: -40px;
}

.borderLeftTop {
    top: -1px;
    left: 0;
}

.borderLeftTop svg.corner {
    position: absolute;
    top: 1px;
    left: 0;
}

.borderLeftTop svg.hline {
    position: absolute;
    top: 1px;
    left: 50px;
}

.borderRightTop {
    top: -1px;
    right: 0;
}

.borderRightTop svg.corner {
    position: absolute;
    right: 0;
    top: 1px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.borderRightTop svg.hline {
    position: absolute;
    right: 44px;
    top: 1px;
}

.borderRightTop svg.vline {
    right: -9px;
    top: 5px;
    position: absolute;
}

.borderRightBottom {
    bottom: -1px;
    right: 0;
    padding-bottom: 50px;
}

.borderRightBottom svg.corner {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
    right: 0;
    bottom: 0;
}

.borderRightBottom svg.hline {
    position: absolute;
    bottom: -9px;
    right: 50px;
}

.borderLeftTop svg.vline {
    position: absolute;
    top: 10px;
}

.borderRightBottom svg.vline {
    right: -9px;
    top: -46px;
    position: absolute;
}

.timeline-block img, .timeline-block figure {
    max-height: 110px;
    max-width: 110px;
}

.timeline-block figure figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding-right: 5px;
}

.timeline-block > img, .timeline-block figure, .timeline-block .history-bubble {
    position: absolute;
    top: 50%;
    z-index: 10;
}

.timeline-block .history-bubble {
    height: 180px;
    width: 180px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.imgLeft {
    left: -100px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

}

.imgRight {
    right: -100px;
    -webkit-transform: translateX(50%) translateY(-50%);
    -moz-transform: translateX(50%) translateY(-50%);
    -ms-transform: translateX(50%) translateY(-50%);
    -o-transform: translateX(50%) translateY(-50%);
    transform: translateX(50%) translateY(-50%);
}

.magic-timeline-block {
    position: absolute;
    height: 250px;
    right: -50%;
    top: 0;
    left: -50%;
    background-color: #F0F0F0;
    z-index: -1;
}

/* Animation */
.timeline-block figure,
.timeline-block .history-bubble {
    opacity: 0;
}

.timeline-block figure.visible,
.timeline-block .history-bubble.visible {
    opacity: 1;
}

.timeline-block figure,
.imgLeft,
.imgRight {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.timeline-block .imgLeft.visible { left: 0 }
.timeline-block .imgRight.visible { right: 0 }