.timeline {
	background: #efefef;
}

.timeline-title {
	background: #39b9a9;
    background: -moz-linear-gradient(left, #6c2577 0%, #005ba8 50%, #39b9a9 100%);
    background: -webkit-linear-gradient(left, #6c2577 0%,#005ba8 50%,#39b9a9 100%);
    background: linear-gradient(to right, #6c2577 0%,#005ba8 50%,#39b9a9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39b9a9', endColorstr='#39b9a9',GradientType=1 );
	padding-top: 20px;
	padding-bottom: 40px;
	position:relative;
}

.timeline-title:before {
	content:'';
	border-bottom: 20px solid #efefef;
	border-left: 0px solid transparent;
	border-right: 40px solid transparent;
	height: 0;
	width: 50%;
	position:absolute;
	left: 0;
	bottom: 0;
}
.timeline-title:after {
	content:'';
	border-bottom: 20px solid #efefef;
	border-left: 40px solid transparent;
	border-right: 0px solid transparent;
	height: 0;
	width: 50%;
	position:absolute;
	right: 0;
	bottom: 0;
}


.timeline-holder {
    padding: 20px 0;
	position: relative;
}

.timeline-holder:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 18px;
    height: calc(100% - 40px);
    width: 4px;
    background: white;
}

.timeline-block {
    display: flex;
    position: relative;
    z-index: 1;
    margin-bottom: 2em;
    align-items: center;
}

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

.timeline-index {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0,0,0,.08),0 3px 0 4px rgba(0,0,0,.05);
    will-change: transform;
    background: #39b9a9;
    background: -moz-linear-gradient(left, #6c2577 0%, #005ba8 50%, #39b9a9 100%);
    background: -webkit-linear-gradient(left, #6c2577 0%,#005ba8 50%,#39b9a9 100%);
    background: linear-gradient(to right, #6c2577 0%,#005ba8 50%,#39b9a9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39b9a9', endColorstr='#39b9a9',GradientType=1 );
    text-align: center;
}

.timeline-index h4{
	line-height:44px;
	color:white;
	margin: 0;
}

.timeline-content {
	-ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
    margin-left: 25px;
    background: white;
    padding: 20px;
    box-shadow: 0 0 30px rgb(0 0 0 / 30%);
    border-radius: 2px;
	color:#512461;
    font-size: .9em;
}

.timeline-content:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 100%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-right-color: #fff;
}

.timeline-content .d-flex{
	flex-direction: column;
	text-align:center;
}

.hidden-timeline-element {
	visibility: hidden;
}

.index-bounce-in {
	-webkit-animation: bounce-1 .6s;
    animation: bounce-1 .6s
}
.content-bounce-in {
	-webkit-animation: bounce-2 .6s;
    animation: bounce-2 .6s;
}

@media all and (min-width: 576px) {
	.timeline-content .d-flex {
		flex-direction: row;
		text-align:left;
	}
}

@media all and (min-width: 992px) {
	.timeline-block:nth-child(even) {
	    -ms-flex-direction: row-reverse;
	    flex-direction: row-reverse;
	}
	
	.timeline-index {
	    width: 60px;
	    height: 60px;
	    -ms-flex-order: 1;
	    order: 1;
	    margin-left: calc(7% - 30px);
	}
	
	.timeline-block:nth-child(even) .timeline-index {
		margin-right: calc(7% - 30px);
	}
	
	.timeline-index h4{
		line-height:64px;
	}
	
	.timeline-content {
	    width: 43%;
	    -ms-flex-positive: 0;
	    flex-grow: 0;
	    will-change: transform;
	    margin: 0;
	    --line-height-multiplier: 1.2;
	}

	.timeline-block:nth-child(odd) .timeline-content:before {
	    right: auto;
	    left: 100%;
	    width: 0;
	    height: 0;
	    border: 15px solid transparent;
	    border-left-color: #fff;
	}
	
	.timeline-holder:before {
		left: 50%;
	    -webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	    transform: translateX(-50%);
	}
	
	.timeline-block:nth-child(even) .content-bounce-in {
		-webkit-animation-name: bounce-2-inverse;
	    animation-name: bounce-2-inverse;
	}
}

@keyframes bounce-1 {
	0% {
	    opacity: 0;
	    -webkit-transform: scale(.5);
	    transform: scale(.5);
	}
	
	60% {
	    opacity: 1;
	    -webkit-transform: scale(1.2);
	    transform: scale(1.2);
	}
	
	100% {
	    -webkit-transform: scale(1);
	    transform: scale(1);
	}
}

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

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