#sly { width: 633px; position: relative; height: 93px; }
#sly [class^="sly-"] { text-decoration: none; color: #8597A6; }
#sly [class^="sly-"]:hover { color: #4F697F; text-decoration: none; cursor: pointer; }
.sly-prev, .sly-next { display: block; font-size: 32px; text-decoration: none; color: #8396A5; position: absolute; z-index: 9999; width: 32px; height: 32px; line-height: 32px; top: 100%; margin-top: -62px; }
.sly-prev { left: -25px;  }
.sly-next { right: -40px;  }
.frame {
    height: 93px;
    overflow: hidden;
}
.frame ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
height: 93px;
width: auto;
}
.frame ul li {
float: left;
height: 93px;
line-height: 93px;
overflow: hidden;
margin: 0 20px 0 0;
padding: 0;
cursor: pointer;
}
.frame ul li:last-child{ margin-right: 0;}
.frame ul li img {
    width: 100%;
}
.frame ul li.active {
}
/* Scrollbar */
.scrollbar {
margin: 0 0 1em 0;
height: 2px;
background: #ccc;
line-height: 0;
}
.scrollbar .handle {
width: 100px;
height: 100%;
background: #292a33;
cursor: pointer;
}
.scrollbar .handle .mousearea {
position: absolute;
top: -9px;
left: 0;
width: 100%;
height: 20px;
}

/* Pages */
.pages {
background: #fff;
position: relative;
z-index: 10;
list-style: none;
margin: 50px 0 20px;
padding: 0 20px;
text-align: center;
display: inline-block;
}
.pages li {
display: inline-block;
cursor: pointer;
overflow: hidden;
background: #fff;
text-indent: -9999px;
width: 6px;
height: 6px;
margin: 0 5px;
border: 3px solid #BED62F;
padding: 0;
outline: 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.pages li:hover {
background: #BED62F;
border: 3px solid #BED62F;
}
.pages li.active {
background: #666666;
border: 3px solid #666666;
}
.pages li.first { margin-left: 0; }
.pages li.last { margin-right: 0; }

/* Controls */
.controls { margin: 25px 0; text-align: center; }

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }


/* Effects */
.effects {
height: 320px;
line-height: 320px;
-webkit-perspective: 980px;
-ms-perspective: 980px;
perspective: 980px;
-webkit-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
overflow-y: show;
}
.effects ul {
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.effects ul li {
position: relative;
margin: 0;
height: 320px;
overflow: hidden;
/*
-webkit-transform: rotateY(10deg) scale(0.95);
-ms-transform: rotateY(10deg) scale(0.95);
transform: rotateY(10deg) scale(0.95);
*/
-webkit-transition: -webkit-transform 300ms ease-out;
transition: transform 300ms ease-out;
}
.effects ul li.active {
z-index: 10;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.effects ul li.active ~ li {
/*
-webkit-transform: rotateY(-10deg) scale(0.95);
-ms-transform: rotateY(-10deg) scale(0.95);
transform: rotateY(-10deg) scale(0.95);
*/
}