
.breakdance .journey-nav {
	position: fixed;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	height: 260px;
	width: 180px;
	z-index: 999;
}

.breakdance .journey-nav .journey-rows {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	--dot-size: 9px;
	--line-width: 3px;
	--rail-x: 14px;
}

.breakdance .journey-nav .journey-rows::before {
	content: "";
	position: absolute;
	top: 4px;
	height: calc(100% - 8px);
	width: var(--line-width);
	left: calc(var(--rail-x) + ( var(--dot-size) - var(--line-width) ) / 2);
	background: rgba(255, 255, 255, .08);
	border-radius: 2px;
}

.breakdance .journey-nav .journey-row {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: calc(var(--rail-x) + var(--dot-size) + 12px);
}

.breakdance .journey-nav .journey-dot {
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 50%;
	background: rgba(255, 255, 255, .4);
	position: absolute;
	left: var(--rail-x);
	top: 50%;
	transform: translateY(-50%);
}

.breakdance .journey-nav .journey-row a {
	font-size: 10px !important;
	text-transform: uppercase !important;
	letter-spacing: .5px !important;
	color: #888 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
}

.breakdance .journey-nav .journey-row a:hover {
	color: #a0311b !important;
}
