Responsive Animated Infographic.

HTML

              
                   <div class="container">
  <svg aria-labelledby="moneytitle" class="money-sm money" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 26.1">
    <title id="moneytitle" lang="en">Monetary Illustration</title>
    <g class="one" fill="#23262C"><path d="M7.9,10.1H5.7V9.4h2.2c0.2,0,0.3-0.1,0.3-0.3S8.1,8.8,7.9,8.8H7V8.5c0-0.2-0.1-0.3-0.3-0.3 c-0.2,0-0.3,0.1-0.3,0.3v0.3H5.4C5.2,8.8,5.1,9,5.1,9.1v1.2c0,0.2,0.1,0.3,0.3,0.3h2.2v0.6H5.4c-0.2,0-0.3,0.1-0.3,0.3 c0,0.2,0.1,0.3,0.3,0.3h0.9v0.3c0,0.2,0.1,0.3,0.3,0.3c0.2,0,0.3-0.1,0.3-0.3v-0.3h0.9c0.2,0,0.3-0.1,0.3-0.3v-1.2 C8.2,10.2,8.1,10.1,7.9,10.1z"/><path d="M10.5,8.3c-0.4-0.7-1-1.4-1.5-1.9C8.7,6,8.4,5.7,8.3,5.4C8.5,5.3,8.6,5.1,8.7,5c0.1-0.1,0.1-0.3,0-0.4 c-0.1-0.1-0.3-0.1-0.4,0c0.1-0.4,0.4-0.9,1-1.4c0.1-0.1,0.2-0.3,0.1-0.4C9.4,2.8,9,2,8.2,2C7.7,2,7.5,2.3,7.5,2.5 C7.4,2.6,7.4,2.6,7.3,2.6C7,2.6,6.8,2.5,6.5,2.3C6.1,2.2,5.8,2,5.4,2h0C4.7,2,4,2.6,4,2.7C3.9,2.8,3.9,2.9,3.9,3 C3.9,3,3.9,3.1,4,3.2C4.4,3.5,4.8,4,5,4.5c0,0,0,0,0,0c-0.1-0.1-0.3-0.1-0.4,0C4.5,4.7,4.5,4.9,4.6,5C4.7,5.1,4.8,5.3,5,5.4 c-0.1,0.3-0.5,0.6-0.8,1c-0.5,0.5-1,1.1-1.5,1.9C2.3,9.2,2,10.1,2,11c0,1.3,0.5,2.2,1.4,2.7c0.8,0.5,1.8,0.7,3.3,0.7 s2.5-0.2,3.3-0.7c0.9-0.6,1.4-1.5,1.4-2.7C11.3,10.1,11,9.2,10.5,8.3L10.5,8.3z M4.7,2.9c0.2-0.2,0.5-0.3,0.8-0.3h0 c0.2,0,0.5,0.1,0.8,0.3c0.3,0.2,0.7,0.3,1.1,0.3c0.5,0,0.7-0.3,0.7-0.5c0.1-0.1,0.1-0.1,0.2-0.1c0.2,0,0.4,0.1,0.5,0.3 C7.9,3.6,7.6,4.6,7.6,5c-0.2,0.1-0.5,0.1-1,0.1s-0.7,0-1-0.1C5.6,4.6,5.5,3.7,4.7,2.9L4.7,2.9z M6.6,13.8c-2.8,0-4-0.8-4-2.8 c0-1.9,1.2-3.2,2.1-4.2C5.1,6.4,5.5,6,5.6,5.6c0.3,0.1,0.6,0.1,1,0.1s0.8,0,1-0.1C7.8,6,8.2,6.4,8.6,6.8c0.9,1,2.1,2.3,2.1,4.2 C10.7,13,9.5,13.8,6.6,13.8L6.6,13.8z"/></g><g class="two" fill="#23262C"><path d="M21.2,10.1h-2.2V9.4h2.2c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3h-0.9V8.5c0-0.2-0.1-0.3-0.3-0.3 c-0.2,0-0.3,0.1-0.3,0.3v0.3h-0.9c-0.2,0-0.3,0.1-0.3,0.3v1.2c0,0.2,0.1,0.3,0.3,0.3h2.2v0.6h-2.2c-0.2,0-0.3,0.1-0.3,0.3 c0,0.2,0.1,0.3,0.3,0.3h0.9v0.3c0,0.2,0.1,0.3,0.3,0.3c0.2,0,0.3-0.1,0.3-0.3v-0.3h0.9c0.2,0,0.3-0.1,0.3-0.3v-1.2 C21.5,10.2,21.4,10.1,21.2,10.1z"/><path d="M23.9,8.3c-0.4-0.7-1-1.4-1.5-1.9c-0.3-0.4-0.7-0.7-0.8-1c0.2-0.1,0.3-0.3,0.5-0.4c0.1-0.1,0.1-0.3,0-0.4 c-0.1-0.1-0.3-0.1-0.4,0c0.1-0.4,0.4-0.9,1-1.4c0.1-0.1,0.2-0.3,0.1-0.4c0,0-0.4-0.8-1.2-0.8c-0.5,0-0.7,0.3-0.7,0.5 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.2,0-0.5-0.1-0.8-0.3C19.5,2.2,19.1,2,18.8,2h0c-0.7,0-1.4,0.6-1.5,0.7c-0.1,0.1-0.1,0.2-0.1,0.2 s0.1,0.2,0.1,0.2c0.5,0.3,0.8,0.8,1,1.3c0,0,0,0,0,0c-0.1-0.1-0.3-0.1-0.4,0c-0.1,0.1-0.1,0.3,0,0.4c0.1,0.1,0.3,0.3,0.5,0.4 c-0.1,0.3-0.5,0.6-0.8,1c-0.5,0.5-1,1.1-1.5,1.9c-0.5,0.9-0.8,1.8-0.8,2.7c0,1.3,0.5,2.2,1.4,2.7c0.8,0.5,1.8,0.7,3.3,0.7 c1.5,0,2.5-0.2,3.3-0.7c0.9-0.6,1.4-1.5,1.4-2.7C24.6,10.1,24.4,9.2,23.9,8.3L23.9,8.3z M18,2.9c0.2-0.2,0.5-0.3,0.8-0.3h0 c0.2,0,0.5,0.1,0.8,0.3c0.3,0.2,0.7,0.3,1.1,0.3c0.5,0,0.7-0.3,0.7-0.5c0.1-0.1,0.1-0.1,0.2-0.1c0.2,0,0.4,0.1,0.5,0.3 C21.2,3.6,21,4.6,20.9,5c-0.2,0.1-0.5,0.1-1,0.1c-0.4,0-0.7,0-1-0.1C19,4.6,18.8,3.7,18,2.9L18,2.9z M20,13.8c-2.8,0-4-0.8-4-2.8 c0-1.9,1.2-3.2,2.1-4.2C18.5,6.4,18.8,6,19,5.6c0.3,0.1,0.6,0.1,1,0.1c0.4,0,0.8,0,1-0.1c0.2,0.4,0.5,0.7,0.9,1.2 c0.9,1,2.1,2.3,2.1,4.2C24,13,22.8,13.8,20,13.8L20,13.8z"/></g><g class="three" fill="#23262C"><path d="M34.7,10.1h-2.2V9.4h2.2c0.2,0,0.3-0.1,0.3-0.3c0-0.2-0.1-0.3-0.3-0.3h-0.9V8.5c0-0.2-0.1-0.3-0.3-0.3 s-0.3,0.1-0.3,0.3v0.3h-0.9c-0.2,0-0.3,0.1-0.3,0.3v1.2c0,0.2,0.1,0.3,0.3,0.3h2.2v0.6h-2.2c-0.2,0-0.3,0.1-0.3,0.3 s0.1,0.3,0.3,0.3h0.9v0.3c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3v-0.3h0.9c0.2,0,0.3-0.1,0.3-0.3v-1.2C35,10.2,34.9,10.1,34.7,10.1 z"/><path d="M37.3,8.3c-0.4-0.7-1-1.4-1.5-1.9c-0.3-0.4-0.7-0.7-0.8-1c0.2-0.1,0.3-0.3,0.5-0.4c0.1-0.1,0.1-0.3,0-0.4 c-0.1-0.1-0.3-0.1-0.4,0c0.1-0.4,0.4-0.9,1-1.4c0.1-0.1,0.2-0.3,0.1-0.4c0,0-0.4-0.8-1.2-0.8c-0.5,0-0.7,0.3-0.7,0.5 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.2,0-0.5-0.1-0.8-0.3C33,2.2,32.6,2,32.3,2h0c-0.7,0-1.4,0.6-1.5,0.7c-0.1,0.1-0.1,0.2-0.1,0.2 c0,0.1,0.1,0.2,0.1,0.2c0.5,0.3,0.8,0.8,1,1.3c0,0,0,0,0,0c-0.1-0.1-0.3-0.1-0.4,0c-0.1,0.1-0.1,0.3,0,0.4c0.1,0.1,0.3,0.3,0.5,0.4 c-0.1,0.3-0.5,0.6-0.8,1c-0.5,0.5-1,1.1-1.5,1.9c-0.5,0.9-0.8,1.8-0.8,2.7c0,1.3,0.5,2.2,1.4,2.7c0.8,0.5,1.8,0.7,3.3,0.7 c1.5,0,2.5-0.2,3.3-0.7c0.9-0.6,1.4-1.5,1.4-2.7C38.1,10.1,37.9,9.2,37.3,8.3L37.3,8.3z M31.5,2.9c0.2-0.2,0.5-0.3,0.8-0.3h0 c0.2,0,0.5,0.1,0.8,0.3c0.3,0.2,0.7,0.3,1.1,0.3c0.5,0,0.7-0.3,0.7-0.5c0.1-0.1,0.1-0.1,0.2-0.1c0.2,0,0.4,0.1,0.5,0.3 c-0.9,0.8-1.1,1.7-1.1,2.1c-0.2,0.1-0.5,0.1-1,0.1c-0.4,0-0.7,0-1-0.1C32.5,4.6,32.3,3.7,31.5,2.9L31.5,2.9z M33.5,13.8 c-2.8,0-4-0.8-4-2.8c0-1.9,1.2-3.2,2.1-4.2C32,6.4,32.3,6,32.5,5.6c0.3,0.1,0.6,0.1,1,0.1c0.4,0,0.8,0,1-0.1 C34.7,6,35,6.4,35.4,6.8c0.9,1,2.1,2.3,2.1,4.2C37.5,13,36.3,13.8,33.5,13.8L33.5,13.8z"/></g><g fill="#23262C"><path d="M3.3,23.7v-4.6h1.6l0.8,3.4l0.8-3.4h1.6v4.6H7.2v-3.6H7.1l-0.9,3.4H5.2l-0.9-3.4H4.2v3.6H3.3z"/><path d="M18.1,19.1h1.8c0.5,0,0.8,0.1,1.1,0.3c0.2,0.2,0.4,0.5,0.4,0.9c0,0.3,0,0.5-0.1,0.6 c-0.1,0.2-0.2,0.3-0.4,0.4c0.2,0.1,0.4,0.2,0.5,0.4c0.1,0.2,0.1,0.4,0.1,0.7c0,0.4-0.1,0.8-0.4,1c-0.3,0.2-0.6,0.3-1.1,0.3h-1.8 V19.1z M19.9,19.9H19V21h0.8c0.4,0,0.5-0.2,0.5-0.5S20.2,19.9,19.9,19.9z M19.9,21.7H19v1.1h0.9c0.2,0,0.4,0,0.5-0.1 c0.1-0.1,0.1-0.2,0.1-0.4C20.5,21.9,20.3,21.7,19.9,21.7z"/><path d="M32.3,19.9v-0.8h3.4v0.8h-1.2v3.8h-0.9v-3.8H32.3z"/></g></svg><!--money-->
  <div class="fallback iconCircle">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/info-fallback.png" />
  </div>
  <svg aria-labelledby="title" id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 765 587">
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   width="495.5px" height="600px" viewBox="-15 -89.7 495.5 600" xml:space="preserve">
<style type="text/css">
  .st0{fill:#23262C;stroke:#171A1E;stroke-width:5;stroke-miterlimit:10;}
  .st1{fill:#344156;stroke:#121316;stroke-width:5;stroke-miterlimit:10;}
  
    .st2{opacity:0.77;fill:none;stroke:#2F343F;stroke-width:6;stroke-miterlimit:10;stroke-dasharray:6.0121,6.0121;enable-background:new    ;}
  .st3{opacity:0.32;fill:#1B1E25;stroke:#49535E;stroke-width:2;stroke-miterlimit:10;enable-background:new    ;}
  .st4{fill:#12161E;stroke:#3F454F;stroke-width:5;stroke-miterlimit:10;}
  .st5{opacity:0.7;fill:url(#SVGID_1_);enable-background:new    ;}
  .st6{fill:#12161E;}
  .st7{fill:#414751;}
  .st8{fill:none;}
  .st9{opacity:0.74;fill:#1B1E25;stroke:#49535E;stroke-miterlimit:10;enable-background:new    ;}
  .st10{fill:#FF3C00;}
  .st11{opacity:0.32;}
  .st12{fill:#1B1E25;stroke:#49535E;stroke-miterlimit:10;}
  .st13{opacity:0.42;fill:#000510;enable-background:new    ;}
  .st14{fill:#931429;}
  .st15{fill:#253E5B;}
  .st16{opacity:0.2;fill:url(#SVGID_2_);enable-background:new    ;}
  .st17{fill:#2B3647;}
  .st18{opacity:0.33;}
  .st19{fill:#8797AD;}
  .st20{fill:none;stroke:none;}
</style>
<title  id="title" lang="en">Circle of icons that illustrate Global Warming Solutions</title>
<g class="iconCircle">
  <g id="circle">
    <path id="backCircle" class="st0" d="M53.4,154.3c0-93.1,75.5-168.6,168.6-168.6s168.6,75.5,168.6,168.6S315.1,322.9,222,322.9
      S53.4,247.4,53.4,154.3z"/>
    <path class="st1" d="M222.1,115.8c-21.2,0-38.4,17.2-38.4,38.4s17.2,38.4,38.4,38.4s38.4-17.2,38.4-38.4S243.3,115.8,222.1,115.8
      L222.1,115.8z"/>
    <circle class="st2" cx="222.4" cy="153.8" r="191.4"/>
    <circle class="st3" cx="222.1" cy="154.3" r="79.2"/>
    <path class="st4" d="M222.1,129.1c-13.9,0-25.2,11.3-25.2,25.2c0,13.9,11.3,25.2,25.2,25.2s25.2-11.3,25.2-25.2
      S236,129.1,222.1,129.1z"/>
    
      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="320.3311" y1="298.7393" x2="320.3311" y2="-5.3131" gradientTransform="matrix(1.032 -0.177 0.169 0.987 -62.731 55.81)">
      <stop  offset="0" style="stop-color:#000707;stop-opacity:0"/>
      <stop  offset="4.700000e-02" style="stop-color:#182323;stop-opacity:4.700000e-02"/>
      <stop  offset="0.134" style="stop-color:#3E5250;stop-opacity:0.134"/>
      <stop  offset="0.227" style="stop-color:#617B79;stop-opacity:0.227"/>
      <stop  offset="0.324" style="stop-color:#7E9D9A;stop-opacity:0.324"/>
      <stop  offset="0.426" style="stop-color:#95B9B6;stop-opacity:0.426"/>
      <stop  offset="0.536" style="stop-color:#A7CFCB;stop-opacity:0.536"/>
      <stop  offset="0.657" style="stop-color:#B4DEDA;stop-opacity:0.657"/>
      <stop  offset="0.796" style="stop-color:#BCE7E3;stop-opacity:0.796"/>
      <stop  offset="1" style="stop-color:#BEEAE6"/>
    </linearGradient>
    <path class="st5" d="M189.8,7.1v3.6c41.8-6.8,82.4,3,114.3,24.6c32.3,21.8,55.7,55.4,62.6,95.9s-3.9,80-27.1,111.3
      c-22.9,30.9-57.9,53.7-99.6,61.2l0.6,3.6c85.8-15.5,143.9-94.3,129.8-176.7C356.3,48.1,275.9-7,189.8,7.1z"/>
    <path class="st6" d="M318,154.2c0-53-43-95.9-95.9-95.9c-53,0-95.9,43-95.9,95.9c0,53,43,95.9,95.9,95.9
      C275.1,250.1,318,207.2,318,154.2z M222.1,243.6c-24.7,0-47-10-63.2-26.2s-26.2-38.5-26.2-63.2s10-47,26.2-63.2
      s38.5-26.2,63.2-26.2s47,10,63.2,26.2c16.2,16.2,26.2,38.5,26.2,63.2s-10,47-26.2,63.2S246.8,243.6,222.1,243.6L222.1,243.6z"/>
    <path class="st7" d="M248.7,50.1l-0.6,2.5c40,9,72.4,41.7,78.9,84.7c2.9,18.8,0.4,37.2-6.2,53.7l0.8,0.3l1.6,0.6
      c6.8-16.9,9.3-35.7,6.3-55C322.9,92.9,289.7,59.3,248.7,50.1L248.7,50.1z"/>
    <path d="M312.8,207.6l-1.4-0.9L312.8,207.6z"/>
    <path class="st7" d="M282.5,137.2l-9.6,2.7c1.3,4.6,2,9.4,2,14.4c0,24.3-16.4,44.7-38.7,50.9l2.7,9.6c26.6-7.3,46-31.7,46.1-60.5
      C284.9,148.4,284.1,142.6,282.5,137.2z"/>
    <path d="M272.9,139.9"/>
    <path class="st8" d="M169.1,154.3h-3.7c0,30.7,24.6,55.7,55.1,56.4l0.1-3.7C192,206.2,169.1,182.9,169.1,154.3L169.1,154.3z"/>
    <path class="st9" d="M173,112.9l7.6,6.5c3.1-3.6,6.7-6.9,10.8-9.7c20.1-13.6,46.3-11.4,63.9,3.7l6.5-7.6
      c-20.9-17.9-52-20.5-75.9-4.4C180.9,104.7,176.6,108.6,173,112.9L173,112.9z"/>
    <path class="st10" d="M281.1,154.3"/>
    <g class="st11">
      <path class="st12" d="M157.1,157.6c-1-16.6,4.4-32.2,14.1-44.3l8.8,7.1c-8,10-12.5,22.8-11.6,36.5L157.1,157.6L157.1,157.6z
         M168.4,156.9l-3.7,0.2c1.9,30.7,27.9,54.1,58.5,52.8l-0.1-3.7C194.4,207.4,170.1,185.5,168.4,156.9z"/>
    </g>
    <path class="st13" d="M212.1,118.2l1.6-1.2L182.6-16.9C87.4,3,65.8,77.4,65.8,77.4s115.8,56.1,121.7,59.2l2.5-1.9
      C194.6,126.7,202.4,120.4,212.1,118.2L212.1,118.2z"/>
    <circle class="st14" cx="222.1" cy="154.3" r="13"/>
    <path d="M191.7,104.1L191,103c-9.7,5.8-17.3,14.2-22.3,24l1.1,0.5C174.8,117.8,181.9,109.8,191.7,104.1z"/>
    <path class="st15" d="M258.6,143.1c-5.7-18.9-24.7-30.2-43.7-26.8L175.5-53.3l-1.2,0.3l39.6,170.8l0.6-0.1
      c18.6-3.7,37.3,7.3,42.8,25.8c5.9,19.7-5.2,40.4-24.9,46.3s-40.4-5.2-46.3-24.9c-2.8-9.4-1.8-19,2.3-27.2l0.5-1l-1.1-0.5
      c0,0.1,0,0,0,0l-16.6-8l-1.4-0.7l-1.1-0.5L34.9,62.5L34.2,64l150.7,72.7l2.2,1.1c-3.9,8.3-4.9,18-2.1,27.5
      c6.1,20.3,27.5,31.8,47.9,25.7C253.2,184.9,264.7,163.4,258.6,143.1L258.6,143.1z M187.7,136.2
      C187.8,136.2,187.7,136.2,187.7,136.2z M187.7,136.2C187.7,136.2,187.7,136.3,187.7,136.2z"/>
    
      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="99.1097" y1="663.8168" x2="99.1097" y2="359.7987" gradientTransform="matrix(-0.386 0.973 0.902 0.357 -224.18 -59.782)">
      <stop  offset="0" style="stop-color:#000707;stop-opacity:0"/>
      <stop  offset="0.947" style="stop-color:#000101;stop-opacity:0.947"/>
      <stop  offset="1" style="stop-color:#000000"/>
    </linearGradient>
    <path class="st16" d="M91.3,91.5l3.6,1.8c-15.3,39.5-15.1,81-1.3,116.4c13.9,35.7,40.9,65.2,77.8,79.8
      c37,14.7,76.8,11.8,111.4-4.8c34.2-16.4,63.3-46.1,79.2-85.4l3.3,1.3c-32.8,80.9-119.9,122.2-195.2,92.4
      C94.7,263.1,59.7,172.8,91.3,91.5z"/>
    <path class="st17" d="M249.7,260l-0.8-2.5c-39.3,11.9-83.6-0.6-110.5-34.9c-11.8-15-18.7-32.2-21.1-49.7l-0.9,0.1l-1.7,0.2
      c2.4,18,9.5,35.7,21.6,51C164,259.3,209.4,272.2,249.7,260L249.7,260z"/>
    <g id="likely" class="st18">
      <path class="st19" d="M222.1,35.5l-7,0.4l-0.7-12.2l2.5-0.1l0.6,10l4.5-0.3L222.1,35.5L222.1,35.5z M224.3,35.5l0.1-12.2h2.5
        l-0.1,12.2H224.3z M232.6,35.8l-2.5-0.2l1-12.2l2.5,0.2l-0.5,5.4h1.7l2.4-5l2.8,0.2l-3.2,5.9l2.2,6.3l-2.9-0.2l-1.6-5h-1.7
        L232.6,35.8L232.6,35.8z M241.3,36.7l2.3-12l7.8,1.5l-0.4,2.1l-5.3-1l-0.5,2.8l4.3,0.8l-0.4,2.1l-4.3-0.8l-0.6,2.9l5.3,1
        l-0.4,2.1L241.3,36.7L241.3,36.7z M258.3,41l-6.6-2.1l3.6-11.7l2.4,0.7l-3,9.6l4.3,1.3L258.3,41L258.3,41z M263.3,43.2l-2.3-1
        l2-4.5l-0.5-8.2l2.5,1.1l0.1,5.4l4-3.6l2.5,1.1l-6.4,5.2L263.3,43.2L263.3,43.2z"/>
    </g>
    <g id="unlikely" class="st18">
      <path class="st19" d="M107.2,197.2c1.3-0.5,1.8-1.4,1.3-2.8s-1.4-1.8-2.7-1.4l-7.7,2.7l-0.8-2.3l7.6-2.7c1.4-0.5,2.6-0.5,3.5,0
        s1.6,1.5,2.1,3s0.6,2.7,0.2,3.7s-1.3,1.7-2.7,2.2l-7.6,2.7l-0.8-2.3L107.2,197.2L107.2,197.2z M108,186.5l-12,2.2l-0.8-4.1
        l9.4-4.7v-0.2l-9.9,1.8l-0.5-2.4l12-2.2l0.7,4l-9.4,4.8v0.2l9.9-1.8L108,186.5L108,186.5z M105.5,166.7l0.5,6.9l-12.2,0.9
        l-0.2-2.5l10-0.7l-0.3-4.5L105.5,166.7L105.5,166.7z M105.5,164.4l-12.2,0.1V162l12.2-0.1V164.4z M105.6,156.1l-0.2,2.5
        l-12.2-0.8l0.2-2.5l5.4,0.4l-0.1-1.7l-5.1-2.4l0.2-2.8l5.9,3.1l6.3-2.3l-0.2,2.9l-5,1.7l0.1,1.7L105.6,156.1L105.6,156.1z
         M106.4,147.3l-12.1-1.8l1.2-7.8l2.1,0.3l-0.8,5.4l2.8,0.4l0.7-4.3l2.1,0.3l-0.7,4.3l2.9,0.4l0.8-5.4l2.1,0.3L106.4,147.3
        L106.4,147.3z M109.6,130l-1.5,6.8l-11.9-2.7l0.5-2.4l9.8,2.2l1-4.4L109.6,130z M111.2,124.5l-0.7,2.4l-4.8-1.3l-8,1.7l0.7-2.7
        l5.3-0.8l-4.1-3.5l0.7-2.7l6,5.6L111.2,124.5L111.2,124.5z"/>
    </g>
  </g>
  <g id="icons">
    <path class="st7" d="M7.6,71.7c-2-0.6-4.3,1.2-5.1,3.9c0,0.1-0.1,0.3-0.1,0.4C2,75.6,1.6,75.3,1,75.1c-2.2-0.7-4.9,1.3-5.9,4.5
      c-0.5,1.7-0.5,3.4,0,4.7c-1.5,0.7-2.8,2.2-3.4,4.3c-0.9,3,0,6,2,6.9c-0.1,0.3-0.2,0.5-0.3,0.8c-0.7,2.3,0,4.6,1.7,5.1
      c0.3,0.1,0.6,0.1,0.9,0.1c0.8-0.1,1.6-0.6,2.3-1.4c0.3,0.6,0.8,1.1,1.2,1.6c0.5,0.4,1,0.8,1.7,0.9c3.3,1,7.1-1.9,8.6-6.6
      c0.2-0.6,0.3-1.2,0.4-1.8c0.7-0.1,1.4-0.2,2.2-0.1c-2.6,9.9-1.4,10.3-0.9,10.4c0.6,0.2,1.7,0.5,4.9-9.5c1.9,0.8,3.9,2.2,5.7,4.7
      l3.4-11.8c-2.8,1.1-5.3,1.3-7.3,1c2.6-10.2,1.5-10.5,0.9-10.6c-0.5-0.2-1.7-0.5-4.8,9.2c-1.2-0.7-2.2-1.6-2.9-2.3
      c0.1-0.2,0.1-0.3,0.2-0.5c0.7-2.3,0-4.6-1.7-5.2c-0.4-0.1-0.8-0.1-1.3,0C9,79,9.3,78.3,9.5,77.6C10.4,75,9.5,72.3,7.6,71.7
      L7.6,71.7z M12.2,102.4c0.1-1.3,0.5-3.7,1.4-7.4c0.4,0.1,0.9,0.2,1.3,0.3C13.8,99,12.8,101.2,12.2,102.4z M15.8,87.6
      c1.1-3.5,2.1-5.8,2.7-6.9c-0.1,1.3-0.5,3.8-1.4,7.4C16.6,88,16.2,87.8,15.8,87.6z"/>
    <path class="st7" d="M-8.2,175.8c-0.3,5.3,3.7,9.9,9.1,10.3c5.3,0.3,9.9-3.7,10.3-9.1c0.3-5.3-3.7-9.9-9.1-10.3
      C-3.3,166.4-7.9,170.4-8.2,175.8z M2.5,159.9l-3.1,5.3l5.4,0.3C4.9,165.5,2.5,159.9,2.5,159.9L2.5,159.9z M13.8,165.4L7.9,167
      l3.6,4.1L13.8,165.4z M-3.8,166.3l-5.6-2.3l1.6,5.9C-7.9,169.9-3.8,166.3-3.8,166.3z M-9.4,172.9l-5.6,2.4l5.3,3.1
      C-9.7,178.3-9.4,172.9-9.4,172.9z M12.2,179.8l5.6-2.4l-5.3-3.1L12.2,179.8z M0.4,192.8l3.1-5.3l-5.4-0.3L0.4,192.8L0.4,192.8z
       M6.7,186.4l5.6,2.3l-1.6-5.9C10.8,182.8,6.7,186.4,6.7,186.4z M-10.9,187.3l5.9-1.6l-3.6-4.1L-10.9,187.3z"/>
    <path class="st7" d="M36.4,245l-14.8-5.3c0,0,0.3,6.8,5.3,8.6C31.8,250.1,36.4,245,36.4,245L36.4,245z M9,257l2.7-7.5l-0.9-0.3
      l-2.7,7.5L9,257z M5.9,256.9l8.5,3c1,0.4,2.2-0.2,2.6-1.2l0.3-0.7l2.1,0.7l-1.3,3.7c-0.4,1,0.3,2.2,1.3,2.6l4.6,1.6
      c1,0.4,2.2-0.2,2.6-1.2l1.2-3.3l1.8,0.6v0.1c-0.4,1,0.2,2.2,1.2,2.6l8.5,3c1,0.4,2.2-0.2,2.6-1.2l2-5.7c0.4-1-0.2-2.2-1.2-2.6
      l-8.5-3c-1-0.4-2.2,0.2-2.6,1.2l-0.7,1.9l-1.8-0.7l1.2-3.4c0.4-1-1.8-4.8-1.8-4.8l-2.3-0.8c0,0-4.1,1.6-4.4,2.6l-1.1,2.9l-2.1-0.7
      l0.4-1.2c0.4-1-0.2-2.2-1.2-2.6l-8.5-3c-1-0.4-2.2,0.2-2.6,1.2l-2,5.6C4.3,255.4,4.8,256.6,5.9,256.9z M42.7,261.4l-2,5.7
      c-0.2,0.5-0.8,0.8-1.3,0.6l2.7-7.5C42.6,260.3,42.9,260.8,42.7,261.4L42.7,261.4z M41.1,259.7l-2.7,7.5l-0.9-0.3l2.7-7.5
      L41.1,259.7z M39.2,259.1l-2.7,7.5l-0.9-0.3l2.7-7.5C38.3,258.7,39.2,259.1,39.2,259.1z M37.4,258.4l-2.7,7.5l-0.9-0.3l2.7-7.5
      L37.4,258.4z M35.5,257.7l-2.7,7.5l-0.9-0.3l2.7-7.5C34.5,257.4,35.5,257.7,35.5,257.7z M32.3,257.6c0.2-0.5,0.8-0.8,1.3-0.6
      l-2.7,7.5c-0.5-0.2-0.8-0.8-0.6-1.3L32.3,257.6z M27.5,254.1l0.7,0.3l-3.5,9.7l-0.7-0.3L27.5,254.1z M18,252.8l-2,5.7
      c-0.2,0.5-0.8,0.8-1.3,0.6l2.7-7.5C17.9,251.7,18.1,252.2,18,252.8L18,252.8z M5.6,254.7l2-5.6c0.2-0.5,0.8-0.8,1.3-0.6l5.7,2
      l-2.7,7.5l0.9,0.3l2.7-7.5l0.9,0.3l-2.7,7.5l-7.5-2.7C5.7,255.8,5.4,255.2,5.6,254.7L5.6,254.7z M7.1,256.3l2.7-7.5l-0.9-0.3
      L6.2,256L7.1,256.3z M10.9,257.7l2.7-7.5l-0.9-0.3l-2.7,7.5L10.9,257.7z"/>
    <path class="st7" d="M83.9,307.3c-0.5,1.9-1.9,8.5-2.5,11.2c2.3,0,4.7,0.2,6.8,0.6c1.7-1.5,5-4.2,5.9-4.4c1.4-0.2,1.6,0.1,1.1,1.3
      c-0.6,1.2-2.4,5.1-2.4,5.1s1.9,3.8,2.6,4.9c0.6,1.1,0.4,1.5-1,1.3c-0.8-0.1-4.2-2.6-6-4c-2.1,0.5-4.5,0.9-6.8,1
      c0.7,2.7,2.4,9.1,3,11c0.5,1.7-0.9,1.1-0.9,1.1c-0.6-0.3-1.9-1-2.3-1.5c-2.9-3.5-7.2-9-8.2-10.3c-0.7,0-1.5,0-2.4,0.1
      C61,325,60,322.8,60,322.2c0-0.7,0.9-2.9,10.7-3.2c0.9,0,1.7-0.1,2.4-0.1c1-1.4,5.1-7.2,7.8-10.8c0.4-0.6,1.6-1.4,2.3-1.7
      C83,306.3,84.4,305.6,83.9,307.3L83.9,307.3z"/>
    <g>
      <path class="st7" d="M149.9,358.6c0.3,0.1,0.5,0,0.6-0.1s0.3-0.4,0.3-0.7l-1.5-0.3c-0.1,0.4-0.1,0.6,0,0.8
        S149.6,358.6,149.9,358.6L149.9,358.6z"/>
      <path class="st7" d="M144.3,360.6l4.5,15.7l10.9-12.2c1.1-1.1,1.9-2.6,2.3-4.2c1.1-4.9-2-9.9-6.9-11s-9.9,2-11,6.9
        C143.7,357.4,143.8,359,144.3,360.6z M152.4,360.6l2.6,0.5l0.4-1.8l-2.2-0.4l0.2-1.1l2.2,0.4l0.4-2.1l1.2,0.2l-1.2,6.1l-3.9-0.8
        L152.4,360.6L152.4,360.6z M148.4,356.4l2.6,0.5c0-0.3,0-0.5-0.1-0.6c-0.1-0.2-0.3-0.3-0.6-0.3c-0.6-0.1-1.1-0.2-1.5-0.2h-0.3
        l0.2-0.9c0.7,0,1.4,0,1.9,0.1c0.7,0.1,1.1,0.4,1.4,0.8c0.2,0.4,0.3,1,0.1,1.8c-0.3,1.6-1.1,2.3-2.5,2c-1.3-0.3-1.8-1.1-1.5-2.4
        L148.4,356.4L148.4,356.4z"/>
    </g>
    <path class="st7" d="M225.1,359.7c0,0-5.5,0.4-5.8,5.9c0.1,5.9,5.9,6.6,5.9,6.6s0.1,8.8,8.1,9.1c6.9,0.1,8.5-6.4,8.5-6.4
      s2.2,1.8,4.9,0c2.4-1.8,1.7-4.5,1.7-4.5s5.5-1.5,5-7.2c-0.6-5.6-6.5-5.2-6.5-5.2L225.1,359.7L225.1,359.7z"/>
    <path class="st7" d="M318.1,349.5c3.4,0.8,5.9,3.7,6,3.9c0.4,0.2,0.6,0.2,0.6,0.2l4.4-2.6l2.2,3.7l1.1-0.7l-2.2-3.7l1.1-0.7
      l1.2,1.9l0.8-0.5l-1.2-1.9l13.8-8.2c0.4-0.2,0.5-0.7,0.3-1l-0.7-6.8l8.9-5.3c-4.7,1.8-16.9-3.8-16.9-3.8l-24.8,14.7
      c1.3,3-4.1,16.3-4.1,16.3L318.1,349.5L318.1,349.5z M326.8,350c0.2,0.4,0.1,0.8-0.3,1l-1.7,1c-0.4,0.2-0.8,0.1-1-0.3l-1.6-2.7
      c-0.2-0.4-0.1-0.8,0.3-1l1.7-1c0.4-0.2,0.8-0.1,1,0.3L326.8,350z M335.3,344.9c0.2,0.4,0.1,0.8-0.3,1l-2.3,1.4
      c-0.4,0.2-0.8,0.1-1-0.3l-1.6-2.7c-0.2-0.4-0.1-0.8,0.3-1l2.3-1.4c0.4-0.2,0.8-0.1,1,0.3L335.3,344.9z M339.6,342.4
      c0.2,0.4,0.1,0.8-0.3,1l-2.3,1.4c-0.4,0.2-0.8,0.1-1-0.3l-1.6-2.7c-0.2-0.4-0.1-0.8,0.3-1l2.3-1.4c0.4-0.2,0.8-0.1,1,0.3
      L339.6,342.4z M343.8,339.9c0.2,0.4,0.1,0.8-0.3,1l-2.3,1.4c-0.4,0.2-0.8,0.1-1-0.3l-1.6-2.7c-0.2-0.4-0.1-0.8,0.3-1l2.3-1.4
      c0.4-0.2,0.8-0.1,1,0.3L343.8,339.9z"/>
    <g>
      <path class="st7" d="M422.3,278l-3.5-13c0.6-1,1-1.6,1-1.6l-7.1-3.5l-16.3,16.8l7.9,9.2c0,0,0.2,1.8,2.7-2.1l-0.3,0.5
        c0,0,11.4-2.4,13.4-2.8C422.2,280.9,422.3,278,422.3,278L422.3,278z M405.5,282.9l-6.3-6.8l2.1-2.2l7,4.4L405.5,282.9
        L405.5,282.9z M409.6,276.5l-6.7-4.2l2.5-2.4l5.9,3.7L409.6,276.5L409.6,276.5z M412.4,272.1l-5.4-3.4l2.2-2.1l4.8,3L412.4,272.1
        z M414.7,268.4l-4.5-2.9l1.7-1.6l4,2.5L414.7,268.4z M416.5,265.5l-3.7-2.3l1.4-1.3l3.3,2.1L416.5,265.5L416.5,265.5z"/>
      <path class="st7" d="M404.5,268.2c0.4-0.3,0.7-0.7,1-1.1c1.5-2.3,0.8-5.4-1.5-6.8c-2.3-1.5-5.4-0.8-6.8,1.5
        c-1.5,2.3-0.8,5.4,1.5,6.8c0.3,0.2,0.5,0.3,0.8,0.4l-0.7,0.1l-4.1,6.5c-0.1-0.1-0.2-0.1-0.3-0.2c-2.3-1.5-5.4-0.8-6.8,1.5
        c-1.5,2.3-0.8,5.4,1.5,6.8c0.1,0.1,0.2,0.1,0.3,0.2l-1.2,1.9l0.1,1.4l0.4,0.3l0.6-0.9l6,3.8l1-1.6c-0.2-0.1-0.3-0.2-0.5-0.4
        l1.5-2.4l3.4,2.2l-1.5,2c-0.1,0.2,0,0.5,0.4,0.5c0,0,0.6,0.5,1.8-1.3c1.1-1.8,2.6-4.1,2.6-4.1l-7.5-8.7l8.3-8.6L404.5,268.2
        L404.5,268.2z M399.9,283.1c0,0,1.3,0.8,1.9,1.2c0.6,0.4,0.3,1.2,0.3,1.2s-0.2,0.6-0.7,1.1c-0.4,0.5-1,0.2-1,0.2l-2-1.2
        L399.9,283.1L399.9,283.1z M394.3,281.2c-0.8,1.3-2.5,1.7-3.8,1.1c-0.1,0-0.2-0.1-0.3-0.2c-1.4-0.9-1.8-2.7-0.9-4.2
        c0.9-1.4,2.7-1.8,4.2-0.9c0.1,0.1,0.2,0.1,0.3,0.2C394.8,278.2,395.1,279.9,394.3,281.2L394.3,281.2z M403.8,266
        c-0.9,1.4-2.7,1.8-4.2,0.9c-1.4-0.9-1.8-2.7-0.9-4.2c0.9-1.4,2.7-1.8,4.2-0.9C404.3,262.8,404.7,264.6,403.8,266z"/>
    </g>
    <g>
      <path class="st7" d="M478.9,210.6c0-0.3-0.1-0.5-0.4-0.6c-0.3,0-0.5,0.1-0.6,0.3c-7.8-1.8-12.8-3.8-12.8-3.8l-0.5,2.6
        c0,0,5.4,0,13.3,1.3c0,0.2,0.1,0.5,0.4,0.5C478.6,211.1,478.8,210.9,478.9,210.6c0.5,0.1,1,0.2,1.6,0.3
        C480,210.8,479.4,210.7,478.9,210.6z"/>
      <path class="st7" d="M463.5,206.2c0,0-10.9-0.9-32.6-7.7c0,0-4.3-1.7-6.4-4.9l-0.7,3.5c9.9,4.8-1,5.2-1,5.2l-0.7,3.5
        c3.1-2.2,7.7-2.1,7.7-2.1c22.6,1.9,33.1,5.2,33.1,5.2L463.5,206.2z"/>
    </g>
    <g>
      <path class="st7" d="M436.7,127.2l-8.6,1.1c-0.6-4.2-1.3-8.4-2.5-12.5l8.4-2.2c2.7,1.7,5.2,3.5,7.8,5.5
        C440.1,121.9,438.4,124.6,436.7,127.2L436.7,127.2z M433.8,122.3c-0.1-1.1-0.4-2.1-0.6-3.1l-3,0.6c0.2,1,0.5,2,0.6,3.1
        L433.8,122.3z"/>
      <path class="st7" d="M455.5,141.9l-25.6,0.4c-0.4,0-0.8-0.3-0.8-0.7l-0.1-1.8h0.7c3.3-0.1,5.9-2.1,5.7-4.5
        c-0.2-2.4-3.1-3.9-6.3-3.5l-0.7,0.1l-0.2-1.8c-0.1-0.4,0.3-0.8,0.7-0.8l25.3-3.9c0.4-0.1,0.8,0.3,0.9,0.8
        c0.7,4.9,1.1,9.8,1.2,14.7C456.3,141.4,456,141.9,455.5,141.9L455.5,141.9z M445.6,131.6c0.4,0,0.7-0.5,0.7-0.9l-0.2-1.4
        c-0.1-0.5-0.5-0.8-0.9-0.7l-4.4,0.6c-0.4,0.1-0.7,0.5-0.7,0.9l0.2,1.3c0.1,0.4,0.5,0.8,0.9,0.7L445.6,131.6z M452.5,130.9
        c0.4,0,0.7-0.5,0.7-1l-0.2-1.5c-0.1-0.5-0.5-0.8-0.9-0.8l-2.8,0.4c-0.4,0.1-0.7,0.5-0.7,1l0.2,1.4c0.1,0.5,0.5,0.8,0.9,0.8
        L452.5,130.9z M446,135.9c0.4,0,0.8-0.4,0.7-0.9l-0.1-1.4c0-0.5-0.4-0.8-0.9-0.8l-4.4,0.4c-0.4,0-0.8,0.4-0.7,0.9l0.1,1.3
        c0,0.4,0.4,0.8,0.9,0.8L446,135.9z M452.9,135.5c0.4,0,0.8-0.5,0.7-1l-0.1-1.5c0-0.5-0.4-0.9-0.9-0.8l-2.8,0.3
        c-0.4,0-0.8,0.5-0.7,0.9l0.1,1.4c0,0.5,0.4,0.8,0.9,0.8L452.9,135.5L452.9,135.5z M446.2,140.3c0.4,0,0.8-0.4,0.8-0.9V138
        c0-0.5-0.4-0.8-0.8-0.8l-4.5,0.3c-0.4,0-0.8,0.4-0.8,0.9v1.3c0,0.4,0.4,0.8,0.8,0.8L446.2,140.3L446.2,140.3z M453.1,140.1
        c0.4,0,0.8-0.4,0.8-0.9v-1.5c0-0.5-0.4-0.9-0.8-0.9l-2.8,0.2c-0.4,0-0.8,0.4-0.8,0.9v1.4c0,0.5,0.4,0.9,0.8,0.8H453.1z
         M457.5,141.8c-0.1-5.6-0.6-11.1-1.4-16.6c3.1,2.3,6.4,4.8,9.3,7.6c-1.2,1.5-2.4,3-3.7,4.5l1.1-0.1c0.4,0,0.8,0.4,0.8,0.9v0.5
        c0,0.5-0.3,1-0.8,1l-3.5,0.1L457.5,141.8z"/>
    </g>
    <path class="st7" d="M425.9,32.7c1.9-0.3,3.3-0.6,3.7-1v-0.1l-0.1-0.6v-0.1l-0.8-0.7l-0.7-0.6l-0.7-0.2c-2.4-1-7.6-2.1-13.8,3.2
      l0.3,1c0,0,4.3-0.2,8.4-0.5c1.2,3.7,2.2,7.5,2.9,11.2l-0.2-0.3h-0.1l-0.8,0.1l-0.3-0.4h-0.2l-0.4,0.3v0.1l0.1,0.1
      c-3.4,1-6.7,2-10.1,3.2l-0.7-0.9h-0.1l-0.3,0.2v0.1l0.1,0.1l-0.7,0.5v0.1l0.3,0.4c-3.6,1.3-7.1,2.7-10.5,4.2l0.6,0.9
      c3.5-1.4,7-2.8,10.6-4.1c1.1,1.7,2.3,3.4,3.3,5.2c-2.5,2.7-5.1,5.3-7.8,7.8l0.6,0.8c2.7-2.5,5.3-5,7.8-7.6l0.2,0.4h0.1l0.7-0.4
      l0.1,0.1h0.1l0.4-0.2v-0.1l-0.6-1c2.4-2.5,4.8-5.2,7.1-7.9v0.1h0.1l0.5-0.3v-0.1l-0.3-0.4l0.4-0.6c0.7,3.6,1.2,7.3,1.5,10.8
      l0.1,1.1v0.1L426,56l0.7,0.8l0.1,1l0.1,0.1l3.4,0.2h0.1V58C430,49.7,428.6,41.2,425.9,32.7L425.9,32.7z M416.9,52.9
      c-0.9-1.6-2-3-2.9-4.5c3.1-1,6.2-2,9.4-2.9C421.3,48,419.1,50.5,416.9,52.9z"/>
    <path class="st7" d="M353.7-7.2c1.6-4.6,4.2-5.6,7.1-6.2c3.1-0.6,5.3-2.1,5.3-2.1s-0.3,2.3-2.7,3.9c3.7-0.2,7.2-3,8.1-4.4
      c1.2,6.8-3.2,14.5-9.9,16.7c19.1,5.3,20.3-14.2,19.9-16.9c-0.6,1.7-2.5,3.8-4.5,3.6c5.1-8.7,2-14.6,2-14.6c-3,4.1-9.4,5.5-14.7,6
      c1.3-1.5,2.2-2.6,2.8-4.7c-2.8,2.4-6.8,2.5-9.9,4.6C353-18.6,351.7-14.8,353.7-7.2L353.7-7.2z"/>
    <path class="st7" d="M320.6-60.3c-2.4-2.7-6.5-4.8-10.9-5.6c-5.5-1.1-10.3,0-13.3,2.9c-1.4,1.4-2.3,3.1-2.8,5.2
      c-0.4,1.9-0.5,4-0.2,6.3c3.8-6.8,11.6-11.1,19.4-9.6c0,0-7.6,0.5-13.3,5.6l-0.2,0.2c-1.2,1.1-2.2,2.3-3.1,3.8
      c-1.5,2.2-3,5.3-3.8,9.3l3.3,0.6c0,0,0.1-3.2,1.6-6.6c1.4,0.5,2.6,0.8,3.8,1c3,0.6,5.2,0.3,7.1-0.8c1.7-1,2.7-2.5,3.9-4.1
      c1.8-2.5,3.8-5.3,8.4-6.8c0.3-0.1,0.5-0.3,0.5-0.6C320.9-59.8,320.8-60.1,320.6-60.3L320.6-60.3z"/>
    <path class="st7" d="M238.7-70.7c-0.5-5.2-4.3-3.8-4.3-3.8c-3.1-4.1-7.2-0.3-7.2-0.3c-1.5-1.1-2.9,0-3.5,0.7
      c-0.1-2.1-1.7-4.3-1.7-4.3c-0.3-4.2-3.6-7-3.6-7c-0.2-2.8-2.4-4.3-2.4-4.3s-2.2,1.5-2.4,4.3c0,0-3.3,2.8-3.6,7c0,0-3.3,4.9,0,7.5
      c0,0-2.4,2.8,0.7,4.6c0,0,0,2.8,3.7,2.6c0,0.8,0.1,6.5-1.7,10.3h6.7c-1.4-4.4-1.6-9.6-1.7-10.3c3.5,0.1,2.7-2.6,2.7-2.6
      c3.1-1.8,1.6-4.6,1.6-4.6c0.2-0.1,0.4-0.3,0.6-0.4c0.3,1.3,1.7,1.8,1.7,1.8c-4.3,5.5,1,7,1,7c0,2.6,3.7,1.1,3.7,1.1s0.1,0,0.3-0.1
      c-0.2,5.2-0.6,8.1-0.6,8.1h3.7c0,0-0.5-2.9-0.9-8.1c0.2,0,0.4,0.1,0.5,0.2c3.4,1.6,4.3-1.2,4.3-1.2c1.7-1.3-1.3-4.7-1.3-4.7
      C238.8-68,238.7-70.7,238.7-70.7L238.7-70.7z"/>
  </g>
</g>
<ellipse id="THIS" class="st20" cx="222.2" cy="154" rx="1.8" ry="1.6"/>
</svg>

  <g id="highlight">
    <path opacity=".19" fill="#D5DAE2" stroke="#1B1C1E" stroke-width="2" stroke-miterlimit="10" d="M222.3-12v128.7h.1v184.6c0 15.5 12.7 28.1 28.4 28.2 15.7 0 28.3-12.6 28.4-28.2L278-12h-55.7z"/>
  </g>
  <g class="money-lg money" id="money" fill="#23262C">
    <path d="M639.6 360.3h1.2v10.4h-1.2z"/>
    <path d="M640.3 373.3c-.9 0-1.6-.7-1.6-1.6 0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6-.1.9-.8 1.6-1.6 1.6zM658.7 291.7h-1.2v68.1h-29.3v-5.1H627v6h31.7v-69zM595.6 354.7h.8v5.1h19.7v-5.1h.8v6h-21.3v-6z"/>
    <path d="M605.4 360.3h1.2v10.4h-1.2z"/>
    <circle cx="606" cy="371.7" r="1.6"/>
    <g>
      <path d="M554.3 291.7h1.2v68.1h29.3v-5.1h1.2v6h-31.7v-69z"/>
      <path d="M572 360.3h1.2v10.4H572z"/>
      <path d="M572.7 373.3c-.9 0-1.6-.7-1.6-1.6 0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6-.1.9-.8 1.6-1.6 1.6z"/>
    </g>
    <g class="one">
      <path d="M576.6 333.7h-5.4v-1.6h5.4c.4 0 .8-.3.8-.8 0-.4-.3-.8-.8-.8h-2.3v-.8c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v.8h-2.3c-.4 0-.8.3-.8.8v3.1c0 .4.3.8.8.8h5.4v1.6h-5.4c-.4 0-.8.3-.8.8s.3.8.8.8h2.3v.8c0 .4.3.8.8.8.4 0 .8-.3.8-.8v-.8h2.3c.4 0 .8-.3.8-.8v-3.1c0-.4-.3-.8-.8-.8z"/>
      <path d="M583.2 329.3c-1.1-1.9-2.5-3.4-3.7-4.7-.8-.9-1.7-1.9-2-2.5.5-.3.9-.6 1.2-1 .3-.3.3-.8 0-1.1-.3-.3-.7-.3-1-.1.3-1 1-2.3 2.4-3.4.3-.2.4-.6.2-1 0-.1-1-2-3-2-1.3 0-1.7.8-1.9 1.2-.2.3-.2.4-.5.4-.6 0-1.3-.3-2-.7-.8-.4-1.7-.9-2.7-.9-1.8 0-3.5 1.6-3.6 1.8-.2.2-.2.4-.2.6s.1.4.3.6c1.1.9 2 2 2.4 3.3v.1c-.3-.2-.7-.2-1 .1-.3.3-.3.8 0 1.1.3.3.7.7 1.2 1-.3.7-1.2 1.6-2 2.5-1.1 1.3-2.6 2.8-3.7 4.7-1.3 2.2-2 4.4-2 6.8 0 3.2 1.2 5.5 3.5 6.9 1.9 1.1 4.5 1.7 8.2 1.7 3.7 0 6.3-.5 8.2-1.7 2.3-1.4 3.5-3.7 3.5-6.9.2-2.4-.5-4.6-1.8-6.8zm-14.7-13.4c.5-.4 1.3-.8 1.9-.8.6 0 1.3.3 2 .7.8.4 1.7.9 2.7.9 1.3 0 1.7-.8 1.9-1.2.2-.3.2-.4.5-.4.6 0 1 .3 1.3.6-2.1 1.9-2.7 4.3-2.8 5.3-.6.2-1.3.2-2.4.2s-1.8-.1-2.4-.2c-.2-1-.7-3.2-2.7-5.1zm5 27.2c-7.1 0-10.1-2.1-10.1-7 0-4.6 3-8 5.2-10.4 1.1-1.2 1.9-2.1 2.3-3 .7.2 1.5.2 2.6.2s1.9-.1 2.6-.2c.4.9 1.2 1.8 2.3 3 2.2 2.4 5.2 5.8 5.2 10.4 0 4.9-3 7-10.1 7z"/>
    </g>
    <g class="two">
      <path d="M610.1 333.7h-5.4v-1.6h5.4c.4 0 .8-.3.8-.8 0-.4-.3-.8-.8-.8h-2.3v-.8c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v.8h-2.3c-.4 0-.8.3-.8.8v3.1c0 .4.3.8.8.8h5.4v1.6h-5.4c-.4 0-.8.3-.8.8s.3.8.8.8h2.3v.8c0 .4.3.8.8.8.4 0 .8-.3.8-.8v-.8h2.3c.4 0 .8-.3.8-.8v-3.1c-.1-.4-.4-.8-.8-.8z"/>
      <path d="M616.6 329.3c-1.1-1.9-2.5-3.4-3.7-4.7-.8-.9-1.7-1.9-2-2.5.5-.3.9-.6 1.2-1 .3-.3.3-.8 0-1.1-.3-.3-.7-.3-1-.1.3-1 1-2.3 2.4-3.4.3-.2.4-.6.2-1 0-.1-1-2-3-2-1.3 0-1.7.8-1.9 1.2-.2.3-.2.4-.5.4-.6 0-1.3-.3-2-.7-.8-.4-1.7-.9-2.7-.9-1.8 0-3.5 1.6-3.6 1.8-.2.2-.2.4-.2.6 0 .2.1.4.3.6 1.1.9 2 2 2.4 3.3v.1c-.3-.2-.7-.2-1 .1-.3.3-.3.8 0 1.1.3.3.7.7 1.2 1-.3.7-1.2 1.6-2 2.5-1.1 1.3-2.6 2.8-3.7 4.7-1.3 2.2-2 4.4-2 6.8 0 3.2 1.2 5.5 3.5 6.9 1.9 1.1 4.5 1.7 8.2 1.7 3.7 0 6.3-.5 8.2-1.7 2.3-1.4 3.5-3.7 3.5-6.9.2-2.4-.4-4.6-1.8-6.8zM602 315.9c.5-.4 1.3-.8 1.9-.8.6 0 1.3.3 2 .7.8.4 1.7.9 2.7.9 1.3 0 1.7-.8 1.9-1.2.2-.3.2-.4.5-.4.6 0 1 .3 1.3.6-2.1 1.9-2.7 4.3-2.8 5.3-.6.2-1.3.2-2.4.2s-1.8-.1-2.4-.2c-.2-1-.7-3.2-2.7-5.1zm5 27.2c-7.1 0-10.1-2.1-10.1-7 0-4.6 3-8 5.2-10.4 1.1-1.2 1.9-2.1 2.3-3 .7.2 1.5.2 2.6.2s1.9-.1 2.6-.2c.4.9 1.2 1.8 2.3 3 2.2 2.4 5.2 5.8 5.2 10.4 0 4.9-3.1 7-10.1 7z"/>
    </g>
    <g class="three">
      <path d="M643.9 333.7h-5.4v-1.6h5.4c.4 0 .8-.3.8-.8s-.3-.8-.8-.8h-2.3v-.8c0-.4-.3-.8-.8-.8-.4 0-.8.3-.8.8v.8h-2.3c-.4 0-.8.3-.8.8v3.1c0 .4.3.8.8.8h5.4v1.6h-5.4c-.4 0-.8.3-.8.8s.3.8.8.8h2.3v.8c0 .4.3.8.8.8.4 0 .8-.3.8-.8v-.8h2.3c.4 0 .8-.3.8-.8v-3.1c-.1-.4-.4-.8-.8-.8z"/>
      <path d="M650.4 329.3c-1.1-1.9-2.5-3.4-3.7-4.7-.8-.9-1.7-1.9-2-2.5.5-.3.9-.6 1.2-1 .3-.3.3-.8 0-1.1-.3-.3-.7-.3-1-.1.3-1 1-2.3 2.4-3.4.3-.2.4-.6.2-1 0-.1-1-2-3-2-1.3 0-1.7.8-1.9 1.2-.2.3-.2.4-.5.4-.6 0-1.3-.3-2-.7-.8-.4-1.7-.9-2.7-.9-1.8 0-3.5 1.6-3.6 1.8-.2.2-.2.4-.2.6 0 .2.1.4.3.6 1.1.9 2 2 2.4 3.3v.1c-.3-.2-.7-.2-1 .1-.3.3-.3.8 0 1.1.3.3.7.7 1.2 1-.3.7-1.2 1.6-2 2.5-1.1 1.3-2.6 2.8-3.7 4.7-1.3 2.2-2 4.4-2 6.8 0 3.2 1.2 5.5 3.5 6.9 1.9 1.1 4.5 1.7 8.2 1.7 3.7 0 6.3-.5 8.2-1.7 2.3-1.4 3.5-3.7 3.5-6.9.2-2.4-.4-4.6-1.8-6.8zm-14.6-13.4c.5-.4 1.3-.8 1.9-.8.6 0 1.3.3 2 .7.8.4 1.7.9 2.7.9 1.3 0 1.7-.8 1.9-1.2.2-.3.2-.4.5-.4.6 0 1 .3 1.3.6-2.1 1.9-2.7 4.3-2.8 5.3-.6.2-1.3.2-2.4.2s-1.8-.1-2.4-.2c-.2-1-.7-3.2-2.7-5.1zm5 27.2c-7.1 0-10.1-2.1-10.1-7 0-4.6 3-8 5.2-10.4 1.1-1.2 1.9-2.1 2.3-3 .7.2 1.5.2 2.6.2s1.9-.1 2.6-.2c.4.9 1.2 1.8 2.3 3 2.2 2.4 5.2 5.8 5.2 10.4 0 4.9-3.1 7-10.1 7z"/>
    </g>
  </g>
  <g fill="#414751" class="million">
    <path d="M576.8 441.8h-9.6v-2.7l7.5-2.1-7.5-2.1v-2.7h9.6v1.6H569v.2l7.5 2.3v1.6L569 440v.2h7.9v1.6zM576.8 429.2h-9.6v-1.6h9.6v1.6zM576.8 419.3v5.4h-9.6v-1.6h8.2v-3.8h1.4zM576.8 412v5.4h-9.6v-1.6h8.2V412h1.4zM576.8 410h-9.6v-1.6h9.6v1.6zM575.8 399c.8.6 1.2 1.6 1.2 3s-.4 2.5-1.2 3c-.8.6-2 .9-3.7.9s-2.9-.3-3.8-.9c-.8-.6-1.2-1.6-1.2-3s.4-2.4 1.2-3c.8-.6 2.1-.9 3.8-.9 1.7.1 2.9.4 3.7.9zm-1 4.9c.6-.3.8-.9.8-1.8s-.3-1.5-.8-1.8c-.5-.3-1.4-.5-2.7-.5-1.3 0-2.2.2-2.8.5-.6.3-.9.9-.9 1.8s.3 1.5.9 1.8c.6.3 1.5.5 2.8.5s2.2-.2 2.7-.5zM576.8 395.7h-9.6V393l8.2-2.9v-.2h-8.2v-1.6h9.6v2.7l-8.2 3v.2h8.2v1.5zM568.5 382.6c0 1.2.4 1.8 1.2 1.8.4 0 .7-.1.9-.4.2-.3.4-.9.7-1.9.3-1 .6-1.6 1-2 .4-.4.9-.6 1.7-.6 1 0 1.8.3 2.3.9s.7 1.4.7 2.3c0 .8-.1 1.7-.3 2.6l-.1.5-1.2-.2c.2-1.3.3-2.2.3-2.9 0-1.2-.5-1.7-1.5-1.7-.4 0-.7.1-.9.4-.2.3-.4.8-.6 1.8-.2.9-.5 1.6-.9 2s-1 .7-1.9.7-1.5-.3-2-.8c-.4-.6-.7-1.3-.7-2.3 0-.7.1-1.6.3-2.5l.1-.5 1.3.1c-.4 1.2-.4 2.1-.4 2.7z"/>
  </g>
  <g fill="#414751">
    <path d="M600.3 437.8v-3.6c0-1 .2-1.7.6-2.2.4-.5 1-.7 1.9-.7.6 0 1 .1 1.3.3.3.2.6.5.8.9.4-.9 1.1-1.4 2.2-1.4 1.8 0 2.7 1 2.7 3.1v3.8h-9.5zm1.4-3.6v2h2.7v-2.1c0-.9-.5-1.4-1.4-1.4-.9.1-1.3.6-1.3 1.5zm4 0v2.1h2.8v-2.1c0-.5-.1-.9-.3-1.2s-.6-.4-1.1-.4c-.5 0-.9.1-1.1.4s-.3.7-.3 1.2zM609.9 428.5h-9.6V427h9.6v1.5zM609.9 418.7v5.4h-9.6v-1.6h8.2v-3.8h1.4zM609.9 411.3v5.4h-9.6v-1.6h8.2v-3.8h1.4zM609.9 409.4h-9.6v-1.6h9.6v1.6zM608.9 398.4c.8.6 1.2 1.6 1.2 3s-.4 2.5-1.2 3c-.8.6-2 .9-3.7.9s-2.9-.3-3.8-.9c-.8-.6-1.2-1.6-1.2-3s.4-2.4 1.2-3c.8-.6 2.1-.9 3.8-.9 1.7 0 2.9.3 3.7.9zm-1 4.8c.6-.3.8-.9.8-1.8s-.3-1.5-.8-1.8c-.5-.3-1.4-.5-2.7-.5-1.3 0-2.2.2-2.8.5-.6.3-.9.9-.9 1.8s.3 1.5.9 1.8c.6.3 1.5.5 2.8.5s2.1-.2 2.7-.5zM609.9 395h-9.6v-2.7l8.2-2.9v-.2h-8.2v-1.6h9.6v2.7l-8.2 3v.2h8.2v1.5zM601.5 381.9c0 1.2.4 1.8 1.2 1.8.4 0 .7-.1.9-.4.2-.3.4-.9.7-1.9.3-1 .6-1.6 1-2 .4-.4.9-.6 1.7-.6 1 0 1.8.3 2.3.9s.7 1.4.7 2.3c0 .8-.1 1.7-.3 2.6l-.1.5-1.2-.2c.2-1.3.3-2.2.3-2.9 0-1.2-.5-1.7-1.5-1.7-.4 0-.7.1-.9.4-.2.3-.4.8-.6 1.8-.2.9-.5 1.6-.9 2s-1 .7-1.9.7-1.5-.3-2-.8c-.4-.6-.7-1.3-.7-2.3 0-.7.1-1.6.3-2.5l.1-.5 1.3.1c-.3 1.2-.4 2.1-.4 2.7z"/>
  </g>
  <g fill="#414751">
    <path d="M637.2 446.5h-1.4v-7h1.4v2.7h8.2v1.6h-8.2v2.7zM642 435.9h3.4v1.6h-9.6v-3.6c0-2.2 1-3.2 3.1-3.2 1.4 0 2.3.5 2.8 1.6l3.8-1.6v1.7l-3.4 1.4v2.1zm-3.1-3.7c-1.1 0-1.7.6-1.7 1.7v2.1h3.5v-2.1c0-.6-.2-1-.5-1.2s-.8-.5-1.3-.5zM645.4 428.1h-9.6v-1.6h9.6v1.6zM645.4 418.3v5.4h-9.6v-1.6h8.2v-3.8h1.4zM645.4 410.9v5.4h-9.6v-1.6h8.2v-3.8h1.4zM645.4 409h-9.6v-1.6h9.6v1.6zM644.4 398c.8.6 1.2 1.6 1.2 3s-.4 2.5-1.2 3c-.8.6-2 .9-3.7.9s-2.9-.3-3.8-.9c-.8-.6-1.2-1.6-1.2-3s.4-2.4 1.2-3c.8-.6 2.1-.9 3.8-.9 1.7 0 2.9.3 3.7.9zm-1 4.8c.6-.3.8-.9.8-1.8s-.3-1.5-.8-1.8c-.5-.3-1.4-.5-2.7-.5-1.3 0-2.2.2-2.8.5-.6.3-.9.9-.9 1.8s.3 1.5.9 1.8c.6.3 1.5.5 2.8.5s2.1-.1 2.7-.5zM645.4 394.6h-9.6v-2.7l8.2-2.9v-.2h-8.2v-1.6h9.6v2.7l-8.2 3v.2h8.2v1.5zM637 381.5c0 1.2.4 1.8 1.2 1.8.4 0 .7-.1.9-.4.2-.3.4-.9.7-1.9.3-1 .6-1.6 1-2 .4-.4.9-.6 1.7-.6 1 0 1.8.3 2.3.9s.7 1.4.7 2.3c0 .8-.1 1.7-.3 2.6l-.1.5-1.2-.2c.2-1.3.3-2.2.3-2.9 0-1.2-.5-1.7-1.5-1.7-.4 0-.7.1-.9.4-.2.3-.4.8-.6 1.8-.2.9-.5 1.6-.9 2s-1 .7-1.9.7-1.5-.3-2-.8c-.4-.6-.7-1.3-.7-2.3 0-.7.1-1.6.3-2.5l.1-.5 1.3.1c-.3 1.2-.4 2.2-.4 2.7z"/>
  </g>
  <g id="effect">
    <path class="eLine" fill="none" stroke="#931429" stroke-miterlimit="10" d="M223.1 65.1h186.1"/>
    <g fill="#414751">
      <path d="M303.6 57.6V48h6v1.4h-4.5V52h3.7v1.3h-3.7v2.8h4.5v1.4h-6zM312.1 57.6V48h6v1.4h-4.4v3.2h3.7V54h-3.7v3.6h-1.6zM320.2 57.6V48h5.9v1.4h-4.4v3.2h3.7V54h-3.7v3.6h-1.5zM328.3 57.6V48h6v1.4h-4.5V52h3.7v1.3h-3.7v2.8h4.5v1.4h-6zM339.9 57.7c-1.4 0-2.3-.4-2.8-1.2-.5-.8-.7-2-.7-3.8 0-1.8.3-3 .8-3.8.5-.8 1.5-1.1 2.8-1.1.8 0 1.7.1 2.7.4l-.1 1.3c-.8-.1-1.7-.2-2.5-.2s-1.4.2-1.7.7-.4 1.4-.4 2.8.1 2.3.4 2.8c.3.5.9.7 1.7.7s1.7-.1 2.5-.2v1.3c-1 .2-1.9.3-2.7.3zM344 49.4V48h7v1.4h-2.7v8.2h-1.6v-8.2H344zM353 57.6V48h1.6v9.6H353zM362.8 48h1.6l-2.4 9.6h-3l-2.4-9.6h1.6l1.9 8.2h.7l2-8.2zM366.5 57.6V48h6v1.4H368V52h3.7v1.3H368v2.8h4.5v1.4h-6zM374.9 57.6V48h2.7l2.9 8.2h.2V48h1.6v9.6h-2.7l-3-8.2h-.2v8.2h-1.5zM385.2 57.6V48h6v1.4h-4.5V52h3.7v1.3h-3.7v2.8h4.5v1.4h-6zM396.5 49.2c-1.2 0-1.8.4-1.8 1.2 0 .4.1.7.4.9.3.2.9.4 1.9.7 1 .3 1.6.6 2 1 .4.4.6.9.6 1.7 0 1-.3 1.8-.9 2.3-.6.5-1.4.7-2.3.7-.8 0-1.7-.1-2.6-.3l-.5-.1.2-1.2c1.3.2 2.2.3 2.9.3 1.2 0 1.7-.5 1.7-1.5 0-.4-.1-.7-.4-.9-.3-.2-.8-.4-1.8-.6-.9-.2-1.6-.5-2-.9-.4-.4-.7-1-.7-1.9s.3-1.5.8-2c.6-.4 1.3-.7 2.3-.7.7 0 1.6.1 2.5.3l.5.1-.1 1.3c-1.2-.3-2.2-.4-2.7-.4zM404.8 49.2c-1.2 0-1.8.4-1.8 1.2 0 .4.1.7.4.9.3.2.9.4 1.9.7 1 .3 1.6.6 2 1 .4.4.6.9.6 1.7 0 1-.3 1.8-.9 2.3-.6.5-1.4.7-2.3.7-.8 0-1.7-.1-2.6-.3l-.5-.1.2-1.2c1.3.2 2.2.3 2.9.3 1.2 0 1.7-.5 1.7-1.5 0-.4-.1-.7-.4-.9-.3-.2-.8-.4-1.8-.6-.9-.2-1.6-.5-2-.9-.4-.4-.7-1-.7-1.9s.3-1.5.8-2c.6-.4 1.3-.7 2.3-.7.7 0 1.6.1 2.5.3l.5.1-.1 1.3c-1.2-.3-2.2-.4-2.7-.4z"/>
    </g>
  </g>
</svg>
  <h2>Global Warming Solutions</h2>
  <div class="allDialogs">
    <article class="dialog d1">
      <h3>Land Management</h3>
      <p>Plant trees &amp; plants to absorb more CO<span class="sub">2</span>, reduce tropical deforestation.</p>
    </article><!--dialog-->
    <article class="dialog d2">
      <h3>Biochar</h3>
      <p>Convert waste vegetation - leaves, straw, etc. - into charcoal &amp; bury.</p>
    </article><!--dialog-->
    <article class="dialog d3">
      <h3>B.E.C.S.</h3>
      <p>Burn biomass for fuel. Capture the resulting CO<span class="sub">2</span> &amp; bury it.</p>
    </article><!--dialog-->
    <article class="dialog d4">
      <h3>Carbon Capture</h3>
      <p>Separate out industrial CO<span class="sub">2</span> &amp; bury it undergroud in old oil wells.</p>
    </article><!--dialog-->
    <article class="dialog d5">
      <h3>Paint it White</h3>
      <p>Paint roofs, roads, &amp; pavements bright white to reflect lots of sunlight.</p>
    </article><!--dialog-->
    <article class="dialog d6">
      <h3>Carbon Scrubbers</h3>
      <p>Use giant towers &amp; artificial trees to scrub pure CO<span class="sub">2</span> from the air.</p>
    </article><!--dialog-->
    <article class="dialog d7">
      <h3>Enhanced Land Weathering</h3>
      <p>Accelerate natural CO<span class="sub">2</span> absorption by rocks by adding minerals to soil.</p>
    </article><!--dialog-->
    <article class="dialog d8">
      <h3>Enhanced Ocean Weathering</h3>
      <p class="smaller">Stir megatonnes of limestone into oceans so more CO<span class="sub">2</span> is absorbed by less acidic waters.</p>
    </article><!--dialog-->
    <article class="dialog d9">
      <h3>Cloud Whitening</h3>
      <p>Air-spray particles of sea salt to make clouds whiter &amp; reflect more sunlight.</p>
    </article><!--dialog-->
    <article class="dialog d10">
      <h3>Ocean Fertilisation</h3>
      <p>Add iron filings to surface water &amp; boost growth of CO<span class="sub">2</span> - absorbing algae.</p>
    </article><!--dialog-->
    <article class="dialog d11">
      <h3>Stratospheric Aerosols</h3>
      <p class="smaller">Scatter sulphate particles high in the atmosphere to reflect sunlight &amp; lower heat.</p>
    </article><!--dialog-->
    <article class="dialog d12">
      <h3>Space Reflectors</h3>
      <p>Launch thousands of orbiting mirrors to divert sunlight away from the surface.</p>
    </article><!--dialog-->
    <article class="dialog d13">
      <h3>Desert Reflectors</h3>
      <p>Cover vast areas of unused land with foil. No, seriously.</p>
    </article><!--dialog-->
    <article class="dialog d14">
      <h3>All-Out Nuclear War</h3>
      <p>Fill the atmosphere with terratonnes of soot, dropping temperatures.</p>
    </article><!--dialog-->
  </div><!--allDialogs-->
  <a class="replay button">Replay</a>
  <div id="slider"></div>
</div><!--container-->

CSS

              
                body {
  background: #000510;
  font-family: 'Titillium Web', sans-serif;
  width: 100%;
  height: 100%;
}

.container {
  margin: 0 auto 40px;
  display: table;
}

#svg {
  width: 825px;
  margin: 0 auto;
  display: table;
  position: absolute;
  z-index: 1;
}

.inlinesvg .fallback {
  display: none;
  visibility: hidden;
}

.no-inlinesvg .fallback {
  width: 500px;
  height: 500px;
  display: block;
}
.no-inlinesvg .fallback img {
  width: 100%;
}

h2 {
  position: relative;
  z-index: 100;
  color: #28384F;
  font-size: 25px;
  line-height: 1.2em;
  margin: 0;
}

.dialog {
  color: #BEEAE6;
  letter-spacing: 0.03em;
  position: absolute;
  z-index: 200;
  text-align: right;
  opacity: 0.7;
  margin-top: -80px;
  margin-left: 585px;
  width: 180px;
}
.dialog h3 {
  margin-bottom: 10px;
}
.dialog p {
  padding-top: 0px;
  margin-top: 0px;
}
.dialog p.smaller {
  font-size: 14px;
  line-height: 1.25em;
}

.dialog {
  visibility: hidden;
}

.sub {
  font-size: 60%;
  vertical-align: sub;
}

.button, .button:visited, .button:active {
  z-index: 2000;
  position: absolute;
  background: #23262C;
  color: #49535E;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 16px 5px;
  letter-spacing: 0.03em;
  border-radius: 5px;
  min-height: 26px;
  margin-right: 10px;
  display: inline-block;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid #000;
  outline: 0;
  cursor: pointer;
  -webkit-transition: none;
  transition: all 0.5s ease;
}
.button:hover, .button:visited:hover, .button:active:hover {
  background: #2e323a;
}

#slider {
  opacity: 0.6;
  position: absolute;
  margin: 540px auto 50px;
  display: table;
  z-index: 510;
  width: 510px;
  height: 8px;
  background: rgba(80, 80, 80, 0.3);
  border: 1px solid rgba(102, 102, 102, 0.5);
}

.ui-slider-handle {
  border-radius: 2px;
  background: #7A9293;
  position: absolute;
  display: block;
  margin-top: -3px;
  width: 14px;
  height: 14px;
  outline: none;
}

.money-sm {
  width: 90px;
  position: absolute;
  left: 8%;
  margin-top: 215px;
}

@media (max-width: 475px) {
  #svg, .fallback {
    top: 320px;
  }
}
@media (max-width: 825px) {
  .dialog {
    left: 5%;
    text-align: center;
    width: 90%;
    display: table;
    margin: 0 !important;
  }

  .button, .button:visited, .button:active {
    margin-top: 230px;
    left: 9%;
  }

  #svg, .fallback {
    top: 270px !important;
    width: 100%;
    left: 6%;
  }

  container {
    width: 100%;
  }

  #slider {
    margin: 120px auto 20px;
    width: 90%;
    left: 6%;
  }

  h2 {
    padding-top: 30px;
    width: 100%;
    text-align: center;
  }

  #box, .money-lg, .million {
    display: none;
  }
}
@media (min-width: 826px) {
  .money-sm {
    display: none;
  }

  .button, .button:visited, .button:active {
    margin-top: 400px;
    left: 64.95%;
  }

  #slider {
    margin: 540px auto 50px;
    width: 510px;
  }

  .container {
    width: 825px;
  }

  h2 {
    width: 120px;
    padding-top: 25px;
  }
}

JS

              
                var shape = document.getElementById("svg");

// media query event handler
if (matchMedia) {
        var mq = window.matchMedia("(min-width: 826px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
}
// media query change
function WidthChange(mq) {
        if (mq.matches) {
    shape.setAttribute("viewBox", "0 0 765 587");
    shape.setAttribute("enable-background", "0 0 765 587");
        }
        else {
    shape.setAttribute("viewBox", "0 0 592 588");
    shape.setAttribute("enable-background", "0 0 592 588");
        }
};

var $effect = $("#effect"),
    $circ = $(".iconCircle"),
    isFF = !!window.sidebar,
    $m1 = $(".money .one"),
    $m2 = $(".money .two"),
    $m3 = $(".money .three"),
    $eLine = $(".eLine"),
    $green = "#8DAF82",
    $blue = "#BEEAE6",
    $reg = "#414751",
    $orange = "#F47A57",
    $red = "#931429",
    $yellow = "#F9B458",
    $mReg = "#23262C";

TweenMax.set($(".dialog"), {
  visibility: "visible"
});

TweenMax.set($circ, {
  svgOrigin:"222.2, 154",
  x: 14,
  y: 58
});

//svgOrigin:"321.05, 323.3",

for (var i = 1; i < 15; i++) {
  TweenMax.set($(".d" + i), {
    opacity: 0
  });
}

// rotateInfo
function rotateInfo() {
  var tl = new TimelineMax();

  tl.add("likely");
  tl.to($(".p1"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      ease: Bounce.easeOut
    }, "likely")
    .to($effect, 0.3, {
      y: -10,
      ease: Circ.easeOut
    }, "likely")
    .to($eLine, 0.3, {
      stroke: $orange,
      ease: Sine.easeOut
    }, "likely")
    .fromTo($(".d1"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely")
    .to($m1, 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely");
  
  tl.to($(".p1"), 0.3, {
      scale: 1,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=1.25")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=1.25")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeIn
    }, "likely+=1.25")
    .to($(".d1"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=1.25")
    .to($m1, 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=1.25");
    tl.to($circ, 1, {
      rotation: -22
    }, "likely+=1.25");
  
    tl.to($(".p2"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      ease: Bounce.easeOut
    }, "likely+=2")
    .to($effect, 0.3, {
      y: -18,
      ease: Circ.easeOut
    }, "likely+=2")
    .to($eLine, 0.3, {
      stroke: $orange,
      ease: Sine.easeOut
    }, "likely+=2")
    .fromTo($(".d2"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=2")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=2");
  
  tl.to($(".p2"), 0.3, {
      scale: 1,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=3.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=3.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeIn
    }, "likely+=3.5")
    .to($(".d2"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=3.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=3.5");
      tl.to($circ, 1, {
        rotation: -41
      }, "likely+=3.5");
  
  tl.to($(".p3"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      ease: Bounce.easeOut
    }, "likely+=4")
    .to($effect, 0.3, {
      y: -20,
      ease: Circ.easeOut
    }, "likely+=4")
    .to($eLine, 0.3, {
      stroke: $orange,
      ease: Sine.easeOut
    }, "likely+=4")
    .fromTo($(".d3"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=4")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=4");
  
    tl.to($(".p3"), 0.3, {
      scale: 1,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=5.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=5.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeIn
    }, "likely+=5.5")
    .to($(".d3"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=5.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=5.5");
       tl.to($circ, 1, {
          rotation: -62
        }, "likely+=5.5");
  
    tl.to($(".p4"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      ease: Bounce.easeOut
    }, "likely+=6")
    .to($effect, 0.3, {
      y: -20,
      ease: Circ.easeOut
    }, "likely+=6")
    .to($eLine, 0.3, {
      stroke: $orange,
      ease: Sine.easeOut
    }, "likely+=6")
    .fromTo($(".d4"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=6")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=6");
  
    tl.to($(".p4"), 0.3, {
      scale: 1,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=7.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=7.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeIn
    }, "likely+=7.5")
    .to($(".d4"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=7.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=7.5");
      tl.to($circ, 1, {
        rotation: -84
      }, "likely+=7.5");
  
    tl.to($(".p5"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      ease: Bounce.easeOut
    }, "likely+=8")
    .to($effect, 0.3, {
      y: -6,
      ease: Circ.easeOut
    }, "likely+=8")
    .fromTo($(".d5"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=8")
    .to([$m1, $m2, $m3], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=8");
  
    tl.to($(".p5"), 0.3, {
      scale: 1,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=9.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=9.5")
    .to($(".d5"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=9.5")
    .to([$m1, $m2, $m3], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=9.5");
        tl.to($circ, 1, {
        rotation: -103
      }, "likely+=9.5");
  
  tl.to($(".p6"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      ease: Bounce.easeOut
    }, "likely+=10")
    .to($effect, 0.3, {
      y: -40,
      ease: Circ.easeOut
    }, "likely+=10")
    .to($eLine, 0.3, {
      stroke: $yellow,
      ease: Circ.easeOut
    }, "likely+=10")
    .fromTo($(".d6"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=10")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=10");
  
    tl.to($(".p6"), 0.3, {
      scale: 1,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=11.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=11.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeOut
    }, "likely+=11.5")
    .to($(".d6"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=11.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=11.5");
      tl.to($circ, 1, {
        rotation: -124
      }, "likely+=11.5");
    
    tl.to($(".p7"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      x: 10,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=12")
    .to($effect, 0.3, {
      y: -40,
      ease: Circ.easeOut
    }, "likely+=12")
    .to($eLine, 0.3, {
      stroke: $yellow,
      ease: Circ.easeOut
    }, "likely+=12")
    .fromTo($(".d7"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=12")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=12");
  
    tl.to($(".p7"), 0.3, {
      scale: 1,
      x: 0,
      y: 0,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=13.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=13.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeOut
    }, "likely+=13.5")
    .to($(".d7"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=13.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=13.5");
      tl.to($circ, 1, {
        rotation: -150
      }, "likely+=13.5");

    tl.to($(".p8"), 0.3, {
      scale: 1.3,
      transformOrigin: "50% 100%",
      fill: $blue,
      x: 10,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=14")
    .to($effect, 0.3, {
      y: -20,
      ease: Circ.easeOut
    }, "likely+=14")
    .to($eLine, 0.3, {
      stroke: $orange,
      ease: Circ.easeOut
    }, "likely+=14")
    .fromTo($(".d8"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=14")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=14");
  
    tl.to($(".p8"), 0.3, {
      scale: 1,
      x: 0,
      y: 0,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=15.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=15.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeOut
    }, "likely+=15.5")
    .to($(".d8"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=15.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=15.5");
     tl.to($circ, 1, {
        rotation: -176
      }, "likely+=15.5");
  
    tl.to($(".p9"), 0.3, {
      scale: 1.3,
      transformOrigin: "100% 100%",
      fill: $blue,
      x: 5,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=16")
    .to($effect, 0.3, {
      y: -35,
      ease: Circ.easeOut
    }, "likely+=16")
    .to($eLine, 0.3, {
      stroke: $yellow,
      ease: Circ.easeOut
    }, "likely+=16")
    .fromTo($(".d9"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=16")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=16");
  
    tl.to($(".p9"), 0.3, {
      scale: 1,
      x: 0,
      y: 0,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=17.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=17.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeOut
    }, "likely+=17.5")
    .to($(".d9"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=17.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=17.5");
     tl.to($circ, 1, {
        rotation: -199
      }, "likely+=17.5");
  
    tl.to($(".p10"), 0.3, {
      scale: 1.3,
      transformOrigin: "100% 100%",
      rotation: 4,
      fill: $blue,
      x: 3,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=18")
    .to($effect, 0.3, {
      y: -6,
      ease: Circ.easeOut
    }, "likely+=18")
    .fromTo($(".d10"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=18")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=18");
  
    tl.to($(".p10"), 0.3, {
      scale: 1,
      x: 0,
      y: 0,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=19.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=19.5")
    .to($(".d10"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=19.5")
    .to([$m1, $m2], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=19.5");
      tl.to($circ, 1, {
        rotation: -220
      }, "likely+=19.5");
  
    tl.to($(".p11"), 0.3, {
      scale: 1.3,
      transformOrigin: "100% 100%",
      fill: $blue,
      x: 5,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=20")
    .to($effect, 0.3, {
      y: -35,
      ease: Circ.easeOut
    }, "likely+=20")
    .to($eLine, 0.3, {
      stroke: $yellow,
      ease: Circ.easeOut
    }, "likely+=20")
    .fromTo($(".d11"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=20")
    .to($m1, 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=20");
  
    tl.to($(".p11"), 0.3, {
      scale: 1,
      x: 0,
      y: 0,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=21.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=21.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeOut
    }, "likely+=21.5")
    .to($(".d11"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=21.5")
    .to($m1, 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=21.5");
      tl.to($circ, 1, {
        rotation: -243
      }, "likely+=21.5");
  
    tl.to($(".p12"), 0.3, {
      scale: 1.3,
      transformOrigin: "100% 100%",
      fill: $blue,
      x: 5,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=22")
    .to($effect, 0.3, {
      y: -35,
      ease: Circ.easeOut
    }, "likely+=22")
    .to($eLine, 0.3, {
      stroke: $yellow,
      ease: Circ.easeOut
    }, "likely+=22")
    .fromTo($(".d12"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=22")
    .to([$m1, $m2, $m3], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=22");
  
    tl.to($(".p12"), 0.3, {
      scale: 1,
      x: 0,
      y: 0,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=23.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=23.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeOut
    }, "likely+=23.5")
    .to($(".d12"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=23.5")
    .to([$m1, $m2, $m3], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=23.5");
      tl.to($circ, 1, {
        rotation: -265
    }, "likely+=23.5");
  
    tl.to($(".p13"), 0.3, {
      scale: 1.3,
      transformOrigin: "100% 100%",
      fill: $blue,
      x: 5,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=24")
    .to($effect, 0.3, {
      y: -15,
      ease: Circ.easeOut
    }, "likely+=24")
    .to($eLine, 0.3, {
      stroke: $orange,
      ease: Circ.easeOut
    }, "likely+=24")
    .fromTo($(".d13"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=24")
    .to([$m1, $m2, $m3], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=24");
  
    tl.to($(".p13"), 0.3, {
      scale: 1,
      x: 0,
      y: 0,
      transformOrigin: "50% 100%",
      fill: $reg,
      ease: Back.easeIn
    }, "likely+=25.5")
    .to($effect, 0.3, {
      y: 0,
      ease: Circ.easeIn
    }, "likely+=25.5")
    .to($eLine, 0.3, {
      stroke: $red,
      ease: Sine.easeOut
    }, "likely+=25.5")
    .to($(".d13"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, "likely+=25.5")
    .to([$m1, $m2, $m3], 0.3, {
      fill: $mReg,
      ease: Circ.easeIn
    }, "likely+=25.5");
       tl.to($circ, 1, {
        rotation: -287
      }, "likely+=25.5");
  
    tl.to($(".p14"), 0.3, {
      scale: 1.3,
      transformOrigin: "100% 100%",
      fill: $blue,
      x: 5,
      y: 10,
      ease: Bounce.easeOut
    }, "likely+=26")
    .to($effect, 0.3, {
      y: -20,
      ease: Circ.easeOut
    }, "likely+=26")
    .to($eLine, 0.3, {
      stroke: $orange,
      ease: Circ.easeOut
    }, "likely+=26")
    .fromTo($(".d14"), 0.3, {
      opacity: 0,
      scale: 0.7 
    }, {
      opacity: 1,
      scale: 1,
      ease: Back.easeOut
    }, "likely+=26")
    .to([$m1, $m2], 0.3, {
      fill: $green,
      ease: Circ.easeOut
    }, "likely+=26");
  
  tl.timeScale(0.7);

  return tl;
}

var master = new TimelineMax();
master.add(rotateInfo(), "rotateInfo");

//master.seek("rotateInfo+=24");

$(document).on('click', 'a.replay', function(e) {
  master.restart();
  e.preventDefault();
});

var slider = $("#slider"),
    sliderValue = {value:0};

slider.slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  start:function() {
    master.pause();
  },
  slide: function ( event, ui ) {
    master.progress( ui.value / 100 );
  },
  stop:function() {
    master.play();
  }
});

master.eventCallback("onUpdate", function() {
  sliderValue.value = master.progress() * 100;
  slider.slider(sliderValue);
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions