@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css);.metronome-container input[type=range]{-webkit-appearance:none !important;max-height:3px;position:relative;top:-3px;background:#ddd}.metronome-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none !important;width:15px;height:15px;position:relative;top:-1px;background:#222}.metronome-container input[type=checkbox]{display:none}.metronome-container input[type=checkbox]+label{display:inline-block !important;height:15px;width:15px;margin:0 4px 0 0 !important;padding:0;position:relative;top:4px;background:#fff;cursor:pointer}.metronome-container input[type=checkbox]+label:before{content:"";display:inline-block;width:4px;height:8px;background:#f38630;opacity:0;position:relative;top:-5px;right:-1px;transform:skewX(0deg);transition:all .24s}.metronome-container input[type=checkbox]+label:after{content:"";display:inline-block;width:4px;height:15px;background:#f38630;opacity:0;position:relative;top:-5px;right:-3px;transform:skewX(0deg);transition:all .24s}.metronome-container input[type=checkbox]:checked+label:before{transform:skewX(30deg);opacity:1}.metronome-container input[type=checkbox]:checked+label:after{transform:skewX(-30deg);opacity:1}.metronome-container{width:100%;height:auto;position:relative;margin:40px auto}.metronome-container .options-btn{color:#fff;font-size:22px;position:absolute;top:20px;right:15px;transform:rotateZ(0deg);cursor:pointer;transition:transform .3s}.metronome-container .options-btn:hover{transform:rotateZ(60deg)}.metronome-container .options-active{max-height:1000px !important;padding:15px;overflow:visible !important}.metronome-container .options{max-height:0px;background:#fff;color:#333;overflow:hidden;transition:all .25s;position:absolute;top:50px;right:15px}.metronome-container .options .up{color:#fff;font-size:22px;position:absolute;top:-14px;right:3px;z-index:500;transform:rotateZ(180deg)}.metronome-container .options label{display:block;margin-top:10px}.metronome-container .counter{width:100%;padding-bottom:10px;background:#404040;text-align:center;padding:20px}.metronome-container .counter .dot{width:8px;height:8px;display:inline-block;margin:29px 4px 10px 10px;background:#fff;border-radius:50%;cursor:pointer;transition:all .3s}.metronome-container .counter .active{background:#95bc42}.metronome-container .controls{color:#000;padding:20px;text-align:center}.metronome-container .controls label{display:block;margin-bottom:18px}.metronome-container .controls label span{background:#fff;color:#222;padding:5px}.metronome-container .controls label span i{cursor:pointer;transition:color .2s;display:inline-flex}.metronome-container .controls label span i:hover{color:#fa6900}.metronome-container .controls input{width:30px;border:0 solid;color:#222;text-align:center;padding:4px;display:inline-flex;border:1px solid #000;width:100px}.metronome-container .controls select{border:0;color:#222}.metronome-container .controls .play-btn{width:45%;background:#d6e26d;border:0;border-radius:5px;padding:12px;color:#3d430d;transition:background .3s}.metronome-container .controls .play-btn:hover{background:#e8efad}.metronome-container .controls .tap-btn{width:45%;background:#888;border:0;border-radius:5px;padding:12px;color:#fbfbfb;transition:background .3s}.metronome-container .controls .tap-btn:hover{background:#959595}