*{box-sizing:border-box}html{overflow-x:hidden;position:relative}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fbc86f;font-size:16px;transition:font-size .5s}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}a,a:visited{color:inherit;text-decoration:none;-webkit-filter:invert(0);filter:invert(0);transition:-webkit-filter .2s;transition:filter .2s;transition:filter .2s,-webkit-filter .2s}a:focus,a:hover,a:visited:focus,a:visited:hover{outline:none;-webkit-filter:invert(.03);filter:invert(.03)}button{font-family:inherit;color:inherit;padding:0;text-align:center;background:transparent;border:none;outline:none}button:hover{cursor:pointer}button:focus{outline:none}.App{max-width:100vw;height:100vh;overflow-x:hidden;display:-ms-grid;display:grid;-ms-grid-columns:12.5em 3fr 3fr;grid-template-columns:12.5em 3fr 3fr;-ms-grid-rows:.8fr 2fr 4fr .4fr;grid-template-rows:.8fr 2fr 4fr .4fr;color:#191919;position:relative}.mainHeader{-ms-grid-column:1;-ms-grid-column-span:3;grid-column:1/4;-ms-grid-row:1;grid-row:1;z-index:3;display:flex;flex-wrap:wrap;margin:2vh 0}.mainHeader .headerContainer{display:-ms-grid;display:grid;-ms-grid-columns:12.5em 1fr;grid-template-columns:12.5em 1fr;transform-origin:left;transition:transform .5s}.mainHeader h1{font-size:1em;margin:0}.mainHeader .logo{border-bottom:1px solid #191919;transition:-webkit-filter .5s;transition:filter .5s;transition:filter .5s,-webkit-filter .5s;display:inline-block;font-size:2.3em;letter-spacing:.3em;margin:0}.mainHeader .logo--left{text-align:center;-ms-grid-column:1;grid-column:1;color:#fbc86f;margin-left:auto}.mainHeader .logo--right{color:#fff;-ms-grid-column:2;grid-column:2;padding-left:2%;-ms-grid-column-align:left;justify-self:left}.mainHeader p{margin:5px 6%;font-size:.8em;-ms-grid-row:2;grid-row:2;-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1/3;letter-spacing:2px;color:inherit}.mainHeader--subPage .logo{-webkit-filter:brightness(0);filter:brightness(0)}.mainHeader--subPage .headerContainer{transform:scale(.9)}.mainHeader .placeHolder{display:block;flex:1 1}.sideBar{-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1/2;-ms-grid-row:1;-ms-grid-row-span:4;grid-row:1/5;display:-ms-grid;display:grid;-ms-grid-rows:inherit;grid-template-rows:inherit;position:-webkit-sticky;position:sticky;top:0;left:0;width:100%;height:100%;background-color:#fff}.sideBar .advice{-ms-grid-row:3;grid-row:3;justify-self:stretch;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10%;font-size:.9em;font-weight:lighter;letter-spacing:.3em;line-height:2em}.links{position:relative;z-index:10;min-width:20em;flex:4 1;display:-ms-grid;display:grid;justify-items:center;align-items:center;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);padding:0}.links .link{font-size:.9em;display:inline-block;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;text-align:center;transition:all .5s}.links .link:after{content:"";display:block;width:40%;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%) scaleX(0);border-bottom:1px solid #252525;transition:transform .5s}.links .link:focus,.links .link:hover{-webkit-filter:brightness(2);filter:brightness(2)}.links .link:focus:after,.links .link:hover:after{transform:translate(-50%) scaleX(2.5)}.links .link--active{font-weight:700}.links .link--active:after{transform:translate(-50%) scaleX(2)}.sampleMenu{-ms-grid-row:2;-ms-grid-row-span:1;grid-row:2/3;-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2/3;align-self:center;justify-self:center;height:100%;flex-wrap:wrap}.sampleMenu,.sampleMenu header{width:100%;display:flex;align-items:center}.sampleMenu header{padding:3px 5%;letter-spacing:5.04px;font-size:1em}.sampleMenu header:after{content:"";display:block;height:1px;background-color:#191919;flex:1 1;opacity:.1;margin-left:5px}.sampleMenu__menu{flex:1 1;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr);align-content:center}.sampleMenu__button{letter-spacing:7.56px;font-weight:100;font-size:1.5em;margin:10%;padding:5px 0;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;position:relative;transition:transform .5s,font-weight .2s}.sampleMenu__button:after{content:"";display:block;width:40%;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%) scaleX(1);border-bottom:2px solid #252525;transition:transform .5s}.sampleMenu__button:focus,.sampleMenu__button:hover{transform:translateY(-5%)}.sampleMenu__button:focus:after,.sampleMenu__button:hover:after{transform:translate(-50%,5%) scaleX(2.5)}.sampleMenu__button--active{font-weight:700}.sampleMenu__button--active:after{transform:translate(-50%) scaleX(2.5)}.keyboard{align-self:center;position:relative;display:flex;justify-content:space-evenly;align-self:stretch;width:100%;padding:0 3%;margin-top:2%;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;-ms-grid-row:3;-ms-grid-row-span:1;grid-row:3/4}.keyboard--loading{pointer-events:none;cursor:default}#C1{border-radius:10px 0 0 10px}.key{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:1px solid #000;height:100%;margin:1px;padding-bottom:10px;transform-origin:top;box-shadow:0 3px 5px rgba(0,0,0,.136);pointer-events:all;transform:perspective(1000px) rotateX(0deg);transition:transform .05s,opacity .4s,-webkit-filter .2s;transition:filter .2s,transform .05s,opacity .4s;transition:filter .2s,transform .05s,opacity .4s,-webkit-filter .2s}.key:hover{cursor:pointer;-webkit-filter:opacity(.8);filter:opacity(.8)}.key--white{flex:1 1;background-color:#fff;color:#1b1b1b}.key--white:last-of-type{border-radius:0 10px 10px 0}.key--black{width:4%;background-color:#1b1b1b;color:#fff;border-radius:0 0 10px 10px}.key--black:first-of-type{margin-left:2%}.key--black:last-of-type{margin-right:2%}.key--active{transform:perspective(1000px) rotateX(-5deg)}.key--loading{opacity:.3;pointer-events:none;cursor:default}.key--editable{opacity:.7}.key--editable .trigger{opacity:.5}.key--edit{opacity:1;-webkit-filter:brightness(1.3);filter:brightness(1.3);transform:translateY(-1%)}.key--edit:hover{-webkit-filter:opacity(1);filter:opacity(1)}.trigger{opacity:0;-webkit-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;flex-direction:row-reverse;max-height:40%;width:100%;font-size:.8em}.trigger p{padding:0;margin:0 2%}.blackKeys{display:flex;justify-content:space-evenly;width:100%;padding:inherit;padding-bottom:0;position:absolute;top:0;left:0;height:55%;z-index:2;pointer-events:none}#ghost11,#ghost12,#ghost21,#ghost22{opacity:0;pointer-events:none;z-index:-1}.editMap{position:absolute;top:0;right:0;background:rgba(27,27,27,.15)}.editMap:hover{opacity:1}.errorMessage{position:absolute;z-index:3;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.backgroundImage{-ms-grid-row:1;-ms-grid-row-span:3;grid-row:1/4;-ms-grid-column:3;-ms-grid-column-span:1;grid-column:3/4;-ms-grid-column-align:right;justify-self:right;-ms-grid-row-align:center;align-self:center;width:150%;-ms-grid-row-align:stretch;align-self:stretch;transform:translateX(10%);z-index:-1;background-repeat:no-repeat;background-position:50%;background-size:100%}.backgroundImage--Strings{background-image:url(/online-sampler/static/media/violin.3813a698.svg)}.backgroundImage--Piano{background-image:url(/online-sampler/static/media/piano.3563bb74.svg)}.backgroundImage--Vocals{background-image:url(/online-sampler/static/media/mic.db9e9142.svg);background-size:70%}.backgroundImage--Pads,.backgroundImage--Synth{background-image:url(/online-sampler/static/media/synth.6fa58b52.svg);background-position:top;transform:translateX(21%);background-size:60%}.soundUploader{-ms-grid-row:1;-ms-grid-row-span:2;grid-row:1/3;-ms-grid-column:3;grid-column:3;-ms-grid-row-align:stretch;align-self:stretch;-ms-grid-column-align:stretch;justify-self:stretch}.fileInput{position:relative}.fileInput__input{width:100%;height:100%;opacity:0;overflow:hidden;position:absolute;top:0;left:0;z-index:2}.fileInput__input:hover{cursor:pointer}.fileInput__label{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;text-align:center;font-size:inherit;font-weight:inherit;color:inherit}.fileInput__label p{background-color:#fff;padding:10px 30px;border-radius:20px}.fileInput__label img{margin-top:10px;height:100%}.loader{display:block;width:200px;height:200px;display:flex;justify-content:space-evenly;align-items:center}.loader span{display:block;width:15%;height:15%;border-radius:50%;background-color:#fff;-webkit-animation:jump 1.5s cubic-bezier(.5,-.04,.46,.67) infinite;animation:jump 1.5s cubic-bezier(.5,-.04,.46,.67) infinite}.loader span:nth-of-type(2){-webkit-animation-delay:.1s;animation-delay:.1s}.loader span:nth-of-type(3){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes jump{0%{transform:translatey(0)}25%{transform:translatey(-100%)}50%{transform:translatey(0)}to{transform:translatey(0)}}@keyframes jump{0%{transform:translatey(0)}25%{transform:translatey(-100%)}50%{transform:translatey(0)}to{transform:translatey(0)}}.page{-ms-grid-column:1;-ms-grid-column-span:3;grid-column:1/4;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.page h1{margin:0}.subHeader{display:flex;flex-direction:column;align-items:center;position:relative;justify-content:center;overflow:hidden;width:100%;padding:1em 10%}.subHeader h2{position:relative;z-index:2;letter-spacing:.6em;margin:0}.subHeader .background{background-color:#fff;display:block;position:absolute;width:100%;height:100%}.subHeader .label{font-weight:700;font-size:13em;position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);color:#fbc86f;z-index:1;display:flex;justify-content:space-evenly;max-width:100vw}.subHeader .label .letter{width:33%;text-align:center}.subHeader .line{display:block;width:100%;height:75%;border-bottom:1px solid #191919;background-color:transparent;z-index:2}.section{font-size:.9em;letter-spacing:.3em;line-height:2.3em;display:-ms-grid;display:grid;justify-items:center;align-items:center;-ms-grid-columns:50% 50%;grid-template-columns:50% 50%;position:relative;min-height:70vmin;width:100%;overflow:hidden;opacity:0;padding:0 10%}.section .text{z-index:2}.section:nth-of-type(2n){background-color:#fff}.section--head img{width:60vmax;position:absolute;right:55%;z-index:-1}.section--head .text{-ms-grid-column:2;grid-column:2;-ms-grid-column-align:left;justify-self:left}.section--mid{overflow:hidden;-ms-grid-columns:70% 30%;grid-template-columns:70% 30%}.section--mid .text{-ms-grid-column-align:left;justify-self:left}.section--mid img{width:60vmax;right:25%;top:50%;transform:translate(50%,-50%);position:absolute}.section--hero{overflow:visible;overflow:initial}.section--hero .heroImage{width:auto;z-index:10;bottom:0;right:50%;height:105%}.section--hero .text{-ms-grid-column-align:center;justify-self:center;position:relative;z-index:11}.socials{min-height:0;color:#fff;display:flex}.socials ul{width:100%;display:flex;justify-content:space-around;list-style:none;padding:0}.socials ul li{margin:3% 0}.socials ul li a,.socials ul li a:visited{display:flex;flex-direction:column;align-items:center}.socials ul li a:visited label,.socials ul li a label{pointer-events:none;width:100%;display:flex;justify-content:space-between}.socials ul li a:visited span,.socials ul li a span{font-weight:700;font-size:.9em;letter-spacing:normal;transition:transform .3s}.socials ul li a:focus .icon,.socials ul li a:hover .icon,.socials ul li a:visited:focus .icon,.socials ul li a:visited:hover .icon{transform:translateY(20%) scale(1.1)}.socials ul li a:focus span,.socials ul li a:hover span,.socials ul li a:visited:focus span,.socials ul li a:visited:hover span{transform:translateY(-260%) scale(1.1)}.socials ul .icon{transition:transform .3s;font-size:5em}.section--recommendation{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}.section--recommendation h3{width:100%;text-align:center}.channels{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;width:100%;margin:5% 0}.ytChannel{display:flex;margin:2% 0}.ytChannel img{border-radius:50%;width:10em;height:10em;position:relative;z-index:10;transform:translateX(100%) scale(.9);transition:transform .5s cubic-bezier(.175,.885,.32,1.275)}.ytChannel--info{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:15em;margin:3%;transform:translateX(-25%);opacity:1;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.ytChannel--info span{display:block;position:absolute;width:100%;height:100%;background:#fff;transform-origin:left;transition:transform .4s}.ytChannel header{font-weight:700;font-size:1.4em;line-height:normal}.ytChannel p{font-size:1em;line-height:normal;letter-spacing:normal;text-align:justify}.ytChannel:focus img,.ytChannel:hover img{transform:translateX(0) scale(1)}.ytChannel:focus .ytChannel--info,.ytChannel:hover .ytChannel--info{transform:translateX(0);opacity:1}.ytChannel:focus .ytChannel--info span,.ytChannel:hover .ytChannel--info span{transform:scaleX(0)}@media (max-width:800px){.ytChannel img{transform:translateX(0) scale(1)}.ytChannel--info{transform:translateX(0);opacity:1}.ytChannel--info span{transform:scaleX(0)}}.section--footer{min-height:0;align-items:center}.section--footer .back{margin:3% auto 3% 5%;position:relative;display:inline-block}.section--footer .back:before{content:"";position:absolute;bottom:25%;left:-10px;display:block;width:1em;height:1em;transform:rotate(45deg) translate(0);transition:transform .3s;border-bottom:1px solid #343434;border-left:1px solid #343434}.section--footer .back:hover:before{transform:rotate(45deg) translate(-50%,50%)}@media screen and (min-width:3000px){body{font-size:32px}}@media screen and (min-width:2000px){body{font-size:20px}}@media (max-height:600px),screen and (max-width:800px){body{font-size:12px}}@media (max-height:400px),screen and (max-width:500px){body{font-size:8px}}
/*# sourceMappingURL=main.0184978d.chunk.css.map */