/* Applied to both arrows */
.bg-arrow {

	position: absolute;
	top: 50%;
	
	/* should be minus half the height of the arrow */
	margin-top: -118px;
	
	/* enter width and height of the arrows */
	width: 191px;
	height: 237px;
	
	/* background image */
	background: url(../img/graphics/arrows.png) no-repeat left center;
	
	cursor: pointer;
	visibility: hidden;
	display: block;
	z-index: 999;
	opacity: 0;
	
	-webkit-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-moz-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-o-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-ms-transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	transition: all 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	
}

.bg-arrow-visible {

	visibility: visible;
	opacity: 1;
	
}

.bg-arrow-visible:hover {

	opacity: 0.65;
	
}

.bg-arrow-left {
	
	left: 0;
	
}

.bg-arrow-right {

	right: 0;
	background-position: right center;
	
}