<div class="section" style="background-color: #f8fafd;background-image: url([SITEURL]/uploads/builder/shapes_1_bg.svg);height:100vh;background-repeat: no-repeat;background-size: cover;background-position: top center;">
  <div class="wojo-grid">
    <div class="row gutters align-middle align-center" style="min-height:100vh">
      <div class="columns screen-40 tablet-80 mobile-100 phone-100 content-center">
        <div data-weditable="true">
          <h1 class="wojo primary semi huge text">Make Cms Pro work for you</h1>
          <p class="wojo thin medium text margin-bottom">Building brands people can't live without is how our clients grow.</p>
          <a href="#next_section" data-scroll="true" data-offset="140" data-type="button" class="wojo relaxed big rounded primary button">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="next_section" class="section" style="padding:80px 0;">
  <div class="wojo-grid">
    <div class="row gutters">
      <div class="columns screen-40 tablet-50 mobile-100 phone-100">
        <div data-weditable="true">
          <span class="wojo positive label half-bottom-margin">Opportunity</span>
          <h2 class="wojo primary text">Our core <span class="wojo demi text">values</span></h2>
          <p class="margin-bottom">At CMS Pro, we don't just accept difference—we celebrate it, we support it, and we thrive on it for the benefit of our employees, our products, and our community.</p>
          <div class="row horizontal-gutters">
            <div class="columns">
              <div class="wojo relaxed flex list align-middle">
                <div class="item">
                  <div class="content shrink"><span class="wojo small negative circular icon button" data-type="button"><i class="icon heart"></i></span></div>
                  <div class="content half-left-padding">Empathy</div>
                </div>
                <div class="item">
                  <div class="content shrink"><span class="wojo small primary circular icon button" data-type="button"><i class="icon smile"></i></span></div>
                  <div class="content half-left-padding">Courtesy</div>
                </div>
                <div class="item">
                  <div class="content shrink"><span class="wojo small positive circular icon button" data-type="button"><i class="icon maple leaf"></i></span></div>
                  <div class="content half-left-padding">Thriving</div>
                </div>
              </div>
            </div>
            <div class="columns">
              <div class="wojo relaxed flex list align-middle">
                <div class="item">
                  <div class="content shrink"><span class="wojo small negative circular icon button" data-type="button"><i data-type="icon" class="icon feather"></i></span></div>
                  <div class="content half-left-padding">Craftsmanship</div>
                </div>
                <div class="item">
                  <div class="content shrink"><span class="wojo small primary circular icon button" data-type="button"><i class="icon tennis ball"></i></span></div>
                  <div class="content half-left-padding">Playfulness</div>
                </div>
                <div class="item">
                  <div class="content shrink"><span class="wojo small positive circular icon button" data-type="button"><i class="icon storage"></i></span></div>
                  <div class="content half-left-padding">Solidarity</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="columns screen-60 tablet-50 mobile-100 phone-100">
        <figure data-weditable="true" class="relative" style="background-image: url([SITEURL]/uploads/builder/shapes_6_bg.svg);background-repeat: no-repeat;background-size: auto;background-position: top center;padding:3em;">
          <a href="http://vimeo.com/75976293" data-wbox="video" class="wojo huge white circular icon button centered lightbox" data-type="button">
            <i class="icon medium play"></i>
          </a>
          <img src="[SITEURL]/uploads/builder/office-people.jpg" alt="In The Office">
        </figure>
      </div>
    </div>
  </div>
</div>
<div class="section" style="padding:0 32px 0 0;">
  <div class="wojo-grid">
    <div class="row">
      <div class="columns">
        <h2 class="wojo primary semi text content-center">Our Greatful Clients</h2>
      </div>
    </div>
  </div>
</div>
<div class="section" style="padding: 100px 0px;">
  <div class="wojo-grid">
    <div class="row phone-block-1 mobile-block-1 tablet-block-2 screen-block-2 gutters">
      <div class="column">
        <div class="wojo basic icon message align-middle">
          <div class="wojo basic image"><img src="[SITEURL]/uploads/images/partner2.png" alt="Frank's Co."></div>
          <div class="content">
            <div class="header">Frank's Co.</div>
            www.franksco.comp
            <p>We are open and transparent about the work we do and how we do it.</p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="wojo basic icon message align-middle">
          <div class="wojo basic image"><img src="[SITEURL]/uploads/images/partner3.png" alt="Retro Beats"></div>
          <div class="content">
            <div class="header">Retro Beats</div>
            www.retrobeats.comp
            <p>We commit to achieving demonstrable impact for our stakeholders.</p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="wojo basic icon message align-middle">
          <div class="wojo basic image"><img src="[SITEURL]/uploads/images/partner4.png" alt="Tourner"></div>
          <div class="content">
            <div class="header">Tourner</div>
            www.tourner.comp
            <p>We are awed by human resilience, and believe in the ability of all people to thrive.</p>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="wojo basic icon message align-middle">
          <div class="wojo basic image"><img src="[SITEURL]/uploads/images/partner5.png" alt="Retro Press"></div>
          <div class="content">
            <div class="header">Retro Press</div>
            www.retropress.comp
            <p>We believe that all people have the right to live in peaceful communities.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section" style="background-color:#f8f9fa; padding: 64px 0 0 0;">
  <div class="wojo-grid">
    <div class="row double-gutters">
      <div class="columns screen-50 tablet-50 mobile-100 phone-100">
        <div data-weditable="true">
          <h4 class="wojo primary text">Progress Bars</h4>
          <p>Cool looking progress bars</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ua labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
          <div class="wojo teal mini progress" data-percent="35">
            <div class="bar"></div>
            <div class="label">35% Funded</div>
          </div>
          <div class="wojo violet mini progress" data-percent="92">
            <div class="bar"></div>
            <div class="label">32% Uploading</div>
          </div>
          <div class="wojo red mini progress" data-percent="60">
            <div class="bar"></div>
            <div class="label">60% Earned</div>
          </div>
          <div class="wojo yellow tiny progress" data-percent="81">
            <div class="bar"></div>
            <div class="label">81% To Go</div>
          </div>
          <div class="wojo green tiny progress" data-percent="100">
            <div class="bar"></div>
            <div class="label">100% Completed</div>
          </div>
        </div>
      </div>
      <div class="columns screen-50 tablet-50 mobile-100 phone-100">
        <h4 class="wojo primary text">Youtube Player</h4>
        <p>Crete unlimited youtube players with built in CMS Pro yplayer plugin</p>
        %%yplayer/vertical|plugin|2|19%%</div>
    </div>
  </div>
</div>
<div class="section relative" style="background-color: #f8f9fa ;padding:32px 0 164px 0">
  <div class="wojo-grid">
    <div class="row gutters align-center">
      <div class="columns screen-40 tablet-60 mobile-100 phone-100">
        <div class="content-center" data-weditable="true">
          <div class="margin-bottom">
            <span class="wojo white icon passive circular button" data-type="button"><i class="icon big wojologo alt"></i></span>
          </div>
          <div class="margin-bottom">
            <h2 class="wojo primary text">
              <span class="wojo semi text">Ready</span> to hire us? </h2>
            <p>Cms Pro helps you managing your Enterprise identity.</p>
          </div>
          <a class="wojo primary inverted rounded wide button" data-type="button">Hire Our Team</a>
        </div>
      </div>
    </div>
  </div>
  <figure class="absolute" style="bottom:0;left:0;width:100%">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 150 512 200" width="100%" height="200px">
      <path fill="#fff" d="M38.6 264.9S111.8 196 188 236.5c131.9 70.3 193.4-3.9 250.3-9.5 83-8.1 121.8 34 121.8 34v107l-521.4.3V264.9z" opacity=".4"></path>
      <path fill="#fffefe" d="M-72 267s70.2-69.7 146.3-29.1c131.9 70.3 193.4-3.9 250.3-9.5 83-8.1 119.4 32.4 119.4 32.4v108.8l-516 .4V267z" opacity=".4"></path>
      <path fill="#fff" d="M-72 302s94.3-90.3 204-54.7c139.7 45.4 190 12.3 250.3-9.5C472.9 205.1 560 311 560 311v74H-72v-83z"></path>
    </svg>
  </figure>
</div>