.cd-timeline__img--hidden, .cd-timeline__content--hidden {visibility: hidden;}

.cd-timeline { display: block; max-width: 1000px; margin: 0 auto; padding 2em; }

.cd-timeline__container { position: relative; padding: 1.25em 0; margin: 0;}
.cd-timeline__container::before { content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 2px; background: black;}

.cd-timeline__block { display: flex; position: relative; z-index: 1; margin: 0 auto 2em auto; padding: 0;}
.cd-timeline__block:last-child { margin-bottom: 0 }
.cd-timeline__block:nth-child(even) { flex-direction: row-reverse }
.cd-timeline__block:nth-child(even) .cd-timeline__date { left: auto; right: 120%; text-align: right }

.cd-timeline__img { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: #1f8286; margin-left: calc(5% - 30px); order: 1; }
.cd-timeline__img img {width: 35px; height: 35px;}
.cd-timeline__block:nth-child(even) .cd-timeline__img { margin-right: calc(5% - 30px) }
.cd-timeline__block:nth-child(odd) .cd-timeline__content::before { right: auto; left: 100%; width: 0; height: 0; }

.cd-timeline__content { position: relative; margin: 0; padding: 0; width: 45%;}


/*Animation*/
.cd-timeline__img--bounce-in { animation: cd-bounce-1 0.6s }
.cd-timeline__content--bounce-in { animation: cd-bounce-2 0.6s }
.cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in { animation-name: cd-bounce-2-inverse }

@keyframes cd-bounce-1 {
    0% { opacity: 0; transform: scale(0.5) }
    60% { opacity: 1; transform: scale(1.2) }
    100% { transform: scale(1) }
}

@keyframes cd-bounce-2 {
    0% { opacity: 0; transform: translateX(-100px) }
    60% { opacity: 1; transform: translateX(20px) }
    100% { transform: translateX(0) }
}

@keyframes cd-bounce-2-inverse {
    0% { opacity: 0; transform: translateX(100px) }
    60% { opacity: 1; transform: translateX(-20px) }
    100% { transform: translateX(0) }
}