.then-now {
	margin-top: 3rem;
    margin-bottom: 3rem;
}

.then-now__controls {
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 100;
}
	.then-now__controls .btn {
		font-family: var(--sans-serif-text);
		text-transform: uppercase;
	}
	.then-now__controls .btn-light.active {
		color: #333;
		background-color: #d0d0d0;
	}
	.then-now__controls .vertical-slider {
		height: 200px;
		margin-top: 1em;
		position: absolute;
		right: 0;
	}
	
	.then-now__controls .ui-state-active, 
	.then-now__controls .ui-widget-content .ui-state-active, 
	.then-now__controls .ui-widget-header .ui-state-active, 
	.then-now__controls a.ui-button:active, 
	.then-now__controls .ui-button:active, 
	.then-now__controls .ui-button.ui-state-active:hover {
		background-color: #f58025;
		border-color: #c35a09;
	}

.then-now__credit {
	font-family: var(--sans-serif-text);
	font-size: 1em;
	line-height: 1;
	margin-top: 0.5em;
	text-transform: uppercase;
}
	.then-now__credit p { margin-bottom: 0; }
	.then-now__credit small {
		color: #707070;
		font-size: 75%;
		margin-left: 0.5em;
	}
	
.then-now__images {
	position: relative;
}
	.then-now__images img {
		cursor: pointer;
	}
	.then-now__images img:last-child {
		left: 0;
		opacity: 0.5;
		position: absolute;
		top: 0;
		
		-webkit-backface-visibility: hidden; /*Gets rid of wiggle in webkit browsers upon animation*/
		/*
		-webkit-transition: opacity 300ms ease-in-out;
			-moz-transition: opacity 300ms ease-in-out;
			-ms-transition: opacity 300ms ease-in-out;
				-o-transition: opacity 300ms ease-in-out;
				transition: opacity 300ms ease-in-out;
		*/
	}

.then-now__title {
	text-transform: uppercase;
}
	.then-now__title:before {
		background-color: black;
		content: '';
		display: block;
		height: 5px;
		margin-top: 0.2em;
		margin-bottom: 0.2em;
		min-width: 50px;
		width: 15%;
	}