<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div class="container">
  <div class="avatar-group">
    <div class="avatar st03 hc03">
      <svg xmlns="http://www.w3.org/2000/svg" id="Client-Female-Left" class="avatar-client avatar-female skin-darker" viewBox="0 0 250.5 757.6">
  <style>
    <!-- avatar specific shading styles -->
    #Client-Female-Left .hair-shade{opacity:5.000000e-02;fill:#FFFFFF;}
    #Client-Female-Left .st2{fill:url(#afl-pant-shade_1_);}
    #Client-Female-Left .nose-shade{fill:url(#afl-nose-shade_1_);}
    #Client-Female-Left .eye-left-shade{fill:url(#afl-eye-left-shade_1_);}
    #Client-Female-Left .eye-right-shade{fill:url(#afl-eye-right-shade_1_);}
    #Client-Female-Left .neck-shade{fill:url(#afl-neck-shade_1_);}
    #Client-Female-Left .ear-shade{fill:url(#afl-ear-shade_1_);}
  </style>
  <path id="afl-body-color" d="M209.8 256.5c0-3.7-1.1-7.6-1.8-11.1-1-5-2-10-3.2-14.9-2.5-10.3-5-20.7-7.3-31-1.5-6.8-3-13.6-4.8-20.3-1.8-6.9-3.1-14.2-5.9-20.8-2.8-6.7-5.4-13.5-8.9-19.8-2.6-4.7-5.6-8.9-10.6-11.2-4.4-2-9.6-3.1-13.7-3.8-4.1-.7-9.1-1.3-10.7-1.7-3.8-.8-7.6-2.3-11.2-3.5-2.4-.8-4.9-1.5-6.8-3.2-4.5-4-4.3-11.5-3.9-16.8.5-7 1.4-14 4.1-20.6 2.6-6.6 6.9-12.3 9.3-19 3.9-10.8 4.2-25.7-1.9-35.8C126 12.2 111.6 9.2 100 9.7c-13.6.5-25 7.4-30.3 20.2-1.2 2.9-2.1 6-2.7 9.1-.7 3.9.2 7.7-.2 11.6-.9 8-1.6 15.6.2 23.6.9 3.7 1.8 7.4 3 11 1.1 3.4 2.3 7.7 4.8 10.5 1.6 1.8 4.6 2 5 4.7.3 2.4-.9 5.2-1.3 7.6-.8 4.8.3 13.3-6 14.4-2.4.4-11.9 2.3-13.1 2.7-.8.2-2 .5-2.6.7-5.2 1.6-11.4 1.6-16.8 3.4-5.3 1.8-9 5.5-11.8 10.4-6.6 11.4-8.3 25.6-9.6 38.5-.8 8.2-1.9 16.3-3.2 24.5-1.3 8-2.8 15.9-3.7 24-.6 5.6-.7 11.2-2.2 16.6-2.6 9.1-5.5 18.9-5.5 28.6 0 10.2.3 20.4.5 30.6.1 6.7.2 13.4 1.1 20.1.7 5.1 1.7 10.8 4.5 15.2 2.5 4 6.4 7.5 9.8 10.8 3.7 3.6 7.5 7.1 11.4 10.6.6.5 1.5 1.1 2 1.7.7 1.1.4 3.3.5 4.6.3 4.1.7 8.2 1.1 12.2 1.1 10.4 2.4 21 4.9 31.1 6.3 24.8 12.6 49.7 19.4 74.4 2.8 10.2 5.8 20.5 8 30.9 1.6 7.7 3.2 15.4 4.7 23.1.8 4.3 2 8.7 2.3 13 .2 2.8-.2 5.8-.4 8.6-.3 4.5-.6 9-1 13.5-.4 5-.6 9.9-.6 14.9 0 6.9.3 13.9 0 20.8-.2 4.2-1 8.4-1.5 12.6-1.1 8.9-2.2 17.8-3.1 26.7-.7 6.2-1.7 12.3-.7 18.5.8 4.6 1.9 9.1 3.2 13.6.6 2.2-.8 3.6-2 5.6-1.5 2.6-2.8 6-4.8 8.1-2 2.2-5.2 4-7.7 5.7-1.9 1.3-3.9 2.4-5.9 3.5-4.2 2.2-8.4 4.2-12.7 6.2-3.9 1.9-8.1 3.1-12 4.9-3.1 1.3-12.8 6-4.9 8.6 6 2 13.5 1.4 19.7 1.2 8.1-.2 15.7-2.6 23.6-4.2 5.5-1.1 11.1-2 16.7-2.5 4.7-.4 9.1.8 13.7 1.1 3.4.2 6.9.2 10.4-.1 2.7-.2 4-.2 5.4-2.6 2.7-4.5 2-10 2-15 0-.7-.2-2 .2-2.5.3-.4 2.8-.7 3.1-.8 1.9-.5 3.7-1.1 5.5-1.7-.1 1.3-.2 2.7-.4 4-.2 1.2-.5 2.3-.7 3.5-.4 1.6-.5 4-1.2 5.5-.7 1.4-1.9 2.4-2.4 3.9s-.9 2.9-1.7 4.2c-3 5.4-8.2 8.9-12.7 13-2 1.9-3.6 3.8-5.2 5.9-1.7 2.2-3.7 4-5.4 6.2-2.6 3.3-4.3 8.7.8 10.2 5.4 1.5 11.1 2.1 16.7 2.4 10.9.5 21.8-2.7 29.9-10.3 4.3-4.1 9.9-5.7 15-8.6 2.1-1.2 4.1-2.6 4.6-5.1.5-2.9-.7-6.4-1.5-9.1l-.1-3.5c.6-1.4 1.3-1 3-1.2 1.7-.2 3.4-.4 5-.7 1.9-.4 3.6-.9 5.2-1.8 1.5-.9 3-2 4.4-3.1 1-.8 3.1-2 3.7-3.2.6-1.2-.1-3.8-.2-5.1-.2-2.9-.4-5.8-.6-8.6-.5-6.2-1-12.5-1.8-18.7-2.5-20.9-5.2-41.8-7.1-62.8-1.1-12.4-2.6-24.8-4.6-37.1-1-6.5-2.3-12.8-4.2-19-2.6-8.2-5.6-16.3-7.4-24.7-1.8-8.3-1.8-16.8-1.7-25.2.1-6.5.4-13 1.3-19.5 2-15.3 3.4-30.7 4.9-46 .7-7.1 1.3-14.2 2.3-21.2 1.1-7.7 3.1-15.2 4.6-22.7 3.3-16.2 6-33 3.4-49.4-.1-.5-1.5-7.2-1.8-8.1-.4-1.4 1.8-4 2.6-5.1 2.2-3 4.4-5.9 6.7-8.9 4.2-5.5 8.6-10.9 12.8-16.4 7.7-9.8 14.7-20.6 20.8-31.5 3.4-6.8 2.4-13.4 2.4-20.5zM21.9 325.9c1.4-11.4 2.7-22.9 4.8-34.2 1.4-8.1 4.5-15.7 6.5-23.6 1.8-7.3.9-15 2.1-22.5.5-3.2 1.7-6.2 2.6-9.2 1.6-5.7 2.8-11.6 3.6-17.5.6 1.4 2 3.3 2.2 4.8.1.8-.1 1.7-.2 2.5-.2 3.1-.5 6.3-.4 9.5.5 9.6 1.3 19.2.9 28.8-.5 14.3-3.9 28.3-5.8 42.4-.6 4.7-1.2 9.4-1.6 14.1-.4 3.9.2 8.7-1 12.4-4.3-3.1-8.6-5.8-13.7-7.5zm152.8-47.3c-5.1 10.5-10.3 20.7-17 30.3-2.4-7.4-5.1-14.8-8.2-22-3.3-7.7-6.3-15.8-7.2-24.2-1-8.9 1.6-16.3 5.8-23.9 4-7.2 3.8-16.4 6.2-24.2 2.1-6.7 4.9-13.1 7.4-19.6 1.7 4.6 2 9.5 3.2 14.3 1.6 6.4 4 12.5 6 18.8 3.5 10.9 7.1 22 9.8 33.2 1.4 6-3.3 12.1-6 17.3z" class="skin-color"/>
  <path id="afl-shoe-left-color" d="M42.9 705.5s-13 3.6-17.7 5.6c-4.7 1.9-8.9 4.5-9.9 6.5-1.1 1.9.7 4.9 4.2 5.9 3.5 1.1 13.8 1.6 22.3 1.2 8.6-.4 16.8-3.5 25.8-4.9 9.1-1.4 14.8-2.4 18.5-1.7s4.4.9 9.4 1.1c5.1.2 12.7-.2 13.8-1.2 1-1 3.7-5.1 3.8-8 .2-3 .2-15.2.2-15.2s-8.9 7.2-17.6 10.6c-8.7 3.5-23.9 7.7-38.9 7.2-20.2.2-18.8-4.5-13.9-7.1z" class="shoe-color"/>
  <path id="afl-shoe-right-color" d="M100.3 729.7S89.5 739 88.2 741c-1.2 2-4.7 9.7 2 11.6 6.7 2 20.3 3.5 27.7 2.2 7.4-1.2 16.6-5.7 20.6-9.7s5.7-4.2 10.7-6.7 10.4-4.5 10.2-10.4-4.2-15.6-4.2-15.6 0 6.2-1.5 8.9-7.6 11.7-14.3 14.7c-6.7 3-12.8 4.2-24.8 4.8s-14.3-11.1-14.3-11.1z" class="shoe-color"/>
  <path id="afl-pant-color" d="M176.3 672.7c-1.5-11.4-5.9-44.6-6.4-54.5s-4-40.1-6.9-54c-3-13.9-10.9-29.2-11.4-45.6-.5-16.3 0-25.3 1.5-35.2s5-51.5 6.9-64.9c2-13.4 12-44.2 8.4-68.9-3-20.4-23.6-15.5-23.6-15.5H47l-15.2 8.5c-2 19.8 3.9 57.5 5.9 65.4 2 7.9 12.9 50.5 13.9 54.5s11.9 42.6 12.9 47.6c1 4.9 7.9 37.6 7.9 40.6 0 2.9-2 28.7-2 28.7v28.7s-5.9 46.6-5.9 52.5c0 5.9 4 19.8 4 19.8l-7.9 13.9s6 1.9 22.8 5.9c13.2 3 28.7-1.1 34.9-3.1-.1 1.1-.2 2.1-.4 2.8-1.5 5.9-3.9 13.9-3.9 13.9s11.8 3.5 23.2 4 26.8 0 31.7-2.5c4.9-2.5 10.4-7.9 10.4-7.9s-1.5-23.3-3-34.7z" class="pant-color"/>
  <linearGradient id="afl-pant-shade_1_" x1="20.4703" x2="156.1177" y1="253.8301" y2="244.3447" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 -1 0 758)">
    <stop offset=".3313" stop-opacity="0"/>
    <stop offset=".8409" stop-opacity=".2"/>
  </linearGradient>
  <path id="afl-pant-shade" d="M118.9 660.3c.5-5.5 0-35.7 0-44.6 0-8.9-2-37.2-2.5-44.6-.4-7.5-12.3-26.3-17.3-37.2-5-10.9-2-28.8-2-35.2 0-6.4-7.4-53-8.9-62.4-1.5-9.4-3.5-43.6-9.4-58-4.4-10.4-8.4-43-10.3-59.9L47 313.9s-13.2 8.9-15.2 28.7c-2 19.8 3.9 57.5 5.9 65.4 2 7.9 12.9 50.5 13.9 54.5s11.9 42.6 12.9 47.6c1 4.9 7.9 37.6 7.9 40.6 0 2.9-2 28.7-2 28.7v28.7s-5.9 46.6-5.9 52.5c0 5.9 4 19.8 4 19.8l-7.9 13.9s6 1.9 22.8 5.9c13.2 3 28.7-1.1 34.9-3.1.9-9.1.2-32 .6-36.8z" class="st2"/>
  <path id="afl-shirt-color" d="M195.3 185.8c-.6-4.8-4.5-22.2-6.4-27-1.9-4.8-9.9-21.5-13.8-27.3-3.9-5.8-23.3-9.7-23.3-9.7-1.3-.3-2.7-.2-4.6-.6-1.9-.4-5.8-.3-7 0-1.3.3-3.5 4.5-4.8 7.4-1.3 2.8-2.3 6.1-8.7 20.2-6.4 14.2-18.3 21.6-30.2 26.4-11.9 4.9-27 2-39.9-1.9-12.9-3.9-2.3-32.2 1.9-40.2 4.1-8 12.8-10.6 12.8-10.6-4.5.3-16.8 1.8-16.9 1.8-4.7.5-15.4 2.1-20.4 5.7-6.4 4.7-12.4 15.4-14.6 32.6-2.1 17.1-4.6 34.7-4.6 34.7s13.3 1.9 20 2c-.1 1.5-.1 3-.1 4.5 0 6.1 7.1 20.2 7.1 20.2s-.6 7.8-.6 10c0 2.3 1.3 19.3 1 29.9-.3 10.6-4.1 32.1-5.1 37.9-.9 5.8-3 21.8-2.9 30.5l5.2 3.9s12.8 8.8 12.9 11.6c.7 4.2 2.6 6 27.3 7.3 24.8 1.3 35.1-2.2 38.3-3.5s7.1-4.5 7.1-4.5 10.3-5.8 19.9-2.9c9.7 2.9 22.9 0 25.1-.6 2.3-.7 0 0-.3-2.6s-7-22.2-9.3-29.6c-2.2-7.4-8.3-23.2-9.3-25.4-1-2.2-6.1-13.8-7.1-24.4s3.2-18 5.8-22.2c2.5-4.2 5.4-22.2 6.4-24.8.6-1.4 3.2-8.5 5.4-14.4 1.2 3.4 2 6 2 6s9.5-5.6 13.8-6.8c4.3-1.1 20.4-.4 20.4-.4s-1.9-8.4-2.5-13.2z" class="shirt-color"/>
  <path id="afl-hand-right-color" d="M141.3 328.4s-1.6.4-5.1 1c-3.5.7-10.6 2.6-15.1 5.8s-8 3.2-10.3 4.5c-2.2 1.3-9.3 3.3-10.9 3.9-1.6.6-3.2 2.2-2.6 3.5.7 1.3 2.3 2.6 5.8 2.9 3.5.4 5.1-.9 7.7-1.9 2.6-.9 2.9-1.9 5.5-1.9h3.5v6.1s11 7.1 18.7 8.4c7.7 1.2 14.8-2.6 16.7-3.9 1.9-1.3 4.8-12.2 4.8-12.2s2.3-4.2 2.9-5.5c.3-.6 3.2-4.6 7-9.7l-9.5-24.6c-9.2 14.4-19.1 23.6-19.1 23.6z" class="skin-color"/>
  <path id="afl-hand-left-color" d="M50.5 344.8c-3.2-2.6-8.4-7.1-11.9-9.3-3.5-2.3-6.4-4.8-10-6.7-3.5-1.9-6.7-2.9-6.7-2.9s0-.2.1-.5l-13.7 8.7c.7 1.8 1.5 3.3 2.4 4.6 5.5 7.4 23.9 23.4 23.9 23.4s2.6-2.8 3.8-6c.8-2.1-.4-8.7-.4-8.7s6.1 2.9 7.7 4.5c1.6 1.6 4.5 2.9 5.8 1.6s2.3-6.1-1-8.7z" class="skin-color"/>
  <linearGradient id="afl-nose-shade_1_" x1="79.6417" x2="79.6417" y1="74.1636" y2="69.5083" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-opacity=".4"/>
    <stop offset="1" stop-opacity="0"/>
  </linearGradient>
  <path id="afl-nose-shade" d="M70.4 69.9c.5.9 2.1 3.6 6.2 4.2 4.1.5 10.1-2.5 12.3-4.6l-18.5.4z" class="nose-shade"/>
  <linearGradient id="afl-eye-left-shade_1_" x1="73.7833" x2="73.7833" y1="51.1083" y2="45.2828" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-opacity="0"/>
    <stop offset="1" stop-opacity=".4"/>
  </linearGradient>
  <path id="afl-eye-left-shade" d="M73.9 45.3c-2.1-.2-4.6.8-6.9 2.1 0 1.3-.1 2.5-.2 3.7l13.9-1.4c-.7-1.1-2.6-4.1-6.8-4.4z" class="eye-left-shade"/>
  <linearGradient id="afl-eye-right-shade_1_" x1="94.4417" x2="94.4417" y1="51.5083" y2="45.5636" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-opacity="0"/>
    <stop offset="1" stop-opacity=".4"/>
  </linearGradient>
  <path id="afl-eye-right-shade" d="M85 50.3c.6-1.1 2.5-4.2 6.8-4.7 4.2-.5 10.1 3.3 12.1 5.9L85 50.3z" class="eye-right-shade"/>
  <linearGradient id="afl-neck-shade_1_" x1="77.4711" x2="108.6917" y1="102.4583" y2="102.4583" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-opacity="0"/>
    <stop offset="1"/>
  </linearGradient>
  <path id="afl-neck-shade" d="M78.2 97.7s14.2 3.9 30.5-9.5c0 0-1.7 7.1-10.6 11.3-8.9 4.1-12 6.8-13.9 9.4-1.8 2.6-6.7 7.8-6.7 7.8.9-5.5.8-7.1 1.2-9.4.5-2.9 1.6-6.6 1-7.9-.5-1.4-1.5-1.7-1.5-1.7z" class="neck-shade"/>
  <path id="afl-hair-left-color" d="M70.4 86.1c-.1 5.2-.4 10.5-.3 15.8.1 3.5.9 6.9.7 10.4-.1 4-2 7.8-4.3 11.1-1.5 2.3-4.1 3.8-5.6 6-1.6 2.2-2.6 5.2-3.8 7.6-2.4 4.9-2.8 9.2-3 14.6 1.8-4.9 3.8-8.4 7-12.6 2.1-2.8 3.8-5.8 5.6-8.9-.6 3.1-1.1 5.8-2.1 8.9-.6 1.8-2.2 6.9-.2 8.3-1.4-1 4.3-7.7 4.8-8.7 1.6-3.5.5-6.9 2.9-10.2 3-4.1 4.8-6.9 5.7-11.8.8-4.7 3.1-11.3 2.3-16-.6-3.1-4.4-3.9-6.1-6.3-1.8-2.5-2.8-5.5-3.6-8.2z" class="hair-color"/>
  <radialGradient id="afl-ear-shade_1_" cx="124.8125" cy="57.125" r="12.3023" gradientTransform="matrix(6.123234e-17 -1 0.5 3.061617e-17 96.25 181.9375)" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-opacity=".1"/>
    <stop offset=".8629" stop-opacity="0"/>
  </radialGradient>
  <path id="afl-ear-shade" d="M117 44.1l5 6.6c.3-.1 2.1-.2 2.6 0 1.4.4 2.4 1.6 2.7 4.3s-.5 3.4-1.4 6.8c-.8 3.4-6.2 4.3-6.2 4.3l-6.5 3.4 18.8.6 4.4-26H117z" class="ear-shade"/>
  <path id="afl-hair-right-color" d="M155.3 117.1c-2.4-7.2-4.4-14.6-4.2-22.3.1-5.5.5-10.5-.2-16-1.5-12.4-4.4-24.9-8-36.8-3.3-11-8.1-23.2-16.8-31.2-4.5-4.2-10-7.6-16.3-8.4-6.5-.9-15.9-1.1-22 2.1-3.2 1.7-4.8 5.1-7.6 7.3-2.4 1.8-4.7 2.4-6.5 5-3.8 5.7-5.3 11.2-5.8 18 1.8-5.2 3.9-10.9 8.1-14.8.9 4 3.2 5.4 6.3 7.8 2.2 1.8 4.4 4.1 7 5.1 4 1.5 8.5 2.4 12.7 3.3 3.5.8 6.6 3 9 5.8 4 4.7 4.5 10.5 6.1 16.3.8 2.9 1.9 5.7 3 8.5-.6 3.9-.9 7.9-.8 12.1.1 3.4.4 6.8-.8 10-1.4 3.9-3.2 7.7-4.7 11.5-3 7.6-5.4 15.7-7.4 23.7-1.3 5-.7 9.5.3 14.6.3 1.5 1.2 10.7 1.5 10.7 1.2 0 2.4-6.7 2.8-7.6.4-.9.8-1.7 1.3-2.6-.3 1.5-.5 2.9-.7 4.4-.4 2.8-.1 5.7.3 8.5.3 2.2.2 4.1 2.3 2.3 3.1-2.7 5.2-7.9 7.4-11.3 4-6.5 5.9-20.3 15.7-20.2 2.8 0 5.4.2 8.2-.3 1.5-.3 2.8-.6 4.3-.5 2.7.3 5.2 1.6 7.9 2.3 1.7.4 3.6.5 5.2 1-3.1-1.9-6.5-4.8-7.6-8.3z" class="hair-color"/>
  <path id="afl-hair-lighten" d="M122.7 75c-.6-2.8-1.5-5.5-2.5-8.2-.6 3.9-.9 7.9-.8 12.1.1 3.4.4 6.8-.8 10-1.4 3.9-3.2 7.7-4.7 11.5-3 7.6-5.4 15.7-7.4 23.7-1.3 5-.7 9.5.3 14.6.3 1.5 1.2 10.7 1.5 10.7 1.2 0 2.4-6.7 2.8-7.6.4-.9.8-1.7 1.3-2.6 1.3-7.3 3.3-14.6 6.1-21.4 5.6-13.8 7.2-28.2 4.2-42.8z" class="hair-shade"/>
</svg>
    </div>
  </div>
</div>

// ** VARS **
// skin colors
@skin-lighter: #f6cab5;
@skin-light: #e6ab89;
@skin-medium: #c48f66;
@skin-dark: #ad7247;
@skin-darker: #764f38;

// hair colors
@hair-blonde: #f4bc6d;
@hair-red: #eb732e;
@hair-brown-light: #7e4e2e;
@hair-brown-medium: #482516;
@hair-brown-dark: #231f20;
@hair-gray-dark: #8e8e8e;
@hair-gray-light: #d1d1d1;
@hair-bald: transparent;

.shirt-color{fill:#5AC6CE;}
.suit-color{fill:#939598;}
.button-color{fill:#818285;}
.pant-color{
  animation: shirt-cycle 5s infinite linear;
}
.shoe-color{fill:#000000;}
.blanket-color{fill:#FFFFFF;}
.wheelchair-dary-gray{fill:#424450;}
.wheelchair-light-gray{fill:#C0C6D9;}
.wheelchair-med-gray{fill:#595B67;}
.wheelchair-wheels{fill:#C6C7C1;}
.wheelchair-blue{fill:#1F5074;}

html {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.controls {
  margin-right: 30px;
}
label {
  line-height: 2;
}
.avatar-group {
  display: flex;
  margin-bottom: 20px;
  &:last-of-type {
    margin-bottom: 0;
  }
}
.avatar {
  min-width: 15vw;
  height: auto;
  align-self: center;
  justify-content: center;
  padding: 10px;
  &.wheelchair {
    width: 50%;
    min-width: 80px;
  }
}
.st01 {
  .skin-color{fill:@skin-lighter;}
}
.st02 {
  .skin-color{fill:@skin-light;}
}
.st03 {
  .skin-color{fill:@skin-dark;}
}
.st04 {
  .skin-color{fill:@skin-dark;}
}
.st05 {
  .skin-color{fill:@skin-darker;}
}
.hc01 {
  .hair-color{fill:@hair-blonde;}
}
.hc02 {
  .hair-color{fill:@hair-red;}
}
.hc03 {
  .hair-color{fill:@hair-blonde;}
}
.hc04 {
  .hair-color{fill:@hair-brown-medium;}
}
.hc05 {
  .hair-color{fill:@hair-brown-dark;}
}
.hc06 {
  .hair-color{fill:@hair-gray-dark;}
}
.hc07 {
  .hair-color{fill:@hair-gray-light;}
}
.hc08 {
  .hair-color{fill:@hair-bald;}
}
.skintone-group, .haircolor-group {
  display: flex;
}
.skintone-group {
  margin-bottom: 60px;
}
.skintone, .haircolor {
  height: 30px;
  width: 30px;
  border: 2px solid lightgray;
  display: block;
  margin: 0 6px 0 0;
  &:last-of-type{
    margin-right: 0;
  }
}
.haircolor {
  margin-bottom: 50px;
}
.selected-chip, .selected {
  box-shadow: 0px 0px 0px 2px rgba(0,255,38,1);
  margin-top: 0px;
  border-radius: 5px;
}
.selected-chip:after{
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  margin-left: 7px;
  top: 18px;
  position: relative;
}
.skin-tone-01{
  background-color: @skin-lighter;
}
.skin-tone-02{
  background-color: @skin-light;
}
.skin-tone-03{
  background-color: @skin-medium;
}
.skin-tone-04{
  background-color: @skin-dark;
}
.skin-tone-05{
  background-color: @skin-darker;
}
.hair-color-01{
  background-color: @hair-blonde;
}
.hair-color-02{
  background-color: @hair-red;
}
.hair-color-03{
  background-color: @hair-brown-light;
}
.hair-color-04{
  background-color: @hair-brown-medium;
}
.hair-color-05{
  background-color: @hair-brown-dark;
}
.hair-color-06{
  background-color: @hair-gray-dark;
}
.hair-color-07{
  background-color: @hair-gray-light;
}
.hair-color-08{
  background-color: @hair-bald;
}
.hair-color-08:before {
  position: absolute;
  content: '';
  margin-left: 14px;
  margin-top: -7px;
  height: 45px;
  width: 1px;
  background-color: red;
}
.hair-color-08:before {
  transform: rotate(45deg);
}
.no-blanket {
  .blanket-shade, .blanket-color {
    display: none;
  }
}

@keyframes shirt-cycle {
  0%   { 
    fill:orange;
  }
  5% { 
    fill:MediumSpringGreen;
  }
  15% { 
    fill:lavender;
  }
  25% { 
    fill:CornflowerBlue;
  }
  35% { 
    fill:silver;
  }
  45% { 
    fill:coral;
  }
  55% { 
    fill:teal;
  }
  65% { 
    fill:olive;
  }
  75% { 
    fill:maroon;
  }
  85% { 
    fill:silver;
  }
  95% { 
    fill:orange;
  }
  100% { 
    fill:orange;
  }
}

$(".avatar").click(function() {
  changeSelection($('.selected'), 'selected', $(this))
});

$(".skintone").click(function() {
  changeSelection($('.skintone.selected-chip'), 'selected-chip', $(this))
   updateAvatars($(this), 'st')
});

$(".haircolor").click(function() {
    changeSelection($('.haircolor.selected-chip'), 'selected-chip', $(this))
    updateAvatars($(this), 'hc')
});

function changeSelection ($source, selector, $target) {
  $source.removeClass(selector)
  $target.addClass(selector)
}

function updateAvatars($target, targetClass) {
   var removeClass = $('.avatar').attr('class').split(' ')
     .filter(function (removeMe) {
       return removeMe.indexOf(targetClass) !== -1
     })

   var addClass = $target.attr('class').split(' ')
     .filter(function (addMe) {
       return addMe.indexOf(targetClass) !== -1
     })    
  
   $('.avatar').removeClass(removeClass[0]) 
  
   $('.avatar').addClass(addClass[0]) 
}