/**
 * Timeline
 *
 * A vertical rule with a gold dot beside each entry. Each item carries a small
 * uppercase "when" label, a heading and a short description.
 *
 * Ported from the mockup's `.tl` component.
 */

.rc-timeline {
	border-left: 2px solid #e5e5e5;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rc-timeline li {
	padding: 0 0 30px 32px;
	position: relative;
}

/*
 * The ring is the page background, not a colour of its own — it masks the rule
 * behind the dot so the dot reads as sitting on the line rather than over it.
 * Change `border-color` to match if you place this on a tinted section.
 */
.rc-timeline li::before {
	background-color: #fc0;
	border: 3px solid #fff;
	border-radius: 50%;
	content: "";
	height: 14px;
	left: -8px;
	position: absolute;
	top: 8px;
	width: 14px;
}

.rc-timeline-when {
	color: #7e6200;
	font-size: .71875rem;
	font-weight: 600;
	letter-spacing: .16em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.rc-timeline h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	margin-bottom: 5px;
}

.rc-timeline p {
	color: #6e6e6e;
	font-size: .925rem;
	margin: 0;
}

/* On a faded section the ring has to match that tone instead of white. */
.bg-faded .rc-timeline li::before {
	border-color: #f7f7f7;
}