/*:::: DEMO PAGE, LIST IMAGES rules (REMOVE OR CHANGE) ::::*/
.gallery {
	float:left;
	padding:0;
	margin:0;
	width:100%;
	height:100%!important;
	height:auto;
	padding:1px;
}
.gallery ul {
	float:left;
	padding:0;
	margin:0!important;
	margin:0;
}
.gallery img {
	margin:0;
	padding:2px;
}
.gallery li {
	float:left;
	margin:10px!important;
	margin:5px;
}
.gallery li a {
	float:left;
}
.gallery li a:hover {
	float:left;
}
.gallery_in {
	padding:0;
	margin:auto;
	width:100%;
	height:100%!important;
	height:auto;
	text-align: center;
	float: left;
	background: #fff;
}
.gallery_in ul {
	/*float:left;*/
	padding:0;
	margin-bottom: 20px;
}
.gallery_in ul {
	margin:0px;
	padding:0px;
}
.gallery_in li {
	float:left;
	width: 32%;
	padding: 7px;
	border: 1px solid #CCC;
	border-radius: 4px;
	margin: 3px;
	overflow: hidden;
	list-style: none;
}
.gallery_in ul li img {
	width:100%;
	max-width:100%;
	-moz-transform: scale(1.0);
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	transition: all 0.6s ease 0s;
}
.gallery_in ul li:hover img {
	-moz-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}
.gallery_in li a {
	color:#333;
	z-index:1001;
}
.gallery_in li a:hover {
	color:#f58728;
}
.gallery_in li img {
	margin:0;
	padding:2px;
	max-width: 100%;
	min-height: 180px;
	max-height: 180px;
}
.gallery_in li a img:hover {
	opacity:0.5;
	border:none;
}
.gallery_in li .desc {
	width: 100%;
	background: #01325C;
	height: 70px;
	display: table;
}
.gallery_in li .desc p {
	width: 100%;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	font-size:17px;
	color:#fff;
}
.gallery_in li .desc p span {
	width: 100%;
	display:block;
	text-align:center;
	font-size:13px;
	color:#ccc;
	line-height: 16px;
}
/*::::: PIROBOX RULES::::::::*/
.bg_thumbs {
	background:#000;
	position:fixed!important;
	position:absolute;
	top:0;
	left:0!important;
	left:-17px;
	width:100%;
	margin:0;
	padding:0;
	visibility:hidden;
	z-index:1001;
	display:none;
}
.unloader, .img_box {
	background:#000;/*::::: you can change img_box background-color here ::::::::*/
}
/*:::: YOU DON'T NEED TO CHANGE NOTHING ELSE IN THE CSS :::*/

/*:::: PREV/NEXT inside rules ::::*/
.box_next_in {
	position:absolute;
	top:48%;
	height:90%;
	width:74px;
	right:5px;
	overflow:hidden;
	z-index:1010;
	background:none;
	display:block;
}
a.next_in {
	position:absolute;
	z-index:1011;
	height:100%;
	width:74px;
	right:-74px;
	text-indent:-999em;
	display:block;
	background:url(next.png) top right no-repeat;
	outline:none;
}
a:hover.next_in {
	background:url(next.png) top right no-repeat!important;
	background:url(next.png) center right no-repeat;
	outline:none;
}
.box_previous_in {
	position:absolute;
	top:48%;
	z-index:100012;
	height:90%;
	left:5px;
	width:74px;
	overflow:hidden;
	background:none;
	display:block;
}
a.previous_in {
	position:absolute;
	z-index:100013;
	left:-74px;
	height:100%;
	width:74px;
	text-indent:-999em;
	display:block;
	background:url(prev.png) top left no-repeat;
	outline:none;
}
a:hover.previous_in {
	background:url(prev.png) top left no-repeat!important;
	background:url(prev.png) center left no-repeat;
	outline:none;
}
/*:::: PREV/NEXT outside rules ::::*/

.box_next {
	position:fixed!important;
	position:absolute;
	top:50%;
	margin-top:-9px;
	height:18px;
	width:81px;
	right:0px!important;
	right:16px;
	overflow:hidden;
	z-index:1006;
}
a.next {
	position:fixed!important;
	position:absolute;
	text-indent:-999em;
	display:block;
	height:18px;
	width:81px;
	right:-81px;
	z-index:1007;
	background:url(next_t_h.gif) center right no-repeat;
}
a:hover.next {
	background:url(next_t.gif) center right no-repeat;
}
.box_previous {
	position:fixed!important;
	position:absolute;
	top:50%;
	margin-top:-9px;
	left:0;
	height:18px;
	width:81px;
	overflow:hidden;
	z-index:1008;
}
a.previous {
	z-index:1009;
	position:fixed!important;
	position:absolute;
	width:81px;
	left:-81px;
	text-indent:-999em;
	display:block;
	height:18px;
	background:url(prev_t_h.gif) center left no-repeat;
}
a:hover.previous {
	background:url(prev_t.gif) center left no-repeat;
}
/*:::: END PREV/NEXT rules ::::*/


/*:::: IMG_BOX rules ::::*/

.img_box {
	position:fixed!important;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-18px;
	margin-left:-25px;
	width:50px;
	height:50px;
	border:solid 1px;
	padding:2px!important;
	padding:1px;
	z-index:3000;
	visibility:hidden;
	overflow:hidden;
}
.img_box img {
	position:relative;
	top:0;
	left:0;
	border:none;
	padding:0;
	z-index:1003;
}
/*:::: END IMG_BOX rules ::::*/

/*:::: CLOSE, LOADING rules ::::*/

.thumbs_close {
	position:absolute;
	top: 5px;
	right: 3px;
	height: 26px;
	width: 26px;
	color:#fff;
	cursor:pointer;
	margin:0 5px 5px 0!important;
	margin:0 5px 3px 0;
	z-index:100014;
	background:url(close.png) center right no-repeat!important;
	background:url(close.png) center right no-repeat;
	visibility:hidden;
}
.loader {
	position:fixed!important;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-18px!important;
	margin-left:-22px!important;
	margin-top:-15px;
	margin-left:-20px;
	width:50px;
	height:50px;
	display:block;
	z-index:1007;
}
.loader img {
	border:none;
	padding:0!important;
	padding:0;
	background:none;
}
.unloader {
	visibility:visible;
}
.thumbs {
	visibility:hidden;
}
.caption {
	background:#000;
	position:absolute;
	bottom:0;
	left:0;
	margin:0 0 3px 3px!important;
	margin:0 0 1.5px 2px;
	color:#fff;
	visibility:hidden;
	display:block;
	padding:3px;
	z-index:100013;
	cursor:text
}
.caption p {
	margin:0;
	padding:0;
	margin-right:82px;
}
.pre {
	visibility:hidden;
	display:none;
}
.end {
	display:none;
}
.begin {
	display:none;
}
.single_box {
	float:left;
	padding:0;
	margin:0;
	width:232px;
	height:100%!important;
	height:auto;
}
.single {
	float:left;
	height:133px;
	width:200px;
	margin:10px!important;
}
.single img {
	margin:0;
	padding:2px;
	height:133px;
	width:200px;
}
.single a {
	float:left;
	height:133px;
	width:200px;
	border:2px solid #333;
}
.single a:hover {
	float:left;
	height:133px;
	width:200px;
	border:2px solid #000;
}
#gallery .img_box {max-width:800px;}