/* Useful Classes */
.xy-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.transition {
	transition: all 350ms ease-in-out;
}

.r-3-2 {
	width: 100%;
	padding-bottom: 66.667%;
	background-color: #ddd;
}

.image-holder {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Main Styles */
.gallery-wrapper {
	position: relative;
	overflow: hidden;
}

.gallery {
	position: relative;
	white-space: nowrap;
	font-size: 0;
}

.item-wrapper {
	cursor: pointer;
	width: 23%; /* arbitrary value */
	display: inline-block;
	background-color: white;
}

.gallery-item { opacity: 0.5; }
.gallery-item.active { opacity: 1; }

.controls {
	font-size: 20pt;
	border-top: none;
}
.move-btn {
	display: inline-block;
	width: 100%;
	border: none;
  	color: #09a603;
	background-color: transparent;
	padding: 0.2em 1.5em;
}
.move-btn:first-child {
	border-right: none;
}
.move-btn.left { 
	cursor: w-resize; 
	float: left;
}

.move-btn.right { 
	cursor: e-resize; 
	float: right;
}