/* Just for the example. Fee free to delete these three lines */
.gallery {width:100%; padding:0; margin: 3rem 0;}

/* Style the thumbnails */
.pika-thumbs{ height:auto; display:inline-block;}
	.pika-thumbs li{ width: 4.5rem; height:3rem; margin: 0.5rem 0.5rem 0 0; padding: 0; overflow: hidden;
		float: left; list-style-type: none;cursor: pointer;}
	.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: middle; overflow: hidden;}
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 100%;}
.pika-stage {position: relative; text-align:center;}
.pika-stage img{width: 100%;}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 1rem; 
			color: #f5f5f5; padding: 0.75rem; text-align: right; bottom: 2.25rem; right: 0;z-index:1000;}
	.pika-stage .caption p {padding: 0; margin: 0; line-height: 1rem;}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
	.pika-imgnav a.previous {background: url(prev.png) no-repeat left 45%; height: 100%; width: 40px; top: 0.5rem; left: 2.25rem;cursor:pointer;}
	.pika-imgnav a.next {background: url(next.png) no-repeat right 45%; height: 100%; width: 40px; top: 0.5rem; right: 2.25rem;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {display:none;}

/*for the tool tips*/
.pika-counter{position: absolute;bottom: 2.25rem;left:0.75rem;color:white;background:rgba(0,0,0,0.7);font-size:0.65rem;padding:0.15rem;-moz-border-radius: 0.25rem;border-radius:0.25rem;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url(loading.gif) 0.15rem 0.15rem no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:3rem; font-size:0.55rem; padding:0.25rem 0.15rem; 
	text-align:right; position:absolute; top:0.75rem; right:0.75rem; }