.magnifyarea { /* CSS to add shadow to magnified image. Optional */
	box-shadow: 0px 0px 3px #dbdbdb;
	-webkit-box-shadow: 0px 0px 3px #dbdbdb;
	-moz-box-shadow: 0px 0px 3px #dbdbdb;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#dbdbdb, offX=5, offY=5, positive=true);
	background: white;
	margin-top: -1px !important;
}

.targetarea { /* CSS for container div(s) of the zoomable image */
	width: 100%;
	height: 100%;
	border: 1px solid #f1f1f1;
	background: #FFF;
	position: relative;
}

#two { /* Added CSS for second target div of zoomable images */
	height: 243px; /* high or higher than the tallest zoomable image */
}

.targetarea img { /* zoomable image */
	margin: auto; /* for horizontal centering */
	display: block; /* also for horizontal centering */
	position: absolute; /* along with on the fly calculations in script, for vertical centering */
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	border-width: 0;
	max-height: 100%;
	max-width: 100%;
	width: auto !important;
	height: auto !important;
}

.thumbs { /* divs holding the trigger links - styles optional, used here to center their links below their respective zoomable image */
	text-align: center;
	background: #f1f1f1;
	float: left;
	width: 100%;
	padding: 4px 20px;
	margin-bottom: 10px;
}

.thumbs a { /* trigger links on the thumbnail images */
	text-decoration: none; /* avoid underlines of images, text or spaces in these links */
	float: left;
	width: 62px;
	height: 62px;
	position: relative;
	margin: 0px 2px;
}

.thumbs img { /* trigger images - the thumbnails used to load new zoomable images into the targetarea */
	border-width: 0; /* avoid default borders in some browsers */
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
}

#description, #description2 {
	position: absolute; /* required for description folows image bottom (descpos: true) */
	width: 325px; /* should be width of zoomable image container (.targetarea) */
	text-align: center;
	font: bold 95% sans-serif;
	margin-top: 3px; /* when following image bottom, this sets a fixed distance for that */
	color: #222;
	background-color: #fff;
}

.thumbs .owl-prev,
.thumbs .owl-next {
	position: absolute;
	top: 4px;
	width: 20px;
	height: 62px;
	line-height: 62px;
	text-align: center;
	font-size: 20px;
	color: #999;
}
.thumbs .owl-prev {
	left: 0px;
}
.thumbs .owl-next {
	right: 0px;
}