/* COLORS */
/* Modal positioning */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,600,700);
.bbm-wrapper {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  padding: 50px 10px;
  overflow: auto;
}

.bbm-wrapper * {
  box-sizing: border-box;
  height: auto;
}

.bbm-modal {
  border-radius: 3px;
  margin: auto;
  width: auto;
  max-width: 550px;
}

.bbm-views {
  width: 100%;
  box-sizing: border-box;
}

.bbm-wrapper {
  background: rgba(0, 0, 0, 0.75);
  -webkit-transition: background-color 0.3s;
}

.bbm-modal {
  background: #5A5F66;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9);
  color: white;
}

/* BLOCKS */
.bbm-modal__topbar,
.bbm-modal__bottombar {
  padding: 0 30px;
}

.bbm-modal__topbar {
  border-bottom: 2px solid rgba(188, 64, 22, 0.8);
  margin-bottom: 10px;
}

.bbm-modal__topbar > ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.bbm-modal__tab {
  display: inline-block;
  padding: 15px 10px;
}

.bbm-modal__tab a {
  font-size: 16px;
  font-weight: bold;
  color: #999;
}

.bbm-modal__tab a:hover, .bbm-modal__tab a.active {
  color: #222;
}

.bbm-modal__title {
  padding: 20px 0 19px;
  margin: 0;
  font-weight: normal;
  font-size: 22px;
  line-height: 1em;
  color: #CC3300;
}

.bbm-modal__section {
  padding: 0 30px;
  margin-top: 0px;
  font-size: 16px;
  line-height: 26px;
}

.bbm-modal__section p {
  font-size: 16px;
  line-height: 26px;
  color: #575656;
}

.bbm-modal__section p:last-child {
  padding: 0;
  margin-bottom: 0;
}

.bbm-modal__section a {
  color: #FF643C;
}

.bbm-modal__section h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1em;
}

.bbm-modal__bottombar {
  border-top: 2px solid rgba(188, 64, 22, 0.8);
  padding: 18px;
  text-align: right;
  margin-top: 30px;
}

/* MODULES */
.bbm-group {
  content: "";
  display: table;
  clear: both;
}

.bbm-button {
  display: inline-block;
  color: rgba(49, 45, 58, 0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  line-height: 1em;
  padding: 10px 14px;
  border-radius: 3px;
  background: #FCFCFC;
  background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
  background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}

.bbm-button.inactive {
  opacity: 0.5;
  pointer-events: none;
}

.bbm-button:active {
  background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
  background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
}

/* ANIMATIONS */
/* Open modal */
@-webkit-keyframes bbm-open {
  0% {
    -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813);
    opacity: 0.1259;
  }
  4% {
    -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809);
    opacity: 0.29544;
  }
  8% {
    -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922);
    opacity: 0.46703;
  }
  12% {
    -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355);
    opacity: 0.61908;
  }
  16% {
    -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991);
    opacity: 0.74284;
  }
  20% {
    -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067);
    opacity: 0.83724;
  }
  24% {
    -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658);
    opacity: 0.90523;
  }
  28% {
    -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049);
    opacity: 0.9515;
  }
  32% {
    -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675);
    opacity: 0.98107;
  }
  36% {
    -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966);
    opacity: 0.99852;
  }
  40% {
    -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361);
    opacity: 1.00766;
  }
  44% {
    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08);
    opacity: 1.01143;
  }
  48% {
    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394);
    opacity: 1.01199;
  }
  52% {
    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589);
    opacity: 1.01084;
  }
  56% {
    -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265);
    opacity: 1.00895;
  }
  60% {
    -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833);
    opacity: 1.0069;
  }
  64% {
    -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518);
    opacity: 1.00503;
  }
  68% {
    -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421);
    opacity: 1.00346;
  }
  72% {
    -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567);
    opacity: 1.00224;
  }
  76% {
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941);
    opacity: 1.00134;
  }
  80% {
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506);
    opacity: 1.00072;
  }
  84% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223);
    opacity: 1.00032;
  }
  88% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005);
    opacity: 1.00007;
  }
  92% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956);
    opacity: 0.99994;
  }
  96% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99913);
    opacity: 0.99988;
  }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50);
    opacity: 1;
  }
}
.bbm-modal--open {
  -webkit-animation-duration: 0.3s;
  -webkit-animation-name: bbm-open;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  -webkit-transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
}

/* Open a stacked modal */
@-webkit-keyframes bbm-stacked {
  0% {
    -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187);
    opacity: 0.93705;
  }
  4% {
    -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192);
    opacity: 0.85228;
  }
  8% {
    -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078);
    opacity: 0.76648;
  }
  12% {
    -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645);
    opacity: 0.69046;
  }
  16% {
    -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009);
    opacity: 0.62858;
  }
  20% {
    -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933);
    opacity: 0.58138;
  }
  24% {
    -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342);
    opacity: 0.54739;
  }
  28% {
    -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951);
    opacity: 0.52425;
  }
  32% {
    -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325);
    opacity: 0.50946;
  }
  36% {
    -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034);
    opacity: 0.50074;
  }
  40% {
    -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639);
    opacity: 0.49617;
  }
  44% {
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001);
    opacity: 0.49429;
  }
  48% {
    -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606);
    opacity: 0.494;
  }
  52% {
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411);
    opacity: 0.49458;
  }
  56% {
    -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736);
    opacity: 0.49553;
  }
  60% {
    -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167);
    opacity: 0.49655;
  }
  64% {
    -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482);
    opacity: 0.49749;
  }
  68% {
    -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579);
    opacity: 0.49827;
  }
  72% {
    -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433);
    opacity: 0.49888;
  }
  76% {
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059);
    opacity: 0.49933;
  }
  80% {
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494);
    opacity: 0.49964;
  }
  84% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777);
    opacity: 0.49984;
  }
  88% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995);
    opacity: 0.49996;
  }
  92% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044);
    opacity: 0.50003;
  }
  96% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088);
    opacity: 0.50006;
  }
  100% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43);
    opacity: 0.5;
  }
}
.bbm-modal--stacked {
  -webkit-animation-duration: 0.43333s;
  -webkit-animation-name: bbm-stacked;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  -webkit-transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
}

/* destroy a stacked modal */
@-webkit-keyframes bbm-stacked-reverse {
  0% {
    -webkit-transform: matrix(0.99123, 0, 0, 0.99123, 0, 43.86266);
    opacity: 0.56162;
  }
  4% {
    -webkit-transform: matrix(0.99293, 0, 0, 0.99293, 0, 45.05306);
    opacity: 0.64665;
  }
  8% {
    -webkit-transform: matrix(0.99465, 0, 0, 0.99465, 0, 46.25785);
    opacity: 0.7327;
  }
  12% {
    -webkit-transform: matrix(0.99618, 0, 0, 0.99618, 0, 47.32543);
    opacity: 0.80896;
  }
  16% {
    -webkit-transform: matrix(0.99742, 0, 0, 0.99742, 0, 48.19443);
    opacity: 0.87103;
  }
  20% {
    -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.8572);
    opacity: 0.91837;
  }
  24% {
    -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33456);
    opacity: 0.95247;
  }
  28% {
    -webkit-transform: matrix(0.99951, 0, 0, 0.99951, 0, 49.65946);
    opacity: 0.97568;
  }
  32% {
    -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8671);
    opacity: 0.99051;
  }
  36% {
    -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98963);
    opacity: 0.99926;
  }
  40% {
    -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05377);
    opacity: 1.00384;
  }
  44% {
    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08024);
    opacity: 1.00573;
  }
  48% {
    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08419);
    opacity: 1.00601;
  }
  52% {
    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07612);
    opacity: 1.00544;
  }
  56% {
    -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06284);
    opacity: 1.00449;
  }
  60% {
    -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04848);
    opacity: 1.00346;
  }
  64% {
    -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03529);
    opacity: 1.00252;
  }
  68% {
    -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02428);
    opacity: 1.00173;
  }
  72% {
    -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01572);
    opacity: 1.00112;
  }
  76% {
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00944);
    opacity: 1.00067;
  }
  80% {
    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00508);
    opacity: 1.00036;
  }
  84% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223);
    opacity: 1.00016;
  }
  88% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005);
    opacity: 1.00004;
  }
  92% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956);
    opacity: 0.99997;
  }
  96% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99912);
    opacity: 0.99994;
  }
  100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 50);
    opacity: 1;
  }
}
.bbm-modal--stacked-reverse {
  -webkit-animation-duration: 0.43333s;
  -webkit-animation-name: bbm-stacked-reverse;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  -webkit-transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
}

/* destroy a modal */
@-webkit-keyframes bbm-destroy {
  0% {
    -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187);
    opacity: 0.8741;
  }
  4% {
    -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192);
    opacity: 0.70456;
  }
  8% {
    -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078);
    opacity: 0.53297;
  }
  12% {
    -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645);
    opacity: 0.38092;
  }
  16% {
    -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009);
    opacity: 0.25716;
  }
  20% {
    -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933);
    opacity: 0.16276;
  }
  24% {
    -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342);
    opacity: 0.09477;
  }
  28% {
    -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951);
    opacity: 0.0485;
  }
  32% {
    -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325);
    opacity: 0.01893;
  }
  36% {
    -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034);
    opacity: 0.00148;
  }
  40% {
    -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639);
    opacity: -0.00766;
  }
  44% {
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001);
    opacity: -0.01143;
  }
  48% {
    -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606);
    opacity: -0.01199;
  }
  52% {
    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411);
    opacity: -0.01084;
  }
  56% {
    -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736);
    opacity: -0.00895;
  }
  60% {
    -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167);
    opacity: -0.0069;
  }
  64% {
    -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482);
    opacity: -0.00503;
  }
  68% {
    -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579);
    opacity: -0.00346;
  }
  72% {
    -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433);
    opacity: -0.00224;
  }
  76% {
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059);
    opacity: -0.00134;
  }
  80% {
    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494);
    opacity: -0.00072;
  }
  84% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777);
    opacity: -0.00032;
  }
  88% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995);
    opacity: -0.00007;
  }
  92% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044);
    opacity: 0.00006;
  }
  96% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088);
    opacity: 0.00012;
  }
  100% {
    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43);
    opacity: 0;
  }
}
.bbm-modal--destroy {
  -webkit-animation-duration: 0.43333s;
  -webkit-animation-name: bbm-destroy;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: both;
  -webkit-transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .bbm-modal--open, .bbm-modal--stacked, .bbm-modal--stacked-reverse, .bbm-modal--destroy {
    -webkit-animation: none !important;
  }
}
/* BORDERS */
/* TEXT */
body {
  background-color: black;
  font-family: Audiowide;
}

div, section {
  -ms-user-select: none;
      user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  height: inherit;
  box-sizing: border-box;
}

p, span {
  color: white;
  font-family: 'Raleway';
  font-weight: 600;
  margin: 5px;
  cursor: default;
}

.underline {
  text-decoration: underline;
}

.juno {
  background-color: #5A5F66;
  margin: auto;
  width: 1024px;
  border-radius: 8px;
}

h4 {
  color: white;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 25px;
  margin: 0;
}

.midi {
  cursor: pointer;
}

.module-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}

.control {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.module-row {
  text-align: center;
  display: block;
  width: 100%;
}

.module {
  text-align: center;
  height: 300px;
  display: inline-block;
  vertical-align: top;
  margin: 0 -3px;
}
.module.one {
  width: 10%;
}
.module.two {
  width: 15%;
}
.module.three {
  width: 20%;
}
.module.four {
  width: 30%;
}
.module.five {
  width: 35%;
}
.module.six {
  width: 40%;
}
.module.seven {
  width: 50%;
}

.module__header, .module__header--first, .module__header--left-corner, .module__header--last, .module__header--right-corner {
  text-align: center;
  line-height: 30px;
  background: -webkit-linear-gradient(90deg, #8e3011, #BC4016);
  background: linear-gradient(0deg, #8e3011, #BC4016);
  height: 10%;
  margin: 0 3px;
  width: 100%;
}

.module__header--first, .module__header--left-corner {
  background: -webkit-linear-gradient(0deg, #8e3011, #BC4016);
  background: linear-gradient(90deg, #8e3011, #BC4016);
  margin-left: 0;
}

.module__header--left-corner {
  border-top-left-radius: 10px;
}

.module__header--right-corner {
  border-top-right-radius: 10px;
}

.module__header--last, .module__header--right-corner {
  background: -webkit-linear-gradient(180deg, #8e3011, #BC4016);
  background: linear-gradient(270deg, #8e3011, #BC4016);
  margin-right: 0;
}

.module__back {
  height: 88%;
  margin: 2px 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.module__control-group, .module__control-group--left-corner, .module__control-group--right-corner, .module__switch-control-group {
  height: 88%;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
.module__control-group:nth-child(2), .module__control-group--left-corner:nth-child(2), .module__control-group--right-corner:nth-child(2), .module__switch-control-group:nth-child(2) {
  border-left: 2px solid white;
}
.module__control-group:last-child, .module__control-group--left-corner:last-child, .module__control-group--right-corner:last-child, .module__switch-control-group:last-child {
  border-right: 2px solid white;
}

.module__control-group--left-corner {
  border-bottom-left-radius: 10px;
}

.module__control-group--right-corner {
  border-bottom-right-radius: 10px;
}

.module__switch-control-group {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 10%;
      -ms-flex: 0 1 10%;
          flex: 0 1 10%;
  margin-top: 3px;
}

.sub-noise {
  margin-top: 2px;
}
.sub-noise .label-container {
  margin-top: 11px;
  margin-bottom: 2px;
}

.fader-container, .fader-container--slim {
  height: 75%;
  width: 95%;
  margin: auto;
  display: inline-block;
}

.fader-container--slim {
  width: 55%;
}

.fader__scale, .fader__scale--light, .fader__scale--heavy, .fader__scale--hpf {
  height: 100%;
  width: 95%;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}

.fader__scale--light {
  background: -webkit-repeating-linear-gradient(90deg, white, white 1px, transparent 1px, transparent 20px);
  background: repeating-linear-gradient(0deg, white, white 1px, transparent 1px, transparent 20px);
}

.fader__scale--heavy {
  position: absolute;
  left: 2.5%;
  background: -webkit-repeating-linear-gradient(90deg, white, white 3px, transparent 3px, transparent 100px);
  background: repeating-linear-gradient(0deg, white, white 3px, transparent 3px, transparent 100px);
}

.fader__scale--hpf {
  background: -webkit-repeating-linear-gradient(90deg, white, white 2px, transparent 3px, transparent 50px);
  background: repeating-linear-gradient(0deg, white, white 2px, transparent 3px, transparent 50px);
  margin-top: -20px;
  width: 75%;
}
.fader__scale--hpf > .fader__slot {
  margin-top: 50px;
}
.fader__scale--hpf > .fader__slot > .fader__knob {
  -webkit-transition: top 0.1s;
          transition: top 0.1s;
}

.fader {
  margin: auto;
  height: 100%;
  width: 100%;
  position: relative;
}

.fader__slot {
  width: 10px;
  background-color: black;
  height: 89%;
  margin: 10% auto 0 auto;
  border-radius: 8px;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  position: relative;
}

.env .fader__slot {
  margin-top: 10px;
}

.fader__knob {
  position: absolute;
  top: 95%;
  left: -17px;
  background-color: #33353C;
  border-radius: 5px;
  width: 44px;
  height: 22px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  box-shadow: 1px 1px 2px black;
}
.fader__knob:hover {
  box-shadow: 1px 1px 2px black, 0 0 7px white;
}
.fader__knob.dragging {
  border: 1px dashed #CC3300;
  box-shadow: 0 0 7px white;
}

hr {
  width: 100%;
  background-color: #CFCFCF;
  border-radius: 2px;
  font-weight: 200;
  height: 2px;
}

.button, .button--orange, .button--yellow {
  height: 35px;
  width: 55px;
  margin: 10px 3px 3px 3px;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  border-radius: 2px;
  opacity: .8;
}
.button:first-of-type, .button--orange:first-of-type, .button--yellow:first-of-type {
  margin: 80px 3px 3px 3px;
}
.button.pressed, .pressed.button--orange, .pressed.button--yellow {
  opacity: 1;
}
.button:hover, .button--orange:hover, .button--yellow:hover {
  box-shadow: 0 0 7px white;
}

.button--orange {
  background: -webkit-linear-gradient(90deg, #ff7f00, #FF9933);
  background: linear-gradient(0deg, #ff7f00, #FF9933);
}

.button--yellow {
  background: -webkit-linear-gradient(90deg, #ffcf70, #FFE0A3);
  background: linear-gradient(0deg, #ffcf70, #FFE0A3);
}

.button--midi {
  height: 30px;
  padding-top: 5px;
  width: 60px;
  display: inline-block;
  margin: 5px;
  background-color: #800000;
  color: white;
  border-radius: 4px;
  opacity: .7;
}
.button--midi.pressed {
  box-shadow: 0 0 7px white;
  opacity: 1;
}

.midi-select {
  max-width: 200px;
}

.button-container, .knob-container--range, .knob-container--vcf, .knob-container--pwm, .knob-container--vca {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 75%;
}

.button-container--top {
  margin-top: 10px;
  display: inline-block;
}

.switch {
  display: block;
  position: relative;
  border-radius: 10px;
  height: 40px;
  width: 10px;
  background-color: black;
  margin: 15px auto;
}

.switch__knob {
  background-color: white;
  position: absolute;
  border-radius: 4px;
  width: 100%;
  height: 15px;
  -webkit-transition: all .1s;
          transition: all .1s;
}
.switch__knob:hover {
  box-shadow: 0 0 20px #800000;
}
.switch__knob.dragging {
  box-shadow: 0 0 15px #800000;
  border: 1px solid #CC3300;
}

.knob-container--range {
  position: relative;
  margin-top: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  height: 110px;
}
.knob-container--range .switch {
  height: 80px;
  position: relative;
}

.knob-container--vcf, .knob-container--pwm, .knob-container--vca {
  position: relative;
  top: 41px;
  margin: 50px auto 0;
  height: 38%;
  display: inline-block;
}

.knob-container--pwm, .knob-container--vca {
  top: 0;
  margin-top: 3px;
}
.knob-container--pwm > .line, .knob-container--vca > .line {
  margin-top: -3px;
}

.knob-container--vca {
  vertical-align: top;
  top: 40px;
}

.label, .label--line {
  display: inline-block;
  margin: 0 5%;
  font-size: 15px;
  pointer-events: none;
}

.label--wide {
  display: inline-block;
  margin: 0 9.5%;
}

.label--line {
  margin: 0;
}

.wave-label {
  font-size: 15px;
  display: inline-block;
  margin: 5px 0 20px;
}

.label-container {
  display: flex;
  height: 10%;
  margin: 13px auto 0 auto;
  width: 90%;
}
.label-container > span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  margin: 0;
}

.led, .led--lit {
  background-color: #800000;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin: 35px auto;
}

.led--lit {
  background-color: #CC3300;
  box-shadow: 0px 0px 8px #CC3300;
}

.line {
  width: 2px;
  background-color: white;
  margin: auto;
  height: 65px;
}

.range {
  margin-top: 10px;
}

.key-label, .key-label--white, .key-label--black {
  font-size: 20px;
  position: absolute;
  opacity: 0.6;
  bottom: 5%;
  font-family: 'Audiowide', cursive;
  cursor: pointer;
}

.key-label--white {
  color: black;
  left: 30%;
  text-shadow: 1px 1px 1px black;
}

.key-label--black {
  color: white;
  left: 15%;
  text-shadow: 1px 1px 1px white;
}

.keyboard-container {
  list-style: none;
  width: 1020px;
  margin: 0 1.5%;
  position: relative;
}

.white-key, .white-key--playing, .black-key, .black-key--playing {
  position: absolute;
  display: inline-block;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-transition: background-color 0.1s ease-out;
          transition: background-color 0.1s ease-out;
  cursor: pointer;
}

.white-key, .white-key--playing {
  background-color: white;
  height: 100px;
  width: 66px;
  border: 1px solid black;
  z-index: 1;
}

.black-key, .black-key--playing {
  background-color: black;
  height: 60px;
  width: 40px;
  z-index: 2;
}

.white-key--playing {
  background-color: #CC3300;
}

.black-key--playing {
  background-color: #800000;
}

.octave-shift {
  position: absolute;
  top: 0;
  height: 100px;
  width: 16px;
  background-color: #33353C;
  color: #CFCFCF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Audiowide;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  z-index: 1;
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
}
.octave-shift:hover {
  background-color: #CC3300;
  color: white;
}

.octave-shift--down {
  left: -16px;
  border-bottom-left-radius: 8px;
}

.octave-shift--up {
  border-bottom-right-radius: 8px;
}

.octave-shift--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.modal-info {
  list-style: none;
  padding: 0;
  text-align: center;
  margin: 0;
}

.modal-info__icon {
  vertical-align: middle;
  cursor: pointer;
}

.modal-info__item {
  font-size: 20px;
  padding: 10px;
}

.modal-info__item--emphasis {
  font-family: 'Audiowide';
  text-decoration: underline;
}

.header {
  text-align: center;
  margin: 10px;
}

.header__toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.header__divider {
  width: 1px;
  height: 18px;
  background-color: rgba(255, 255, 255, 0.25);
}

.header__title {
  color: #CC3300;
  font-family: Audiowide;
}
.header__title > i {
  vertical-align: middle;
  cursor: pointer;
}

.header__link {
  color: white;
  font-family: Audiowide;
  text-decoration: none;
}
.header__link:hover {
  color: #CC3300;
  text-decoration: underline;
}

.header__patch-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.header__patch-field:hover {
  border-color: #CC3300;
  background-color: rgba(255, 255, 255, 0.1);
}

.header__patch-name {
  cursor: pointer;
}

.header__patch-field-icon {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  cursor: pointer;
}
.header__patch-field-icon:hover {
  color: #CC3300;
}

.header__name-input {
  display: none;
  width: 170px;
  height: 20px;
  vertical-align: middle;
  font-size: 20px;
  padding: 2px;
  margin: 0;
  font-family: Audiowide;
  border: none;
  background: transparent;
  color: #CC3300;
  outline: none;
}

.header__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: Audiowide;
  font-size: 13px;
  color: white;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.header__button i {
  font-size: 13px;
}
.header__button:hover {
  background-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.4);
}

.header__button--accent {
  background-color: #CC3300;
  border-color: #CC3300;
}
.header__button--accent:hover {
  box-shadow: 0 0 10px #CC3300;
}

.click-menu, .click-menu--shown {
  border: 2px solid #800000;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  max-width: 200px;
  background-color: white;
  z-index: 9999;
}
.click-menu ul, .click-menu--shown ul {
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}
.click-menu ul li, .click-menu--shown ul li {
  position: relative;
  float: left;
  display: block;
  padding: 5px 5px 5px 20px;
  margin-bottom: 5px;
  background-color: white;
  cursor: pointer;
  margin: 0;
  width: 100%;
  color: black;
  box-sizing: border-box;
}
.click-menu ul li i, .click-menu--shown ul li i {
  float: right;
  padding-right: 10px;
}
.click-menu ul li ul, .click-menu--shown ul li ul {
  display: none;
  left: 100%;
  top: 0;
}
.click-menu ul li:hover, .click-menu--shown ul li:hover {
  background-color: #99CCFF;
  color: white;
}
.click-menu ul li:hover > ul, .click-menu--shown ul li:hover > ul {
  display: block;
  position: absolute;
}
.click-menu ul li:hover li, .click-menu--shown ul li:hover li {
  float: none;
}

.click-menu--shown {
  display: block;
}

.click-menu__header {
  margin: 5px;
  color: black;
  border-bottom: 1px solid grey;
}