.gallery {
	height: 300px;
	position: relative;
	width: 450px;
}
	.gallery.center {
		margin: 2em auto;
	}
	.gallery.left {
		float: left;
		margin: 0 1em 1em 0;
	}
	.gallery.right {
		float: right;
		margin: 0 0 1em 1em;
	}
	.gallery ul {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
	}
		.gallery.activated .arrow-left, .gallery.activated .arrow-right {
			background: transparent center center no-repeat;
			-webkit-background-size: 50% 50%;
			        background-size: 50% 50%;
			border-radius: 6px;
			content: '';
			cursor: pointer;
			height: 60px;
			margin-top: -35px;
			position: absolute;
			top: 50%;
			width: 45px;
		}
		.gallery.activated .arrow-left {
			background-image: url('../imgs/ui/arrow-left.png');
			left: -60px;
		}
		.gallery.activated .arrow-right {
			background-image: url('../imgs/ui/arrow-right.png');
			right: -60px;
		}
			.gallery.activated .arrow-left:hover, .gallery.activated .arrow-right:hover {
				background-color: #ccc;
			}
		.gallery li, .gallery.activated li:first-child {
			display: block;
			left: 0;
			margin: 0;
			opacity: 0;
			padding: 0;
			position: absolute;
			top: 0;
			-webkit-transition: opacity 0.5s;
			        transition: opacity 0.5s;
		}
			.gallery li:first-child, .gallery.activated li.active {
				opacity: 1;
			}