.wrap {

}
.frame {
        height: 250px;
        /*line-height: 250px;*/
        overflow: hidden;
}
.frame ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        font-size: 50px;
}
.frame ul li {
        float: left;
        width: 500px;
        height: 100%;
        margin: 0 1px 0 0;
        padding: 0;
        background: #fff;
        color: #000;
        text-align: center;
        cursor: pointer;
        border: solid black 1px;
        border-radius: 20px;
}
.frame ul li.active {
        color: #000;
        background: #fff;
}

/* Effects */
.effects {
  height: 400px;
  /*line-height: 200px;*/
  -webkit-perspective: 500px;
  -ms-perspective: 500px;
  perspective: 500px;
  -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 -120px;
  -webkit-transform: rotateY(90deg) scale(0.7);
  -ms-transform: rotateY(90deg) scale(0.7);
  transform: rotateY(90deg) scale(0.7);
  -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(-90deg) scale(0.7);
  -ms-transform: rotateY(-90deg) scale(0.7);
  transform: rotateY(-90deg) scale(0.7);
}

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

/* 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;
}
