.bx-wrapper {
	clear: both;
	border: 1px solid currentColor;
	margin: 1.5em 0 .25em;
}

.bx-viewport { background: currentColor; }

.highlightReel {
	list-style: none;
	padding-left: 0;
}

.js .highlightReel:not([style]) {
	height: 183px;
	overflow: hidden;
}
.highlightReel[style] { margin: 0; }

.highlightReel li { background: linear-gradient(#444, currentColor); }

.highlightReel .flex {
	display: flex;
	min-height: 158px;
}

.highlightReel .copy {
	color: #fff;
	flex: 0 0 50%;
	padding: 0 .5em;
}

.highlightReel .copy a { color: #85d2ff; }

.highlightReel .background {
	background: 100% 0 no-repeat;
	flex: 0 0 50%;
}


.bx-controls {
	background: linear-gradient(currentColor, #444);
	border: 1px solid;
	border-width: 0 1px 1px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}
.bx-controls .bx-pager-item { float: left; }
.bx-controls .bx-pager-item a {
	color: #c7cbcd;
	display: inline-block;
	font-weight: 700;
	line-height: 24px;
	padding: 0 1em;
	text-decoration: none;
	transition: .2s linear;
}
.bx-controls .bx-pager-item a:hover,
.bx-controls .bx-pager-item a:focus { color: #fff; }
.bx-controls .bx-pager-item .active {
	color: #fff;
	font-size: 1.2em;
}

@media (max-width: 530px) {
	.highlightReel a:not(:only-child) img {
		left: -259px;
		max-width: none;
		position: relative;
	}
	.highlightReel .copy {
		box-shadow: none;
		position: static;
	}
}