@-webkit-keyframes drop-down{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}@-webkit-keyframes switch-off{0%{background-position:3rem}100%{background-position:0}}@-webkit-keyframes switch-on{0%{background-position:-3rem}100%{background-position:0}}@-webkit-keyframes lag-label{0%{color:#000}45%{color:#000}100%{color:#cfc6c3}}@keyframes drop-down{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}@keyframes switch-off{0%{background-position:3rem}100%{background-position:0}}@keyframes switch-on{0%{background-position:-3rem}100%{background-position:0}}@keyframes lag-label{0%{color:#000}45%{color:#000}100%{color:#cfc6c3}}*,::before,::after{box-sizing:inherit;margin:0;padding:0}html{background-image:url("../images/stone.jpg");background-position:0 -2rem;box-sizing:border-box;color:#a3a394;font-family:helvetica, arial, sans-serif;font-size:17px;overflow-x:hidden}@media (min-width: 321px) and (orientation: portrait){html{font-size:20px}}@media (min-width: 960px){html{font-size:20px}}@media (min-width: 1080px){body::before,body::after{background:url("../images/wood.jpg");bottom:0;content:'';position:absolute;top:0;width:3rem}}body{background:#242423;margin:0 auto;padding:.5rem .25rem;position:relative;width:100%}@media (min-width: 321px) and (orientation: portrait){body{padding:.5rem}}@media (min-width: 960px){body{max-width:57rem;padding:.5rem 1rem}}@media (min-width: 1080px){body::before{background-position:-1.5rem 6.05rem;left:-3rem}}@media (min-width: 1080px){body::after{right:-3rem}}h1{display:inline-block;font-family:'brandon-grotesque', sans-serif;font-size:1rem;font-weight:100;letter-spacing:.3rem;margin:0 0 2rem;text-transform:uppercase}h1 a{font-size:1rem}.tagline{font-size:.5rem;text-transform:uppercase}.nav{position:relative;top:-2rem;text-transform:uppercase}@media (min-width: 640px) and (orientation: landscape){.nav{position:absolute;right:0;text-align:right;top:.6rem}}@media (min-width: 720px) and (orientation: portrait){.nav{position:absolute;right:0;text-align:right;top:.6rem}}@media (min-width: 960px){.nav{position:absolute;right:0;text-align:right;top:.6rem}}.nav li{display:block;list-style-type:none;margin:1rem 0}@media (min-width: 640px) and (orientation: landscape){.nav li{display:inline-block;margin:0 1rem}}@media (min-width: 720px) and (orientation: portrait){.nav li{display:inline-block;margin:0 1rem}}@media (min-width: 960px){.nav li{display:inline-block;margin:0 1rem}}a{font-size:.6rem;text-decoration:none}a:link,a:visited{color:inherit}a:hover{color:#f2f2f2}h2{font-family:'brandon-grotesque', sans-serif;font-size:.8rem;font-style:italic;text-transform:uppercase}button{cursor:pointer;outline:none}input{outline:none}.panel{background:radial-gradient(#131311, rgba(36,36,35,0)) 0 -0.9rem no-repeat;background-size:calc(100% - 2rem) 1rem;border:none;height:1rem;margin:1rem auto 0}.copyright{font-size:.5rem;margin:1.5rem 0 .5rem;position:absolute;text-transform:uppercase}article{background:#f2f2f2;box-shadow:0 0.25rem 2rem -0.25rem #3e3c39;color:#3e3c39;font-size:.7rem;padding:2rem;position:relative;width:100%;z-index:2}@media (min-width: 1080px){article{left:-2rem;width:calc(100% + 4rem)}}article h1{display:block;font-size:1.5rem;margin:0 0 .2rem;text-align:center}article h1::after{background:radial-gradient(#a3a394, #f2f2f2) 0 -3px no-repeat;content:'';height:.2rem;display:block;margin:0 auto;width:50%}article h2{margin:1rem 0}article h3{font-size:.8rem;font-weight:normal;margin:.4rem 0}article a:hover{color:#ff3232}article h2,article h3,.fake-h2{font-style:normal}.subtitle{color:#7f7673;display:block;font-size:.6rem;letter-spacing:2px;text-align:center;text-transform:uppercase}nav{width:10rem}@media (min-width: 1080px){nav{display:inline-block}}.fake-h2{display:block;font-size:1rem;margin:3rem 0 1rem}.toc{line-height:2;margin:0 0 0 2rem}@media (min-width: 1080px){.toc{margin:0 0 0 1rem}}.toc::after{content:'';display:block;height:1rem;width:1rem}.toc a{font-size:inherit}.wrapper{display:inline-block;margin:2rem 0 4rem;vertical-align:top}@media (min-width: 1080px){.wrapper{margin:2rem 0 0 4rem}}p{line-height:1.7;margin:1rem 0;max-width:28rem}p a{font-size:inherit}i{font-family:'ocr-b-std', monospace;font-style:normal;text-transform:uppercase}#osc1,#osc2,#noise,#mixer,#filter,#filter-eg,#vca-eg,#lfo,#delay,#portamento,#octave-shift{border:2px solid #555;border-radius:.5rem;display:inline-block;margin:0 0 1rem;padding:.5rem;vertical-align:top}#osc1>h2,#osc2>h2,#noise>h2,#mixer>h2,#filter>h2,#filter-eg>h2,#vca-eg>h2,#lfo>h2,#delay>h2,#portamento>h2,#octave-shift>h2{padding:0 1rem 0 .25rem;position:relative;top:-1.1rem}#osc1-kbd label.selected:first-child,#osc2-kbd label.selected:first-child,#osc1-kbd label.selected:last-child,#osc2-kbd label.selected:last-child{background-position:0}@media (min-width: 1080px){#osc1-kbd label.selected:first-child,#osc2-kbd label.selected:first-child,#osc1-kbd label.selected:last-child,#osc2-kbd label.selected:last-child{-webkit-animation:lag-label .25s;animation:lag-label .25s}}#osc1-kbd,#osc2-kbd{background:#9e9c99 linear-gradient(#6c6956, #887);border:1px solid #2c2916;border-radius:.25rem;color:#000;display:inline-block;vertical-align:top}#osc1-kbd input,#osc2-kbd input{display:none}#osc1-kbd label,#osc2-kbd label{background:linear-gradient(#53515f, #3e3c39);background-repeat:repeat-y;background-size:3rem;cursor:pointer;display:table-cell;font-size:.5rem;height:1rem;text-align:center;text-transform:uppercase;transition:background-position .25s;vertical-align:middle;width:3rem}#osc1-kbd label.selected,#osc2-kbd label.selected{color:#cfc6c3;text-shadow:-2px 0 1px #7f7673, 2px 0 1px #7f7673}#osc1-kbd label:not(.selected):hover,#osc2-kbd label:not(.selected):hover{background-color:#696663;box-shadow:inset 0 0 1rem -3px #3e3c39}#osc1-kbd label:first-child,#osc2-kbd label:first-child{background-position:3rem;border-radius:.2rem 0 0 .2rem}@media (min-width: 1080px){#osc1-kbd label:first-child.selected,#osc2-kbd label:first-child.selected{-webkit-animation:switch-off .25s;animation:switch-off .25s}}#osc1-kbd label:last-child,#osc2-kbd label:last-child{background-position:-3rem;border-radius:0 .2rem .2rem 0}@media (min-width: 1080px){#osc1-kbd label:last-child.selected,#osc2-kbd label:last-child.selected{-webkit-animation:switch-on .25s;animation:switch-on .25s}}#osc1-coarse,#osc2-coarse,#portamento-mode{background:linear-gradient(#53515f, #3e3c39) repeat-y,linear-gradient(#6c6956, #887) repeat-x;background-size:4rem 1.4rem;border:1px solid #3e3c39;border-radius:.2rem;display:inline-block}@media (min-width: 1080px){#osc1-coarse,#osc2-coarse,#portamento-mode{transition:background-position .25s;will-change:background-position}}.pos1#osc1-coarse,.pos1#osc2-coarse,.pos1#portamento-mode{background-position:0}.pos2#osc1-coarse,.pos2#osc2-coarse,.pos2#portamento-mode{background-position:4rem}.pos3#osc1-coarse,.pos3#osc2-coarse,.pos3#portamento-mode{background-position:8rem}.pos4#osc1-coarse,.pos4#osc2-coarse,.pos4#portamento-mode{background-position:12rem}#osc1-coarse label,#osc2-coarse label,#portamento-mode label{color:#000;cursor:pointer;display:table-cell;font-size:.5rem;height:1.4rem;text-align:center;text-transform:uppercase;vertical-align:middle;width:4rem}#osc1-coarse label.selected,#osc2-coarse label.selected,#portamento-mode label.selected{color:#cfc6c3;text-shadow:-2px 0 1px #7f7673, 2px 0 1px #7f7673}@media (min-width: 1080px){#osc1-coarse label.selected,#osc2-coarse label.selected,#portamento-mode label.selected{-webkit-animation:lag-label .25s;animation:lag-label .25s}}#osc1-coarse label:not(.selected):hover,#osc2-coarse label:not(.selected):hover,#portamento-mode label:not(.selected):hover{background-color:#696663;box-shadow:inset 0 0 1rem -3px #3e3c39}#osc1-coarse input,#osc2-coarse input,#portamento-mode input{display:none}#osc2-waveform,#noise-color,#filter-mode,#lfo-shape{background:linear-gradient(#53515f, #3e3c39) repeat-x,linear-gradient(#6c6956, #887) fixed;background-position:0 0;background-size:2rem 1.5rem, auto;border:1px solid #3e3c39;border-radius:.2rem;display:inline-block;vertical-align:top;width:3rem}@media (min-width: 1080px){#osc2-waveform,#noise-color,#filter-mode,#lfo-shape{transition:background-position .25s;will-change:background-position}}.pos1#osc2-waveform,.pos1#noise-color,.pos1#filter-mode,.pos1#lfo-shape{background-position:0 0, 0 0}.pos2#osc2-waveform,.pos2#noise-color,.pos2#filter-mode,.pos2#lfo-shape{background-position:0 1.5rem, 0 0}.pos3#osc2-waveform,.pos3#noise-color,.pos3#filter-mode,.pos3#lfo-shape{background-position:0 3rem, 0 0}.pos4#osc2-waveform,.pos4#noise-color,.pos4#filter-mode,.pos4#lfo-shape{background-position:0 4.5rem, 0 0}.pos5#osc2-waveform,.pos5#noise-color,.pos5#filter-mode,.pos5#lfo-shape{background-position:0 6rem, 0 0}#osc2-waveform label,#noise-color label,#filter-mode label,#lfo-shape label{color:#000;cursor:pointer;display:block;font-size:.5rem;height:1.5rem;padding:.5rem 0;text-align:center;text-transform:uppercase}#osc2-waveform label.selected,#noise-color label.selected,#filter-mode label.selected,#lfo-shape label.selected{color:#cfc6c3;text-shadow:-2px 0 1px #7f7673, 2px 0 1px #7f7673}@media (min-width: 1080px){#osc2-waveform label.selected,#noise-color label.selected,#filter-mode label.selected,#lfo-shape label.selected{-webkit-animation:lag-label .25s;animation:lag-label .25s}}#osc2-waveform label:not(.selected):hover,#noise-color label:not(.selected):hover,#filter-mode label:not(.selected):hover,#lfo-shape label:not(.selected):hover{background-color:#696663;box-shadow:inset 0 0 1rem -3px #3e3c39}#osc2-waveform input,#noise-color input,#filter-mode input,#lfo-shape input{display:none}.slider-label{background:linear-gradient(#666 0, #666 0.05rem, transparent 0.05rem, transparent 1rem, #444 1rem, #444 1.05rem, transparent 1.05rem, transparent 2rem);background-position:center top;background-repeat:repeat-y;background-size:2.3rem 2rem;border-bottom:1px solid #666;display:inline-block;font-size:.5rem;height:6rem;margin-bottom:.5rem;position:relative;text-align:center;text-transform:uppercase;top:0;width:3rem}.vertical-slider{-webkit-appearance:slider-vertical;height:6rem;margin-bottom:.25rem;width:3rem}.horizontal-slider-label{display:inline-block;font-size:.5rem;margin:1rem 0 .4rem;text-transform:uppercase;vertical-align:top}.horizontal-slider::before,.horizontal-slider::after{color:#9f9693;font-size:.6rem;position:absolute;top:-1rem;z-index:1}.horizontal-slider{margin:-.1rem 0 0 1rem;position:relative;top:-.2rem;width:8.5rem}.horizontal-slider::before{content:'0'}.horizontal-slider::after{content:'10';margin-left:-.6rem}#octave-shift-down,#octave-shift-up{background:#3e3c39 linear-gradient(#514e5d, #2e2c29);border:1px solid #242220;border-radius:.2rem;box-shadow:inset 0 -1px 2px 1px #2e2c29,0 2px 2px -2px #242220;color:#a3a394;font-size:.6rem;height:1.5rem;width:3.5rem}#octave-shift-down:hover,#octave-shift-up:hover{background:#3e3c39 linear-gradient(#43414f, #2e2c29);box-shadow:inset 0 -1px 2px 1px #323130,0 2px 4px -2px #242220}#pitch-wheel,#mod-wheel{border:1px solid #1f1e1e;box-shadow:inset 0 0 1rem .1rem #555;color:#000;display:inline-block;font-size:.5rem;padding:0 0 .5rem;text-align:center;text-transform:uppercase;vertical-align:top;width:4rem}@media (min-width: 640px) and (orientation: landscape){#pitch-wheel,#mod-wheel{margin:0;width:2.8rem}}@media (min-width: 720px) and (orientation: portrait){#pitch-wheel,#mod-wheel{width:2.2rem}}@media (min-width: 960px){#pitch-wheel,#mod-wheel{margin:0 0 0 1rem;width:4rem}}#pitch-wheel input,#mod-wheel input{-webkit-appearance:slider-vertical;height:10rem;margin:.5rem auto;width:4rem}@media (min-width: 640px) and (orientation: landscape){#pitch-wheel input,#mod-wheel input{width:2.8rem}}@media (min-width: 720px) and (orientation: portrait){#pitch-wheel input,#mod-wheel input{width:2.2rem}}@media (min-width: 960px){#pitch-wheel input,#mod-wheel input{width:4rem}}.c,.d,.e,.f,.g,.a,.b,.c-sharp,.d-sharp,.f-sharp,.g-sharp,.a-sharp{-webkit-user-select:none;-webkit-tap-highlight-color:transparent;border:1px solid #7f7673;border-top:0;vertical-align:top}.c,.d,.e,.f,.g,.a,.b{background:linear-gradient(#1f1f17, #f2f2f2 2px, #d2d2d2);border-radius:0 0 .3rem .3rem;box-shadow:inset 0 -4px 2px 2px #c2c1c0,0 4px 6px -2px #242220;height:13.5rem;width:2.2rem}.c:hover,.d:hover,.e:hover,.f:hover,.g:hover,.a:hover,.b:hover,.playing.c,.playing.d,.playing.e,.playing.f,.playing.g,.playing.a,.playing.b{background:linear-gradient(#1f1f17, #f0f0f0 2px, #e8e8e8 10rem, #a2a2a0);box-shadow:inset 0 -1px 2px 1px #a2a2a0, 0 4px 3px -3px #100b0a}.c-sharp,.d-sharp,.f-sharp,.g-sharp,.a-sharp{background:linear-gradient(#1f1f17, #2e2c29 2px, #111);border-radius:0 0 6px 4px;box-shadow:inset 0px -8px 6px 4px #2e2c29;height:8.5rem;left:-.75rem;margin:0 -1.5rem 0 0;position:relative;width:1.5rem;z-index:1}.c-sharp:hover,.d-sharp:hover,.f-sharp:hover,.g-sharp:hover,.a-sharp:hover,.playing.c-sharp,.playing.d-sharp,.playing.f-sharp,.playing.g-sharp,.playing.a-sharp{background:linear-gradient(#1e1c19, #2e2c29 2px, #000);box-shadow:inset 0 -8px 6px 4px #161417}#program{background:#600;box-shadow:inset 0 0 1.2rem -.15rem #900;color:#ff3232;cursor:pointer;font-family:'ocr-b-std', monospace;margin:-1.5rem auto 1rem;padding:.5rem;text-transform:uppercase;text-shadow:0 .1rem .15rem #c40000}#program-select{-webkit-animation:drop-down .2s;background:inherit;box-shadow:inherit;display:none;left:0;height:8.5rem;margin:-.5rem auto;overflow-y:scroll;padding:.25rem 0;position:absolute;right:0;transform-origin:top;width:calc(100% - 1rem);z-index:4}#program-select>button{background:none;border:.05rem solid transparent;color:inherit;display:block;margin:.1rem .75rem .1rem .1rem;padding:.5rem;font-family:'ocr-b-std', serif;text-align:left;text-transform:uppercase;width:100%}@media (min-width: 321px) and (orientation: portrait){#program-select>button{display:inline-block;width:calc((100% / 2) - 1rem)}}@media (min-width: 640px) and (orientation: landscape){#program-select>button{display:inline-block;width:calc((100% / 3) - 1rem)}}@media (min-width: 960px){#program-select>button{width:calc((100% / 4) - 1rem)}}#program-select>button:hover{border:.05rem solid}#program-name{margin-left:2rem}#program-name::before{content:'88888888888888888888888888888888888888888888888888888888888888888888888888888888';margin-left:-2rem;margin-top:-.5rem;opacity:.2;overflow:hidden;padding:.5rem 0;position:absolute;width:calc(100% - 3rem)}#prev,#next{background:none;border:none;color:inherit;font-family:inherit;font-size:2rem;height:2rem;margin-top:-.45rem;opacity:.8;position:absolute;text-align:left;width:2rem;z-index:3}#prev{left:1rem;text-indent:.1rem}#prev:hover{opacity:1}#next{right:1rem;text-indent:.5rem}#next:hover{opacity:1}#osc1>h2,#osc2>h2{background:linear-gradient(to right, #242423 5rem, rgba(36,36,35,0));margin-bottom:-1rem}#osc1-kbd,#osc2-kbd{margin-left:4rem}#osc1-coarse,#osc2-coarse{margin:1rem 0}.kbd-tracking{font-size:.5rem;text-transform:uppercase;vertical-align:middle}#noise{padding:.5rem 0}#noise>h2{background:linear-gradient(to right, #242423 2.5rem, rgba(36,36,35,0))}#noise-color{display:block;margin:0 auto}#mixer{padding:.5rem 0}#mixer>h2{background:linear-gradient(to right, #242423 2rem, rgba(36,36,35,0))}#filter>h2{background:linear-gradient(to right, #242423 2.5rem, rgba(36,36,35,0))}#filter-mode{margin-top:-.8rem}#filter-eg>h2{background:linear-gradient(to right, #242423 11rem, rgba(36,36,35,0))}#vca-eg>h2{background:linear-gradient(to right, #242423 10rem, rgba(36,36,35,0))}#lfo>h2{background:linear-gradient(to right, #242423 1rem, rgba(36,36,35,0))}#lfo-shape{margin-top:-.8rem}#delay>h2{background:linear-gradient(to right, #242423 2.5rem, rgba(36,36,35,0))}#portamento>h2{background:linear-gradient(to right, #242423 5rem, rgba(36,36,35,0))}#octave-shift{margin:12rem 0 0 -5rem;padding:0;position:absolute}@media (min-width: 640px) and (orientation: landscape){#octave-shift{margin:0;padding:.5rem;position:static}}@media (min-width: 720px) and (orientation: portrait){#octave-shift{margin:0;padding:.5rem;position:static}}@media (min-width: 640px) and (orientation: landscape){#octave-shift>h2{background:linear-gradient(to right, #242423 5rem, rgba(36,36,35,0))}}@media (min-width: 720px) and (orientation: portrait){#octave-shift>h2{background:linear-gradient(to right, #242423 5rem, rgba(36,36,35,0))}}.controls{display:inline-block;position:relative;text-align:center;top:-.25rem}#octave-minus-2,#octave-minus-1,#octave-plus-0,#octave-plus-1,#octave-plus-2{border:1px solid #2e2a0e;border-radius:50%;box-sizing:content-box;color:#f2f2f2;display:inline-block;font-size:.5rem;height:.6rem;line-height:4;margin:1rem .45rem;opacity:.2;transition:opacity .25s ease-out;width:.6rem}.lit#octave-minus-2,.lit#octave-minus-1,.lit#octave-plus-0,.lit#octave-plus-1,.lit#octave-plus-2{opacity:1 !important}#octave-minus-2{background:radial-gradient(#f44, #a41515)}#octave-minus-2.lit{box-shadow:0 -0.1rem 0.8rem #a41515}#octave-minus-1{background:radial-gradient(#fa6, #c26419)}#octave-minus-1.lit{box-shadow:0 -0.1rem 0.8rem #c26419}#octave-plus-0{background:radial-gradient(#3e3, #1d7a1d)}#octave-plus-0.lit{box-shadow:0 -0.1rem 0.8rem #1d7a1d}#octave-plus-1{background:radial-gradient(#fa6, #c26419)}#octave-plus-1.lit{box-shadow:0 -0.1rem 0.8rem #c26419}#octave-plus-2{background:radial-gradient(#e33, #7a1d1d)}#octave-plus-2.lit{box-shadow:0 -0.1rem 0.8rem #7a1d1d}#octave-shift-down{margin:0 1rem 0 0}#keyboard{background:linear-gradient(#1f1f17, #191911) repeat-x;background-size:1px 25rem;font-size:0;margin:1rem 0 -1rem -1rem;overflow:hidden}@media (min-width: 640px) and (orientation: landscape){#keyboard{background-size:1px 13rem}}@media (min-width: 720px) and (orientation: portrait){#keyboard{background-size:1px 13rem}}@media (min-width: 960px){#keyboard{margin:1rem -1rem -1rem}}@media (min-width: 1080px){#keyboard::before,#keyboard::after{background:rgba(0,0,0,0.1);bottom:0;content:'';position:absolute;top:calc(100% - 13rem);width:3rem}}@media (min-width: 1080px){#keyboard::before{left:-3rem}}@media (min-width: 1080px){#keyboard::after{right:-3rem;z-index:1}}.shadow{border:0;box-shadow:-1px 3px 4px 5px rgba(0,0,0,0.66);margin:0 auto;position:relative;width:calc(100% - .6rem);z-index:2}#pitch-wheel{background:#827c7a;margin:0 1rem}#mod-wheel{background:#999;margin:0 8rem 0 -1rem}@media (min-width: 320px) and (orientation: landscape){#mod-wheel{margin:0 23rem 0 -1.4rem}}@media (min-width: 321px) and (orientation: portrait){#mod-wheel{margin:0 7rem 0 -1rem}}@media (min-width: 400px) and (orientation: portrait){#mod-wheel{margin:0 9rem 0 -1rem}}@media (min-width: 640px) and (orientation: landscape){#mod-wheel{margin:0 0 0 -1rem}}@media (min-width: 720px) and (orientation: portrait){#mod-wheel{margin:0 0 0 -1rem}}@media (min-width: 960px){#mod-wheel{margin:0 1rem 0 0}}#c1{margin-left:1rem}@media (min-width: 320px) and (orientation: landscape){#c1{margin-left:.9rem}}@media (min-width: 640px) and (orientation: landscape){#c1{margin-left:0}}@media (min-width: 720px) and (orientation: portrait){#c1{margin-left:0}}.oct2{display:none}@media (min-width: 320px) and (orientation: landscape){.oct2{display:inline-block}}@media (min-width: 720px) and (orientation: portrait){.oct2{display:inline-block}}
/*# sourceMappingURL=tanguy.css.map */