.scroller-container {
	position: relative;
	text-align: center;
}
.scroller {
	overflow: hidden;
	text-align: left;
}
.scroller-items {
	white-space: nowrap;
}
.scroller-item {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	white-space: normal;
	box-sizing: border-box;
	padding: 0 2px;
}
.scroller-item.inline {
	width: auto;
}
.scroller-offset-container.centre {
	text-align: center;
	height: 0;
	overflow: hidden;
}
.scroller-container.not-scrollable .scroller-button-container,
.scroller-container.not-scrollable .scroller-button,
.scroller-container.not-scrollable .scroller-navigator-container,
.scroller-container.not-scrollable .scroller-navigator {
	display: none;
}

.scroller-container .navigation-button-container .navigation-button {
	position: absolute;
}
.scroller-container .navigation-button-container .navigation-button.previous {
	left: 0;
}
.scroller-container .navigation-button-container .navigation-button.next {
	right: 0;
}

ol.scroller-navigator {
	display: none;
}
ul.scroller-navigator {
	margin-left: 0;
	list-style: none;
	text-align: center;
}
ul.scroller-navigator li {
	display: inline-block;
	width: 0.79rem;
	height: 0.79rem;
	background: #332d2d;
	border-radius: 100%;
	cursor: pointer;
	transition: background-color 0.5s;
}
.coloured.dark li {
	background-color: white;
}
ul.scroller-navigator li + li {
	margin-left: 0.42rem;
}
ul.scroller-navigator li.selected,
ul.scroller-navigator li:hover {
	background-color: #0193c6;
}
.scroller-container.no-navigator .scroller-navigator,
.scroller.no-scroller-navigator + .scroller-navigator {
	display: none;
}

.scroller-container.centered-buttons .scroller-button-container {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -1.12em;
	width: 100%;
}
.scroller-container.centered-buttons .scroller-button-container .scroller-button {
	position: absolute;
}
.scroller-container.centered-buttons .scroller-button-container .scroller-button.prev {
	left: -3.5em;
}
.scroller-container.centered-buttons .scroller-button-container .scroller-button.next {
	right: -3.5em;
}
@media screen and (max-width: 50em) {
	.scroller-container.centered-buttons .scroller-button-container,
	.scroller-container.centered-buttons .scroller-button-container .scroller-button {
		margin-top: 1em;
		position: static;
	}
}

.three-photo-scroller .scroller-item,
.two-photo-scroller .scroller-item {
	padding: 2.5rem 1.25rem;
	box-sizing: border-box;
}
.three-photo-scroller .scroller-item {
	width: 33.33%;
}
.two-photo-scroller .scroller-item {
	width: 50%;
}
.three-photo-scroller .scroller-item img,
.two-photo-scroller .scroller-item img {
	display: block;
}


@media screen and (max-width: 960px) {
	.three-photo-scroller .navigation-button-container,
	.two-photo-scroller .navigation-button-container {
		left: 1.5rem;
		right: 1.5rem;
	}
	.three-photo-scroller .navigation-button-container .navigation-button,
	.two-photo-scroller .navigation-button-container .navigation-button {
		margin-left: 0;
		margin-right: 0;
	}
}
@media screen and (max-width: 900px) {
	.three-photo-scroller.horizontal-padding,
	.two-photo-scroller.horizontal-padding {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
	}
	.three-photo-scroller .scroller-item,
	.two-photo-scroller .scroller-item {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
	.three-photo-scroller .navigation-button-container,
	.two-photo-scroller .navigation-button-container {
		left: 0.75rem;
		right: 0.75rem;
	}
}
@media screen and (max-width: 600px) {
	.three-photo-scroller,
	.two-photo-scroller {
		margin-bottom: 2rem;
	}
	.three-photo-scroller.horizontal-padding,
	.two-photo-scroller.horizontal-padding {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.three-photo-scroller .scroller-item,
	.two-photo-scroller .scroller-item {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.three-photo-scroller .navigation-button-container,
	.two-photo-scroller .navigation-button-container {
		left: 2rem;
		right: 2rem;
		top: 100%;
	}
}