@charset "UTF-8";

:root {
	--white: #ffffff;
	--green: #65CA6F;
}

/** {
	box-sizing: border-box;
}*/

/* The actual timeline (the vertical ruler) */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
	content: '';
	position: absolute;
	width: 0;
	/*background-color: white;*/
	border: 0.5px dashed rgba(0,171,169,0.4);
	top: 0;
	bottom: 0;
	left: 20%;
	margin-left: -7px;
}

/* tl-container around tl-content */
.tl-container {
	padding: 10px 40px;
	position: relative;
	background-color: transparent;
	width: 70%;
	box-sizing: border-box;
}

/* The circles on the timeline */
.tl-container::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 4px;
	background-color: rgba(255,255,255,0.9);
	border: 4px solid #00aba9;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

/* Place the tl-container to the tl-right */
.tl-right {
	left: 20%;
}

/* Add arrows to the tl-right tl-container (pointing left) */
.tl-right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 17px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid rgba(255,255,255,0.9);
	border-width: 10px 10px 10px 0;
	border-color: transparent rgba(255,255,255,0.9) transparent transparent;
}

/* Fix the circle for tl-containers on the tl-right side */
.tl-right::after {
	left: -16px;
}

/* The actual tl-content */
.tl-content {
	padding: 14px;
	background-color: rgba(255,255,255,0.2);
	position: relative;
	border-radius: 6px;
	/*)border: 1px solid #dddddd;*/
	box-sizing: border-box;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
	.timeline::after {
		left: 31px;
	}

	/* Full-width tl-containers */
	.tl-container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.tl-container::before {
		left: 60px;
		border: medium solid rgba(255,255,255,0.9);
		border-width: 10px 10px 10px 0;
		border-color: transparent rgba(255,255,255,0.9) transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.left::after, .tl-right::after {
		left: 15px;
	}

	/* Make all tl-right tl-containers behave like the left ones */
	.tl-right {
		left: 0%;
	}
}