.timeline-img {
  background:var(--primary-color);
  width:120px;
  height:120px;
  margin-left: -58px;
}

.time-line-container::after {
    content: '';
    display: table;
    clear: both
}

#timeline {
    position: relative;
    padding: 2em 0;
    margin-bottom: 5em
}

.timeline-block {
    position: relative;
    margin: 2em 0
}

.timeline-block .timeline-content h2 {
    color: #4e8a84;
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 5px;
    font-weight: 100
}

.timeline-block .timeline-content h6 {
    font-size: 18px;
    color: #777;
    line-height: 125%;
    font-weight: 500;
    letter-spacing: 0
}

.timeline-block .timeline-content p {
    color: #494a52 font-size:16px;
    font-weight: 400;
    line-height: 135%;
    font-family: inherit
}

.timeline-block::after {
    clear: both;
    content: "";
    display: table
}

.timeline-block:first-child {
    margin-top: 0
}

.timeline-block:last-child {
    margin-bottom: 0
}

.timeline-img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.timeline-img img {
    display: block;
    width: 170px;
    height: 170px;
    position: relative;
    left: 0;
    margin-left: -12px;
    margin-top: 0;
    vertical-align: middle;
    width: 160px;
    height: 160px;
    margin: 5px;
    border-radius: 100%
}

.timeline-img.picture {
    background: #5b6a81
}

@-webkit-keyframes bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes bounce-1 {
    0% {
        opacity: 0;
        -moz-transform: scale(0.5)
    }

    60% {
        opacity: 1;
        -moz-transform: scale(1.2)
    }

    100% {
        -moz-transform: scale(1)
    }
}

@keyframes bounce-1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2)
    }

    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

.timeline-content {
    position: relative;
    margin-left: 60px;
    padding: 0 1em
}

.timeline-content::after {
    clear: both;
    content: "";
    display: table
}

.timeline-content h2 {
    color: #303e49
}

.timeline-content p {
    font-size: 13px;
    font-size: .8125rem
}

.timeline-content p {
    margin: 1em 0;
    line-height: 1.6
}

@-webkit-keyframes bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px)
    }

    100% {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes bounce-2 {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(20px)
    }

    100% {
        -moz-transform: translateX(0)
    }
}

@keyframes bounce-2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -moz-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        -o-transform: translateX(-100px);
        transform: translateX(-100px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px)
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px)
    }

    100% {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes bounce-2-inverse {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(-20px)
    }

    100% {
        -moz-transform: translateX(0)
    }
}

@keyframes bounce-2-inverse {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -moz-transform: translateX(100px);
        -ms-transform: translateX(100px);
        -o-transform: translateX(100px);
        transform: translateX(100px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        -o-transform: translateX(-20px);
        transform: translateX(-20px)
    }

    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

@media(max-width: 768px) {
    #timeline {
        text-align:center
    }

    .timeline-img {
        position: static;
        margin: 0 auto 40px;
        text-align: center
    }

    .timeline-img img {
        display: inline-block
    }

    .timeline-content {
        margin-left: 0
    }

    #timeline {
        margin-top: 3em;
        margin-bottom: 3em
    }
}

@media only screen and (min-width: 768px) {
    .timeline-content h2 {
        font-size:20px;
        font-size: 1.25rem
    }

    .timeline-content p {
        font-size: 16px;
        font-size: 1rem
    }

    .timeline-block.odd .timeline-content {
        text-align: right
    }

    #timeline::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 18px;
        height: calc(100% - (50px + 30px));
        width: 6px;
        background: #d7e4ed;
        left: 50%;
        margin-left: -2px
    }

    .timeline-block {
        margin: 3em 0
    }

    .timeline-block:first-child {
        margin-top: 0
    }

    .timeline-block:last-child {
        margin-bottom: 0
    }

    .timeline-img {
        left: 50%;
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        background: #5b6a81
    }

    .timeline-img.is-hidden {
        visibility: hidden
    }

    .timeline-img.bounce-in {
        visibility: visible;
        -webkit-animation: bounce-1 .6s;
        -moz-animation: bounce-1 .6s;
        animation: bounce-1 .6s
    }

    .timeline-content {
        margin-left: 0;
        padding: 0 5px;
        width: 38%
    }

    .timeline-block.even .timeline-content {
        float: right
    }

    .timeline-content.is-hidden {
        visibility: hidden
    }

    .timeline-content.bounce-in {
        visibility: visible;
        -webkit-animation: bounce-2 .6s;
        -moz-animation: bounce-2 .6s;
        animation: bounce-2 .6s
    }

    .timeline-block.even .timeline-content.bounce-in {
        -webkit-animation: bounce-2-inverse .6s;
        -moz-animation: bounce-2-inverse .6s;
        animation: bounce-2-inverse .6s
    }

    #timeline {
        padding: 9em 0 0
    }
}

@media(min-width: 768px) and (max-width:991px) {
    .timeline-img {
        width:100px;
        height: 100px;
        left: 50%;
        margin-left: -50px
    }

    .timeline-img img {
        width: 90px;
        height: 90px
    }

    .timeline-block .timeline-content p {
        font-size: 14px
    }

    .timeline-block {
        margin: 2em 0
    }

    #timeline::before {
        height: calc(100% - (50px + 35px))
    }
}