cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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.

            
              <div class="outter-wrapper">
  <div class="wrapper">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="logo" x="0px" y="0px" viewBox="0 0 154.3 135.6" xml:space="preserve" enable-background="new 0 0 154.3 135.6">
    <style type="text/css">
  
    .st0 {
          fill: #FFCE34;
      }
  
      .st1 {
          fill: #686463;
      }
  
      .st2 {
          fill: #FFFFFF;
      }
  
    </style>
    <g class="text">
      <g class="seattle">
        <path class="st1" d="M51.8 50.1c-2.2 0-3.9 1.1-3.9 1.1l0.9 2c0.4-0.2 0.8-0.4 1.2-0.5 0.3-0.1 0.5-0.2 0.8-0.2 0.6-0.1 1.3-0.1 1.9 0.2 0.4 0.3 0.7 0.7 0.7 1.2 0 0.1 0 0.2 0 0.3v0.3c0 0-1.5 0-2 0 -2.4 0-4 1.2-4 3.2 0 1.8 1.4 3.2 4.1 3.2 2.6 0 4.6-0.4 4.6-0.4v-6.8C56.2 51.3 54.4 50.1 51.8 50.1zM53.5 58.7c0 0-0.7 0.2-1.6 0.2 -1.1 0-1.7-0.4-1.7-1.3 0-0.9 0.7-1.3 1.6-1.3 0.5 0 1.7 0 1.7 0V58.7z"/>
        <path class="st1" d="M62.5 60.9c-2.4 0-3.6-1.3-3.6-4v-4.3h-1.4v-2.2h1.4V48h2.8v2.4h2.2v2.2h-2.2v4.3c0 1.2 0.5 1.7 1.4 1.7 0.4 0 0.8-0.1 1.1-0.1l0.1 2.2C63.7 60.8 63.1 60.9 62.5 60.9z"/>
        <path class="st1" d="M70 60.9c-2.4 0-3.6-1.3-3.6-4v-4.3H65v-2.2h1.4V48h2.8v2.4h2.2v2.2h-2.2v4.3c0 1.2 0.5 1.7 1.4 1.7 0.4 0 0.8-0.1 1.1-0.1l0.1 2.2C71.2 60.8 70.6 60.9 70 60.9z"/>
        <rect x="73.5" y="46.1" class="st1" width="2.8" height="14.5"/>
        <path class="st1" d="M87.1 54.7c0-2.7-1.7-4.6-4.4-4.6 -2.9 0-5 2.2-5 5.4 0 3.3 2.2 5.4 5.4 5.4 2.4 0 3.8-1.3 3.8-1.3l-1.2-1.9c0 0-1.1 0.9-2.4 0.9 -1.6 0-2.5-0.7-2.8-2.3h6.3C87.1 55.8 87.1 55.3 87.1 54.7zM84.5 54.5h-3.8c0.2-1.4 0.9-2.2 2.1-2.2 1.1 0 1.7 0.8 1.7 1.9V54.5z"/>
        <path class="st1" d="M46.3 54.7c0-2.7-1.7-4.6-4.4-4.6 -2.9 0-5 2.2-5 5.4 0 3.3 2.2 5.4 5.4 5.4 2.4 0 3.8-1.3 3.8-1.3l-1.2-1.9c0 0-1.1 0.9-2.4 0.9 -1.6 0-2.5-0.7-2.8-2.3h6.3C46.3 55.8 46.3 55.3 46.3 54.7zM43.7 54.5h-3.8c0.2-1.4 0.9-2.2 2.1-2.2 1.1 0 1.7 0.8 1.7 1.9V54.5z"/>
        <path class="st1" d="M26.7 57.6c0.9 0.4 2.3 0.8 3.7 0.8 1.5 0 2.3-0.6 2.3-1.6 0-1.3-0.9-1.6-2.7-2.2 -2.3-0.8-3.8-1.8-3.8-4.2 0-2.5 1.7-4 4.8-4 1.5 0 2.9 0.3 3.8 0.7l-0.7 2.3c-0.9-0.3-1.8-0.6-2.9-0.6 -1.4 0-2.1 0.5-2.1 1.5 0 1.1 0.7 1.4 2.3 2 2.4 0.8 4.2 1.7 4.2 4.5 0 2.7-2.1 4.1-5.1 4.1 -1.7 0-3.3-0.4-4.3-0.8L26.7 57.6z"/>
  </g>
      <g class="cancerCare">
        <g>
          <path class="st1" d="M41.3 69.3c-2.2 0-3.9 1.1-3.9 1.1l0.9 2c0.4-0.2 0.8-0.4 1.2-0.5 0.3-0.1 0.5-0.2 0.8-0.2 0.6-0.1 1.3-0.1 1.9 0.2 0.4 0.3 0.7 0.7 0.7 1.2 0 0.1 0 0.2 0 0.3v0.3c0 0-1.5 0-2 0 -2.4 0-4 1.2-4 3.2 0 1.8 1.4 3.2 4.1 3.2 2.6 0 4.6-0.4 4.6-0.4v-6.8C45.7 70.4 43.8 69.3 41.3 69.3zM43 77.9c0 0-0.7 0.2-1.6 0.2 -1.1 0-1.7-0.4-1.7-1.3 0-0.9 0.7-1.3 1.6-1.3 0.5 0 1.7 0 1.7 0V77.9z"/>
          <path class="st1" d="M47.8 79.8v-9.6c1.3-0.5 3-0.9 4.5-0.9 2.9 0 4.6 1.4 4.6 4.1v6.4h-2.8v-6.2c0-1.4-0.6-2-1.9-2 -0.6 0-1.2 0.1-1.8 0.4v7.8H47.8z"/>
          <path class="st1" d="M66.7 69.9l-0.5 2.2c-0.8-0.3-1.6-0.5-2.3-0.5 -1.6 0-2.5 1.1-2.5 3 0 2.1 0.9 3.1 2.6 3.1 0.7 0 1.5-0.2 2.2-0.5l0.4 2.2C66.1 79.8 65 80 63.8 80c-3.3 0-5.3-2.1-5.3-5.3 0-3.3 1.9-5.4 5.1-5.4C64.8 69.3 66 69.5 66.7 69.9z"/>
          <path class="st1" d="M83.2 69.3c0.7 0 1.4 0.1 1.8 0.2l-0.4 2.3c-0.3-0.1-0.8-0.2-1.2-0.2 -0.7 0-1.2 0.1-1.7 0.3v7.9H79v-9.6C80.1 69.6 81.7 69.3 83.2 69.3z"/>
          <path class="st1" d="M77 73.8c0-2.7-1.7-4.6-4.4-4.6 -2.9 0-5 2.2-5 5.4 0 3.3 2.2 5.4 5.4 5.4 2.4 0 3.8-1.3 3.8-1.3l-1.2-1.9c0 0-1.1 0.9-2.4 0.9 -1.6 0-2.5-0.7-2.8-2.3h6.3C77 75 77 74.4 77 73.8zM74.4 73.7h-3.8c0.2-1.4 0.9-2.2 2.1-2.2 1.1 0 1.7 0.8 1.7 1.9V73.7z"/>
          <path class="st1" d="M34.7 76.8c-0.7 0.4-1.8 0.7-3.1 0.7 -2.6 0-3.8-1.7-3.8-4.7 0-2.9 1.1-4.8 3.8-4.8v0c1.2 0 2.3 0.3 3 0.6l0.8-2.3c-0.5-0.3-2-0.9-3.8-0.9 -4.4 0-6.7 3-6.7 7.4 0 4.3 2.3 7.2 6.6 7.2 1.9 0 3.4-0.5 4.3-1L34.7 76.8z"/>
        </g>
        <g>
          <path class="st1" d="M106.5 69.3c-2.2 0-3.9 1.1-3.9 1.1l0.9 2c0.4-0.2 0.8-0.4 1.2-0.5 0.3-0.1 0.5-0.2 0.8-0.2 0.6-0.1 1.3-0.1 1.9 0.2 0.4 0.3 0.7 0.7 0.7 1.2 0 0.1 0 0.2 0 0.3v0.3c0 0-1.5 0-2 0 -2.4 0-4 1.2-4 3.2 0 1.8 1.4 3.2 4.1 3.2 2.6 0 4.6-0.4 4.6-0.4v-6.8C110.9 70.4 109 69.3 106.5 69.3zM108.2 77.9c0 0-0.7 0.2-1.6 0.2 -1.1 0-1.7-0.4-1.7-1.3 0-0.9 0.7-1.3 1.6-1.3 0.5 0 1.7 0 1.7 0V77.9z"/>
          <path class="st1" d="M117.2 69.3c0.7 0 1.4 0.1 1.8 0.2l-0.4 2.3c-0.3-0.1-0.8-0.2-1.2-0.2 -0.7 0-1.2 0.1-1.7 0.3v7.9H113v-9.6C114 69.6 115.7 69.3 117.2 69.3z"/>
          <path class="st1" d="M128.8 73.8c0-2.7-1.7-4.6-4.4-4.6 -2.9 0-5 2.2-5 5.4 0 3.3 2.2 5.4 5.4 5.4 2.4 0 3.8-1.3 3.8-1.3l-1.2-1.9c0 0-1.1 0.9-2.4 0.9 -1.6 0-2.5-0.7-2.8-2.3h6.3C128.8 75 128.8 74.4 128.8 73.8zM126.2 73.7h-3.8c0.2-1.4 0.9-2.2 2.1-2.2 1.1 0 1.7 0.8 1.7 1.9V73.7z"/>
          <path class="st1" d="M100 76.8c-0.7 0.4-1.8 0.7-3.1 0.7 -2.6 0-3.8-1.7-3.8-4.7 0-2.9 1.1-4.8 3.8-4.8v0c1.2 0 2.3 0.3 3 0.6l0.8-2.3c-0.5-0.3-2-0.9-3.8-0.9 -4.4 0-6.7 3-6.7 7.4 0 4.3 2.3 7.2 6.6 7.2 1.9 0 3.4-0.5 4.3-1L100 76.8z"/>
        </g>
      </g>
      <g class="alliance">
        <path class="st1" d="M58.2 88.7c-2.2 0-3.9 1.1-3.9 1.1l0.9 2c0.4-0.2 0.8-0.4 1.2-0.5 0.3-0.1 0.5-0.2 0.8-0.2 0.6-0.1 1.3-0.1 1.9 0.2 0.4 0.3 0.7 0.7 0.7 1.2 0 0.1 0 0.2 0 0.3v0.3c0 0-1.5 0-2 0 -2.4 0-4 1.2-4 3.2 0 1.8 1.4 3.2 4.1 3.2 2.6 0 4.6-0.4 4.6-0.4v-6.8C62.6 89.8 60.7 88.7 58.2 88.7zM59.9 97.3c0 0-0.7 0.2-1.6 0.2 -1.1 0-1.7-0.4-1.7-1.3 0-0.9 0.7-1.3 1.6-1.3 0.5 0 1.7 0 1.7 0V97.3z"/>
        <path class="st1" d="M33.4 96.1h-5.2l-0.9 3.1h-2.9l4.9-14h3.2l4.9 14h-2.9L33.4 96.1zM29 93.6h3.5l-1.8-5.5L29 93.6z"/>
        <path class="st1" d="M49.3 86c0-0.8 0.5-1.4 1.5-1.4 0.9 0 1.4 0.6 1.4 1.4 0 0.8-0.5 1.4-1.4 1.4C49.8 87.4 49.3 86.9 49.3 86zM52.1 99.2h-2.8V88.9h2.8V99.2z"/>
        <path class="st1" d="M64.8 99.2v-9.6c1.3-0.5 3-0.9 4.5-0.9 2.9 0 4.6 1.4 4.6 4.1v6.4h-2.8V93c0-1.4-0.6-2-1.9-2 -0.6 0-1.2 0.1-1.8 0.4v7.8H64.8z"/>
        <path class="st1" d="M83.7 89.3l-0.5 2.2c-0.8-0.3-1.6-0.5-2.3-0.5 -1.6 0-2.5 1.1-2.5 3 0 2.1 0.9 3.1 2.6 3.1 0.7 0 1.5-0.2 2.2-0.5l0.4 2.2c-0.7 0.3-1.7 0.6-2.9 0.6 -3.3 0-5.3-2.1-5.3-5.3 0-3.3 1.9-5.4 5.1-5.4C81.9 88.7 83 88.9 83.7 89.3z"/>
        <rect x="38.8" y="84.6" class="st1" width="2.8" height="14.5"/>
        <rect x="44" y="84.6" class="st1" width="2.8" height="14.5"/>
        <path class="st1" d="M94 93.2c0-2.7-1.7-4.6-4.4-4.6 -2.9 0-5 2.2-5 5.4 0 3.3 2.2 5.4 5.4 5.4 2.4 0 3.8-1.3 3.8-1.3l-1.2-1.9c0 0-1.1 0.9-2.4 0.9 -1.6 0-2.5-0.7-2.8-2.3h6.3C94 94.4 94 93.8 94 93.2zM91.4 93.1h-3.8c0.2-1.4 0.9-2.2 2.1-2.2 1.1 0 1.7 0.8 1.7 1.9V93.1z"/>
      </g>
      <g class="betterTogether">
        <g>
          <path class="st0" d="M32 114.2c0 0.9-0.3 1.5-1 1.9v0.1c0.8 0.3 1.3 1 1.3 2.2 0 1.6-1.2 2.5-2.8 2.5h-3.6c-0.3 0-0.4-0.1-0.4-0.4v-8.1c0-0.3 0.1-0.4 0.4-0.4h3.5C31 111.9 32 112.7 32 114.2zM29.2 113.3h-2.1v2.2h2.1c0.7 0 1.2-0.4 1.2-1.1C30.4 113.7 30 113.3 29.2 113.3zM29.5 117h-2.4v2.3h2.4c0.8 0 1.2-0.4 1.2-1.2S30.2 117 29.5 117z"/>
          <path class="st0" d="M36.2 114.1c2 0 2.9 1.2 2.9 2.6v0.8c0 0.3-0.1 0.5-0.6 0.5h-3.8v0.5c0 0.8 0.5 1.3 1.4 1.3 0.7 0 1.2-0.3 1.5-0.7 0.2-0.3 0.3-0.3 0.6-0.2l0.4 0.2c0.3 0.1 0.3 0.4 0.2 0.6 -0.5 0.7-1.3 1.2-2.7 1.2 -2.1 0-2.9-1.1-2.9-2.7v-1.5C33.3 115.1 34.3 114.1 36.2 114.1zM36.2 115.3c-0.9 0-1.5 0.5-1.5 1.3v0.3h2.9v-0.3C37.7 115.8 37.2 115.3 36.2 115.3z"/>
          <path class="st0" d="M42.4 113.2v1.1h1.4c0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4h-1.4v2.5c0 1.2 0.4 1.4 1.4 1.4 0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4 -2.1 0.1-2.9-0.6-2.9-2.8v-2.6H40c-0.3 0-0.4-0.1-0.4-0.4v-0.6c0-0.3 0.1-0.4 0.4-0.4h0.9v-1.1c0-0.3 0.1-0.4 0.4-0.4H42C42.3 112.8 42.4 112.9 42.4 113.2z"/>
          <path class="st0" d="M47.3 113.2v1.1h1.4c0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4h-1.4v2.5c0 1.2 0.4 1.4 1.4 1.4 0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4 -2.1 0.1-2.9-0.6-2.9-2.8v-2.6h-0.9c-0.3 0-0.4-0.1-0.4-0.4v-0.6c0-0.3 0.1-0.4 0.4-0.4h0.9v-1.1c0-0.3 0.1-0.4 0.4-0.4h0.7C47.2 112.8 47.3 112.9 47.3 113.2z"/>
          <path class="st0" d="M52.8 114.1c2 0 2.9 1.2 2.9 2.6v0.8c0 0.3-0.1 0.5-0.6 0.5h-3.8v0.5c0 0.8 0.5 1.3 1.4 1.3 0.7 0 1.2-0.3 1.5-0.7 0.2-0.3 0.3-0.3 0.6-0.2l0.4 0.2c0.3 0.1 0.3 0.4 0.2 0.6 -0.5 0.7-1.3 1.2-2.7 1.2 -2.1 0-2.9-1.1-2.9-2.7v-1.5C49.8 115.1 50.9 114.1 52.8 114.1zM52.8 115.3c-0.9 0-1.5 0.5-1.5 1.3v0.3h2.9v-0.3C54.2 115.8 53.7 115.3 52.8 115.3z"/>
          <path class="st0" d="M60 114.1c0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4h-0.5c-0.5 0-0.9 0.1-1.2 0.2 -0.1 0-0.1 0.1-0.1 0.2v4.7c0 0.3-0.1 0.4-0.4 0.4h-0.7c-0.3 0-0.4-0.1-0.4-0.4v-5.2c0-0.4 0.1-0.6 0.5-0.7 0.5-0.2 1.2-0.4 2.3-0.4H60z"/>
          <path class="st0" d="M65.6 113.2v1.1H67c0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4h-1.4v2.5c0 1.2 0.4 1.4 1.4 1.4 0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4 -2.1 0.1-2.9-0.6-2.9-2.8v-2.6h-0.9c-0.3 0-0.4-0.1-0.4-0.4v-0.6c0-0.3 0.1-0.4 0.4-0.4h0.9v-1.1c0-0.3 0.1-0.4 0.4-0.4h0.7C65.5 112.8 65.6 112.9 65.6 113.2z"/>
          <path class="st0" d="M71 114.1c1.9 0 2.9 1 2.9 2.5v1.9c0 1.6-1 2.5-2.9 2.5 -1.9 0-2.9-1-2.9-2.5v-1.9C68.1 115.1 69.2 114.1 71 114.1zM71 115.4c-0.9 0-1.4 0.4-1.4 1.2v1.9c0 0.8 0.5 1.2 1.4 1.2 0.9 0 1.4-0.4 1.4-1.2v-1.9C72.5 115.8 72 115.4 71 115.4z"/>
          <path class="st0" d="M77.8 114.1c1 0 1.8 0.2 2.3 0.4 0.4 0.2 0.5 0.3 0.5 0.7v5.8c0 1.6-0.8 2.7-2.8 2.7 -1.4 0-2.2-0.5-2.6-1.2 -0.2-0.3-0.1-0.5 0.2-0.6l0.5-0.3c0.3-0.2 0.4-0.1 0.6 0.2 0.3 0.4 0.6 0.6 1.3 0.6 0.9 0 1.3-0.5 1.3-1.4v-0.6c-0.4 0.1-0.9 0.2-1.5 0.2 -1.8 0-2.6-0.9-2.6-2.5v-1.4C75 115 75.9 114.1 77.8 114.1zM77.9 115.4c-1 0-1.5 0.4-1.5 1.4v1.3c0 0.8 0.5 1.2 1.4 1.2 0.5 0 1-0.1 1.3-0.2v-3.5c0-0.1 0-0.1-0.1-0.2C78.7 115.5 78.3 115.4 77.9 115.4z"/>
          <path class="st0" d="M84.7 114.1c2 0 2.9 1.2 2.9 2.6v0.8c0 0.3-0.1 0.5-0.6 0.5h-3.8v0.5c0 0.8 0.5 1.3 1.4 1.3 0.7 0 1.2-0.3 1.5-0.7 0.2-0.3 0.3-0.3 0.6-0.2l0.4 0.2c0.3 0.1 0.3 0.4 0.2 0.6 -0.5 0.7-1.3 1.2-2.7 1.2 -2.1 0-2.9-1.1-2.9-2.7v-1.5C81.8 115.1 82.8 114.1 84.7 114.1zM84.7 115.3c-0.9 0-1.5 0.5-1.5 1.3v0.3h2.9v-0.3C86.1 115.8 85.6 115.3 84.7 115.3z"/>
          <path class="st0" d="M90.8 113.2v1.1h1.4c0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4h-1.4v2.5c0 1.2 0.4 1.4 1.4 1.4 0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4 -2.1 0.1-2.9-0.6-2.9-2.8v-2.6h-0.9c-0.3 0-0.4-0.1-0.4-0.4v-0.6c0-0.3 0.1-0.4 0.4-0.4h0.9v-1.1c0-0.3 0.1-0.4 0.4-0.4h0.7C90.7 112.8 90.8 112.9 90.8 113.2z"/>
          <path class="st0" d="M95.1 111.9v2.4c0.1-0.1 0.8-0.2 1.5-0.2 1.8 0 2.6 0.9 2.6 2.5v3.8c0 0.3-0.1 0.4-0.4 0.4h-0.7c-0.3 0-0.4-0.1-0.4-0.4v-3.7c0-0.8-0.5-1.2-1.4-1.2 -0.6 0-1.2 0.1-1.3 0.2v4.8c0 0.3-0.1 0.4-0.4 0.4H94c-0.3 0-0.4-0.1-0.4-0.4v-8.5c0-0.3 0.1-0.4 0.4-0.4h0.7C95 111.5 95.1 111.6 95.1 111.9z"/>
          <path class="st0" d="M103.3 114.1c2 0 2.9 1.2 2.9 2.6v0.8c0 0.3-0.1 0.5-0.6 0.5h-3.8v0.5c0 0.8 0.5 1.3 1.4 1.3 0.7 0 1.2-0.3 1.5-0.7 0.2-0.3 0.3-0.3 0.6-0.2l0.4 0.2c0.3 0.1 0.3 0.4 0.2 0.6 -0.5 0.7-1.3 1.2-2.7 1.2 -2.1 0-2.9-1.1-2.9-2.7v-1.5C100.4 115.1 101.4 114.1 103.3 114.1zM103.3 115.3c-0.9 0-1.5 0.5-1.5 1.3v0.3h2.9v-0.3C104.7 115.8 104.3 115.3 103.3 115.3z"/>
          <path class="st0" d="M110.6 114.1c0.3 0 0.4 0.1 0.4 0.4v0.6c0 0.3-0.1 0.4-0.4 0.4h-0.5c-0.5 0-0.9 0.1-1.2 0.2 -0.1 0-0.1 0.1-0.1 0.2v4.7c0 0.3-0.1 0.4-0.4 0.4h-0.7c-0.3 0-0.4-0.1-0.4-0.4v-5.2c0-0.4 0.1-0.6 0.5-0.7 0.5-0.2 1.2-0.4 2.3-0.4H110.6z"/>
          <path class="st0" d="M112.7 120v0.1c0 0.6-0.2 0.8-0.8 0.8h-0.1c-0.6 0-0.8-0.2-0.8-0.8V120c0-0.6 0.2-0.8 0.8-0.8h0.1C112.6 119.2 112.7 119.4 112.7 120z"/>
        </g>
      </g>
  
    </g>
    <g class="icon">
      <path class="st0" d="M124.4 43.2c-0.1 0-0.2 0-0.4 0 -0.4 0-0.7-0.1-0.9-0.5 -0.5-0.7 0.1-1.8 1-1.7l0 0c0.3 0 0.7-0.1 1-0.3 0.7-0.5 0.8-1.4 0.3-2.1 -0.5-0.7-1.4-0.8-2.1-0.3 -0.3 0.2-0.4 0.5-0.6 0.8 -0.3 0.5-1 0.5-1.4 0.1 -0.3-0.4-0.2-0.9 0.2-1.1 0.3-0.2 0.5-0.1 0.9-0.2 0.3 0 0.7-0.2 0.9-0.3 0.8-0.6 1-1.8 0.4-2.6l0 0c-0.6-0.8-1.8-1-2.6-0.4 -0.3 0.2-0.5 0.5-0.6 0.8 -0.1 0.3-0.1 0.6-0.4 0.8 -0.4 0.3-0.9 0.2-1.1-0.2 -0.3-0.5-0.1-1.1 0.5-1.3 0.4-0.1 0.6-0.1 1-0.3 0.7-0.5 0.8-1.4 0.3-2.1 -0.5-0.7-1.4-0.8-2.1-0.3 -0.3 0.2-0.5 0.5-0.6 0.9l0 0c-0.2 0.9-1.4 1.1-2 0.4 -0.2-0.3-0.3-0.7-0.1-1 0-0.1 0.1-0.2 0.1-0.4 0.1-0.9-0.5-1.8-1.4-1.9 -0.9-0.1-1.8 0.5-1.9 1.4 0 0.2 0 0.4 0 0.6 0 0.1 0 0.2 0 0.3 -0.1 0.4-0.5 0.7-0.9 0.7l0 0c-0.4-0.1-0.7-0.5-0.6-0.9 0-0.1 0.1-0.2 0.1-0.3 0.1-0.2 0.2-0.4 0.2-0.6 0.1-0.9-0.5-1.8-1.4-1.9 -0.9-0.1-1.8 0.5-1.9 1.4 0 0.1 0 0.2 0 0.4 0 0.4-0.1 0.7-0.5 0.9 -0.7 0.5-1.8-0.1-1.7-1l0 0c0-0.3-0.1-0.7-0.3-1 -0.5-0.7-1.4-0.8-2.1-0.3 -0.7 0.5-0.8 1.4-0.3 2.1 0.2 0.3 0.5 0.4 0.8 0.6 0.5 0.3 0.5 1 0.1 1.4 -0.4 0.3-0.9 0.2-1.1-0.2 -0.2-0.3-0.1-0.5-0.2-0.9 0-0.3-0.2-0.7-0.3-0.9 -0.6-0.8-1.8-1-2.6-0.4l0 0c-0.8 0.6-1 1.8-0.4 2.6 0.2 0.3 0.5 0.5 0.8 0.6 0.3 0.1 0.6 0.1 0.8 0.4 0.3 0.4 0.2 0.9-0.2 1.1 -0.5 0.3-1.1 0.1-1.3-0.5 -0.1-0.4-0.1-0.6-0.3-1 -0.5-0.7-1.4-0.8-2.1-0.3 -0.7 0.5-0.8 1.4-0.3 2.1 0.2 0.3 0.5 0.5 0.9 0.6l0 0c0.9 0.2 1.1 1.4 0.4 2 -0.3 0.2-0.7 0.3-1 0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.9-0.1-1.8 0.5-1.9 1.4 -0.1 0.9 0.5 1.8 1.4 1.9 0.2 0 0.4 0 0.6 0 0.1 0 0.2 0 0.3 0 0.4 0.1 0.7 0.5 0.7 0.9l0 0c-0.1 0.4-0.5 0.7-0.9 0.6 -0.1 0-0.2-0.1-0.3-0.1 -0.2-0.1-0.4-0.2-0.6-0.2 -0.9-0.1-1.8 0.5-1.9 1.4 -0.1 0.9 0.5 1.8 1.4 1.9 0.1 0 0.2 0 0.4 0 0.4 0 0.7 0.1 0.9 0.5 0.5 0.7-0.1 1.8-1 1.7l0 0c-0.3 0-0.7 0.1-1 0.3 -0.7 0.5-0.8 1.4-0.3 2.1 0.5 0.7 1.4 0.8 2.1 0.3 0.3-0.2 0.4-0.5 0.6-0.8 0.3-0.5 1-0.5 1.4-0.1 0.3 0.4 0.2 0.9-0.2 1.1 -0.3 0.2-0.5 0.1-0.9 0.2 -0.3 0-0.7 0.2-0.9 0.3 -0.8 0.6-1 1.8-0.4 2.6l0 0c0.6 0.8 1.8 1 2.6 0.4 0.3-0.2 0.5-0.5 0.6-0.8 0.1-0.3 0.1-0.6 0.4-0.8 0.4-0.3 0.9-0.2 1.1 0.2 0.3 0.5 0.1 1.1-0.5 1.3 -0.4 0.1-0.6 0.1-1 0.3 -0.7 0.5-0.8 1.4-0.3 2.1 0.5 0.7 1.4 0.8 2.1 0.3 0.3-0.2 0.5-0.5 0.6-0.9l0 0c0.2-0.9 1.4-1.1 2-0.4 0.2 0.3 0.3 0.7 0.1 1 0 0.1-0.1 0.2-0.1 0.4 -0.1 0.9 0.5 1.8 1.4 1.9 0.9 0.1 1.8-0.5 1.9-1.4 0-0.2 0-0.4 0-0.6 0-0.1 0-0.2 0-0.3 0.1-0.4 0.5-0.7 0.9-0.7l0 0c0.4 0.1 0.7 0.5 0.6 0.9 0 0.1-0.1 0.2-0.1 0.3 -0.1 0.2-0.2 0.4-0.2 0.6 -0.1 0.9 0.5 1.8 1.4 1.9 0.9 0.1 1.8-0.5 1.9-1.4 0-0.1 0-0.2 0-0.4 0-0.4 0.1-0.7 0.5-0.9 0.7-0.5 1.8 0.1 1.7 1l0 0c0 0.3 0.1 0.7 0.3 1 0.5 0.7 1.4 0.8 2.1 0.3 0.7-0.5 0.8-1.4 0.3-2.1 -0.2-0.3-0.5-0.4-0.8-0.6 -0.5-0.3-0.5-1-0.1-1.4 0.4-0.3 0.9-0.2 1.1 0.2 0.2 0.3 0.1 0.5 0.2 0.9 0 0.3 0.2 0.7 0.3 0.9 0.6 0.8 1.8 1 2.6 0.4l0 0c0.8-0.6 1-1.8 0.4-2.6 -0.2-0.3-0.5-0.5-0.8-0.6 -0.3-0.1-0.6-0.1-0.8-0.4 -0.3-0.4-0.2-0.9 0.2-1.1 0.5-0.3 1.1-0.1 1.3 0.5 0.1 0.4 0.1 0.6 0.3 1 0.5 0.7 1.4 0.8 2.1 0.3 0.7-0.5 0.8-1.4 0.3-2.1 -0.2-0.3-0.5-0.5-0.9-0.6l0 0c-0.9-0.2-1.1-1.4-0.4-2 0.3-0.2 0.7-0.3 1-0.1 0.1 0 0.2 0.1 0.4 0.1 0.9 0.1 1.8-0.5 1.9-1.4 0.1-0.9-0.5-1.8-1.4-1.9 -0.2 0-0.4 0-0.6 0 -0.1 0-0.2 0-0.3 0 -0.4-0.1-0.7-0.5-0.7-0.9l0 0c0.1-0.4 0.5-0.7 0.9-0.6 0.1 0 0.2 0.1 0.3 0.1 0.2 0.1 0.4 0.2 0.6 0.2 0.9 0.1 1.8-0.5 1.9-1.4C126 44.2 125.3 43.3 124.4 43.2zM99.7 28.5c0.1-0.5 0.6-0.9 1.1-0.8 0.5 0.1 0.9 0.6 0.8 1.1 -0.1 0.5-0.6 0.9-1.1 0.8C100 29.6 99.6 29.1 99.7 28.5zM111.4 28.1c0.1-0.7 0.7-1.1 1.4-1s1.1 0.7 1 1.4c-0.1 0.7-0.7 1.1-1.4 1C111.7 29.4 111.3 28.8 111.4 28.1zM105.9 27.9c0.1-0.7 0.7-1.1 1.4-1 0.7 0.1 1.1 0.7 1 1.4 -0.1 0.7-0.7 1.1-1.4 1C106.2 29.2 105.8 28.6 105.9 27.9zM109.4 25.9c0.1-0.4 0.5-0.7 0.9-0.7 0.4 0.1 0.7 0.5 0.7 0.9 -0.1 0.4-0.5 0.7-0.9 0.7C109.6 26.8 109.3 26.4 109.4 25.9zM103.4 26.8c0.1-0.4 0.5-0.7 0.9-0.7 0.4 0.1 0.7 0.5 0.7 0.9 -0.1 0.4-0.5 0.7-0.9 0.7C103.6 27.6 103.3 27.2 103.4 26.8zM96.5 30.8c0.1-0.5 0.6-0.9 1.1-0.8 0.5 0.1 0.9 0.6 0.8 1.1 -0.1 0.5-0.6 0.9-1.1 0.8C96.7 31.9 96.4 31.4 96.5 30.8zM94.6 42.4c-0.1 0.7-0.7 1.1-1.4 1 -0.7-0.1-1.1-0.7-1-1.4s0.7-1.1 1.4-1C94.3 41.1 94.7 41.8 94.6 42.4zM94.7 38.2c-0.7-0.1-1.1-0.7-1-1.4 0.1-0.7 0.7-1.1 1.4-1 0.7 0.1 1.1 0.7 1 1.4C96 37.8 95.4 38.3 94.7 38.2zM91.2 39.1c0.1-0.4 0.5-0.7 0.9-0.7 0.4 0.1 0.7 0.5 0.7 0.9 -0.1 0.4-0.5 0.7-0.9 0.7C91.5 40 91.2 39.6 91.2 39.1zM93.9 33.7c0.1-0.4 0.5-0.7 0.9-0.7 0.4 0.1 0.7 0.5 0.7 0.9 -0.1 0.4-0.5 0.7-0.9 0.7C94.1 34.5 93.8 34.1 93.9 33.7zM94.7 54.3c-0.1 0.5-0.6 0.9-1.1 0.8 -0.5-0.1-0.9-0.6-0.8-1.1 0.1-0.5 0.6-0.9 1.1-0.8C94.5 53.3 94.8 53.8 94.7 54.3zM93.4 46.5c0.7 0.1 1.1 0.7 1 1.4 -0.1 0.7-0.7 1.1-1.4 1 -0.7-0.1-1.1-0.7-1-1.4C92.1 46.8 92.7 46.4 93.4 46.5zM92 44.8c-0.1 0.4-0.5 0.7-0.9 0.7s-0.7-0.5-0.7-0.9c0.1-0.4 0.5-0.7 0.9-0.7S92 44.3 92 44.8zM92.8 50.8c-0.1 0.4-0.5 0.7-0.9 0.7 -0.4-0.1-0.7-0.5-0.7-0.9 0.1-0.4 0.5-0.7 0.9-0.7S92.8 50.3 92.8 50.8zM97.1 57.5c-0.1 0.5-0.6 0.9-1.1 0.8 -0.5-0.1-0.9-0.6-0.8-1.1 0.1-0.5 0.6-0.9 1.1-0.8C96.8 56.5 97.2 57 97.1 57.5zM103.3 60.1c-0.1 0.7-0.7 1.1-1.4 1 -0.7-0.1-1.1-0.7-1-1.4 0.1-0.7 0.7-1.1 1.4-1C102.9 58.8 103.4 59.4 103.3 60.1zM105.2 62.9c-0.1 0.4-0.5 0.7-0.9 0.7 -0.4-0.1-0.7-0.5-0.7-0.9 0.1-0.4 0.5-0.7 0.9-0.7C104.9 62.1 105.2 62.5 105.2 62.9zM99.7 60.3c-0.1 0.4-0.5 0.7-0.9 0.7 -0.4-0.1-0.7-0.5-0.7-0.9 0.1-0.4 0.5-0.7 0.9-0.7C99.5 59.4 99.8 59.9 99.7 60.3zM120.2 61.2c-0.1 0.5-0.6 0.9-1.1 0.8 -0.5-0.1-0.9-0.6-0.8-1.1 0.1-0.5 0.6-0.9 1.1-0.8C120 60.2 120.3 60.7 120.2 61.2zM108.6 61.6c-0.1 0.7-0.7 1.1-1.4 1 -0.7-0.1-1.1-0.7-1-1.4 0.1-0.7 0.7-1.1 1.4-1C108.2 60.3 108.7 60.9 108.6 61.6zM114 61.8c-0.1 0.7-0.7 1.1-1.4 1 -0.7-0.1-1.1-0.7-1-1.4 0.1-0.7 0.7-1.1 1.4-1C113.7 60.5 114.1 61.1 114 61.8zM110.5 63.8c-0.1 0.4-0.5 0.7-0.9 0.7 -0.4-0.1-0.7-0.5-0.7-0.9 0.1-0.4 0.5-0.7 0.9-0.7C110.3 62.9 110.6 63.3 110.5 63.8zM116.5 63c-0.1 0.4-0.5 0.7-0.9 0.7 -0.4-0.1-0.7-0.5-0.7-0.9 0.1-0.4 0.5-0.7 0.9-0.7C116.3 62.1 116.6 62.5 116.5 63zM123.5 58.9c-0.1 0.5-0.6 0.9-1.1 0.8 -0.5-0.1-0.9-0.6-0.8-1.1 0.1-0.5 0.6-0.9 1.1-0.8C123.2 57.8 123.5 58.3 123.5 58.9zM126.3 48.7c-0.7-0.1-1.1-0.7-1-1.4 0.1-0.7 0.7-1.1 1.4-1 0.7 0.1 1.1 0.7 1 1.4C127.6 48.4 127 48.8 126.3 48.7zM125.2 51.5c0.7 0.1 1.1 0.7 1 1.4 -0.1 0.7-0.7 1.1-1.4 1 -0.7-0.1-1.1-0.7-1-1.4C123.9 51.9 124.5 51.4 125.2 51.5zM128.7 50.6c-0.1 0.4-0.5 0.7-0.9 0.7 -0.4-0.1-0.7-0.5-0.7-0.9 0.1-0.4 0.5-0.7 0.9-0.7C128.5 49.7 128.8 50.1 128.7 50.6zM126.1 56.1c-0.1 0.4-0.5 0.7-0.9 0.7 -0.4-0.1-0.7-0.5-0.7-0.9 0.1-0.4 0.5-0.7 0.9-0.7C125.8 55.2 126.1 55.6 126.1 56.1zM125.2 35.4c0.1-0.5 0.6-0.9 1.1-0.8 0.5 0.1 0.9 0.6 0.8 1.1 -0.1 0.5-0.6 0.9-1.1 0.8C125.5 36.4 125.1 35.9 125.2 35.4zM126.5 43.2c-0.7-0.1-1.1-0.7-1-1.4 0.1-0.7 0.7-1.1 1.4-1 0.7 0.1 1.1 0.7 1 1.4C127.8 42.9 127.2 43.3 126.5 43.2zM128 45c0.1-0.4 0.5-0.7 0.9-0.7s0.7 0.5 0.7 0.9c-0.1 0.4-0.5 0.7-0.9 0.7C128.2 45.8 127.9 45.4 128 45zM127.1 38.9c0.1-0.4 0.5-0.7 0.9-0.7 0.4 0.1 0.7 0.5 0.7 0.9 -0.1 0.4-0.5 0.7-0.9 0.7C127.4 39.8 127.1 39.4 127.1 38.9zM122.8 32.2c0.1-0.5 0.6-0.9 1.1-0.8 0.5 0.1 0.9 0.6 0.8 1.1 -0.1 0.5-0.6 0.9-1.1 0.8C123.1 33.2 122.8 32.7 122.8 32.2zM116.6 29.6c0.1-0.7 0.7-1.1 1.4-1 0.7 0.1 1.1 0.7 1 1.4 -0.1 0.7-0.7 1.1-1.4 1C117 30.9 116.5 30.3 116.6 29.6zM114.8 26.8c0.1-0.4 0.5-0.7 0.9-0.7 0.4 0.1 0.7 0.5 0.7 0.9s-0.5 0.7-0.9 0.7S114.7 27.2 114.8 26.8zM120.2 29.4c0.1-0.4 0.5-0.7 0.9-0.7 0.4 0.1 0.7 0.5 0.7 0.9 -0.1 0.4-0.5 0.7-0.9 0.7C120.5 30.3 120.2 29.9 120.2 29.4z"/>
      <ellipse transform="matrix(0.1564 -0.9877 0.9877 0.1564 48.4504 146.4497)" class="st2" cx="110" cy="44.9" rx="2.3" ry="2.3"/>
    </g>
  </svg>
      <img class="s01bg"  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s01bg_copy.jpg" alt="">
      <img class="s01t01" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s01t01_copy.png" alt="">
      <img class="s02t01" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s02t01_copy.png" alt="">
      <img class="s02t02" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s02t02_copy.png" alt="">
      <img class="s02t03" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s02t03_copy.png" alt="">
      <img class="s03t01" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s03t01.png" alt="">
      <img class="s04t01" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s04t01.png" alt="">
     
      <img class="s05t02" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/351730/s05t02.png" alt="">
  
  
  
  
  </div>
  
  <div id="controls">
      <div id="slider"></div>
      <div class="controls-buttons">
          <input type="button" id="playBtn" value="play">
          <input type="button" id="pauseBtn" value="pause">
          <input type="button" id="resumeBtn" value="resume">
          <input type="button" id="reverseBtn" value="reverse">
      </div>
  </div>
</div>
            
          
!
            
              .outter-wrapper{
 display: flex;
 justify-content: center;
 margin: 0 auto;
 flex-direction: column;
 width: 100%;
}


html,
body {
    width: 300px;
    height: 250px;
    display: block;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

body {
    background-color: #fff;
    font-family: 'bebas', Asap, sans-serif;
    color: white;
    overflow: hidden;
}

.wrapper {
   width: 100%;
    height: 250px;
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    position: relative;
  
    box-sizing: border-box;
}

img {
    position: absolute;
}

.s02t01, .s02t02, .s02t03, .s03t01, .s04t01, .s05t01, .s05t02, .logo {
    visibility: hidden;
    opacity: 0;
}

.s01bg {
    visibility: hidden;
    opacity: 0;
}

.logo {
    width: 25860px;
    position: absolute;
    top: -9660px;
    left: -19853px;

}
/*.logo {*/
    /*width: 260px;*/
    /*position: absolute;*/
    /*top: -27px;*/
    /*left: -10px;*/
/*}*/

#controls {
   
 top: 125px;
 right: 0;
 width: 100%;


}

#slider {
    height: 13px;
    width: 80%;
    margin-top: 1rem!important;
    margin-bottom: 1rem!important;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.controls-buttons{
      width: 100%;
    display: flex;
    justify-content: center;
}

input[type="button"] {
    padding: 6px;
    margin: 4px;
    background: #47c9e5;
    border: none;
    color: #fff;
    text-transform: uppercase;
    border-radius: 10%;
    transition: 0.4s all ease-in;
    border: 1px solid #fff;
    cursor: pointer;
}
input[type="button"]:hover{
  background: #fff;
  color: #47c9e5;
  border: 1px solid #47c9e5;
}


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #47c9e5;
    background: #47c9e5;
    font-weight: normal;
    color: #ffffff;
  cursor:pointer;
}
            
          
!
            
              $("#slider").slider({
    range: false,
    min: 0,
    max: 100,
    step:.1,
    slide: function ( event, ui ) {
        tl.pause();

        tl.progress( ui.value/100 );
    }
});

// updateSlider function
function updateSlider() {
    $("#slider").slider("value", tl.progress() *100);
}


var s01bg = $('.s01bg'),   //Background
    s01t01 = $('.s01t01'), // "Three time the hope"
    s02t01 = $('.s02t01'), // "Fred Hutch"
    s02t02 = $('.s02t02'), // "Seattle Children's"
    s02t03 = $('.s02t03'), // "UW Medicine"
    s03t01 = $('.s03t01'), // "Three world-class organizations"
    s04t01 = $('.s04t01'), // "for better,longer,richer lives"
    s05t02 = $('.s05t02'), // "learn more"
    logoText = $('.logo g.text'),
    logo = $('.logo'); // "svg logo"






//noinspection JSUnresolvedFunction
var tl = new TimelineMax({onUpdate:updateSlider});

tl
    .set(logo,{autoAlpha:1})

    .set(logoText,{autoAlpha:0})


    .to('',1.2,{})
    .add('first-scene')
    .to(s01t01,0.8,{autoAlpha:0},'first-scene')
    .fromTo(s02t01,0.8,{autoAlpha:0,xPercent:10},{autoAlpha:1,xPercent:0})
    .fromTo(s02t02,0.8,{autoAlpha:0,xPercent:10},{autoAlpha:1,xPercent:0})
    .fromTo(s02t03,0.8,{autoAlpha:0,xPercent:10},{autoAlpha:1,xPercent:0})
    .to('',1.55,{})
    .to([s02t01,s02t02,s02t03],0.8,{autoAlpha:0})
    .fromTo(s03t01,0.8,{autoAlpha:0},{autoAlpha:1,xPercent:0})
    .to('',1.2,{})
    .to(s03t01,0.8,{autoAlpha:0})
    .fromTo(s04t01,0.8,{autoAlpha:0},{autoAlpha:1,xPercent:0})
    .to('',1.2,{})
    .to(s04t01,0.8,{autoAlpha:0})
    .to(logo,0.8,{transformOrigin:'50% 50%',css:{width:'260px',left:'-10px',top:'-27px'},ease: Circ.easeInOut})
    .staggerFromTo(logoText,1,{autoAlpha:0,yPercent:10},{autoAlpha:1,yPercent:0},0.4)
    .fromTo(s05t02,0.8,{autoAlpha:0,yPercent:10},{autoAlpha:1,yPercent:0})
;




playBtn = $("#playBtn"),
    pauseBtn = $("#pauseBtn"),
    resumeBtn = $("#resumeBtn"),
    reverseBtn = $("#reverseBtn");


playBtn.click(function(){
    tl.play();
});
pauseBtn.click(function(){
    tl.pause();
});
resumeBtn.click(function(){

    tl.resume();
});
reverseBtn.click(function(){
    tl.reverse();
});
console.log("duration is: " + tl.totalDuration());
            
          
!
999px
Loading ..................

Console