@charset "utf-8";





.pro-img-box img{ max-width:100%;}



.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width:100%; max-width:1252px;
height:97px; margin:0 auto; /*Height should enough to fit largest content's height*/
}
 
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
 
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px 30px 0px 0px; /*margin around each panel*/
width: 182px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
border:1px solid #dac2a8;
height:81px;
text-align:center; position:relative; 
}
 
.panel img{ position:absolute; top:0px; left:0px; right:0px; bottom:0px; margin:auto; max-width:100%; max-height:80px;}
 
 
#galleryc{
width:100%;
height: 64px;
border: 10px solid darkred;
}
 
#galleryc .panel{
height: 86px;
font: bold 28px Arial;
text-align: center;
background-color: green;
color: white;
}
 
p.samplebuttons{
width: 90%;
text-align: center;
}
 
p.samplebuttons a{
color: #2e6ab1;
padding: 1px 2px;
margin-right: 3px;
text-decoration: none;
}

@media screen and (min-width: 400px) and (max-width: 1001px) { 

.stepcarousel{ width:95%;}
}