@charset "utf-8";
/*====== Stepthick CSS ======*/
.stepthick {
	position: relative; /*leave this value alone*/
	overflow: hidden; /*leave this value alone*/
	width: 1100px; /*Width of Carousel Viewer itself*/
	height: 350px; /*Height should enough to fit largest content's height*/
}

.stepthick .belt {
	position: absolute; /*leave this value alone*/
	left: 0px;
	top: 0px;
}
.stepthick .panel {
	float: none; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 0px; /*margin around each panel*/
	width: 1100px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.stepthick2 {
	position: relative; /*leave this value alone*/
	overflow: hidden; /*leave this value alone*/
	width: 1100px; /*Width of Carousel Viewer itself*/
	height: 250px; /*Height should enough to fit largest content's height*/
}

.stepthick2 .belt {
	position: absolute; /*leave this value alone*/
	left: 0px;
	top: 0px;
}
.stepthick2 .panel {
	float: none; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 0px; /*margin around each panel*/
	width: 1100px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


.stepthick3 {
	position: relative; /*leave this value alone*/
	overflow: hidden; /*leave this value alone*/
	width: 660px; /*Width of Carousel Viewer itself*/
	height: 200px; /*Height should enough to fit largest content's height*/
	margin: 0 25px;
}
.stepthick3 .belt {
	position: absolute; /*leave this value alone*/
	left: 0px;
	top: 0px;
}
.stepthick3 .panel {
	float: none; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 5px 15px 5px 0; /*margin around each panel*/
	width: 210px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 200px;
	text-align:left;
	font-size: 13px;
}
.stepthick3 .panel .wrapper_image{
	width: 200px;
	height: 150px;
	overflow: hidden;
	border: #fff solid 3px;
}
.stepthick3 .panel .wrapper_image img{
	width: 100%;
	height: 100%;
}

.wrapperStepthick{
	position:relative;
	height: auto;
}
.wrapperStepthick .btnNavLeft,
.wrapperStepthick .btnNavRight{
	position:absolute;
	top: 50px;
}
.wrapperStepthick .btnNavRight{ right: 0px;}



a#btn_page2 {
	width: 60px;
	height: 60px;
	overflow: hidden;
	display: block;
}
.stepthick3 .panel p {
	margin:0px;
}

.stepthick4 {
	position: relative; /*leave this value alone*/
	overflow: hidden; /*leave this value alone*/
	width: 1080px; /*Width of Carousel Viewer itself*/
	height: 240px; /*Height should enough to fit largest content's height*/
}

.stepthick4 .belt {
	position: absolute; /*leave this value alone*/
	left: 0px;
	top: 0px;
}
.stepthick4 .panel {
	float: none; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 0px; /*margin around each panel*/
	width: 1080px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


.stepthick_item {
	position: relative; /*leave this value alone*/
	overflow: hidden; /*leave this value alone*/
	width: 220px; /*Width of Carousel Viewer itself*/
	height: 165px; /*Height should enough to fit largest content's height*/
	border:2px solid #eee;
}

.stepthick_item .belt {
	position: absolute; /*leave this value alone*/
	left: 0px;
	top: 0px;

}
.stepthick_item .panel {
	float: none; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 0px; /*margin around each panel*/
	width: 220px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 165px;
}
.stepthick_item .wrapper_image{
	border: none;
	position:relative;
	width:100%;
	height:100%;
}
.stepthick_item .wrapper_image img{
	width: 100%;
	min-height: 100%;
	height:auto;
	border:none;
	padding:0; 
	margin:0;
}

.stepthick_item .wrapper_image a.btn_more{
	position:absolute;
	bottom:0;
	right: 0;
	z-index: 10;
	width: 50px;
	height: 20px;
	background: #000;
	visibility:hidden;
	line-height: 21px;
	color: #fff;
	
	-moz-border-radius-topleft: 6px;
	-webkit-border-top-left-radius: 6px;	
	border-top-left-radius: 6px;
}
.stepthick_item .wrapper_image a.btn_more:after{ content: 'More'; }
.stepthick_item .wrapper_image .caption{
	position:absolute;
	bottom:0;
	z-index: 1;
	width:100%;
	height:100%;	
	visibility:hidden;	
	background: url('frame-bg.png') bottom repeat-x;
}
.stepthick_item .wrapper_image .caption p{
	position:absolute;
	bottom:0;
	font-weight:bold;
	color:#FFFFFF;
	text-align:left;
	padding: 2px 5px;
	margin:0;
}
.stepthick_item .wrapper_image:hover a.btn_more{
	visibility:visible;
}
.stepthick_item .wrapper_image:hover .caption,.stepthick_item .wrapper_image:hover .caption p{
	visibility:visible;
}


/*====== END Stepthick CSS ======*/

/* ====== NIVO THEME CSS ======*/
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:0;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:0;
}
/* ====== END NIVO THEME CSS ======*/

a#btn_page2{
	width: 30px;
	height: 30px;
	overflow: hidden;
	display: block;
	position:absolute;
}

/*Page Button Size*/
a#btn_page{
	width: 200px;
	height: 60px; /*half size of image height*/
	overflow: hidden;
	display: block;
}

/*--- Tooltip Effect ---*/
.tooltip {
	display:none;
	position:absolute;
	border:1px solid #d93837;
	background-color:#d93837;
	border-radius:5px;
	padding:3px;
	color:#fff;
	font-size:11px;
	z-index: 9999;
	text-transform:uppercase;
	font-family:Arial, Helvetica, sans-serif;
}
/*--- EOF_Tooltip Effect ---*/

@media (max-width: 767px) {
	.stepthick3{
		width: 80%;
	}
}