.timeline-container {
	display: flex;
	flex-direction: column;
}

.timeline-item {
	display: grid;
	grid-template-columns: 1fr 2fr;
	width: 100%;
}

/* Left column */
.timeline-item .col-left {
	padding-right: 4rem;
	position: relative;
	background: linear-gradient(to bottom, rgba(100, 200, 200, 0), rgba(100, 200, 200, 0)), linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .8));
	background-position: 0 0, 100% 0;
	background-repeat: no-repeat;
	background-size: 1px 0;
}

.timeline-item .col-left .square {
	position: absolute;
	content: '';
	background-color: #D1F1AB;
	width: 20px;
	right: 1px;
	top: 0;
	height: 0;
}

/* Right column */
.timeline-item .col-right {
	padding-left: 4rem;
	padding-bottom: 5rem;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

/* Active item animation */
.timeline-item.active .col-left .square {
	height: 40px;
	transition: height .3s ease;
}

.timeline-item.active .reveal {
	opacity: 1 !important;
	transition: 1s ease;
}

.timeline-item.active .col-left {
	background-size: 1px 100%;
	transition: .8s ease;
}

.reveal{
	opacity: 0 !important;
	transition: 1s ease;
}

/* Fonts and other items */
.timeline-item .title {
	color: #D1F1AB;
	margin: 0;
	font-size: 1.5rem;
}

.timeline-item .subtitle,
.timeline-item .description,
.timeline-item .description * {
	color: rgba(255, 255, 255, .8);
	margin: 0;
}

/* Media query */
@media (max-width:767px) { 
	.timeline-container {
		row-gap: 0;
	}
	.timeline-item {
		display: flex;
		flex-direction: column;
		row-gap: 1.5rem;
		position: relative;
		background: linear-gradient(to bottom, rgba(100, 200, 200, 0), rgba(100, 200, 200, 0)), linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .8));
		background-position: 0 0, 10px 0;
		background-repeat: no-repeat;
		background-size: 1px 0;
	}

	.timeline-item.active {
		background-size: 1px 100%;
		transition: 1.2s ease;
	}

	.timeline-item .col-left {
		padding-left: 3rem;
		background: none;
	}

	.timeline-item .col-left .square {
		left: 0;
		right: unset;
		height: 30px !important;
	}

	.timeline-item .col-right{
		padding: 0 0 3rem 3rem;
		row-gap: .5rem;
	}

	.timeline-item:last-child .col-right{
		padding-bottom: 0;
	}

	.timeline-item .subtitle {
		font-size: 18px;
	}
}