.timeline {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
}
.timeline::after {
	content: "";
	position: absolute;
	width: 6px;
	background-color: #000;
	top: 0;
	bottom: 0;
	left: 50%;
}
#container {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
}
#container::after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	right: -16px;
	background-color: #f89e32;
	border: solid 2px #000;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}
.left {
	left: 0;
}
.right {
	left: 50%;
}
.left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid #f89e32;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #f89e32;
}
.right::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid #f89e32;
	border-width: 10px 10px 10px 0;
	border-color: transparent #f89e32 transparent transparent;
}
.right::after {
	left: -12px;
}
.content {
	padding: 20px 30px;
	background-color: #f89e32;
	position: relative;
	border-radius: 8px;
	color:#fff;
}
@media screen and (max-width: 600px) {
	.timeline::after {
		left: 31px;
	}
	#container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}
	#container::before {
		left: 60px;
		border: medium solid #f89e32;
		border-width: 10px 10px 10px 0;
		border-color: transparent #f89e32 transparent transparent;
	}
	.left::after,
	.right::after {
		left: 22px;
	}
	.right {
		left: 0%;
	}
}