<div class="container">
  <h1>Bass Tuner</h1>
  <h3><h3>
  <div class="button-container">
    <button id="E">E</button>
    <button id="A">A</button>
    <button id="D">D</button>
    <button id="G">G</button>
  </div>
  
  <svg id="bass" width="226px" height="839px" viewBox="0 0 226 839" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
      <!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
      <title>BASS</title>
      <desc>Created with Sketch.</desc>
      <defs>
          <linearGradient x1="74.8471975%" y1="99.9999995%" x2="71.8794466%" y2="90.4481677%" id="linearGradient-1">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="107.671247%" y1="187.622263%" x2="77.903825%" y2="79.6418329%" id="linearGradient-2">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
          <radialGradient cx="12.7329396%" cy="15.0842396%" fx="12.7329396%" fy="15.0842396%" r="50.3763545%" id="radialGradient-3">
              <stop stop-color="#7C4F40" offset="0%"></stop>
              <stop stop-color="#92634C" offset="100%"></stop>
          </radialGradient>
          <radialGradient cx="13.7172115%" cy="56.4335946%" fx="13.7172115%" fy="56.4335946%" r="50.0000001%" id="radialGradient-4">
              <stop stop-color="#FFFFFF" offset="0%"></stop>
              <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
          </radialGradient>
          <radialGradient cx="71.4629083%" cy="30.6992143%" fx="71.4629083%" fy="30.6992143%" r="50.0000001%" id="radialGradient-5">
              <stop stop-color="#FFFFFF" offset="0%"></stop>
              <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
          </radialGradient>
          <radialGradient cx="147.156963%" cy="78.4420774%" fx="147.156963%" fy="78.4420774%" r="50.3763545%" id="radialGradient-6">
              <stop stop-color="#7C4F40" offset="0%"></stop>
              <stop stop-color="#92634C" offset="100%"></stop>
          </radialGradient>
          <linearGradient x1="43.8405815%" y1="141.247631%" x2="43.8405815%" y2="33.1699875%" id="linearGradient-7">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8405815%" y1="141.24821%" x2="43.8405815%" y2="33.1705664%" id="linearGradient-8">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8399538%" y1="141.24821%" x2="43.8399538%" y2="33.1705664%" id="linearGradient-9">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.840953%" y1="141.24821%" x2="43.840953%" y2="33.1705664%" id="linearGradient-10">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8403823%" y1="141.24792%" x2="43.8403823%" y2="33.170277%" id="linearGradient-11">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8402561%" y1="141.24792%" x2="43.8402561%" y2="33.170277%" id="linearGradient-12">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8401266%" y1="141.24792%" x2="43.8401266%" y2="33.170277%" id="linearGradient-13">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8397405%" y1="141.24792%" x2="43.8397405%" y2="33.170277%" id="linearGradient-14">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.840688%" y1="141.24792%" x2="43.840688%" y2="33.170277%" id="linearGradient-15">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8401922%" y1="141.24792%" x2="43.8401922%" y2="33.170277%" id="linearGradient-16">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8396441%" y1="141.24792%" x2="43.8396441%" y2="33.170277%" id="linearGradient-17">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8404564%" y1="141.24792%" x2="43.8404564%" y2="33.170277%" id="linearGradient-18">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <linearGradient x1="43.8407553%" y1="141.24792%" x2="43.8407553%" y2="33.170277%" id="linearGradient-19">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#D5D5D5" offset="100%"></stop>
          </linearGradient>
          <radialGradient cx="49.9984507%" cy="50.0005471%" fx="49.9984507%" fy="50.0005471%" r="49.9999975%" id="radialGradient-20">
              <stop stop-color="#000000" offset="0%"></stop>
              <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
          </radialGradient>
      </defs>
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
          <g id="BASS" sketch:type="MSLayerGroup">
              <g id="KNOB1" transform="translate(76.000000, 0.209104)" sketch:type="MSShapeGroup">
                  <path d="M1.745936,5.97231484 C4.016696,1.54310672 6.160836,3.01175317 8.436276,2.12592218 C10.711726,1.24008056 11.348476,0.0366471725 13.723216,0.0556388406 C16.57379,0.0784288424 24.99956,3.08716658 28.48363,5.47612692 C31.96771,7.86508726 29.13527,10.9141916 34.62767,14.3893902 C40.12006,17.8645995 57.09517,24.0008128 61.438,26.3273933 C65.78084,28.6539843 65.68699,29.3471855 60.68466,28.3488941 C55.68233,27.3505813 37.92898,21.1924718 31.42402,20.3375807 C24.91906,19.4827003 25.88588,23.6593671 21.65489,23.2196328 C17.42389,22.7798986 8.867416,19.6917363 6.038016,17.6991645 C3.208626,15.7066034 3.998036,14.3915607 3.003456,12.3368112 C2.008886,10.282051 -0.320324,9.9929627 1.745936,5.97231484 L1.745936,5.97231484 Z" id="path1376" fill="#4A4A4A"></path>
                  <path d="M4.2008,4.728396 C3.38566,5.145146 2.56866,5.819646 1.73205,7.353396 C-0.33421,11.132346 2.01872,11.390906 3.0133,13.322146 C4.00788,15.253376 3.21516,16.480626 6.04455,18.353396 C8.87395,20.226186 17.43854,23.127596 21.66955,23.540896 C25.90054,23.954196 24.9146,20.049906 31.41955,20.853396 C37.92451,21.656896 55.66722,27.446346 60.66955,28.384646 C65.67188,29.322926 65.79363,28.665126 61.4508,26.478396 C60.9075,26.204826 59.0923,25.539636 58.2008,25.165896 C51.0943,23.289046 38.89052,19.529176 33.41955,18.853396 C26.9146,18.049906 27.90054,21.954196 23.66955,21.540896 C19.43854,21.127596 10.87395,18.226186 8.04455,16.353396 C5.21516,14.480626 6.00788,13.253376 5.0133,11.322146 C4.01872,9.390906 1.66579,9.132346 3.73205,5.353396 C3.89115,5.061726 4.04286,4.968316 4.2008,4.728396 L4.2008,4.728396 Z" id="path2690" fill-opacity="0.39215687" fill="#000000"></path>
              </g>
              <g id="KNOB2" transform="translate(68.000000, 31.000000)" sketch:type="MSShapeGroup">
                  <path d="M1.745936,6.55318 C4.016696,2.39023 6.160836,3.77059 8.436276,2.93801 C10.711726,2.10542 11.348476,0.97433 13.723216,0.99218 C16.57379,1.0136 24.99956,3.84147 28.48363,6.08682 C31.96771,8.33217 29.13527,11.19798 34.62767,14.46427 C40.12006,17.73057 57.09517,23.49791 61.438,25.68463 C65.78084,27.87136 65.68699,28.52289 60.68466,27.58461 C55.68233,26.64631 37.92898,20.85839 31.42402,20.05489 C24.91906,19.2514 25.88588,23.17699 21.65489,22.76369 C17.42389,22.35039 8.867416,19.44787 6.038016,17.57508 C3.208626,15.7023 3.998036,14.46631 3.003456,12.53508 C2.008886,10.60384 -0.320324,10.33213 1.745936,6.55318 L1.745936,6.55318 Z" id="path1376" fill="#4A4A4A"></path>
                  <path d="M4.2008,3.9375 C3.38566,4.35425 2.56866,5.02875 1.73205,6.5625 C-0.33421,10.34145 2.01872,10.60001 3.0133,12.53125 C4.00788,14.46248 3.21516,15.68973 6.04455,17.5625 C8.87395,19.43529 17.43854,22.3367 21.66955,22.75 C25.90054,23.1633 24.9146,19.25901 31.41955,20.0625 C37.92451,20.866 55.66722,26.65545 60.66955,27.59375 C65.67188,28.53203 65.79363,27.87423 61.4508,25.6875 C60.9075,25.41393 59.0923,24.74874 58.2008,24.375 C51.0943,22.49815 38.89052,18.73828 33.41955,18.0625 C26.9146,17.25901 27.90054,21.1633 23.66955,20.75 C19.43854,20.3367 10.87395,17.43529 8.04455,15.5625 C5.21516,13.68973 6.00788,12.46248 5.0133,10.53125 C4.01872,8.60001 1.66579,8.34145 3.73205,4.5625 C3.89115,4.27083 4.04286,4.17742 4.2008,3.9375 L4.2008,3.9375 Z" id="path2688" fill-opacity="0.39215687" fill="#000000"></path>
              </g>
              <g id="KNOB3" transform="translate(58.000000, 61.000000)" sketch:type="MSShapeGroup">
                  <path d="M1.745936,6.55318 C4.016696,2.39023 6.160836,3.77059 8.436276,2.93801 C10.711726,2.10542 11.348476,0.97433 13.723216,0.99218 C16.57379,1.0136 24.99956,3.84147 28.48363,6.08682 C31.96771,8.33217 29.13527,11.19798 34.62767,14.46427 C40.12006,17.73057 57.09517,23.49791 61.438,25.68463 C65.78084,27.87136 65.68699,28.52289 60.68466,27.58461 C55.68233,26.64631 37.92898,20.85839 31.42402,20.05489 C24.91906,19.2514 25.88588,23.17699 21.65489,22.76369 C17.42389,22.35039 8.867416,19.44787 6.038016,17.57508 C3.208626,15.7023 3.998036,14.46631 3.003456,12.53508 C2.008886,10.60384 -0.320324,10.33213 1.745936,6.55318 L1.745936,6.55318 Z" id="path1376" fill="#4A4A4A"></path>
                  <path d="M4.200796,3.9375 C3.385656,4.35425 2.568656,5.02875 1.732046,6.5625 C-0.334214,10.34145 2.018716,10.60001 3.013296,12.53125 C4.007876,14.46248 3.215156,15.68973 6.044546,17.5625 C8.87395,19.43529 17.43854,22.3367 21.66955,22.75 C25.90054,23.1633 24.9146,19.25901 31.41955,20.0625 C37.92451,20.866 55.66722,26.65545 60.66955,27.59375 C65.67188,28.53203 65.79363,27.87423 61.4508,25.6875 C60.9075,25.41393 59.0923,24.74874 58.2008,24.375 C51.0943,22.49815 38.89052,18.73828 33.41955,18.0625 C26.9146,17.25901 27.90054,21.1633 23.66955,20.75 C19.43854,20.3367 10.87395,17.43529 8.04455,15.5625 C5.215156,13.68973 6.007876,12.46248 5.013296,10.53125 C4.018716,8.60001 1.665786,8.34145 3.732046,4.5625 C3.891146,4.27083 4.042856,4.17742 4.200796,3.9375 L4.200796,3.9375 Z" id="path2686" fill-opacity="0.39215687" fill="#000000"></path>
              </g>
              <g id="KNOB4" transform="translate(50.000000, 89.000000)" sketch:type="MSShapeGroup">
                  <path d="M1.745936,6.55318 C4.016696,2.39023 6.160836,3.77059 8.436276,2.93801 C10.711726,2.10542 11.348476,0.97433 13.723216,0.99218 C16.57379,1.0136 24.99956,3.84147 28.48363,6.08682 C31.96771,8.33217 29.13527,11.19798 34.62767,14.46427 C40.12006,17.73057 57.09517,23.49791 61.438,25.68463 C65.78084,27.87136 65.68699,28.52289 60.68466,27.58461 C55.68233,26.64631 37.92898,20.85839 31.42402,20.05489 C24.91906,19.2514 25.88588,23.17699 21.65489,22.76369 C17.42389,22.35039 8.867416,19.44787 6.038016,17.57508 C3.208626,15.7023 3.998036,14.46631 3.003456,12.53508 C2.008886,10.60384 -0.320324,10.33213 1.745936,6.55318 L1.745936,6.55318 Z" id="path1376" fill="#4A4A4A"></path>
                  <path d="M4.200796,3.9375 C3.385656,4.35425 2.568656,5.02875 1.732046,6.5625 C-0.334214,10.34145 2.018716,10.60001 3.013296,12.53125 C4.007876,14.46248 3.215156,15.68973 6.044546,17.5625 C8.873946,19.43529 17.43854,22.3367 21.66955,22.75 C25.90054,23.1633 24.9146,19.25901 31.41955,20.0625 C37.92451,20.866 55.66722,26.65545 60.66955,27.59375 C65.67188,28.53203 65.79363,27.87423 61.4508,25.6875 C60.9075,25.41393 59.0923,24.74874 58.2008,24.375 C51.0943,22.49815 38.89052,18.73828 33.41955,18.0625 C26.9146,17.25901 27.90054,21.1633 23.66955,20.75 C19.43854,20.3367 10.873946,17.43529 8.044546,15.5625 C5.215156,13.68973 6.007876,12.46248 5.013296,10.53125 C4.018716,8.60001 1.665786,8.34145 3.732046,4.5625 C3.891146,4.27083 4.042856,4.17742 4.200796,3.9375 L4.200796,3.9375 Z" id="path2672" fill-opacity="0.39215687" fill="#000000"></path>
              </g>
              <path d="M94.64645,838.41044 C5.757626,837.10263 -0.147724,788.04478 0.268226,749.97935 C0.644826,714.21687 35.152986,677.29073 36.309066,637.71662 C37.465156,598.1425 23.137616,562.5033 20.875006,521.40688 C18.606956,480.21169 37.972766,461.03133 53.698036,462.64888 C69.36408,464.26035 48.669176,507.43992 74.51023,533.84152 C100.91091,560.81488 115.65598,513.36181 120.77985,513.89928 C126.79214,514.52995 121.91009,578.18288 148.47015,578.58646 C173.85163,578.97213 182.28451,559.262 182.20492,542.30457 C182.1254,525.3612 215.90134,527.93062 210.36365,571.14929 C204.82596,614.36796 193.48763,620.3933 194.786,648.63109 C195.95243,673.99915 234.28092,720.43089 223.80786,770.21219 C213.80001,817.78214 195.76536,839.89819 94.64645,838.41044 L94.64645,838.41044 Z" id="SIDE" fill="#6D1429" sketch:type="MSShapeGroup"></path>
              <path d="M94.64645,838.41044 C5.757626,837.10263 -0.147724,788.04478 0.268226,749.97935 C0.644826,714.21687 35.152986,677.29073 36.309066,637.71662 C37.465156,598.1425 23.137616,562.5033 20.875006,521.40688 C18.606956,480.21169 37.972766,461.03133 53.698036,462.64888 C69.36408,464.26035 48.669176,507.43992 74.51023,533.84152 C100.91091,560.81488 115.65598,513.36181 120.77985,513.89928 C126.79214,514.52995 121.91009,578.18288 148.47015,578.58646 C173.85163,578.97213 182.28451,559.262 182.20492,542.30457 C182.1254,525.3612 215.90134,527.93062 210.36365,571.14929 C204.82596,614.36796 193.48763,620.3933 194.786,648.63109 C195.95243,673.99915 234.28092,720.43089 223.80786,770.21219 C213.80001,817.78214 195.76536,839.89819 94.64645,838.41044 L94.64645,838.41044 Z" id="path2426" opacity="0.69999999" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup"></path>
              <path d="M48.557876,466.96207 C30.204906,473.7577 24.959616,495.66226 24.925386,513.25246 C24.860616,558.91124 44.798376,602.95556 39.093306,648.83799 C33.417546,683.44788 14.830036,699.71488 13.362916,727.53454 C11.938656,754.54149 68.64699,808.80375 92.81881,834.27196 C121.64879,836.21328 168.62976,833.12099 193.98911,817.52048 C212.87503,803.9962 218.97601,779.70635 221.23111,757.83712 C223.57484,724.10178 205.24127,694.20093 194.17119,663.56139 C185.73285,642.26767 194.68508,619.9756 200.50237,599.30592 C204.75487,584.36575 208.19144,568.49012 206.07181,552.94958 C204.72749,545.59098 198.60031,534.57517 189.79298,537.23226 C183.22755,540.9547 187.47081,549.92249 184.45573,555.87468 C180.51723,572.20967 164.24847,584.41705 147.35697,582.35293 C134.48324,581.63568 128.50332,568.57123 125.4467,557.79151 C122.12745,546.01412 121.68363,533.69552 119.22615,521.73982 C112.15148,532.12327 104.16187,546.04838 89.84823,545.87042 C72.57288,544.20889 62.261746,526.83165 58.375386,511.53227 C54.990106,497.06524 58.023796,481.60552 54.520416,467.37649 C52.705526,466.34483 50.534216,467.13034 48.557876,466.96207 L48.557876,466.96207 Z" id="BODY" fill="#6D1429" sketch:type="MSShapeGroup"></path>
              <path id="bass-body" d="M48.557876,466.96207 C30.204906,473.7577 24.959616,495.66226 24.925386,513.25246 C24.860616,558.91124 44.798376,602.95556 39.093306,648.83799 C33.417546,683.44788 14.015696,698.0862 12.548576,725.90586 C11.124316,752.91281 60.503566,800.66032 92.81881,834.27196 C121.64879,836.21328 168.62976,833.12099 193.98911,817.52048 C212.87503,803.9962 218.97601,779.70635 221.23111,757.83712 C223.57484,724.10178 205.24127,694.20093 194.17119,663.56139 C185.73285,642.26767 194.68508,619.9756 200.50237,599.30592 C204.75487,584.36575 208.19144,568.49012 206.07181,552.94958 C204.72749,545.59098 198.60031,534.57517 189.79298,537.23226 C183.22755,540.9547 187.47081,549.92249 184.45573,555.87468 C180.51723,572.20967 164.24847,584.41705 147.35697,582.35293 C134.48324,581.63568 128.50332,568.57123 125.4467,557.79151 C122.12745,546.01412 121.68363,533.69552 119.22615,521.73982 C112.15148,532.12327 104.16187,546.04838 89.84823,545.87042 C72.57288,544.20889 62.261746,526.83165 58.375386,511.53227 C54.990106,497.06524 58.023796,481.60552 54.520416,467.37649 C52.705526,466.34483 50.534216,467.13034 48.557876,466.96207 L48.557876,466.96207 Z" id="path2492" fill="url(#linearGradient-2)" sketch:type="MSShapeGroup"></path>
              <path d="M83.43405,550.65043 C68.59372,553.05996 80.84691,576.76353 80.03448,608.85973 C79.22901,640.54881 69.27759,654.70704 65.417456,678.31857 C61.717436,700.95075 65.355696,725.72902 83.34616,726.54743 C101.35277,727.36656 153.42973,726.4684 168.03522,728.34466 C182.23926,730.16936 190.33406,742.82906 187.56919,769.5842 C184.34535,800.78041 167.76066,808.19832 172.26718,814.30082 C177.25352,821.05309 212.19784,802.11087 216.30725,759.98829 C220.41107,717.92284 189.54065,681.43196 186.83004,651.798 C184.11942,622.16403 198.3226,599.10447 200.84387,583.01264 C205.28453,562.98169 200.52192,540.55409 193.551,549.52744 C186.97957,557.98654 194.44186,589.39657 146.87682,593.89187 C99.31179,598.38716 99.53112,548.03685 83.43405,550.65043 L83.43405,550.65043 Z" id="PICKGUARD" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
              <path d="M109.73533,161.02257 C109.64785,158.09632 110.97379,152.41174 105.69056,149.65982 C83.87064,138.29436 85.88448,149.32447 100.38072,99.4333 C119.02715,35.258577 121.34164,14.424868 135.80663,11.244233 C151.38484,7.818817 162.97597,37.060457 159.8781,43.78667 C156.65402,50.7869 149.13223,67.24979 152.91064,103.20375 C156.68905,139.15772 158.70267,140.56384 142.36354,150.16039 C137.21416,153.18481 138.06995,158.69236 137.11267,161.96145 L109.73533,161.02257 L109.73533,161.02257 Z" id="HEAD" opacity="0.69999999" fill="#F6A623" sketch:type="MSShapeGroup"></path>
              <path d="M99.40881,598.96252 L110.1325,156.02196 L138.43526,156.94127 L140.92388,599.98409 C141.20922,607.21503 99.28017,606.39455 99.40881,598.96252 L99.40881,598.96252 Z" id="path2271" fill="url(#radialGradient-3)" sketch:type="MSShapeGroup"></path>
              <g id="HUMBUCKER2" transform="translate(91.941868, 686.778490)" sketch:type="MSShapeGroup">
                  <rect id="rect2661" fill-opacity="0.11764706" fill="#000000" transform="translate(16.838155, 11.817273) rotate(0.978859) translate(-16.838155, -11.817273) " x="2.03724808" y="4.33152573" width="29.6018145" height="14.971495" rx="2.7329354"></rect>
                  <rect id="rect2663" fill-opacity="0.3137255" fill="#000000" transform="translate(16.866949, 9.817565) rotate(0.978859) translate(-16.866949, -9.817565) " x="2.06604215" y="2.33181773" width="29.6018145" height="14.971495" rx="2.7329354"></rect>
                  <rect id="rect2665" fill="#424242" transform="translate(15.921422, 8.070663) rotate(0.978859) translate(-15.921422, -8.070663) " x="1.12051443" y="0.584915922" width="29.6018145" height="14.971495" rx="2.7329354"></rect>
              </g>
              <g id="HUMBUCKER1" transform="translate(111.941868, 702.000000)" sketch:type="MSShapeGroup">
                  <rect id="rect2382" fill-opacity="0.11764706" fill="#000000" transform="translate(16.838155, 11.817273) rotate(0.978859) translate(-16.838155, -11.817273) " x="2.03724808" y="4.33152573" width="29.6018145" height="14.971495" rx="2.7329354"></rect>
                  <rect id="rect2380" fill-opacity="0.3137255" fill="#000000" transform="translate(16.866949, 9.817565) rotate(0.978859) translate(-16.866949, -9.817565) " x="2.06604215" y="2.33181773" width="29.6018145" height="14.971495" rx="2.7329354"></rect>
                  <rect id="rect2854" fill="#424242" transform="translate(15.921422, 8.070663) rotate(0.978859) translate(-15.921422, -8.070663) " x="1.12051443" y="0.584915922" width="29.6018145" height="14.971495" rx="2.7329354"></rect>
              </g>
              <path d="M134.593788,710.070487 C134.593788,711.28042 133.612944,712.261264 132.403011,712.261264 C131.193079,712.261264 130.212235,711.28042 130.212235,710.070487 C130.212235,708.860555 131.193079,707.879711 132.403011,707.879711 C133.612944,707.879711 134.593788,708.860555 134.593788,710.070487 L134.593788,710.070487 Z" id="path2698" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
              <path d="M53.700796,462.65625 C37.975526,461.0387 18.620266,480.21108 20.888296,521.40625 C23.150906,562.50267 37.450626,598.14464 36.294546,637.71875 C35.138466,677.29286 0.639886,714.20625 0.263296,749.96875 C-0.152654,788.03418 5.749446,837.09842 94.6383,838.40625 C195.75721,839.894 213.7867,817.78867 223.79455,770.21875 C234.26761,720.43745 195.96097,673.99305 194.79455,648.625 C193.49618,620.38721 204.81937,614.37492 210.35705,571.15625 C215.89474,527.93758 182.12125,525.36913 182.2008,542.3125 C182.28039,559.26993 173.86353,578.97939 148.48205,578.59375 C121.92199,578.19017 126.80685,514.53691 120.79455,513.90625 C115.67068,513.36878 100.91396,560.81714 74.5133,533.84375 C48.672246,507.44215 69.36683,464.26774 53.700796,462.65625 L53.700796,462.65625 Z M51.607046,466.84375 C52.623776,466.79737 53.605836,466.85918 54.513296,467.375 C58.016676,481.60403 55.003046,497.0642 58.388296,511.53125 C62.274656,526.83063 72.58173,544.21347 89.85705,545.875 C104.17069,546.05296 112.1574,532.13346 119.23205,521.75 C121.68953,533.7057 122.13154,546.00387 125.4508,557.78125 C128.50742,568.56097 134.4833,581.62652 147.35705,582.34375 C164.24855,584.40787 180.51229,572.20998 184.4508,555.875 C187.46588,549.92281 183.22914,540.94121 189.79455,537.21875 C198.60188,534.56166 204.73146,545.5789 206.0758,552.9375 C208.19543,568.47804 204.7658,584.37234 200.5133,599.3125 C194.69601,619.98218 185.7312,642.26877 194.16955,663.5625 C205.23963,694.20204 223.57576,724.10843 221.23205,757.84375 C218.97695,779.71298 212.86795,804.00694 193.98205,817.53125 C168.6227,833.13176 137.65581,836.22256 108.8258,834.28125 C81.39661,809.62738 7.870306,769.19446 9.294546,742.1875 C10.761666,714.36784 33.431276,683.45362 39.107046,648.84375 C44.812116,602.96132 24.854756,558.9088 24.919546,513.25 C24.953776,495.6598 30.191596,473.76435 48.544546,466.96875 C49.532716,467.05288 50.590316,466.89013 51.607046,466.84375 L51.607046,466.84375 Z" id="path2453" fill-opacity="0.6" fill="url(#radialGradient-4)" sketch:type="MSShapeGroup"></path>
              <path d="M124.593737,710.070487 C124.593737,711.28042 123.612894,712.261264 122.402961,712.261264 C121.193029,712.261264 120.212185,711.28042 120.212185,710.070487 C120.212185,708.860555 121.193029,707.879711 122.402961,707.879711 C123.612894,707.879711 124.593737,708.860555 124.593737,710.070487 L124.593737,710.070487 Z" id="path2696" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
              <path d="M53.700796,462.65625 C37.975526,461.0387 18.620266,480.21108 20.888296,521.40625 C23.150906,562.50267 37.450626,598.14464 36.294546,637.71875 C35.138466,677.29286 0.639886,714.20625 0.263296,749.96875 C-0.152654,788.03418 5.749446,837.09842 94.6383,838.40625 C195.75721,839.894 213.7867,817.78867 223.79455,770.21875 C234.26761,720.43745 195.96097,673.99305 194.79455,648.625 C193.49618,620.38721 204.81937,614.37492 210.35705,571.15625 C215.89474,527.93758 182.12125,525.36913 182.2008,542.3125 C182.28039,559.26993 173.86353,578.97939 148.48205,578.59375 C121.92199,578.19017 126.80685,514.53691 120.79455,513.90625 C115.67068,513.36878 100.91396,560.81714 74.5133,533.84375 C48.672246,507.44215 69.36683,464.26774 53.700796,462.65625 L53.700796,462.65625 Z M51.607046,466.84375 C52.623776,466.79737 53.605836,466.85918 54.513296,467.375 C58.016676,481.60403 55.003046,497.0642 58.388296,511.53125 C62.274656,526.83063 72.58173,544.21347 89.85705,545.875 C104.17069,546.05296 112.1574,532.13346 119.23205,521.75 C121.68953,533.7057 122.13154,546.00387 125.4508,557.78125 C128.50742,568.56097 134.4833,581.62652 147.35705,582.34375 C164.24855,584.40787 180.51229,572.20998 184.4508,555.875 C187.46588,549.92281 183.22914,540.94121 189.79455,537.21875 C198.60188,534.56166 204.73146,545.5789 206.0758,552.9375 C208.19543,568.47804 204.7658,584.37234 200.5133,599.3125 C194.69601,619.98218 185.7312,642.26877 194.16955,663.5625 C205.23963,694.20204 223.57576,724.10843 221.23205,757.84375 C218.97695,779.71298 212.86795,804.00694 193.98205,817.53125 C168.6227,833.13176 137.65581,836.22256 108.8258,834.28125 C81.39661,809.62738 7.870306,769.19446 9.294546,742.1875 C10.761666,714.36784 33.431276,683.45362 39.107046,648.84375 C44.812116,602.96132 24.854756,558.9088 24.919546,513.25 C24.953776,495.6598 30.191596,473.76435 48.544546,466.96875 C49.532716,467.05288 50.590316,466.89013 51.607046,466.84375 L51.607046,466.84375 Z" id="path2460" opacity="0.80000001" fill-opacity="0.3" fill="url(#radialGradient-5)" sketch:type="MSShapeGroup"></path>
              <path d="M53.700796,462.65625 C37.975526,461.0387 18.620266,480.21108 20.888296,521.40625 C23.150906,562.50267 37.450626,598.14464 36.294546,637.71875 C35.138466,677.29286 0.639886,714.20625 0.263296,749.96875 C-0.152654,788.03418 5.749446,837.09842 94.6383,838.40625 C195.75721,839.894 213.7867,817.78867 223.79455,770.21875 C234.26761,720.43745 195.96097,673.99305 194.79455,648.625 C193.49618,620.38721 204.81937,614.37492 210.35705,571.15625 C215.89474,527.93758 182.12125,525.36913 182.2008,542.3125 C182.28039,559.26993 173.86353,578.97939 148.48205,578.59375 C121.92199,578.19017 126.80685,514.53691 120.79455,513.90625 C115.67068,513.36878 100.91396,560.81714 74.5133,533.84375 C48.672246,507.44215 69.36683,464.26774 53.700796,462.65625 L53.700796,462.65625 Z M51.607046,466.84375 C52.623776,466.79737 53.605836,466.85918 54.513296,467.375 C58.016676,481.60403 55.003046,497.0642 58.388296,511.53125 C62.274656,526.83063 72.58173,544.21347 89.85705,545.875 C104.17069,546.05296 112.1574,532.13346 119.23205,521.75 C121.68953,533.7057 122.13154,546.00387 125.4508,557.78125 C128.50742,568.56097 134.4833,581.62652 147.35705,582.34375 C164.24855,584.40787 180.51229,572.20998 184.4508,555.875 C187.46588,549.92281 183.22914,540.94121 189.79455,537.21875 C198.60188,534.56166 204.73146,545.5789 206.0758,552.9375 C208.19543,568.47804 204.7658,584.37234 200.5133,599.3125 C194.69601,619.98218 185.7312,642.26877 194.16955,663.5625 C205.23963,694.20204 223.57576,724.10843 221.23205,757.84375 C218.97695,779.71298 212.86795,804.00694 193.98205,817.53125 C168.6227,833.13176 137.65581,836.22256 108.8258,834.28125 C81.39661,809.62738 7.870306,769.19446 9.294546,742.1875 C10.761666,714.36784 33.431276,683.45362 39.107046,648.84375 C44.812116,602.96132 24.854756,558.9088 24.919546,513.25 C24.953776,495.6598 30.191596,473.76435 48.544546,466.96875 C49.532716,467.05288 50.590316,466.89013 51.607046,466.84375 L51.607046,466.84375 Z" id="path2470" opacity="0.49999997" sketch:type="MSShapeGroup"></path>
              <path d="M105.408138,694.645387 C105.408138,695.85532 104.427294,696.836164 103.217361,696.836164 C102.007429,696.836164 101.026585,695.85532 101.026585,694.645387 C101.026585,693.435455 102.007429,692.454611 103.217361,692.454611 C104.427294,692.454611 105.408138,693.435455 105.408138,694.645387 L105.408138,694.645387 Z" id="path2692" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
              <path d="M53.700796,462.65625 C37.975526,461.0387 18.620266,480.21108 20.888296,521.40625 C23.150906,562.50267 37.450626,598.14464 36.294546,637.71875 C35.138466,677.29286 0.639886,714.20625 0.263296,749.96875 C-0.152654,788.03418 5.749446,837.09842 94.6383,838.40625 C195.75721,839.894 213.7867,817.78867 223.79455,770.21875 C234.26761,720.43745 195.96097,673.99305 194.79455,648.625 C193.49618,620.38721 204.81937,614.37492 210.35705,571.15625 C215.89474,527.93758 182.12125,525.36913 182.2008,542.3125 C182.28039,559.26993 173.86353,578.97939 148.48205,578.59375 C121.92199,578.19017 126.80685,514.53691 120.79455,513.90625 C115.67068,513.36878 100.91396,560.81714 74.5133,533.84375 C48.672246,507.44215 69.36683,464.26774 53.700796,462.65625 L53.700796,462.65625 Z M51.607046,466.84375 C52.623776,466.79737 53.605836,466.85918 54.513296,467.375 C58.016676,481.60403 55.003046,497.0642 58.388296,511.53125 C62.274656,526.83063 72.58173,544.21347 89.85705,545.875 C104.17069,546.05296 112.1574,532.13346 119.23205,521.75 C121.68953,533.7057 122.13154,546.00387 125.4508,557.78125 C128.50742,568.56097 134.4833,581.62652 147.35705,582.34375 C164.24855,584.40787 180.51229,572.20998 184.4508,555.875 C187.46588,549.92281 183.22914,540.94121 189.79455,537.21875 C198.60188,534.56166 204.73146,545.5789 206.0758,552.9375 C208.19543,568.47804 204.7658,584.37234 200.5133,599.3125 C194.69601,619.98218 185.7312,642.26877 194.16955,663.5625 C205.23963,694.20204 223.57576,724.10843 221.23205,757.84375 C218.97695,779.71298 212.86795,804.00694 193.98205,817.53125 C168.6227,833.13176 137.65581,836.22256 108.8258,834.28125 C81.39661,809.62738 7.870306,769.19446 9.294546,742.1875 C10.761666,714.36784 33.431276,683.45362 39.107046,648.84375 C44.812116,602.96132 24.854756,558.9088 24.919546,513.25 C24.953776,495.6598 30.191596,473.76435 48.544546,466.96875 C49.532716,467.05288 50.590316,466.89013 51.607046,466.84375 L51.607046,466.84375 Z" id="path2480" opacity="0.80000001" sketch:type="MSShapeGroup"></path>
              <path d="M99.40881,598.96252 L110.1325,156.02196 L138.43526,156.94127 L140.92388,599.98409 C141.20922,607.21503 99.28017,606.39455 99.40881,598.96252 L99.40881,598.96252 Z" id="path2544" opacity="0.69999999" fill="url(#radialGradient-6)" sketch:type="MSShapeGroup"></path>
              <g id="FRETS" transform="translate(99.000000, 155.000000)" sketch:type="MSShapeGroup">
                  <rect id="rect2556" fill="url(#linearGradient-7)" x="10.83241" y="0.40639" width="28.791338" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2566" fill="url(#linearGradient-8)" x="10.83241" y="40.40637" width="28.791338" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2570" fill="url(#linearGradient-9)" x="9.61089" y="76.40637" width="30.012852" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2574" fill="url(#linearGradient-10)" x="8.79655" y="110.40637" width="30.827192" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2578" fill="url(#linearGradient-11)" x="7.98222" y="138.40637" width="32.048706" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2582" fill="url(#linearGradient-12)" x="7.57506" y="166.40637" width="32.455875" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2586" fill="url(#linearGradient-13)" x="6.7607" y="192.40637" width="33.270218" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2590" fill="url(#linearGradient-14)" x="6.35353" y="214.40637" width="34.08456" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2594" fill="url(#linearGradient-15)" x="5.94637" y="236.40637" width="34.491734" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2598" fill="url(#linearGradient-16)" x="4.72484" y="260.40637" width="35.713242" height="3.4549606" rx="2.3033066"></rect>
                  <rect id="rect2602" fill="url(#linearGradient-13)" x="4.31767" y="282.40637" width="36.527588" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2606" fill="url(#linearGradient-13)" x="4.31767" y="302.40637" width="36.527584" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2610" fill="url(#linearGradient-17)" x="3.50334" y="322.40637" width="37.341927" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2614" fill="url(#linearGradient-18)" x="2.77083" y="340.40637" width="38.29248" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2618" fill="url(#linearGradient-18)" x="2.48293" y="358.40637" width="38.29248" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2622" fill="url(#linearGradient-11)" x="2.19502" y="376.40637" width="39.156219" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2626" fill="url(#linearGradient-18)" x="1.90709" y="392.40637" width="39.156219" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2630" fill="url(#linearGradient-18)" x="1.33128" y="406.40637" width="39.732048" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2634" fill="url(#linearGradient-15)" x="1.33128" y="418.40637" width="40.307873" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2638" fill="url(#linearGradient-19)" x="0.75545" y="430.40637" width="40.883698" height="3.4549606" rx="2.3033068"></rect>
                  <rect id="rect2642" fill="url(#linearGradient-15)" x="0.46754" y="440.40637" width="41.459526" height="3.4549606" rx="2.3033068"></rect>
              </g>
              <rect id="rect2667" stroke-opacity="0.23529412" stroke="#000000" stroke-width="1.25" fill="#9B9B9B" sketch:type="MSShapeGroup" x="91.12029" y="802.80914" width="51.988976" height="25.648729" rx="2.303308"></rect>
              <path d="M114.593737,694.645387 C114.593737,695.85532 113.612894,696.836164 112.402961,696.836164 C111.193029,696.836164 110.212185,695.85532 110.212185,694.645387 C110.212185,693.435455 111.193029,692.454611 112.402961,692.454611 C113.612894,692.454611 114.593737,693.435455 114.593737,694.645387 L114.593737,694.645387 Z" id="path2694" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
              <g id="STRINGS" transform="translate(101.000000, 27.000000)" sketch:type="MSShapeGroup">
                  <path d="M12.36976,88.9445 L0.01491,801.42207" id="1" stroke="#B4B4B4" stroke-width="1.875"></path>
                  <path d="M19.55912,61.45446 L9.78701,800.81224" id="2" stroke="#C8C8C8" stroke-width="1.5"></path>
                  <path d="M27.56282,31.068343 L20.37346,801.18355" id="3" stroke="#DCDCDC" stroke-width="1.25"></path>
                  <path d="M35.22921,0.821937 L30.95991,801.42206" id="4" stroke="#F0F0F0"></path>
              </g>
              <g id="BOLT-4" transform="translate(102.000000, 110.000000)" sketch:type="MSShapeGroup">
                  <path d="M17.6731677,9.47081251 C17.6731677,14.07124 14.3083785,17.8006234 10.1577006,17.8006234 C6.00702281,17.8006234 2.64223361,14.07124 2.64223361,9.47081251 C2.64223361,4.87038498 6.00702281,1.1410016 10.1577006,1.1410016 C14.3083785,1.1410016 17.6731677,4.87038498 17.6731677,9.47081251 L17.6731677,9.47081251 Z" id="SHADOW4" opacity="0.62765956" fill="url(#radialGradient-20)"></path>
                  <path d="M13.6731153,7.47075779 C13.6731153,11.1716859 10.6729203,14.1718809 6.97199215,14.1718809 C3.27106404,14.1718809 0.270869015,11.1716859 0.270869015,7.47075779 C0.270869015,3.76982968 3.27106404,0.769634654 6.97199215,0.769634654 C10.6729203,0.769634654 13.6731153,3.76982968 13.6731153,7.47075779 L13.6731153,7.47075779 Z" id="BOLT4" fill="#4A4A4A"></path>
              </g>
              <g id="BOLT3" transform="translate(110.000000, 81.000000)" sketch:type="MSShapeGroup">
                  <path d="M18.2237587,10.3760125 C18.2237587,14.97644 14.8589695,18.7058234 10.7082916,18.7058234 C6.55761381,18.7058234 3.19282461,14.97644 3.19282461,10.3760125 C3.19282461,5.77558498 6.55761381,2.0462016 10.7082916,2.0462016 C14.8589695,2.0462016 18.2237587,5.77558498 18.2237587,10.3760125 L18.2237587,10.3760125 Z" id="SHADOW3" opacity="0.62765956" fill="url(#radialGradient-20)"></path>
                  <path d="M13.8165353,7.56161779 C13.8165353,11.2625459 10.8163403,14.2627409 7.11541215,14.2627409 C3.41448404,14.2627409 0.414289015,11.2625459 0.414289015,7.56161779 C0.414289015,3.86068968 3.41448404,0.860494654 7.11541215,0.860494654 C10.8163403,0.860494654 13.8165353,3.86068968 13.8165353,7.56161779 L13.8165353,7.56161779 Z" fill="#4A4A4A"></path>
              </g>
              <g id="BOLT2" transform="translate(118.000000, 53.000000)" sketch:type="MSShapeGroup">
                  <path d="M17.5528377,10.2812125 C17.5528377,14.88164 14.1880485,18.6110234 10.0373706,18.6110234 C5.88669281,18.6110234 2.52190361,14.88164 2.52190361,10.2812125 C2.52190361,5.68078498 5.88669281,1.9514016 10.0373706,1.9514016 C14.1880485,1.9514016 17.5528377,5.68078498 17.5528377,10.2812125 L17.5528377,10.2812125 Z" id="SHADOW2" opacity="0.62765956" fill="url(#radialGradient-20)"></path>
                  <path d="M14.3671253,7.05964779 C14.3671253,10.7605759 11.3669303,13.7607709 7.66600215,13.7607709 C3.96507404,13.7607709 0.964879015,10.7605759 0.964879015,7.05964779 C0.964879015,3.35871968 3.96507404,0.358524654 7.66600215,0.358524654 C11.3669303,0.358524654 14.3671253,3.35871968 14.3671253,7.05964779 L14.3671253,7.05964779 Z" fill="#4A4A4A"></path>
              </g>
              <g id="BOLT1" transform="translate(127.000000, 25.000000)" sketch:type="MSShapeGroup">
                  <path d="M17.1034277,9.77924251 C17.1034277,14.37967 13.7386385,18.1090534 9.58796063,18.1090534 C5.43728281,18.1090534 2.07249361,14.37967 2.07249361,9.77924251 C2.07249361,5.17881498 5.43728281,1.4494316 9.58796063,1.4494316 C13.7386385,1.4494316 17.1034277,5.17881498 17.1034277,9.77924251 L17.1034277,9.77924251 Z" id="SHADOW1" opacity="0.62765956" fill="url(#radialGradient-20)"></path>
                  <path d="M13.9177153,7.37201779 C13.9177153,11.0729459 10.9175203,14.0731409 7.21659215,14.0731409 C3.51566404,14.0731409 0.515469015,11.0729459 0.515469015,7.37201779 C0.515469015,3.67108968 3.51566404,0.670894654 7.21659215,0.670894654 C10.9175203,0.670894654 13.9177153,3.67108968 13.9177153,7.37201779 L13.9177153,7.37201779 Z" fill="#4A4A4A"></path>
              </g>
              <g id="TONE" transform="translate(192.000000, 730.000000)" fill="#4A4A4A" sketch:type="MSShapeGroup">
                  <path d="M14.02169,6.81705 C14.0222533,9.03697724 12.8382597,11.0885156 10.9158402,12.1986419 C8.9934206,13.3087682 6.6247394,13.3087682 4.70231984,12.1986419 C2.77990028,11.0885156 1.59590671,9.03697724 1.59647,6.81705 C1.59590671,4.59712276 2.77990028,2.54558435 4.70231984,1.43545809 C6.6247394,0.325331832 8.9934206,0.325331832 10.9158402,1.43545809 C12.8382597,2.54558435 14.0222533,4.59712276 14.02169,6.81705 L14.02169,6.81705 Z" id="TONE2"></path>
                  <path d="M12.44304,45.27265 C12.4436033,47.4925772 11.2596097,49.5441156 9.33719016,50.6542419 C7.4147706,51.7643682 5.0460894,51.7643682 3.12366984,50.6542419 C1.20125028,49.5441156 0.0172567104,47.4925772 0.01782,45.27265 C0.0172567104,43.0527228 1.20125028,41.0011844 3.12366984,39.8910581 C5.0460894,38.7809318 7.4147706,38.7809318 9.33719016,39.8910581 C11.2596097,41.0011844 12.4436033,43.0527228 12.44304,45.27265 L12.44304,45.27265 Z" id="TONE1"></path>
              </g>
          </g>
      </g>
  </svg>
  <svg id="amp" width="321px" height="281px" viewBox="0 0 321 281" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.3.1 (12002) - http://www.bohemiancoding.com/sketch -->
    <title>AMP</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="0.172910515" y="15.0742188" width="320.827089" height="260.717274" rx="15"></rect>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="AMP" sketch:type="MSLayerGroup" transform="translate(0.000000, 5.000000)">
            <ellipse id="Oval-6" stroke="#000000" stroke-width="9" sketch:type="MSShapeGroup" cx="155.5" cy="47.5" rx="68.5" ry="47.5"></ellipse>
            <mask id="mask-2" sketch:name="Mask" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="Mask" fill="#D8D8D8" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
            <rect id="Rectangle-30" fill="#4A4A4A" sketch:type="MSShapeGroup" mask="url(#mask-2)" x="0.172910515" y="15.0742188" width="320.827089" height="41.9257812"></rect>
            <rect id="Rectangle-32" fill="#4A4A4A" sketch:type="MSShapeGroup" mask="url(#mask-2)" x="0.172910515" y="22.3163652" width="14.484293" height="259.993059"></rect>
            <rect id="Rectangle-32-Copy" fill="#4A4A4A" sketch:type="MSShapeGroup" mask="url(#mask-2)" x="306.515707" y="31.006941" width="14.484293" height="259.993059"></rect>
            <rect id="Rectangle-30-Copy" fill="#4A4A4A" sketch:type="MSShapeGroup" mask="url(#mask-2)" x="0.172910515" y="244.650262" width="320.827089" height="31.1412299"></rect>
            <rect id="Rectangle-34" stroke="#FFFFFF" stroke-width="2" fill="#000000" sketch:type="MSShapeGroup" mask="url(#mask-2)" x="110" y="27" width="99" height="20"></rect>
            <text id="Fender" sketch:type="MSTextLayer" mask="url(#mask-2)" font-family="AmplitudeCond-Bold" font-size="14" font-style="condensed" font-weight="bold" letter-spacing="1.60000002" fill="#FFFFFF">
                <tspan x="137" y="41">Fender</tspan>
            </text>
            <circle id="Oval-3" fill="#D8D8D8" sketch:type="MSShapeGroup" mask="url(#mask-2)" cx="46.5" cy="26.5" r="4.5"></circle>
            <rect id="ON" fill="#D8D8D8" sketch:type="MSShapeGroup" mask="url(#mask-2)" x="274" y="25" width="14" height="9"></rect>
            <circle id="Oval-4" stroke="#979797" fill="#D8D8D8" sketch:type="MSShapeGroup" mask="url(#mask-2)" cx="26" cy="262" r="5"></circle>
            <circle id="Oval-4-Copy" stroke="#979797" fill="#D8D8D8" sketch:type="MSShapeGroup" mask="url(#mask-2)" cx="298" cy="262" r="5"></circle>
            <rect id="Rectangle-36" fill-opacity="0.4" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-2)" x="-33.7479265" y="58.2659784" width="147.847081" height="307.758678">
                <g transform="translate(40.175614, 212.145317) rotate(-41.000000) translate(-40.175614, -212.145317) "></g>
            </rect>
        </g>
    </g>
</svg>
</div>

@import bourbon
@import neat

$black: black
$white: white
$gray: #9b9b9b

html, body
  font-family: Montserrat
  width: 100%
  margin: 0
  padding: 0
  background: #F3F5C4
.container
  min-width: 800px
  +transform(translateX(-50%) scale(0.9))
  position: fixed
  left: 50%
  +transition(0.2s)
  @media(max-height: 1000px)
    +transform(translateX(-50%) scale(0.7))
    margin-top: -10em
  @media(max-height: 775px)
    +transform(translateX(-50%) scale(0.65))
    margin-top: -11em
  @media(max-height: 650px)
    +transform(translateX(-50%) scale(0.5))
    margin-top: -13em
    button
      padding: 0.7em
  h1
    text-align: center
    font-size: 3em
    color: #333
    letter-spacing: 4px
  h3
    text-align: center
    color: #31729C
    margin-top: -1em
  button
    margin: 0.4em
    background: white
    border: 3px solid #333
    border-radius: 10px
    box-shadow: 0px 6px 0px black
  

    

 


    
  
  



  

  

bassE = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/E.mp3'])
bassA = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/A.mp3'])
bassD = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/D.mp3'])
bassG = new Howl(urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/G.mp3'])

window.bassColor = ["black", "orange", "#04BFBF", "#588F27", "white"]
window.bassNum = 0

tl = new TimelineLite()
changeBass = new TimelineLite()
ampTl = new TimelineLite()

$("#E").click ->
  bassE.play()
  firstMove()
  ampMove()
$("#A").click ->
  bassA.play()
  secondMove()
  ampMove()
$("#D").click ->
  bassD.play()
  thirdMove()
  ampMove()
$("#G").click ->
  bassG.play()
  fourthMove()
  ampMove()

ampMove = ->
  ampTl.to "#amp", 0.4, 
    scale: 1.02
    y: -7
  ampTl.to "#amp", 0.4,
    scale: 1
    y: 0

stringsMove = ->
  tl.to "#1", 0.1, 
    x: 3
    ease: Bounce.easeOut
  tl.to "#1", 0.2, 
    x: -3
  tl.to "#1", 0.1, 
    x: 0
  tl.to "#2", 0.1, 
    x: 3
    ,"-=0.2"
  tl.to "#2", 0.2, 
    x: -3
  tl.to "#2", 0.1, 
    x: 0
  tl.to "#3", 0.1, 
    x: 3
  tl.to "#3", 0.2, 
    x: -3
  tl.to "#3", 0.1, 
    x: 0
  tl.to "#4", 0.1, 
    x: 5
  tl.to "#4", 0.2, 
    x: -5
  tl.to "#4", 0.1, 
    x: 2
  tl.to "#4", 0.1, 
    x: -2
  tl.to "#4", 0.2, 
    x: 0
  tl.timeScale(1.5)
  
firstMove = ->
  tl.to "#1", 0.1, 
    x: 3
    ease: Bounce.easeOut
  tl.to "#1", 0.2, 
    x: -3
  tl.to "#1", 0.1, 
    x: 0

secondMove = ->
  tl.to "#2", 0.1, 
    x: 3
  tl.to "#2", 0.2, 
    x: -3
  tl.to "#2", 0.1, 
    x: 0

thirdMove = ->
  tl.to "#3", 0.1, 
    x: 3
  tl.to "#3", 0.2, 
    x: -3
  tl.to "#3", 0.1, 
    x: 1
  tl.to "#3", 0.2,
    x: 0

fourthMove = ->
  tl.to "#4", 0.2, 
    x: -5
  tl.to "#4", 0.1, 
    x: 2
  tl.to "#4", 0.1, 
    x: -2
  tl.to "#4", 0.2, 
    x: 0
  

tl.to "#Rectangle-30, #Rectangle-32, #Rectangle-30-Copy, #Rectangle-32-Copy", 1, 
  drawSVG: "50% 50%"
  stroke: "white"
  strokeWidth: 50
  fill: "#DE9125"
  ,"bass"
tl.to "#ON", 0.5,
  fill: "red"
  scale: 1.2
stringsMove()


changeColor = ->
  tl.timeScale(2.5)
  stringsMove()
  changeBass.to "#BODY, #SIDE", 2, 
    fill: "#{window.bassColor[window.bassNum]}"

$("#amp").click ->
  ampMove()
$("#bass").click ->
  changeColor()
  if window.bassNum < 4
    window.bassNum += 1
  else
    window.bassNum = 0