/* Examples - Tiny Circleslider */
#circleslider1 { height:300px; position:relative; width:300px; }
#circleslider1 .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#circleslider1 .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#circleslider1 .overview li { height:300px; width:300px; float: left; position: relative; }
#circleslider1 .overlay {background:url(../images/bg-rotatescroll.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#circleslider1 .thumb { background:url(../images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#circleslider1 .dot { background:url(../images/bg-dot2.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#circleslider1 .dot span { display: none; }

#circleslider2 { height:300px; position:relative; width:300px; }
#circleslider2 .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#circleslider2 .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#circleslider2 .overview li { height:300px; width:300px; float: left; position: relative; }
#circleslider2 .overlay {background:url(../images/bg-rotatescroll.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#circleslider2 .thumb { background:url(../images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#circleslider2 .dot { background:url(../images/bg-dot2.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#circleslider2 .dot span { display: none; }

#circleslider3 { height:350px; padding: 25px; position:relative; width:350px; }
#circleslider3 .viewport{ height:350px; position: relative; margin:0 auto; overflow:hidden; width:350px }
#circleslider3 .overview { background-color: #efefef; position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#circleslider3 .overview li { height:350px; width:350px; margin: 0 20px 0 0; float: left; position: relative; }
#circleslider3 .overlay {background:url(../images/bg-rotatescroll2.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:400px; width:400px; }
#circleslider3 .thumb { background:url(../images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; }
#circleslider3 .dot { cursor: pointer; background:url(../images/bg-dot3.png) no-repeat 0 0; height: 22px; text-align: center; line-height: 22px; font-size: 10px; color: #555; width: 22px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#circleslider3 .dot span { cursor: pointer; }

#circleslider4 { height:530px; position:relative; width:530px; margin-left: -25px; overflow: hidden; }
#circleslider4 .viewport{ height:350px; position: relative; margin:0 auto; overflow:hidden; width:350px; margin: 82px auto 0;  }
#circleslider4 .overview { background-color: #efefef; position: absolute; width: 350px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#circleslider4 .overview li { height:350px; width:350px; margin: 0; float: left; position: relative; }
#circleslider4 .overlay {background:url(../images/example-overlay.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:530px; width:530px; }
#circleslider4 .thumb { background:url(../images/example-thumb.png) no-repeat 50% 50%; position: absolute; top: 0; cursor: pointer; left: 0; margin: 5px 0 0; width:95px; z-index: 101; height: 95px; }
#circleslider4 .dot { cursor: pointer; text-indent: -999em; overflow: hidden; height: 74px; width: 74px; position: absolute;  left: 0; top: 0; z-index: 100; }
#circleslider4 .dot-1 { background:url(../images/example-dot-3.png) no-repeat 0 0; width: 95px; height: 73px; margin: 10px 0 0; }
#circleslider4 .dot-2 { background:url(../images/example-dot-2.png) no-repeat 0 0; width: 82px; height: 83px; }
#circleslider4 .dot-3 { background:url(../images/example-dot-1.png) no-repeat 0 0; width: 74px; height: 74px; }
#circleslider4 .dot-4 { background:url(../images/example-dot-4.png) no-repeat 0 0; width: 61px; height: 71px; }
#circleslider4 .dot-5 { background:url(../images/example-dot-5.png) no-repeat 0 0; width: 74px; height: 74px; }
#circleslider4 .dot span { cursor: pointer; }