* {
		  box-sizing: border-box;
		}

		body {
		  background-color: #474e5d;
		  font-family: Helvetica, sans-serif;
		}

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

		/* The actual timeline (the vertical ruler) */
		.timeline::after {
		  content: '';
		  position: absolute;
		  width: 6px;
		  background-color: white;
		  top: 0;
		  bottom: 0;
		  left: 50%;
		  margin-left: -3px;
		}

		/* Container around content */
		.container {
		  padding: 10px 40px;
		  position: relative;
		  background-color: inherit;
		  width: 50%;
		}

		/* The circles on the timeline */
		.container::after {
		  content: '';
		  position: absolute;
		  width: 25px;
		  height: 25px;
		  right: -17px;
		  background-color: white;
		  border: 4px solid #FF9F55;
		  top: 15px;
		  border-radius: 50%;
		  z-index: 1;
		}

		/* Place the container to the left */
		.left {
		  left: 0;
		}

		/* Place the container to the right */
		.right {
		  left: 50%;
		}

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

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

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

		/* The actual content */
		.content {
		  padding: 20px 30px;
		  background-color: white;
		  position: relative;
		  border-radius: 6px;
		}

		/* 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 containers */
		  .container {
		  width: 100%;
		  padding-left: 70px;
		  padding-right: 25px;
		  }
		  
		  /* Make sure that all arrows are pointing leftwards */
		  .container::before {
		  left: 60px;
		  border: medium solid white;
		  border-width: 10px 10px 10px 0;
		  border-color: transparent white transparent transparent;
		  }

		  /* Make sure all circles are at the same spot */
		  .left::after, .right::after {
		  left: 15px;
		  }
		  
		  /* Make all right containers behave like the left ones */
		  .right {
		  left: 0%;
		  }
		}