/* Basic background image styling. */

#sliderFrame 
{
    position:relative;
    width:700px;
    margin:0 auto; /*center-aligned*/
	margin-top: 15px;
	overflow:hidden;
}

#slider {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 700px;
	height: 525px;
	margin:0 auto; /*center-aligned*/
    /*transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);*/
}

/* Styles for the alternating / transition effect. */
.effect {
	transition: opacity 1s ease-in-out;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	background-image: url('../images/slider1.jpg');
	/*z-index: -1;*/
	opacity: 1;
}
/* Styles for the alternating / transition effect. */
.no-effect {
	transition:none;
	opacity: 1 !important;
}

.slider-images{ display:none;}
.caption {width: 100%; text-align:center; top:-20px; font-weight:bold; }

/* ------ built-in navigation bullets wrapper ------*/
#navBulletsWrapper  {
    top:2px;/* Its position is relative to the #slider */
	text-align:center;
	background:none;
	position:relative;
	z-index:5;
}

/* each bullet */
#navBulletsWrapper div 
{
    width:11px; height:11px;
    font-size:0;color:White;/*hide the index number in the bullet element*/
    background:transparent url(../images/bullet.png) no-repeat 0 0;
    display:inline-block; *display:inline; zoom:1;
    overflow:hidden;cursor:pointer;
    margin:0 6px;/* set distance between each bullet*/
}

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

/* transition on width change */
.effect2 {
	width: 200px;
	height: 125px;
	transition: width 1s, height 1s, transform 1s;
	-webkit-transition: width 1s ease-in, height 1s, -webkit-transform 12s;; /* Safari */
	/*z-index: -1; <-- not work for Firefox*/
	opacity: 1;
}

/* transition on scale change */
.effect3 {
	/*z-index: -1;*/
	opacity: 1;
  -webkit-transform-origin: 20% 80%;
  -webkit-transition: -webkit-transform 3s linear;
  -moz-transform-origin: 20% 80%;
  -moz-transition: -moz-transform 3s linear;
  -o-transition: all 3s ease; /*  OperaIE 9 */
  -ms-transition: all 3s ease; /* IE */
   transition: all 3s ease;
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 480px) {
	#sliderFrame, #slider{width: 100%;}
	#slider{background-size: cover;}
}