/* HORIZONTAL CAROUSEL */

.stepcarousel{
	position: relative;
	border: 0;
	overflow: scroll; /*leave this value alone*/
	width: 7700px; /*Width of Carousel Viewer itself*/
	height: 275px; /*Height should enough to fit largest content's height*/
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

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

.stepcarousel .panel{
	float: left; /*leave this value alone*/
	overflow: hidden; /*margin around each panel*/
	width: 770px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 275px;
	/*
    margin-top: 10px;
	margin-right: 50px;
	margin-bottom: 10px;
	margin-left: 50px;
    */
}

.panel img { float: left; margin-right: 20px;}
.panel h5 { margin-top: 40px; font-size: 18px; font-weight: normal; }
.panel h5 strong { font-weight: normal; color: #BAD1D9; }
.panel p { margin-top: 20px; }

/* VERTICAL CAROUSEL */

.vcarousel .stepcarousel{
position: relative; /*leave this value alone*/
margin: 0 auto;
border: 0;
overflow: scroll; /*leave this value alone*/
width: 250px; /*Width of Carousel Viewer itself*/
height: 390px; /*Height should enough to fit largest content's height*/
}

.vcarousel .stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 15px 0; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height: 370px; 
text-align: center;
}

.panel .view { float: left; }
.panel .view2 { margin: 0 auto; }

/* ------------------------ */
.blue { color: #4DDFF4; }