.vertical-selector {
	list-style: none;
	margin: 0;
	padding: 0 1rem;
	counter-reset: counter-bldgsfacs;
}
.vertical-selector dt {
	counter-increment: counter-bldgsfacs;
	
	display: block;
	width: calc(40% - 1rem);
  margin: 0;
	padding: 1.5rem 0 1.5rem 6rem;
	
	color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  white-space: nowrap;

	transition: padding-left 250ms cubic-bezier(.25,.46,.45,.94);
}
.vertical-selector dt:before {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	position: absolute;
	z-index: -1;
  transition: background-color 250ms cubic-bezier(.25,.25,.75,.75),top 250ms cubic-bezier(.25,.46,.45,.94),right 250ms cubic-bezier(.25,.46,.45,.94),bottom 250ms cubic-bezier(.25,.46,.45,.94),left 250ms cubic-bezier(.25,.46,.45,.94);
  
}
.vertical-selector dt:after {
	content: counter(counter-bldgsfacs);
	position: absolute;
	top: 50%;
	left: 1rem;
	right: 84%;
	text-align: center;
	font-size: 1.1rem;
	color: #fff;
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
	transition: transform 250ms cubic-bezier(.25,.46,.45,.94),opacity 250ms cubic-bezier(.25,.25,.75,.75);
}
.vertical-selector dt:nth-of-type(-n+9):after {
  content: "0" counter(counter-bldgsfacs);
}
.vertical-selector dt:nth-of-type(1):before { background-color: hsl(42.7, 45.7%, 47.6%); }
.vertical-selector dt:nth-of-type(2):before { background-color: hsl(42.7, 45.7%, 46.6%); }
.vertical-selector dt:nth-of-type(3):before { background-color: hsl(42.7, 45.7%, 45.6%); }
.vertical-selector dt:nth-of-type(4):before { background-color: hsl(42.7, 45.7%, 44.6%); }
.vertical-selector dt:nth-of-type(5):before { background-color: hsl(42.7, 45.7%, 43.6%); }
.vertical-selector dt:nth-of-type(6):before { background-color: hsl(42.7, 45.7%, 42.6%); }
.vertical-selector dt:nth-of-type(7):before { background-color: hsl(42.7, 45.7%, 41.6%); }
.vertical-selector dt:nth-of-type(8):before { background-color: hsl(42.7, 45.7%, 40.6%); }
.vertical-selector dt:nth-of-type(9):before { background-color: hsl(42.7, 45.7%, 39.6%); }
.vertical-selector dt:nth-of-type(10):before { background-color: hsl(42.7, 45.7%, 38.6%); }
.vertical-selector dt:nth-of-type(11):before { background-color: hsl(42.7, 45.7%, 37.6%); }
.vertical-selector dt:nth-of-type(12):before { background-color: hsl(42.7, 45.7%, 36.6%); }

.vertical-selector.selector-gray dt:nth-of-type(1):before { background-color: hsl(210, 9.2%, 32.9%); }
.vertical-selector.selector-gray dt:nth-of-type(2):before { background-color: hsl(210, 9.2%, 30.9%); }
.vertical-selector.selector-gray dt:nth-of-type(3):before { background-color: hsl(210, 9.2%, 28.9%); }
.vertical-selector.selector-gray dt:nth-of-type(4):before { background-color: hsl(210, 9.2%, 26.9%); }
.vertical-selector.selector-gray dt:nth-of-type(5):before { background-color: hsl(210, 9.2%, 24.9%); }
.vertical-selector.selector-gray dt:nth-of-type(6):before { background-color: hsl(210, 9.2%, 22.9%); }
.vertical-selector.selector-gray dt:nth-of-type(7):before { background-color: hsl(210, 9.2%, 20.9%); }
.vertical-selector.selector-gray dt:nth-of-type(8):before { background-color: hsl(210, 9.2%, 18.9%); }
.vertical-selector.selector-gray dt:nth-of-type(9):before { background-color: hsl(210, 9.2%, 16.9%); }
.vertical-selector.selector-gray dt:nth-of-type(10):before { background-color: hsl(210, 9.2%, 14.9%); }
.vertical-selector.selector-gray dt:nth-of-type(11):before { background-color: hsl(210, 9.2%, 12.9%); }
.vertical-selector.selector-gray dt:nth-of-type(12):before { background-color: hsl(210, 9.2%, 10.9%); }

.vertical-selector dd {
	position: absolute;
	top: 0;
	left: 40%;
	width: calc(60% - 2rem);
	height: 100%;
	margin: 0;
	padding: 1rem;
	
	opacity: 0;  
}
.vertical-selector dt.is-active + dd,
.vertical-selector dt:hover + dd,
.vertical-selector dt:focus + dd { opacity: 1; }
.vertical-selector dd:before {
	top: 0;
	bottom: 0;
	left: 0;
	right: -1rem;
	content: '';
	position: absolute;
	background-color: white;
}
.vertical-selector dd .bg {
	top: 0;
	bottom: 0;
	left: 0;
	right: -1rem;
	position: absolute;
	background-size: cover;
	background-position: center;
	opacity: .12;
}
.vertical-selector figure {
  display: block;
  float: right;
  width: 50%;
  height: auto;
  margin: -2rem -3rem 2rem 2rem;
}
.vertical-selector figcaption {
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: 0.9rem;
  font-style: italic;
}
.vertical-selector figure img {
  width: 100%;
}
.vertical-selector p {
  font-weight: 400;
}