/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
.hscroll {
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	height:350px;
	width:1100px;
	margin:0 50px;
	
	text-align:center;
	display:none;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.hscroll .items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;
}
.hscroll b{
	color:#fff;
}
.hscroll a.itcol {
	position:relative;
	float:left;
	height:348px;
	width:348px;
	padding:0;
	margin:0 25px 0 0;
	display:table;
	border:1px solid #ccc;
	background-repeat:no-repeat;
	background-position:center center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	color:#ccc;
}
.hscroll a.itcol:hover {
	color:#ccc;
}
.hscroll a.itcol .itrow {
	position:relative;
	width:328px;
	height:318px;
	background:rgba(0,0,0,0.7);
	display: table-cell;
	padding:0px 10px;
	vertical-align:bottom;

	zoom: 1;
	filter: alpha(opacity=0);
	opacity: 0;

	-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
	-webkit-transition:all .5s;
	transition:all .5s;
}
.hscroll a.itcol:hover .itrow {
	filter: alpha(opacity=100);
	opacity: 1;

	-o-transition:all .5s;
	-ms-transition:all .5s;
	-moz-transition:all .5s;
	-webkit-transition:all .5s;
	transition:all .5s;
}
.hscroll .itrow span{
	display:block;
	border-top:1px solid #666;
	padding-top:8px;
	margin-top:8px;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next{
	position:absolute;
	top:105px;
	width:50px; 
	height:350px; 
	background-repeat:no-repeat;
	background-position:center center;
	cursor:pointer;
	display:block;
}

/* prev button uses another background image */
a.prev{
	left:0px;
	background-image:url(../images/bt-prev.png);	
}
/* next button uses another background image */
a.next{
	right:0px;
	background-image:url(../images/bt-next.png);
}
a.prev:hover{
	background-image:url(../images/bt-prev-over.png);
	background-position:left center;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
a.next:hover{
	background-image:url(../images/bt-next-over.png);
	background-position:right center;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
a.disabled{
	visibility:hidden !important;
}
/*------------------------------small screen <=800-------------------------*/
a.smallscr{
	top:65px;
}