/* You can alter this CSS in order to give Smooth Div Scroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	width: 50px;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	/*background-image: url(/images/big_transparent.gif);*/
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first url is for Firefox and other browsers, the second is for Internet Explorer */
	/*cursor: url(/images/cursors/cursor_arrow_left.png), url(/images/cursors/cursor_arrow_left.cur),w-resize;*/
	cursor:auto;
	opacity:1!important;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	/*background-image: url(/images/arrow_left.gif);	*/			
	background:rgba(98, 161, 215, 0.8);
	opacity: 0.8; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.8; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 0.8); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	width: 50px;
	height: 100%;
	background:rgba(98, 161, 215, 0.8);
	/*background-image: url(/images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;*/
	position: absolute;
	z-index: 200;
	right: 0;
	/*cursor: url(/images/cursors/cursor_arrow_right.png), url(/images/cursors/cursor_arrow_right.cur),e-resize;*/
	cursor:auto;
	opacity:1!important;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	/*background-image: url(/images/arrow_right.gif);*/
	background:rgba(98, 161, 215, 0.8);
	opacity: 0.8;
	filter: alpha(opacity = 0.8);
	-moz-opacity: 0.8;
	zoom: 1;
}
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

#hero-banner-container {max-height:276px;overflow:hidden;margin-bottom:15px;}
#hero-banner-container + .container > .container-section {padding-top:0;}
#hero-banner-content {max-height:276px;position:relative;-webkit-overflow-scrolling: touch;}
#hero-banner-content .item {float:left;position:relative;margin-left:3px;}
#hero-banner-content .item a {display:block;}
#hero-banner-content .item .hero-banner-overlay {position:absolute;top:0;bottom:0;left:0;right:0;}
#hero-banner-content .item .hero-banner-overlay-text {font-size:1.462em;color:#fff;font-weight:700;position:absolute;bottom:0;left:0;right:0;padding:25px;}
#hero-banner-content .item .hero-banner-overlay * {margin:0;}
#hero-banner-content .item .hbc-image {height:276px;}
#hero-banner-content .item .hbc-offer-label {margin-left:-25px;margin-bottom:10px;}
#hero-banner-content h2 {color:#fff;font-weight:700;text-shadow: 2px 2px rgba(0,0,0,0.5);}
#hero-banner-content h3 {color:#fff;font-weight:700;text-shadow: 2px 2px rgba(0,0,0,0.5);font-size:16px;}

.scrollingHotSpotLeft {background:url('/assets/images/hero-banner-prev.png') no-repeat 0% 50%!important;}
.scrollingHotSpotRight {background:url('/assets/images/hero-banner-next.png') no-repeat 100% 50%!important;}

.hero-banner-overlay-text {
background: -moz-linear-gradient(top,  rgba(28,48,81,0) 0%, rgba(28,48,81,0.3) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,48,81,0)), color-stop(100%,rgba(28,48,81,0.3)));
background: -webkit-linear-gradient(top,  rgba(28,48,81,0) 0%,rgba(28,48,81,0.3) 100%);
background: -o-linear-gradient(top,  rgba(28,48,81,0) 0%,rgba(28,48,81,0.3) 100%);
background: -ms-linear-gradient(top,  rgba(28,48,81,0) 0%,rgba(28,48,81,0.3) 100%);
background: linear-gradient(to bottom,  rgba(28,48,81,0) 0%,rgba(28,48,81,0.3) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001c3051', endColorstr='#4d1c3051',GradientType=0 );
}

@media print, screen and (max-width:991px) {
	#hero-banner-content .scrollWrapper {overflow-x:auto!important;}
	#hero-banner-content .item {margin-left:0;}
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */