/* http://www.menucool.com */

#wrapper {position:relative;width:100%;margin:0 auto; text-align: center;}

#zoom-slider {

    width:auto; height: 450px;/* Make it smaller than your images for zooming effect */

	/*background:#CCC url(loading.gif) no-repeat 50% 50%;*/

    overflow:hidden;

	position:relative;

	margin: auto;/*make the image slider center-aligned */

	box-shadow: 4px 4px 4px #888;

    

 

}



#zoom-slider img {

	position:absolute;

	display:none;

	width: 100%;
	height: 100%;


	top:0px;

	z-index:1;

	-ms-interpolation-mode: bicubic;

	image-rendering: optimizeQuality;

}



/* Caption styles */
div.zs-caption-bg, div.zs-caption-bg2 {

	position:absolute;

	left: 35%;/*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/

	bottom:20px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:350px;*/

	width:30%;

	min-height:10%;

	padding-left: 6px;

	padding-bottom: 6px;
	
	padding-right: 5px;
	
	z-index:6;

	overflow:hidden;

	font-size:0;

	

}

div.zs-caption-bg {

	/*Caption background color. Can be defined as semi-transparent through the javascript slideshowOptions setting.*/

	border:3px solid #fff;

	}

div.zs-caption {

	font: bold 14px/19px 'Open Sans', sans-serif;

	color:black;

	z-index:7;

	text-align:center;/* When captionEffect was set to rotate through javascript, and setting "text-align:left" will create a fly-in effect, and setting "text-align:center" will get the rotate effect. */

	overflow:hidden;

	background: #fff;

	opacity: 0.8;

	height: 100px;

	width: 300px;
	
	text-transform: uppercase;

	display: table-cell;

	vertical-align: middle;

	

	

}

div.zs-caption a {

	color:#09F;

}





/* navigation bullets wrapper */
div.navBulletsWrapper  {
	top:30px;
	left:420px;
	background:none;
	padding-left:20px;
	position:relative;
	z-index:8;
	cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:12px; height:12px;
    background:transparent url(bullets.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -12px;}


/* --------- Others ------- */
#zoom-slider img
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}