@font-face{src:url(../fonts/codropsicons/codropsicons.eot);src:url(../fonts/codropsicons/codropsicons.eot?#iefix) format("embedded-opentype"),url(https://blinsair.top/online/fonts/codropsicons/codropsicons.woff) format("woff"),url(../fonts/codropsicons/codropsicons.ttf) format("truetype"),url(../fonts/codropsicons/codropsicons.svg#codropsicons) format("svg");font-weight:400;font-style:normal;font-family:codropsicons}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}body{color:#2d2e36;background:#c2ccd4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Avenir Next,Avenir,Helvetica Neue,Lato,Segoe UI,Helvetica,Arial,sans-serif}a{text-decoration:none;color:#8e8f9a;outline:none}a:focus,a:hover{color:#2d2e36;outline:none}audio{display:none}.codrops-header{padding:1.5em .5em;position:absolute;top:0;-webkit-align-items:center;align-items:center;left:0;-ms-flex-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex;z-index:1000}.codrops-header h1{font-size:1.85em;text-transform:uppercase;letter-spacing:1px;margin:0 0 0 .75em;line-height:1.2}.codrops-header h1 span{font-size:50%;display:block}.codrops-header h1 a{color:#eb495d}.codrops-header h1 a:focus,.codrops-header h1 a:hover{color:#8e8f9a}.codrops-links{position:relative;text-align:center;white-space:nowrap;display:inline-block}.codrops-links:after{height:100%;-webkit-transform:rotate(22.5deg);transform:rotate(22.5deg);content:"";position:absolute;top:0;background:rgba(0,0,0,.4);left:50%;width:1px}.codrops-icon{padding:0;text-decoration:none;margin:.5em;width:1.5em;display:inline-block}.codrops-icon span{display:none}.codrops-icon:before{font-weight:400;font-style:normal;font-variant:normal;text-transform:none;speak:none;margin:0 5px;-webkit-font-smoothing:antialiased;line-height:1;font-family:codropsicons}.codrops-icon--drop:before{color:#09c;content:"\e001"}.codrops-icon--prev:before{content:"\e004"}.container{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100vw;display:-webkit-flex;display:-ms-flexbox;display:flex}.container,.content{height:100vh;overflow:hidden}.container-drums{height:100%;-webkit-transform:translateY(-100%);transform:translateY(-100%);padding:2em 0 0;-webkit-transition:-webkit-transform .6s;transition:transform .6s;-webkit-transition-timing-function:cubic-bezier(.2,1,.3,1);transition-timing-function:cubic-bezier(.2,1,.3,1);-webkit-align-items:center;align-items:center;-ms-flex-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex}.screen-sm-hidden{-webkit-transform:translateX(0);transform:translateX(0)}.container-drums svg{-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.container-drums svg g{cursor:pointer}.demo-footer{padding:2em;right:0;position:absolute;top:0;z-index:1000}.container-sequencer,.demo-footer{display:-webkit-flex;display:-ms-flexbox;display:flex}.container-sequencer{-webkit-flex:1;-ms-flex:1;flex:1;-ms-flex-pack:center;height:100%;-webkit-justify-content:center;justify-content:center;-webkit-transition:-webkit-transform .3s;transition:transform .3s;-webkit-align-items:center;align-items:center;-ms-flex-align:center}.container-sequencer.collapse{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.btn{padding:.5rem;font-size:1.65em;border:0;text-decoration:none;font-weight:700;color:#89939b;margin:0 .125em;border-radius:2px;background:#b0b9c0;width:auto;line-height:1;vertical-align:middle}.btn:focus,.btn:hover{border-color:#2d2e36;color:#2d2e36;outline:none}.btn:focus{color:#89939b}.btn .fa{vertical-align:middle}.sequencer{-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-ms-flex-align:center}.row,.sequencer{display:-webkit-flex;display:-ms-flexbox;display:flex}.row{position:relative;width:100%}.row:hover{z-index:100}.sequencer-controls{-ms-flex-pack:justify;padding:10px 0 0 10px;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;width:100%;-ms-flex-align:center;display:-webkit-flex;display:-ms-flexbox;display:flex}.sequencer label span{height:5vh;border:2px solid #89939b;position:relative;margin:.5vh;border-radius:2px;cursor:pointer;width:5vh;display:block}.sequencer label input[type=checkbox]:checked~span{background:#89939b}.sequencer label.active input[type=checkbox]:checked~span{background:#eb495d}.sequencer label input{display:none}.sequencer .active span{border-color:#eb495d}.sequencer-controls .btn,input[type=number]{padding:0;font-size:1.2rem;border:none;-webkit-transition:all .5s;transition:all .5s;text-align:center;margin:5px;background:none;line-height:1}input[type=number]{border:none;-moz-appearance:textfield;color:#89939b}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.sequencer img{height:5vh;-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;position:relative;margin:.5vh;border-radius:3px;width:5vh;z-index:10}.sequencer img:hover{-webkit-transform:scale(2.5);transform:scale(2.5)}#All-Keys{display:none}.key-wrap{fill:#f3f8fc}.key-text{fill:#b0b9c0;font-size:62px;font-weight:700}@media (min-width:700px){.content{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;display:-webkit-flex;display:-ms-flexbox;display:flex}.container-sequencer{-webkit-transition:-webkit-transform .6s;transition:transform .6s;-webkit-transition-timing-function:cubic-bezier(.2,1,.3,1);transition-timing-function:cubic-bezier(.2,1,.3,1)}.container-sequencer.collapse{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.container-drums{-webkit-transform:translateX(-50%);transform:translateX(-50%);width:50%}.container-drums svg{-webkit-transform:scale(1.25);transform:scale(1.25);-webkit-transition:-webkit-transform .6s;transition:transform .6s;-webkit-transition-timing-function:cubic-bezier(.2,1,.3,1);transition-timing-function:cubic-bezier(.2,1,.3,1);max-height:65%}.screen-sm-hidden{-webkit-transform:translateX(0);transform:translateX(0)}.screen-sm-hidden svg{-webkit-transform:scale(.85);transform:scale(.85)}.btn-tooltip{position:relative}.btn-tooltip:after,.btn-tooltip:before{pointer-events:none;position:absolute;opacity:0;left:50%}.btn-tooltip:hover:after,.btn-tooltip:hover:before{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease;-webkit-transition-delay:.1s;transition-delay:.1s;opacity:1}.btn-tooltip:before{height:0;-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0);pointer-events:none;border:6px solid transparent;content:"";top:100%;margin:0 0 0 -6px;width:0;border-bottom-color:#2d2e36;z-index:1001}.btn-tooltip:hover:before{-webkit-transform:translateZ(0);transform:translateZ(0)}.btn-tooltip:after{-webkit-transform:translate3d(-50%,-5px,0);transform:translate3d(-50%,-5px,0);padding:8px 10px;font-size:.41em;font-weight:700;color:#fff;text-transform:uppercase;content:attr(aria-label);letter-spacing:1px;top:100%;margin:12px 0 0;border-radius:3px;background:#2d2e36;line-height:1.2;z-index:1000}.btn-tooltip:hover:after{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@media (max-width:500px){.container-drums,.container-sequencer{padding-top:6em;-webkit-align-items:flex-start;align-items:flex-start;-ms-flex-align:flex-start}.sequencer img{pointer-events:none}.btn-keys{display:none}.demo-footer{padding:1em;bottom:0;top:auto}.codrops-header{padding:.5em;font-size:90%}}