.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
margin:0px 0px 0px 16px;
padding:0px;
/*border:solid white;*/
}

.boards{
  height: 400px; /*Height should enough to fit largest content's height*/
  width: 722px; /*Width of Carousel Viewer itself*/
}
 
.apparel{
  height: 400px; /*Height should enough to fit largest content's height*/
  width: 660px; /*Width of Carousel Viewer itself*/
}
 
.bio{
  height: 100%; /*Height should enough to fit largest content's height*/
  width: 82%; /*Width of Carousel Viewer itself*/
}
 
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0px;
top: 4px;
height: 98%; /*Height should enough to fit largest content's height*/
width:100%;
/*border:solid white;*/
}
 
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 102%; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
height: 98%; /*Height should enough to fit largest content's height*/
/*border:solid white;*/
}