/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
.hscroll {
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	height:636px;
	width:800px;
}

/* 
	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 .itcol {
	position:relative;
	float:left;
	width:197px;
	height:636px;
	padding:0;
	margin:0 4px 0 0;
	display:block;
}
.hscroll .itrow {
	position:relative;
	float:left;
	height:124px;
	width:197px;
	padding:0;
	margin:0 0 4px 0;
	display:block;
	background-repeat:no-repeat;
	background-position:center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color:#eee;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next{
	position:absolute;
	top:253px;
	width:30px; 
	height:130px; 
	background-repeat:no-repeat;
	background-color:rgba(255,255,255,0.4);
	background-position:center center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	cursor:pointer;
	display:block;

	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	opacity:0.5;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}

/* prev button uses another background image */
a.prev{
	left:-30px;
	background-image:url(../images/bt-left.png);	
}
/* next button uses another background image */
a.next{
	right:-30px;
	background-image:url(../images/bt-right.png);
}
a.prev:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
a.next:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
a.disabled{
	visibility:hidden !important;
}

#popup{
	position:absolute;
	top:-1500px;
	left:-270px;
	background:#fff url(../images/loading.gif) center center no-repeat;
	width:1100px;
	height:640px;
	display:block;
	
	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s;
	
	z-index:9000;
}
#popup.popshow{
	top:-2px;
	left:-270;
	
	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
#wrap{
	position:absolute;
	top:0;
	left:0;
	width:1100px;
	height:640px;

	background-repeat:no-repeat;
	background-position:bottom center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}
#desc{
	position:absolute;
	bottom:0;
	left:0;
	width:1100px;
	padding:15px 30px;
	background-color:rgba(255,255,255,0.8);
	overflow:hidden;
	text-align:center;
}
#popup a.close{
	position:absolute;
	top:10px;
	right:10px;
	width:49px;
	height:49px;
	cursor:pointer;
	background-repeat:no-repeat;
	background-image:url(../images/bt-close.png);
	background-position:center center;

	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;

	filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity:0.3;
	opacity:0.3;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
#popup a.close:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;


	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
/* prev, next, prevPage and nextPage buttons */
#popup a.prevItm, #popup a.nextItm{
	position:absolute;
	top:253px;
	width:30px; 
	height:130px; 
	background-repeat:no-repeat;
	background-color:rgba(255,255,255,0.4);
	background-position:center center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	cursor:pointer;
	display:block;

	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity:0.5;
	opacity:0.5;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}

/* prev button uses another background image */
#popup a.prevItm{
	left:0;
	background-image:url(../images/bt-left.png);	
}
/* next button uses another background image */
#popup a.nextItm{
	right:0;
	background-image:url(../images/bt-right.png);
}
#popup a.prevItm:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
#popup a.nextItm:hover{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity:1;
	opacity:1;

	-o-transition:all .3s;
	-ms-transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	transition:all .3s; 
}
#popup a.disabled{
	visibility:hidden !important;
}

.icpin{
	width:20px;
	height:20px;
	display:block;
	position:absolute;
	top:20px;
	right:20px;
	
	-o-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image:url(../images/pinterest.png);
}