/* 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;
}
.move-btn {
	display: inline-block;
	width: 50%;
	border: none;
    color: #fff;
	background-color: #2f3234;
	padding: 0.2em 1.5em;
    font-size: 30px;
}
.move-btn:hover {
    color: #2f3234;
	background-color: #fff;
}
.move-btn:first-child {
    border-right: none;
}
.move-btn.left  {
    cursor: pointer;
    float: left;
}
.move-btn.right {
    cursor: pointer;
}