Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                    <p class="info">[Scroll a tiny bit to trigger the animations]<br/>[Resize the browser window down to see the alternate animation choreography.]</p>
<div class="facts">
    <div class="group">
    <div class="fact1">
        <h4>Inefficiencies</h4>
        <p>25% of all of the pension plans in the U.S. are in Pennsylvania, even though only 4% of the U.S. population is in PA.</p>
          <figure>
            <svg id="ineff"" viewBox="0 0 93 93">
    <circle class="circle" fill-rule="evenodd" clip-rule="evenodd" fill="#B8C76A" cx="46.5" cy="46.5" r="46.5"/>
    <g class="large"><g><path fill="#FFFFFF" d="M23.3 51.5c0-0.1 0-0.2 0.1-0.3l5.7-6c0.6-0.6 0.8-1.1 0.8-1.8 0-0.8-0.4-1.2-1.1-1.2 -0.7 0-1.2 0.4-1.3 1.7 0 0.1-0.1 0.2-0.3 0.2l-3.8-0.5c-0.1 0-0.2-0.1-0.2-0.3 0.1-3 2.6-5 5.8-5s5.5 2 5.5 4.9c0 1.8-0.7 3.1-1.9 4.3L29.3 51v0h5.1c0.1 0 0.2 0.1 0.2 0.2v3.5c0 0.1-0.1 0.2-0.2 0.2H23.5c-0.1 0-0.2-0.1-0.2-0.2V51.5z"/><path fill="#FFFFFF" d="M37.3 50.8l3.8-0.5c0.2 0 0.3 0.1 0.3 0.2 0.2 0.5 0.5 0.9 1.2 0.9 0.5 0 0.8-0.2 1-0.7 0.1-0.3 0.1-0.6 0.1-1.2 0-0.5 0-0.9-0.1-1.2 -0.2-0.5-0.5-0.7-1-0.7 -0.5 0-0.8 0.2-1 0.6 -0.1 0.1-0.2 0.2-0.3 0.2h-3.7c-0.1 0-0.2-0.1-0.2-0.2v-9.4c0-0.1 0.1-0.2 0.2-0.2h10c0.1 0 0.2 0.1 0.2 0.2v3.5c0 0.1-0.1 0.2-0.2 0.2h-6.1c-0.1 0-0.1 0-0.1 0.1V45h0c0.5-0.5 1.2-1 2.6-1 2 0 3.5 0.8 4.1 2.7 0.2 0.6 0.3 1.4 0.3 2.9 0 0.9-0.1 1.7-0.4 2.4 -0.7 2.2-2.7 3.3-5.4 3.3 -3.4 0-5.4-1.8-5.5-4.2C37.1 51 37.2 50.9 37.3 50.8z"/>
      <path fill="#FFFFFF" d="M51.2 45c-0.1-0.4-0.3-1.1-0.3-2.2 0-1.1 0.1-1.8 0.3-2.2 0.4-1.3 1.6-2.1 3.4-2.1 1.8 0 3 0.8 3.4 2.1 0.1 0.4 0.3 1.1 0.3 2.2 0 1.1-0.1 1.8-0.3 2.2 -0.4 1.3-1.6 2.1-3.4 2.1C52.8 47.1 51.6 46.3 51.2 45zM63.2 38.6c0.1-0.2 0.2-0.2 0.4-0.2h2.9c0.1 0 0.2 0.1 0.1 0.2L57.1 55c-0.1 0.2-0.2 0.2-0.4 0.2h-2.9c-0.1 0-0.2-0.1-0.1-0.2L63.2 38.6zM55.1 44.5c0-0.2 0.1-0.3 0.1-1.8 0-1.4 0-1.6-0.1-1.8 -0.1-0.2-0.2-0.3-0.5-0.3 -0.2 0-0.4 0.1-0.5 0.3 0 0.2-0.1 0.3-0.1 1.8 0 1.4 0 1.6 0.1 1.8 0.1 0.2 0.2 0.3 0.5 0.3C54.9 44.8 55 44.8 55.1 44.5zM62 50.9c0-1.1 0.1-1.8 0.3-2.2 0.4-1.3 1.6-2.1 3.4-2.1 1.8 0 3 0.8 3.4 2.1 0.1 0.4 0.3 1.1 0.3 2.2 0 1.1-0.1 1.8-0.3 2.2 -0.4 1.3-1.6 2.1-3.4 2.1 -1.8 0-3-0.8-3.4-2.1C62.1 52.6 62 52 62 50.9zM65.7 53c0.2 0 0.4-0.1 0.5-0.3 0-0.2 0.1-0.3 0.1-1.8s0-1.6-0.1-1.8c-0.1-0.2-0.2-0.3-0.5-0.3s-0.4 0.1-0.5 0.3c0 0.2-0.1 0.3-0.1 1.8s0 1.6 0.1 1.8C65.3 52.9 65.5 53 65.7 53z"/></g></g>
    <g class="small"><g><path fill="#FFFFFF" d="M27.4 53.4v-3.8c0-0.1 0-0.2 0-0.3l4-9.7c0-0.1 0.1-0.2 0.4-0.2h4.6c0.2 0 0.2 0.1 0.2 0.3l-4.1 9.7v0.1h1.5c0.1 0 0.1 0 0.1-0.1v-2.2c0-0.1 0.1-0.2 0.2-0.2h4c0.1 0 0.2 0.1 0.2 0.2v2.2c0 0.1 0 0.1 0.1 0.1h0.8c0.1 0 0.2 0.1 0.2 0.2v3.6c0 0.1-0.1 0.2-0.2 0.2h-0.8c-0.1 0-0.1 0-0.1 0.1v1.8c0 0.1-0.1 0.2-0.2 0.2h-4c-0.1 0-0.2-0.1-0.2-0.2v-1.8c0-0.1 0-0.1-0.1-0.1h-6.3C27.5 53.7 27.4 53.6 27.4 53.4z"/><path fill="#FFFFFF" d="M42 45.8c-0.1-0.4-0.3-1.1-0.3-2.2s0.1-1.8 0.3-2.2c0.4-1.3 1.6-2.1 3.4-2.1s3 0.8 3.4 2.1c0.1 0.4 0.3 1.1 0.3 2.2s-0.1 1.8-0.3 2.2c-0.4 1.3-1.6 2.1-3.4 2.1S42.5 47.1 42 45.8zM54 39.5c0.1-0.2 0.2-0.2 0.4-0.2h2.9c0.1 0 0.2 0.1 0.1 0.2L48 55.9c-0.1 0.2-0.2 0.2-0.4 0.2h-2.9c-0.1 0-0.2-0.1-0.1-0.2L54 39.5zM45.9 45.4c0-0.2 0.1-0.3 0.1-1.8s0-1.6-0.1-1.8c-0.1-0.2-0.2-0.3-0.5-0.3 -0.2 0-0.4 0.1-0.5 0.3 0 0.2-0.1 0.3-0.1 1.8s0 1.6 0.1 1.8c0.1 0.2 0.2 0.3 0.5 0.3C45.7 45.7 45.9 45.6 45.9 45.4zM52.8 51.7c0-1.1 0.1-1.8 0.3-2.2 0.4-1.3 1.6-2.1 3.4-2.1s3 0.8 3.4 2.1c0.1 0.4 0.3 1.1 0.3 2.2s-0.1 1.8-0.3 2.2c-0.4 1.3-1.6 2.1-3.4 2.1s-3-0.8-3.4-2.1C53 53.5 52.8 52.9 52.8 51.7zM56.5 53.8c0.2 0 0.4-0.1 0.5-0.3 0-0.2 0.1-0.3 0.1-1.8s0-1.6-0.1-1.8c-0.1-0.2-0.2-0.3-0.5-0.3s-0.4 0.1-0.5 0.3c0 0.2-0.1 0.3-0.1 1.8s0 1.6 0.1 1.8C56.2 53.7 56.3 53.8 56.5 53.8z"/></g></g>
    </svg>

          </figure>
      </div>
      <div class="fact2">
        <h4>HALF DISTRESSED</h4>
        <p>Nearly half of local governments in PA offering pensions have distressed plans.</p>
        <figure>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="half-distressed" x="0px" y="0px" viewBox="0 0 311 107" enable-background="new 0 0 311 107" xml:space="preserve">
            <circle class="circ1" fill="#B8C76A" cx="65.7" cy="28.9" r="18.5"/>
            <circle class="circ2" fill="#B8C76A" cx="127.7" cy="28.9" r="18.5"/>
            <circle class="circ3" fill="#B8C76A" cx="189.7" cy="28.9" r="18.5"/>
            <circle class="circ4" fill="#B8C76A" cx="251.7" cy="28.9" r="18.5"/>
            <circle class="circ5" fill="#B8C76A" cx="65.7" cy="81.9" r="18.5"/>
            <circle class="circ6" fill="#B8C76A" cx="127.7" cy="81.9" r="18.5"/>
            <circle class="circ7" fill="#B8C76A" cx="189.7" cy="81.9" r="18.5"/>
            <circle class="circ8" fill="#B8C76A" cx="251.7" cy="81.9" r="18.5"/>
          </svg>      
    
        </figure>
          </div>
      <div class="fact3">
        <h4>Tough Decisions</h4>
        <p>Communities are faced with cutting basic services in order to fund pension promises. </p>
          <figure>
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="decisions" x="0px" y="0px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
          <path class="d11" fill="#B0BF5A" d="M771.4 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C770.8 484.2 770.8 483.1 771.4 482.4z"/>
          <path class="d10" fill="#B0BF5A" d="M901.1 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C900.5 484.2 900.5 483.1 901.1 482.4z"/>
          <path class="d9" fill="#B0BF5A" d="M4.6 482.4L19 465c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3C18.3 456.2 7 445.1 7 427.9c0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5H33.8c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C4.1 484.2 4.1 483.1 4.6 482.4z"/>
          <path class="d8" fill="#B0BF5A" d="M134.3 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L190 422.8c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C133.7 484.2 133.7 483.1 134.3 482.4z"/>
          <path class="d7" fill="#B0BF5A" d="M264 482.4l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C263.4 484.2 263.4 483.1 264 482.4z"/>
          <path class="d6" fill="#B0BF5A" d="M4.6 315.5L19 298.1c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3C18.3 289.2 7 278.2 7 261c0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4V340c0 0.9-0.6 1.5-1.5 1.5H33.8c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C4.1 317.2 4.1 316.2 4.6 315.5z"/>
          <path class="d5" fill="#B0BF5A" d="M134.3 315.5l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L190 255.9c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4V340c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C133.7 317.2 133.7 316.2 134.3 315.5z"/>
          <path class="d4p" fill="#B0BF5A" d="M264 315.5l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5v-11.7c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4V340c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C263.4 317.2 263.4 316.2 264 315.5z"/>
         <path class="d3" fill="#B0BF5A" d="M4.6 151L19 133.6c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3C18.3 124.7 7 113.7 7 96.4c0-16 9.4-28.7 25.4-32.5V52.2c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L60.3 91.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5H33.8c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C4.1 152.7 4.1 151.7 4.6 151z"/>
          <path class="d2" fill="#B0BF5A" d="M134.3 151l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5V52.2c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5L190 91.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C133.7 152.7 133.7 151.7 134.3 151z"/>
          <path class="d1" fill="#B0BF5A" d="M264 151l14.4-17.4c0.6-0.7 1.2-0.9 1.9-0.3 4.5 3.6 10.9 6.7 16.8 6.7 5.8 0 9.6-2.5 9.6-7.1 0-3.3-2.2-5.1-7.1-5.7l-2.6-0.3c-19.3-2.2-30.6-13.2-30.6-30.5 0-16 9.4-28.7 25.4-32.5V52.2c0-0.9 0.6-1.5 1.5-1.5h15.4c0.9 0 1.5 0.6 1.5 1.5v11.2c9.3 1.3 16.7 4.8 21.8 8.1 0.9 0.6 1 1.5 0.3 2.5l-12.3 17.4c-0.6 0.7-1.3 0.9-2 0.4 -4.6-2.9-8.6-4.1-13.2-4.1 -5.2 0-8.8 2.3-8.8 6.1 0 3 2 4.6 7.3 5.4l3.5 0.4c20.3 2.5 29.6 13.3 29.6 30.6 0 16.8-9.7 29.4-26 33.4v11.9c0 0.9-0.6 1.5-1.5 1.5h-15.4c-0.9 0-1.5-0.6-1.5-1.5v-11c-11.3-1.3-21.2-5.8-27.4-11C263.4 152.7 263.4 151.7 264 151z"/>
          <g enable-background="new">
            <path fill="#080808" d="M5.1 586.2c0-0.4 0.3-0.7 0.7-0.7h19c10.2 0 14.8 4.8 14.8 11.8 0 4.3-2 7.7-5.6 9.6v0.1c3.6 1.4 6.4 5.2 6.4 10.2 0 8.5-6.5 12.6-15.6 12.6h-19c-0.4 0-0.7-0.3-0.7-0.7V586.2zM21.3 602.9c3.2 0 4.7-1 4.7-3.9 0-2.9-1.4-3.9-4.7-3.9h-2.2c-0.3 0-0.4 0.1-0.4 0.4v6.9c0 0.3 0.1 0.4 0.4 0.4H21.3zM19.2 620.1H22c3.2 0 4.6-1.3 4.6-4.4 0-2.7-1.4-4.3-4.6-4.3h-2.9c-0.3 0-0.4 0.1-0.4 0.4v7.9C18.8 620 18.9 620.1 19.2 620.1z"/>
            <path fill="#080808" d="M57.5 586.2c0.1-0.4 0.4-0.7 0.8-0.7h13.3c0.5 0 0.7 0.3 0.8 0.7l15 43.1c0.1 0.4-0.1 0.7-0.5 0.7H73.8c-0.5 0-0.7-0.3-0.8-0.7l-1.6-5.8H58.3l-1.6 5.8c-0.1 0.4-0.4 0.7-0.8 0.7H42.5c-0.4 0-0.6-0.3-0.5-0.7L57.5 586.2zM68.2 612.3L65 600.4h-0.2l-3.4 11.8H68.2z"/>
            <path fill="#080808" d="M89.2 624.1c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5 1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C100.2 630.7 92.6 627.6 89.2 624.1z"/>
            <path fill="#080808" d="M131 586.2c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V586.2z"/>
            <path fill="#080808" d="M149.6 607.7c0-6.3 0.3-8.9 1.4-12 2.3-7.2 8.2-11 16.4-11 8.3 0 14.1 3.8 16.5 10.4 0.2 0.5 0.1 0.7-0.3 0.9l-10.5 4.5c-0.5 0.2-0.8 0.1-1-0.5 -1-2.2-2.2-3.3-4.4-3.3 -1.9 0-3.2 0.8-3.8 2.7 -0.3 1-0.5 2.2-0.5 8.2 0 5.9 0.2 7.1 0.5 8.2 0.6 1.8 1.9 2.7 3.8 2.7 2.2 0 3.4-1 4.4-3.3 0.2-0.5 0.5-0.7 1-0.5l10.5 4.5c0.5 0.2 0.5 0.5 0.3 0.9 -2.4 6.7-8.2 10.4-16.5 10.4 -8.2 0-14.1-3.7-16.4-11C149.9 616.6 149.6 614 149.6 607.7z"/>
            <path fill="#080808" d="M202.6 607.7c0-6.3 0.3-8.9 1.4-12 2.3-7.2 8.2-11 16.4-11 8.3 0 14.1 3.8 16.5 10.4 0.2 0.5 0.1 0.7-0.3 0.9l-10.5 4.5c-0.5 0.2-0.8 0.1-1-0.5 -1-2.2-2.2-3.3-4.4-3.3 -1.9 0-3.2 0.8-3.8 2.7 -0.3 1-0.5 2.2-0.5 8.2 0 5.9 0.2 7.1 0.5 8.2 0.6 1.8 1.9 2.7 3.8 2.7 2.2 0 3.4-1 4.4-3.3 0.2-0.5 0.5-0.7 1-0.5l10.5 4.5c0.5 0.2 0.5 0.5 0.3 0.9 -2.4 6.7-8.2 10.4-16.5 10.4 -8.2 0-14.1-3.7-16.4-11C202.9 616.6 202.6 614 202.6 607.7z"/>
            <path fill="#080808" d="M240.8 586.2c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V586.2z"/>
            <path fill="#080808" d="M270 629.9c-0.4 0-0.7-0.3-0.7-0.7V598c0-0.3-0.1-0.4-0.4-0.4h-10.5c-0.4 0-0.7-0.3-0.7-0.7v-10.8c0-0.4 0.3-0.7 0.7-0.7h35.5c0.4 0 0.7 0.3 0.7 0.7V597c0 0.4-0.3 0.7-0.7 0.7h-10.5c-0.3 0-0.4 0.1-0.4 0.4v31.2c0 0.4-0.3 0.7-0.7 0.7H270z"/>
            <path fill="#080808" d="M309.7 629.9c-0.4 0-0.7-0.3-0.7-0.7v-15.9l-13.8-27.1c-0.2-0.4 0-0.7 0.5-0.7h12.3c0.5 0 0.8 0.2 1.1 0.7l6.8 13.9h0.2l6.6-13.9c0.2-0.5 0.6-0.7 1.1-0.7h12.2c0.5 0 0.7 0.3 0.5 0.7l-13.8 27.1v15.9c0 0.4-0.3 0.7-0.7 0.7H309.7z"/>
          </g>
          <g enable-background="new    ">
            <path fill="#080808" d="M24.2 703.9c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5 1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C35.3 710.4 27.6 707.4 24.2 703.9z"/>
            <path fill="#080808" d="M66.1 665.9c0-0.4 0.3-0.7 0.7-0.7h29.7c0.4 0 0.7 0.3 0.7 0.7V676c0 0.4-0.3 0.7-0.7 0.7H80c-0.3 0-0.4 0.1-0.4 0.4v4.3c0 0.3 0.1 0.4 0.4 0.4h13.1c0.4 0 0.7 0.3 0.7 0.7v9.8c0 0.4-0.3 0.7-0.7 0.7H80c-0.3 0-0.4 0.1-0.4 0.4v4.7c0 0.3 0.1 0.4 0.4 0.4h16.4c0.4 0 0.7 0.3 0.7 0.7V709c0 0.4-0.3 0.7-0.7 0.7H66.7c-0.4 0-0.7-0.3-0.7-0.7V665.9z"/>
            <path fill="#080808" d="M124.9 709.6c-0.6 0-0.8-0.2-1-0.7l-5.7-13.8h-2.3c-0.3 0-0.4 0.1-0.4 0.4V709c0 0.4-0.3 0.7-0.7 0.7h-12.3c-0.4 0-0.7-0.3-0.7-0.7v-43.1c0-0.4 0.3-0.7 0.7-0.7h18.5c11.4 0 17.1 6.3 17.1 14.9 0 5.4-2.2 9.9-6.7 12.5l7.4 16.2c0.1 0.3 0 0.7-0.5 0.7H124.9zM124.5 680.4c0-2.3-1.5-3.8-4.4-3.8h-4.1c-0.3 0-0.4 0.1-0.4 0.4v6.8c0 0.3 0.1 0.4 0.4 0.4h4.1C123 684.2 124.5 682.8 124.5 680.4z"/>
            <path fill="#080808" d="M154.9 709.6c-0.5 0-0.8-0.2-0.9-0.7l-14.2-42.9c-0.1-0.5 0.1-0.8 0.6-0.8h13.2c0.5 0 0.8 0.2 0.9 0.7l6.8 24h0.2l6.5-24c0.1-0.5 0.4-0.7 0.9-0.7h13.1c0.5 0 0.7 0.3 0.6 0.8L168.3 709c-0.1 0.5-0.4 0.7-0.9 0.7H154.9z"/>
            <path fill="#080808" d="M185.8 665.9c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7V709c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V665.9z"/>
            <path fill="#080808" d="M204.4 687.5c0-6.3 0.3-8.9 1.4-12 2.3-7.2 8.2-11 16.4-11 8.3 0 14.1 3.8 16.5 10.4 0.2 0.5 0.1 0.7-0.3 0.9l-10.5 4.5c-0.5 0.2-0.8 0.1-1-0.5 -1-2.2-2.2-3.3-4.4-3.3 -1.9 0-3.2 0.8-3.8 2.7 -0.3 1-0.5 2.2-0.5 8.2 0 5.9 0.2 7.1 0.5 8.2 0.6 1.8 1.9 2.7 3.8 2.7 2.2 0 3.4-1 4.4-3.3 0.2-0.5 0.5-0.7 1-0.5l10.5 4.5c0.5 0.2 0.5 0.5 0.3 0.9 -2.4 6.7-8.2 10.4-16.5 10.4 -8.2 0-14.1-3.7-16.4-11C204.7 696.3 204.4 693.8 204.4 687.5z"/>
            <path fill="#080808" d="M242.6 665.9c0-0.4 0.3-0.7 0.7-0.7H273c0.4 0 0.7 0.3 0.7 0.7V676c0 0.4-0.3 0.7-0.7 0.7h-16.4c-0.3 0-0.4 0.1-0.4 0.4v4.3c0 0.3 0.1 0.4 0.4 0.4h13.1c0.4 0 0.7 0.3 0.7 0.7v9.8c0 0.4-0.3 0.7-0.7 0.7h-13.1c-0.3 0-0.4 0.1-0.4 0.4v4.7c0 0.3 0.1 0.4 0.4 0.4H273c0.4 0 0.7 0.3 0.7 0.7V709c0 0.4-0.3 0.7-0.7 0.7h-29.7c-0.4 0-0.7-0.3-0.7-0.7V665.9z"/>
            <path fill="#080808" d="M276.9 703.9c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5 1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C287.9 710.4 280.3 707.4 276.9 703.9z"/>
          </g>
          <g id="Pensions" enable-background="new    ">
            <path fill="#080808" d="M725.4 629.9c-0.4 0-0.7-0.3-0.7-0.7v-43.1c0-0.4 0.3-0.7 0.7-0.7h18.3c12.2 0 17.6 6.5 17.6 15.3 0 8.6-5.5 15.3-17.6 15.3h-5c-0.3 0-0.4 0.1-0.4 0.4v12.7c0 0.4-0.3 0.7-0.7 0.7H725.4zM747.6 600.8c0-2.5-1.6-4-4.6-4h-4.2c-0.3 0-0.4 0.1-0.4 0.4v7.2c0 0.3 0.1 0.4 0.4 0.4h4.2C746 604.8 747.6 603.3 747.6 600.8z"/>
            <path fill="#080808" d="M765.2 586.2c0-0.4 0.3-0.7 0.7-0.7h29.7c0.4 0 0.7 0.3 0.7 0.7v10.1c0 0.4-0.3 0.7-0.7 0.7h-16.4c-0.3 0-0.4 0.1-0.4 0.4v4.3c0 0.3 0.1 0.4 0.4 0.4h13.1c0.4 0 0.7 0.3 0.7 0.7v9.8c0 0.4-0.3 0.7-0.7 0.7h-13.1c-0.3 0-0.4 0.1-0.4 0.4v4.7c0 0.3 0.1 0.4 0.4 0.4h16.4c0.4 0 0.7 0.3 0.7 0.7v10.1c0 0.4-0.3 0.7-0.7 0.7h-29.7c-0.4 0-0.7-0.3-0.7-0.7V586.2z"/>
            <path fill="#080808" d="M801 586.2c0-0.4 0.3-0.7 0.7-0.7h11.7c0.4 0 0.9 0.2 1.1 0.7l10.6 21.9h0.3v-21.9c0-0.4 0.3-0.7 0.7-0.7h11c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-11.7c-0.4 0-0.9-0.2-1.1-0.7l-10.5-21.9h-0.4v21.9c0 0.4-0.3 0.7-0.7 0.7h-11c-0.4 0-0.7-0.3-0.7-0.7V586.2z"/>
            <path fill="#080808" d="M841.9 624.1c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5 1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C852.9 630.7 845.3 627.6 841.9 624.1z"/>
            <path fill="#080808" d="M883.7 586.2c0-0.4 0.3-0.7 0.7-0.7h12.4c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-12.4c-0.4 0-0.7-0.3-0.7-0.7V586.2z"/>
            <path fill="#080808" d="M903.6 619.6c-1.2-3.7-1.4-6.4-1.4-11.9 0-5.5 0.2-8.2 1.4-11.9 2.4-7.4 9.2-11 17.2-11s14.7 3.6 17.2 11c1.2 3.7 1.4 6.4 1.4 11.9 0 5.5-0.2 8.2-1.4 11.9 -2.4 7.4-9.2 11-17.2 11S906.1 627.1 903.6 619.6zM925 615.7c0.5-1.4 0.5-3.3 0.5-8 0-4.7-0.1-6.6-0.5-8 -0.6-1.8-2.2-2.8-4.2-2.8s-3.6 1-4.2 2.8c-0.5 1.4-0.5 3.3-0.5 8 0 4.7 0.1 6.6 0.5 8 0.6 1.8 2.2 2.8 4.2 2.8S924.4 617.5 925 615.7z"/>
            <path fill="#080808" d="M944.2 586.2c0-0.4 0.3-0.7 0.7-0.7h11.7c0.4 0 0.9 0.2 1.1 0.7l10.6 21.9h0.3v-21.9c0-0.4 0.3-0.7 0.7-0.7h11c0.4 0 0.7 0.3 0.7 0.7v43.1c0 0.4-0.3 0.7-0.7 0.7h-11.7c-0.4 0-0.9-0.2-1.1-0.7l-10.5-21.9h-0.4v21.9c0 0.4-0.3 0.7-0.7 0.7h-11c-0.4 0-0.7-0.3-0.7-0.7V586.2z"/>
            <path fill="#080808" d="M985 624.1c-0.3-0.3-0.4-0.8-0.1-1.2l6.9-8.2c0.3-0.3 0.6-0.3 0.8-0.1 2.5 2.2 6.7 4.3 10.8 4.3 3.5 0 5.1-1.1 5.1-2.9 0-1.2-0.8-1.9-4.2-2.3l-2.3-0.3c-10.2-1.4-15.6-5.9-15.6-14.7 0-8.4 6.7-14.1 17.3-14.1 6.6 0 12.5 1.9 16.8 5.1 0.4 0.3 0.5 0.7 0.1 1.1l-5.9 8.4c-0.3 0.3-0.6 0.4-0.9 0.2 -2.9-1.9-6.2-3.2-9.6-3.2 -2.6 0-3.8 1-3.8 2.4 0 1.3 1 2 4.2 2.4l2.3 0.3c10.5 1.4 15.5 5.9 15.5 14.7 0 8.4-6.6 14.5-19 14.5C996.1 630.7 988.4 627.6 985 624.1z"/>
          </g>
        </svg>
  </figure>

      </div>
      
    </div>
   
     
              
            
!

CSS

              
                // go go google fonts for something kind of close to DIN
@import url(https://fonts.googleapis.com/css?family=Lato:300,900);

//quick type styles to make things fit like they did on the real thing
body {
  font-family: lato, helvetica, arial, "sans-serif";
  	background: #f4f6ff;
}
h4 {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.2rem;
  margin-bottom: 0;
}
.info {
  text-align: center;
  margin: 1em auto;
}

p {
  font-weight: 300;
  line-height: 1.3;
  margin-top: .5em;
}

//layout for the fact boxes
.facts {	
	min-height: 300px;
	max-width: 1440px;
	margin: 10em auto 40em auto;
	z-index: 100;
	position:relative;
	background: #f4f6ff;
  
	
	.arrow-cover {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    width: 100%;
    height: auto;
    
    img {
       margin: 0 auto;
    }
  }

  	h4 {
		text-align: center;
	}

	p{
		text-align: center;
		line-height: 1.4;
		font-size: 1.2em;
	}
	
	.group {
		padding:0 20px 7%;
		margin: 0 auto;
	}
}


#ineff {
	width: 38%;
	max-width: 250px;
	margin: 0 auto;
	display: block;
}
 
#half-distressed {
	margin: 0 auto;
	display:block;
	width:80%;
	max-width: 300px;
}

#decisions {
	margin: 0 auto;
	display:block;
	width: 70%;
	max-width: 300px;
}

.fact1, .fact2, .fact3 {
	width: 90%;
	margin: 0 auto 3em auto;
	padding-bottom: 5%;
}


 @media screen and (min-width: 550px) {
	.fact1, .fact2, .fact3 {
	width: 75%;
	}
 }

 @media screen and (min-width: 800px) {
	.fact1, .fact2, .fact3 {
		width: 30%;
		float: left;
		margin:0 1.5%;
	}

	.fact3 {
	margin-right: 0;
	}
}



              
            
!

JS

              
                function sceneOne() {
	var f1 = $("#ineff"),
  largePerc = $(".large"),
  smallPerc = $(".small"),
  circle = $(".circle");

  console.log(TweenLite);
  //set starting states
    TweenLite.set(largePerc, {visibility:"hidden"});
    TweenLite.set(smallPerc, {scale:".7", transformOrigin:"50% 50%", x:2});

	//instantiate a TimelineLite    
	var tl = new TimelineLite();
	tl.add("f1start")
	.from(circle, .5, {scale:.4, transformOrigin:"50% 50%", ease: Back.easeIn.config(1.4)}, "fact1")
	.to(smallPerc, 0.25, {autoAlpha:0}, "fact1+=.15")
	.to(circle, 0.5, {fill:"#e32318"}, "fact1+=.25")
	.to(largePerc, 0.5, {autoAlpha:1}, "fact1+=.25");

	return tl;
}
function sceneTwo() {
	var c1 = $(".circ1"),
		c2 = $(".circ2"),
		c3 = $(".circ3"),
		c4 = $(".circ4"),
		c5 = $(".circ5"),
		c6 = $(".circ6"),
		c7 = $(".circ7"),
		c8 = $(".circ8");

		var dur = .4;
		var tl2 = new TimelineLite();

		tl2.add("f2start")
		.to(c1, dur, {attr:{cx:"-=20"}, ease:Back.easeIn.config(1.4)}, "split")
		.to(c2, dur, {attr:{cx:"-=20"}, ease: Back.easeIn.config(1.4)}, "split")
		.to(c5, dur, {attr:{cx:"-=20"}, ease: Back.easeIn.config(1.4)}, "split")
		.to(c6, dur, {attr:{cx:"-=20"}, ease: Back.easeIn.config(1.4)}, "split")

		.to(c3, dur, {attr:{cx:"+=20"}, ease:Back.easeIn.config(1.4)}, "split")
		.to(c4, dur, {attr:{cx:"+=20"}, ease:Back.easeIn.config(1.4)}, "split")
		.to(c7, dur, {attr:{cx:"+=20"}, ease:Back.easeIn.config(1.4)}, "split")
		.to(c8, dur, {attr:{cx:"+=20"}, ease:Back.easeIn.config(1.4)}, "split")

		.delay(.3)
		.to(c1, .9, {fill:"#e32318", ease: Bounce.easeInOut}, "colour")
		.to(c2, .9, {fill:"#e32318", ease: Bounce.easeInOut}, "colour+=.2")
		.to(c5, .9, {fill:"#e32318", ease: Bounce.easeInOut}, "colour+=.4")
		.to(c6, .9, {fill:"#e32318", ease: Bounce.easeInOut}, "colour+=.6");
		return tl2;
}

function sceneThree() {
	var d1 = $(".d1"),
		d2 = $(".d2"),
		d4 = $(".d4p"),
		d5 = $(".d5");	

	var tl3 = new TimelineLite();
		tl3.add("f3start")
		.to(d4,.75, {x:"+=642", ease:Back.easeIn.config(1)}, "sendOver")
		.to(d5,.75, {x:"+=642", ease:Back.easeIn.config(1)}, "sendOver+=.25")
		.to(d2,.4, {y:"+=160", ease:Back.easeIn.config(1.4)}, "sendOver+=.75")
		.to(d1,.4, {y:"+=160", ease:Back.easeIn.config(1.4)}, "sendOver+=.85");

		return tl3;
}

$(document).ready(function() {

	//main timilne for animation
	var master = new TimelineLite;
	master.paused(true)
	.add(sceneOne(), "s1")
	.add(sceneTwo(), "s2")
	.add(sceneThree(), "s3");
	
	var startPoint = $('.facts').offset().top - 100;
	var fact1Point = $('.fact1').offset().top -100;
	var fact2Point = $('.fact2').offset().top - 100;
	var fact3Point = $('.fact3').offset().top - 100;
	//play animation on scroll position reached - wide view
	if ($(window).width() > 800){
		$(window).scroll(function(){
			if ($(this).scrollTop() > startPoint){
				master.paused(false);
				$(window).unbind('scroll');
			}
		});
	} else if ($(window).width() < 800){
		var play1 = "false",
			play2 = "false",
			play3 = "false";		
		$(window).scroll(function(){
		 	var curTop = $(this).scrollTop();
		
			if ((curTop > fact1Point) && (play1 =="false")){
				play1 = "true";
			} 

			if ((curTop > fact2Point) && (play2 =="false")) {
				play2 = "true";
			}  

			if ((curTop > fact3Point) && (play3 =="false")) {
				play3 = "true";
				$(window).unbind('scroll');
			}
		
			if (play1 =="true") {
				play1 = "done";
				master.play("s1", false)
				.addPause("s2");
			}

			if (play2 =="true") {
				play2 = "done";
				master.play("s2", false)
				.addPause("s3");
			} 

			if (play3 == "true") {
				play3 = "done";
				master.play("s3", false);
			}
		});
  }
 });
	

              
            
!
999px

Console