/* panorama layout */
.panorama, .panorama-view {
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
}
.panorama-view {
	position: absolute;
	top: 0;
	left: 0;
}


/* panzoom.js layout */
.panorama-container {
	position: absolute;
	width: auto;
	max-width: 100%;
	height: 100%;
	top: 0;
	z-index: 1;
	overflow: hidden;
}
.panorama-container img {
	position: relative;
	max-width: none;
	height: 100%;
}
.panorama .info, .panorama-view .area {
	position: absolute;
	display: block;
}


/* pano.js layout */
.pano {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	cursor: move;
}
.pano .controls {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	width: 100%;
	height: 100px;
	display: inline-block;
	z-index: 200;
}
.pano .controls a {
	position: absolute;
	width: 100px;
	height: 100px;
	background-image: url(../images/btn_arrows_prevnext_white.png);
	background-repeat: no-repeat;
	-webkit-background-size: 200px 100px;
	-moz-background-size: 200px 100px;
	-o-background-size: 200px 100px;
	background-size: 200px 100px;
	opacity: 0.5;
	filter: alpha(opacity=50);
	display: block;
	cursor: pointer;
	
}
.pano .controls a.left {
	left: 0;
	background-position: 0% 50%;
}
.pano .controls a.right {
	right: 0;
	background-position: 100% 50%;
}
.pano .controls a:hover,
.pano.moving .controls a {
	opacity: 1;
	filter: alpha(opacity=100);
}

@media only screen 
and (min-width: 320px) 
and (max-width: 480px) {
	.pano .controls {
		top: 50%;
		margin-top: -25px;
	}
	.pano .controls a {
		width: 50px;
		height: 50px;
		-webkit-background-size: 100px 50px;
		-moz-background-size: 100px 50px;
		-o-background-size: 100px 50px;
		background-size: 100px 50px;
	}
}