/*============================================

TileBox jQuery by SONHLAB.com - version 1.0
Website: http://sonhlab.com
Documentation: http://docs.sonhlab.com/tilebox-jquery-modern-responsive-lightbox/

============================================*/





/*========== START TILEBOX jQuery ==========*/

.tilebox-button {
	cursor:pointer;
}

.tilebox-content {
	display:none;
	position:fixed;
	z-index:9997;
	width:100%;
	height:100% !important;
	top:0;
	left:0;
	overflow:hidden;
}
.tb-activecontent,
.tb-oldcontent {
	display:block;
}
.tb-oldcontent {
	z-index:9996;
}

.tilebox-content > .tilebox-img {
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	border:0px;
	display:table;
}
.tilebox-content > .tilebox-img > .main-img {
	position:relative;
	width:100%;
	height:100%;
	display: table-cell;
    vertical-align: middle;
}
.tilebox-content > .tilebox-img > .main-img > img {
	width:100%;
	height:auto;
	position:relative;
}




/*===== Start Info Box =====*/
.tilebox-info {
	position:absolute;
	z-index:9999;
	bottom:0px;
	left:0px;
	overflow:hidden;
	display:none;
	width:100%;
	height:100px;
}

.tilebox-fullinfo {
	position:fixed;
	z-index:9999;
	top:0;
	left:0;
	overflow:hidden;
	width:100%;
	height:100%;
}

.tilebox-fullinfo > .tb-infocontent {
	height:100%;
	width:100%;
	overflow:auto;
}


.tilebox-info > .info-ctrlbt,
.tilebox-fullinfo > .info-ctrlbt {
	width:32px;
	height:32px;
	position:absolute;
	z-index:9999;
	top:0px;
	right:30px;
}

.info-expandbt,
.info-collapsebt {
	position:relative;
	z-index:9999;
	cursor:pointer;
	width:32px;
	height:32px;
}
.info-expandbt {
	background:url(../images/demo/up.png) no-repeat;
	display:block;

}
.info-collapsebt {
	background:url(../images/demo/down.png) no-repeat;
	display:none;
}


.tilebox-info p,
.tilebox-fullinfo p {
	font-size:14px;
	line-height:22px;
	padding:20px 20px 0 20px;
}
.tilebox-info p:last-child,
.tilebox-fullinfo p:last-child {
	padding:20px;
}

.tilebox-info .info-title,
.tilebox-fullinfo .info-title {
	font-size:40px;
	line-height:1.5;
	font-family:"Dosis",sans-serif;
	text-transform:uppercase;
}
/*===== End Info Box =====*/




/*===== Start Controller Style =====*/
.tb-ctrler {
	display:none;
}

.tb-closebt {
	width:32px;
	height:32px;
	position:fixed;
	top:5px;
	right:5px;
	z-index:9999;
	cursor:pointer;
}
.tb-infobt {
	width:32px;
	height:32px;
	position:fixed;
	top:5px;
	right:79px;
	z-index:9999;
	cursor:pointer;
	text-align:center;
}
.tb-fitsizebt {
	width:32px;
	height:32px;
	position:fixed;
	top:5px;
	right:42px;
	z-index:9999;
	cursor:pointer;
}
.tb-thumbbt {
	width:32px;
	height:32px;
	position:fixed;
	top:5px;
	right:116px;
	z-index:9999;
	cursor:pointer;
	display:none;
}
.tb-sharebt {
	width:32px;
	height:32px;
	position:absolute;
	top:5px;
	right:116px;
	z-index:9999;
	cursor:pointer;
	text-align:center;
}

.tilebox-closebt > span,
.tilebox-infobt > span {
	font-size:24px;
	line-height:32px;
	font-weight:bold;
}




/* Fitsize Style */
.fitsize-on > .tilebox-img {
	display:block;
}
.fitsize-on > .tilebox-img > .main-img {
	height:100%;
	width:100%;
	position:relative;
	top:0;
	display:block;
	margin:auto;
	text-align:center;
}
.fitsize-on > .tilebox-img > .main-img > img {
	position:relative;
	margin:auto;
	height:100%;
	width:auto;
}

.tb-prevbt,
.tb-nextbt {
	width:64px;
	height:64px;
	position:fixed;
	z-index:9999;
	top:50%;
	margin-top:-32px;
	cursor:pointer;
	opacity:0.5;
	display:none;
}
.tb-prevbt {
	left:0;
}
.tb-nextbt {
	right:0;
}
.tb-prevbt:hover,
.tb-nextbt:hover {
	opacity:1;
}
/*===== End Controller Style =====*/




/*===== Start Thumbnail Ribbon =====*/
.tb-thumbnail-ribbon {
	display:none;
	position:fixed;
	bottom:0px;
	left:0px;
	z-index:9998;
	height:48px;
	width:100%;
	text-align:center;
	padding:5px 0;
	overflow:hidden;
}


.tb-thumbnail-ribbon > .tb-thumbnail {
	height:48px;
	cursor:pointer;
	opacity:0.5;
	z-index:9998;
	position:relative;
}
.tb-thumbnail-ribbon > .tb-thumbnail:hover {
	opacity:1;
}
.tb-thumbnail > img {
	height:100%;
}

.tb-activethumb,
.tb-oldthumb {
	display:none;
}

/*===== End Thumbnail Ribbon =====*/




.tilebox-content,
.tilebox-fullinfo {
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	-ms-animation-duration:1s;
	-o-animation-duration:1s;
	animation-duration:1s;
}




/* Loading Icon */
#tb-loadingholder {
	width:48px;
	height:48px;
	position:fixed;
	top:50%;
	left:50%;
	z-index:9999;
	margin-top:-24px;
	margin-left:-24px;
	display:none;
}
#tb-loadingholder > #tb-loadingicon {
	background:url(../images/loading.gif) no-repeat;
	width:48px;
	height:48px;
}
/* End Loading Icon */

/*========== END TILEBOX jQuery ==========*/





/* MISC */
.clearspace { clear: both; }
.floatleft { float:left !important; }
.floatright { float:right !important; }
.none { display:none !important; }

.light-text {
	color:#fff;
}
.dark-text {
	color:#1e1e1e;
}
.light-border {
	border:1px solid #fff;
}
.dark-border {
	border:1px solid #000;
}
.top-red-border {
	border-top:5px solid #E51400;
}
.top-black-border {
	border-top:5px solid #000;
}
.gradient {
	background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
	background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}