.timeline-panel {
	border-radius: 8px;
	box-shadow: 0 25px 34px 0 rgba(0, 0, 0, 0.1);
	background-color: var(--white);
	padding: 20px;
	margin-bottom: 49px;
}
.timeline-body {
	margin-top: 16px;
	line-height: 1.5;
	color: var(--text-light);
}
.date-container {
	align-items: baseline;
	margin: 2px 0 30px 0;
}
.timeline-date {
	width: 99px;
	height: 40px;
	border-radius: 8px;
}

.line {
	width: 100%;
	height: 1px;
	background-color: var(--info);
}
.timeline-date p {
	padding-top: 0.4rem;
}

.timeline-li {
	visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline-li.in-view {
	transform: none;
  visibility: visible;
  opacity: 1;
}

@media (min-width: 769px) {
	.timeline-point {
		text-align: center;
		margin-left: -23px;
		padding-bottom: 22px;
	}
	.timeline-point--end {
		position: absolute;
		margin-left: -27px;
		width: 100%;
	}
	.timeline-point::before {
		content: "";
		width: 25px;
		height: 25px;
		background-color: white;
		position: absolute;
		border-radius: 100%;
		border: var(--info) solid;
	}

	.line {
		display: none;
	}
	.date-container {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.timeline {
		list-style: none;
		padding: 10px 0;
		position: relative;
		font-weight: 300;
	}
	.timeline-date {
		z-index: 1;
		position: absolute;
		top: 25px;
	}
	.timeline-panel .h3-web {
		margin-left: 13px;
	}

	.timeline:before {
		top: 0;
		bottom: 0;
		position: absolute;
		content: " ";
		width: 4px;
		background: var(--info);
		left: 50%;
		margin-left: -1.5px;
	}

	.timeline > li {
		margin-bottom: -30px;
		position: relative;
		width: 50%;
		float: left;
		clear: left;
		margin-top: 69px;
	}
	.timeline-li-mt6 {
		margin-top: 6rem !important;
	}
	.timeline-li-mb1 {
		margin-bottom: 1rem !important;
	}

	.timeline > li:before,
	.timeline > li:after {
		content: " ";
		display: table;
	}

	.timeline > li:after {
		clear: both;
	}

	.timeline > li:before,
	.timeline > li:after {
		content: " ";
		display: table;
	}

	.timeline > li:after {
		clear: both;
	}

	.timeline > li > .timeline-panel {
		width: -webkit-calc(100% - 50px);
		float: left;
		position: relative;
	}

	.timeline > li.timeline-inverted > .timeline-panel {
		float: right;
	}

	.timeline-title {
		margin-top: 0;
		color: inherit;
	}

	.timeline-heading h4 {
		font-weight: 400;
		padding: 0 15px;
		color: #4679bd;
	}

	.timeline-body > p,
	.timeline-body > ul {
		padding: 10px 15px;
		margin-bottom: 0;
	}

	.timeline > li.timeline-inverted {
		float: right;
		clear: right;
	}

	.timeline > li.timeline-inverted > .timeline-badge {
		left: -12px;
	}

	.no-float {
		float: none !important;
	}
}