title: Make the scrollable text not visible under pinned content
body: <p>I am using Scroll Magic to scroll content and to pin a portion of the content. Here is the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;
      &lt;div style="height:400px;"&gt;
      &lt;/div&gt;
      &lt;div id="trigger1" style="min-height: 1px"&gt;&lt;/div&gt;
      &lt;div id="pin" style="font-size: 30px; color: #fff;text-align:center;padding:30px 0;"&gt;
        This is header
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="text-container"&gt;
      &lt;p class="text"&gt;
         Lorem Ipsum is simply ....
      &lt;/p&gt;
      &lt;p class="text"&gt;
         Lorem Ipsum is simply ....
      &lt;/p&gt;
      &lt;p class="text"&gt;
         Lorem Ipsum is simply ....
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is Javascript:</p>
  
  <pre><code>      $(function () { 
             var controller = new ScrollMagic.Controller({
                  globalSceneOptions: {
                      triggerHook: 'onLeave'
                  }
              });
              var scene = new ScrollMagic.Scene({triggerElement: "#trigger1"})
                      .setPin("#pin")
                      .addTo(controller);
        });
  </code></pre>
  
  <p>Here is the jsfiddle: <a href="https://jsfiddle.net/mddc/93sagkab/27/" rel="nofollow noreferrer">https://jsfiddle.net/mddc/93sagkab/27/</a></p>
  
  <p>When '.text' moves up beneath <code>#pin</code> content, you can see it. How can I use CSS to make <code>.text</code> not visible when it is under <code>#pin</code>? I need to maintain the current design, which shows the mountain as the background.</p>