@import url("https://fonts.googleapis.com/css?family=Turret+Road:400,800&display=swap");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  position: relative;
  min-height: 100vh;
  background: #111111;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/bg.jpg") center/cover no-repeat;
  -webkit-filter: grayscale(1) blur(6px) brightness(0.45);
          filter: grayscale(1) blur(6px) brightness(0.45);
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}

.mobile-warning {
  display: none;
  position: relative;
  z-index: 1;
}

.wrapper {
  position: relative;
  z-index: 1;
}

h1 {
  font-family: "Turret Road", cursive;
  color: #7c7c7c;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1rem;
  margin: 0 0 0 50px;
  display: inline-block;
  background: linear-gradient(110deg, #7c7c7c 0%, #7c7c7c 42%, #ffffff 48%, #49ff18 50%, #ffffff 52%, #7c7c7c 58%, #7c7c7c 100%);
  background-size: 230% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: headlineGlowSweep 2.2s linear infinite;
          animation: headlineGlowSweep 2.2s linear infinite;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.35), 0 0 6px rgba(73, 255, 24, 0.45);
}

@-webkit-keyframes headlineGlowSweep {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}

@keyframes headlineGlowSweep {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -130% 0;
  }
}

header {
  margin: 100px auto 0px auto;
  width: 1260px;
  height: 80px;
  background-image: url("http://api.thumbr.it/whitenoise-361x370.png?background=121212ff&noise=292929&density=13&opacity=65");
  background-color: #131313;
  border-radius: 20px 20px 0 0;
}

header .top-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
}

header .top-panel .input {
  margin-left: auto;
  margin-right: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header .top-panel .input .audio-jack {
  height: 10px;
  width: 10px;
  margin: 5px;
  border-radius: 100%;
  background: #000000;
  -webkit-box-shadow: 1px 1px 1px #817272, -1px -1px 1px #817272;
          box-shadow: 1px 1px 1px #817272, -1px -1px 1px #817272;
}

main {
  background: #131313;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1260px;
  margin: auto;
}

main .buttons {
  background: #131313;
  padding: 10px;
  width: 1000px;
  height: 380px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #202020;
  padding: 20px;
  border-radius: 20px;
}

main .buttons .indicators {
  width: 1000px;
}

main .buttons__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

main .buttons__row .volume-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: "Turret Road", cursive;
  font-size: 0.5rem;
  color: #035200;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 80%;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}

main .buttons__row .active {
  color: #49FF18;
  text-shadow: 0 0 5px #FFF, 0 0 5px #49ff18;
}

main .buttons__row .channel-volume {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  margin: 10px 0 0px 0;
  border-radius: 5px;
}

main .buttons__row input[type=range] {
  -webkit-appearance: none;
  width: 60px;
}

main .buttons__row input[type=range]:focus {
  outline: none;
}

main .buttons__row input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  -webkit-box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d, inset 1px 0px 2px 1px rgba(0, 0, 0, 0.733);
          box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d, inset 1px 0px 2px 1px rgba(0, 0, 0, 0.733);
  background: #141414;
}

main .buttons__row input[type=range]::-webkit-slider-thumb {
  -webkit-box-shadow: -2px 0px 0px #202020, inset -1px 0px 1px #ffffff49, inset 1px 0px 4px #1b1b1bcc, -4px 0px 4px 1px #00000094;
          box-shadow: -2px 0px 0px #202020, inset -1px 0px 1px #ffffff49, inset 1px 0px 4px #1b1b1bcc, -4px 0px 4px 1px #00000094;
  border: 1px solid #2e2e2e;
  height: 30px;
  width: 10px;
  border-radius: 1px;
  background: #171817;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

main .buttons__row input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.3px;
  cursor: pointer;
  box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d;
  background: #2d2c2b;
  border-radius: 0px;
  border: 0px solid #262425;
}

main .buttons__row input[type=range]::-moz-range-thumb {
  box-shadow: 1.7px 1.7px 2.9px #171718, 0px 0px 1.7px #232325;
  border: 3.1px solid #414243;
  height: 50px;
  width: 28px;
  border-radius: 2px;
  background: #171817;
  cursor: pointer;
}

main .buttons__row input[type=range]::-ms-track {
  width: 100%;
  height: 12.3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

main .buttons__row input[type=range]::-ms-fill-lower {
  background: #060606;
  border: 0px solid #262425;
  border-radius: 0px;
  box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d;
}

main .buttons__row input[type=range]::-ms-fill-upper {
  background: #2d2c2b;
  border: 0px solid #262425;
  border-radius: 0px;
  box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d;
}

main .buttons__row input[type=range]::-ms-thumb {
  box-shadow: 1.7px 1.7px 2.9px #171718, 0px 0px 1.7px #232325;
  border: 3.1px solid #414243;
  height: 50px;
  width: 28px;
  border-radius: 2px;
  background: #171817;
  cursor: pointer;
  height: 12.3px;
}

main .buttons__row input[type=range]:focus::-ms-fill-lower {
  background: #2d2c2b;
}

main .buttons__row input[type=range]:focus::-ms-fill-upper {
  background: #545250;
}

main .buttons__btn {
  height: 46px;
  width: 46px;
  background: #414141;
  background: radial-gradient(ellipse at center, #3f3f3f 0%, #2c2c2c 100%);
  margin: 10px 3px;
  border-radius: 5%;
  -webkit-box-shadow: 0px 6px 0px #363636, inset 0px 0px 1px #ffffff80, inset 0px 1px 0px #ffdede2d,  0px 10px 6px 3px #000000b4;
          box-shadow: 0px 6px 0px #363636, inset 0px 0px 1px #ffffff80, inset 0px 1px 0px #ffdede2d,  0px 10px 6px 3px #000000b4;
  -webkit-transition: 100ms ease;
  transition: 100ms ease;
}

main .buttons__btn:nth-child(4n) {
  margin-right: 10px;
}

main .buttons__btn:hover {
  -webkit-box-shadow: 0px 4px 0px #363636, inset 0px 0px 1px #ffffff80, inset 0px 1px 0px #ffdede2d;
          box-shadow: 0px 4px 0px #363636, inset 0px 0px 1px #ffffff80, inset 0px 1px 0px #ffdede2d;
  -webkit-transform: scale(0.95) translateY(5px);
          transform: scale(0.95) translateY(5px);
  cursor: pointer;
  -webkit-transition: 120ms ease;
  transition: 120ms ease;
}

main .buttons .lit:nth-child(8n+1) {
  -webkit-box-shadow: 0px 6px 0px #20aa33,0px 0px 10px 2px #21ff85d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #b4ffaa;
          box-shadow: 0px 6px 0px #20aa33,0px 0px 10px 2px #21ff85d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #b4ffaa;
  background: radial-gradient(ellipse at center, #a7ffc9 0%, #00ff62 100%);
}

main .buttons .lit:nth-child(8n+2) {
  -webkit-box-shadow: 0px 6px 0px #159ea3,0px 0px 10px 2px #21d3ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #88f1ff;
          box-shadow: 0px 6px 0px #159ea3,0px 0px 10px 2px #21d3ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #88f1ff;
  background: radial-gradient(ellipse at center, #85e3ff 0%, #00c3ff 100%);
}

main .buttons .lit:nth-child(8n+3) {
  -webkit-box-shadow: 0px 6px 0px #2a4ad6,0px 0px 10px 2px #2189ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #9ab3ff;
          box-shadow: 0px 6px 0px #2a4ad6,0px 0px 10px 2px #2189ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #9ab3ff;
  background: radial-gradient(ellipse at center, #65adff 0%, #0077ff 100%);
}

main .buttons .lit:nth-child(8n+4) {
  -webkit-box-shadow: 0px 6px 0px #8e2bc7,0px 0px 10px 2px #c021ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #be78ff;
          box-shadow: 0px 6px 0px #8e2bc7,0px 0px 10px 2px #c021ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #be78ff;
  background: radial-gradient(ellipse at center, #ca70ff 0%, #a200ff 100%);
}

main .buttons .lit:nth-child(8n+5) {
  -webkit-box-shadow: 0px 6px 0px #c4215f,0px 0px 10px 2px #ff216bd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffa1f2;
          box-shadow: 0px 6px 0px #c4215f,0px 0px 10px 2px #ff216bd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffa1f2;
  background: radial-gradient(ellipse at center, #ff6aa8 0%, #ff006a 100%);
}

main .buttons .lit:nth-child(8n+6) {
  -webkit-box-shadow: 0px 6px 0px #a81f1f,0px 0px 10px 2px #ff7676d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ff7676;
          box-shadow: 0px 6px 0px #a81f1f,0px 0px 10px 2px #ff7676d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ff7676;
  background: radial-gradient(ellipse at center, #ff5555 0%, #ff0000 100%);
}

main .buttons .lit:nth-child(8n+7) {
  -webkit-box-shadow: 0px 6px 0px #c05813,0px 0px 10px 2px #ffd16dd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffc671;
          box-shadow: 0px 6px 0px #c05813,0px 0px 10px 2px #ffd16dd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffc671;
  background: radial-gradient(ellipse at center, #ffae43 0%, #ff6600 100%);
}

main .buttons .lit:nth-child(8n+8) {
  -webkit-box-shadow: 0px 6px 0px #b2b429,0px 0px 10px 2px #fbff21d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #fffd70;
          box-shadow: 0px 6px 0px #b2b429,0px 0px 10px 2px #fbff21d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #fffd70;
  background: radial-gradient(ellipse at center, #ffffb1 0%, #fffb00 100%);
}

main .buttons .lit:nth-child(8n+1):hover {
  -webkit-box-shadow: 0px 3px 0px #20aa33,0px 0px 10px 2px #21ff85d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #b4ffaa;
          box-shadow: 0px 3px 0px #20aa33,0px 0px 10px 2px #21ff85d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #b4ffaa;
}

main .buttons .lit:nth-child(8n+2):hover {
  -webkit-box-shadow: 0px 3px 0px #159ea3,0px 0px 10px 2px #21d3ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #88f1ff;
          box-shadow: 0px 3px 0px #159ea3,0px 0px 10px 2px #21d3ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #88f1ff;
}

main .buttons .lit:nth-child(8n+3):hover {
  -webkit-box-shadow: 0px 3px 0px #2a4ad6,0px 0px 10px 2px #2189ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #9ab3ff;
          box-shadow: 0px 3px 0px #2a4ad6,0px 0px 10px 2px #2189ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #9ab3ff;
}

main .buttons .lit:nth-child(8n+4):hover {
  -webkit-box-shadow: 0px 3px 0px #8e2bc7,0px 0px 10px 2px #c021ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #be78ff;
          box-shadow: 0px 3px 0px #8e2bc7,0px 0px 10px 2px #c021ffd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #be78ff;
}

main .buttons .lit:nth-child(8n+5):hover {
  -webkit-box-shadow: 0px 3px 0px #c4215f,0px 0px 10px 2px #ff216bd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffa1f2;
          box-shadow: 0px 3px 0px #c4215f,0px 0px 10px 2px #ff216bd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffa1f2;
}

main .buttons .lit:nth-child(8n+6):hover {
  -webkit-box-shadow: 0px 3px 0px #a81f1f,0px 0px 10px 2px #ff2121d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ff7676;
          box-shadow: 0px 3px 0px #a81f1f,0px 0px 10px 2px #ff2121d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ff7676;
}

main .buttons .lit:nth-child(8n+7):hover {
  -webkit-box-shadow: 0px 3px 0px #c05813,0px 0px 10px 2px #ffd16dd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffc671;
          box-shadow: 0px 3px 0px #c05813,0px 0px 10px 2px #ffd16dd2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffc671;
}

main .buttons .lit:nth-child(8n+8):hover {
  -webkit-box-shadow: 0px 3px 0px #b2b429,0px 0px 10px 2px #fbff21d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #fffd70;
          box-shadow: 0px 3px 0px #b2b429,0px 0px 10px 2px #fbff21d2,inset 0px 0px 1px #ffffff, inset 0px 1px 0px #fffd70;
}

main .buttons__indicator {
  height: 10px;
  width: 46px;
  background: radial-gradient(ellipse at center, #df9814 0%, #a76c00 100%);
  margin: 3px;
  border-radius: 5%;
  -webkit-box-shadow: 0px 3px 0px #814704, inset 0px 0px 1px #ffffff80, inset 0px 1px 0px #ffdede2d,  0px 5px 5px 2px #000000b4;
          box-shadow: 0px 3px 0px #814704, inset 0px 0px 1px #ffffff80, inset 0px 1px 0px #ffdede2d,  0px 5px 5px 2px #000000b4;
}

main .buttons__indicator:nth-child(4n) {
  margin-right: 10px;
}

main .buttons .indi-lit {
  background: radial-gradient(ellipse at center, #ffbd44 0%, #ffa600 100%);
  -webkit-box-shadow: 0px 3px 0px #c5950f, 0px 0px 10px 2px #ffe70d, inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffe44d;
          box-shadow: 0px 3px 0px #c5950f, 0px 0px 10px 2px #ffe70d, inset 0px 0px 1px #ffffff, inset 0px 1px 0px #ffe44d;
  -webkit-filter: brightness(1.5);
          filter: brightness(1.5);
}

main .right-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #131313;
  background-image: url("http://api.thumbr.it/whitenoise-361x370.png?background=121212ff&noise=292929&density=13&opacity=65");
  height: 380px;
  width: 130px;
}

main .right-panel .volume-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

main .right-panel .volume-container .volume-master {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: "Turret Road", cursive;
  font-size: 0.7rem;
  color: #035200;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 80%;
  -webkit-transform: translate(-20px, -5px);
          transform: translate(-20px, -5px);
}

main .right-panel .volume-container .active {
  color: #49FF18;
  text-shadow: 0 0 5px #FFF, 0 0 5px #49ff18;
}

main .right-panel .volume {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  margin: 40px 0 80px 0;
  border-radius: 5px;
}

main .right-panel input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}

main .right-panel input[type=range]:focus {
  outline: none;
}

main .right-panel input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.3px;
  cursor: pointer;
  -webkit-box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d, inset 2px 0px 3px 1px rgba(0, 0, 0, 0.733);
          box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d, inset 2px 0px 3px 1px rgba(0, 0, 0, 0.733);
  background: #141414;
}

main .right-panel input[type=range]::-webkit-slider-thumb {
  -webkit-box-shadow: -3px 0px 0px #202020, inset -1px 0px 1px #ffffff49, inset 1px 0px 5px #1b1b1bcc, -5px 0px 5px 2px #00000094;
          box-shadow: -3px 0px 0px #202020, inset -1px 0px 1px #ffffff49, inset 1px 0px 5px #1b1b1bcc, -5px 0px 5px 2px #00000094;
  border: 1px solid #2e2e2e;
  height: 50px;
  width: 20px;
  border-radius: 1px;
  background: #171817;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -18.85px;
}

main .right-panel input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.3px;
  cursor: pointer;
  box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d;
  background: #2d2c2b;
  border-radius: 0px;
  border: 0px solid #262425;
}

main .right-panel input[type=range]::-moz-range-thumb {
  box-shadow: 1.7px 1.7px 2.9px #171718, 0px 0px 1.7px #232325;
  border: 3.1px solid #414243;
  height: 50px;
  width: 28px;
  border-radius: 2px;
  background: #171817;
  cursor: pointer;
}

main .right-panel input[type=range]::-ms-track {
  width: 100%;
  height: 12.3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

main .right-panel input[type=range]::-ms-fill-lower {
  background: #060606;
  border: 0px solid #262425;
  border-radius: 0px;
  box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d;
}

main .right-panel input[type=range]::-ms-fill-upper {
  background: #2d2c2b;
  border: 0px solid #262425;
  border-radius: 0px;
  box-shadow: 0.1px 0.1px 1px #000000, 0px 0px 0.1px #0d0d0d;
}

main .right-panel input[type=range]::-ms-thumb {
  box-shadow: 1.7px 1.7px 2.9px #171718, 0px 0px 1.7px #232325;
  border: 3.1px solid #414243;
  height: 50px;
  width: 28px;
  border-radius: 2px;
  background: #171817;
  cursor: pointer;
  height: 12.3px;
}

main .right-panel input[type=range]:focus::-ms-fill-lower {
  background: #2d2c2b;
}

main .right-panel input[type=range]:focus::-ms-fill-upper {
  background: #545250;
}

main .right-panel__btn {
  color: #919191;
  width: 50px;
  height: 50px;
  margin: 10px;
  background: #252525;
  text-align: center;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
          box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Turret Road", cursive;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-weight: 800;
}

main .right-panel__btn .fas {
  font-size: 1rem;
  color: #035200;
  margin: 5px;
}

main .right-panel__btn:hover {
  -webkit-box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
          box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
  -webkit-transform: scale(0.98) translateY(3px);
          transform: scale(0.98) translateY(3px);
  cursor: pointer;
  -webkit-transition: 120ms ease;
  transition: 120ms ease;
}

main .right-panel .lit .fas {
  color: #36ff2f;
  text-shadow: 0 0 5px #FFF, 0 0 5px #49ff18;
}

main .left-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #131313;
  background-image: url("http://api.thumbr.it/whitenoise-361x370.png?background=121212ff&noise=292929&density=13&opacity=65");
  height: 380px;
  width: 130px;
}

main .left-panel__btn {
  color: #919191;
  width: 50px;
  height: 50px;
  margin: 10px;
  background: #252525;
  text-align: center;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
          box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Turret Road", cursive;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-weight: 800;
}

main .left-panel__btn span {
  padding-top: 4px;
}

main .left-panel__btn .dots-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0px 0;
}

main .left-panel__btn .dots-container .dot {
  height: 5px;
  width: 5px;
  background: #035200;
  margin: 1.5px;
  border-radius: 100%;
}

main .left-panel__btn .dots-container .active {
  -webkit-box-shadow: 0 0 5px #FFF, 0 0 5px #49ff18;
          box-shadow: 0 0 5px #FFF, 0 0 5px #49ff18;
  background: radial-gradient(ellipse at center, #79ff54 0%, #49FF18 100%);
}

main .left-panel__btn:hover {
  -webkit-box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
          box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
  -webkit-transform: scale(0.98) translateY(3px);
          transform: scale(0.98) translateY(3px);
  cursor: pointer;
  -webkit-transition: 120ms ease;
  transition: 120ms ease;
}

footer {
  margin: 0px auto 0px auto;
  width: 1260px;
  height: 80px;
  background: #131313;
  -webkit-box-shadow: 0px 20px 0px #0e0e0e;
          box-shadow: 0px 20px 0px #0e0e0e;
  border-radius: 0 0 20px 20px;
  background-image: url("http://api.thumbr.it/whitenoise-361x370.png?background=121212ff&noise=292929&density=13&opacity=65");
}

footer .bottom-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

footer .bottom-panel__bpm-panel {
  background: #161616;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.658);
  border-radius: 10px;
  padding: 10px 20px;
}

footer .bottom-panel__bpm-panel .bpm-btn {
  color: #919191;
  width: 40px;
  height: 20px;
  background: #252525;
  text-align: center;
  border-radius: 2px;
  -webkit-box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
          box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Turret Road", cursive;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-weight: 800;
}

footer .bottom-panel__bpm-panel .bpm-btn:hover {
  -webkit-box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
          box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
  -webkit-transform: scale(0.98) translateY(1px);
          transform: scale(0.98) translateY(1px);
  cursor: pointer;
  -webkit-transition: 120ms ease;
  transition: 120ms ease;
}

footer .bottom-panel__bpm-panel .bpm-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 10px;
}

footer .bottom-panel__bpm-panel .bpm-container .active {
  color: #49FF18;
  text-shadow: 0 0 5px #FFF, 0 0 5px #49ff18;
}

footer .bottom-panel__bpm-panel .bpm {
  font-family: "Turret Road", cursive;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-weight: 800;
  color: #035200;
}

footer .bottom-panel__preset-panel {
  background: #161616;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.658);
  border-radius: 10px;
  padding: 10px 20px;
}

footer .bottom-panel__preset-panel .preset-btn {
  color: #919191;
  width: 40px;
  height: 20px;
  background: #252525;
  text-align: center;
  border-radius: 2px;
  -webkit-box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
          box-shadow: 0px 3px 0px #202020, inset 0px 1px 1px #ffffff1f, inset 0px 1px 0px #585858cc,  0px 5px 5px 2px #000000b4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: "Turret Road", cursive;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-weight: 800;
  margin: 0 5px;
}

footer .bottom-panel__preset-panel .preset-btn:hover {
  -webkit-box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
          box-shadow: 0px 1px 0px #202020, inset 0px 0px 1px #ffffff31, inset 0px 1px 0px #5858582d;
  -webkit-transform: scale(0.98) translateY(1px);
          transform: scale(0.98) translateY(1px);
  cursor: pointer;
  -webkit-transition: 120ms ease;
  transition: 120ms ease;
}

footer .bottom-panel__preset-panel .preset-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 5px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

footer .bottom-panel__preset-panel .preset-container span {
  margin: 1px;
}

footer .bottom-panel__preset-panel .preset-container .active {
  color: #49FF18;
  text-shadow: 0 0 5px #FFF, 0 0 5px #49ff18;
}

footer .bottom-panel__preset-panel .preset {
  font-family: "Turret Road", cursive;
  text-transform: uppercase;
  font-size: 0.5rem;
  font-weight: 800;
  color: #035200;
}

@media (max-width: 900px) {
  .wrapper {
    display: none;
  }
  .mobile-warning {
    display: block;
    margin: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(19, 19, 19, 0.92);
    border: 1px solid rgba(73, 255, 24, 0.45);
    color: #ffffff;
    font-family: "Turret Road", cursive;
    font-size: 0.9rem;
    line-height: 1.4;
    -webkit-box-shadow: 0 0 10px rgba(73, 255, 24, 0.35);
            box-shadow: 0 0 10px rgba(73, 255, 24, 0.35);
    text-align: center;
  }
}
/*# sourceMappingURL=style.css.map */