z-index issue whilst using scrollmagic

Question

I'm using scrollmagic to display content in a project I'm currently working on. The design I have uses 'wedges' at the top and bottom of the containers. I have managed to achieve the result that I want using an svg for the 'wedge' and by sticking the first one to the top of the page with a z-index: 1;

As a result this layer overlays the rest of the content that subsequently follows. Please see the codepen below.

http://codepen.io/oliver_randell/pen/MyLNON

I really need to be able to click the buttons in the promo boxes!

Any help would be greatly appreciated.

<section id="intro" class="intro">
    <div class="content">
        <div class="row">
            <div class="medium-10 medium-offset-1 large-8 large-offset-2 columns">
            <div class="fade-trigger"></div>
            <h2>Intro title</h2>
            <h3>Intro Subtitle</h3>
            <p>Some extract text</p>
        </div>
    </div>
  </div>
</section>
<section class="promo-boxes">
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT -->
<div id="pinned-trigger1">
    <div id="pinned-element1">
      <div class="top-wedge"></div>
    </div>
</div>
<!-- BOX 1 -->
<div id="pinned-trigger2" class="promo box1 full-screen">
  <div id="pinned-element2">
    <div class="wrapper">
    <div class="content">
      <div class="img-container">
        <div class="img" style="background-image: url('https://unsplash.it/800/800');"></div>
      </div>
      <div class="text">
        <div class="row">
          <div class="large-4 large-offset-8 columns">
            <div class="valign-middle">
              <div>
                <h3>Title</h3>
                <p>Text</p>
                <a href="#_" class="button">Button</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>


<div id="pinned-trigger4" class="promo box3">
<div class="content">
  <div class="img-container">
    <div class="img" style="backgroundimage:url('img-link.png');">
    </div>
  </div>
  <div class="text">
    <div class="row">
      <div class="large-4 large-offset-8 columns">
        <div class="valign-middle">
          <div>
            <h3>Title</h3>
            <p>Text</p>
            <a href="#_" class="button">Button 2</a>

          </div>
        </div>
      </div>
    </div>
      </div>
    </div>
    <div id="pinned-element4">
      <div class="bottom-wedge show-for-large"></div>
    </div>
  </div>
</section>

<section class="next-section full-screen">
  <h2>this is the next section</h2>
</section>

Answer 1

So... I just added:

#pinned-trigger1 {
    position-events: none;
}

And voila!!