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