<div class="header">NAV</div>

<div class="cols-2 ">
    <div class="cols-2__1">
          <div class="wrapper wrapper__blue">
                <div class="wrapper__back match-height" data-100-top="transform:translateY(0px);" data--100-top="transform:translateY(-150px);"></div>
                <div class="wrapper__inner match-height">
                    <div class="overlay"></div>
                    <img src="https://24.media.tumblr.com/tumblr_m5a70oNPHc1rxf02xo2_500.gif"/>
                  <h2>LOREM</h2>
                </div>
          </div>
     </div><!--
    --><div class="cols-2__1">
          <div class="wrapper wrapper__yellow">
                <div class="wrapper__back" data-100-top="transform:translateY(0px);" data--100-top="transform:translateY(-150px);"></div>
                <div class="wrapper__inner">
                    <div class="overlay"></div>
                    <img src="https://24.media.tumblr.com/tumblr_m5a70oNPHc1rxf02xo2_500.gif" />
                    <h2 class="serif">IPSUM</h2>
                </div>
          </div>
     </div>
</div> 

<div class="content-block">TAGLINE</div>

<div class="cols-2">
    <div class="cols-2__1">
          <div class="wrapper wrapper__blue">
                <div class="wrapper__back" data-100-top="transform:translateY(0px);" data--100-top="transform:translateY(-150px);"></div>
                <div class="wrapper__inner">
                    <div class="overlay"></div>
                    <img src="https://secure.static.tumblr.com/e99ad32e2098412be46b672683b6f17f/6osz8hd/L2Fn9lnqp/tumblr_static_tumblr_static_aen610b7ahc8kgkwsgoo440k8_640.gif" />
                    <h2 class="serif">IPSUM</h2>
                </div>
          </div>
     </div><!--
    --><div class="cols-2__1">
          <div class="wrapper wrapper__yellow">
                <div class="wrapper__back" data-100-top="transform:translateY(0px);" data--100-top="transform:translateY(-150px);"></div>
                <div class="wrapper__inner">
                    <div class="overlay"></div>
                    <img src="https://secure.static.tumblr.com/e99ad32e2098412be46b672683b6f17f/6osz8hd/L2Fn9lnqp/tumblr_static_tumblr_static_aen610b7ahc8kgkwsgoo440k8_640.gif" />
                    <h2 class="serif">AMET</h2>
                </div>
          </div>
     </div>
</div> 

<div class="content-block">TAGLINE</div>

<div class="footer">FOOTER</div>

html, body{
  margin: 0;
  padding: 0;
  font-family: "Helvetica", Arial, San-Serif;
}
//disables a skollr height issue
body{
  height:100% !important;
}


.content-block, .footer, .header{
  width: 100%;
  text-align:center;
  padding: 40px 0;
  height: auto;
  margin-top: 150px;
  margin-bottom: 150px;
  background: #c1c1c1;
}

.header{
  margin-top: 0;
  margin-bottom: 150px;
}
.footer{
  margin: 0;
}

.cols-2{
  width: 100%;
  &__1{
    width: calc(50% - 20px);
    display: inline-block;
    &:first-of-type{
      margin-right: 20px;
    }
    &:last-of-type{
      margin-left: 20px;
    }
  }
  .wrapper{
    width: 100%;
    padding-right: 50px;
    padding-bottom: 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    transition: transform 1s;
    &__blue{
      .wrapper__back{
        background: rgba(21, 18, 61, 1);     
      }
      .wrapper__inner{
        border: 10px solid rgba(21, 18, 61, 1);
        .overlay{
          border: 10px solid rgba(21, 18, 61, 1);
          background: rgba(21, 18, 61, .2);
        }
      }
    }
    
    &__yellow{
      .wrapper__back{
        background: rgba(253, 193, 60, 1);     
      }
      .wrapper__inner{
        border: 10px solid rgba(253, 193, 60, 1);
        .overlay{
          border: 10px solid rgba(253, 193, 60, 1);
          background: rgba(253, 193, 60, .2);
        }
      }
    }
    &__back{
      position: absolute;
      width: calc(100% - 50px);
      height: calc(100% - 50px);
      top: 50px;
      left: 50px;
      z-index: -1;  
    }
    &__inner{
      z-index:2;
      .overlay{
        position: absolute;
        width: calc(100% - 50px);
        height: calc(100% - 50px);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
      img{
        display: block;
        width: 100%;
      }
      h2{
        width: calc(100% - 70px);
        position: absolute;
        text-align: center;
        top: 50%;
        left: 10px;
        right: 10px;
        font-size: 60px;
        color: #ffffff;
        letter-spacing: 1px;
        margin-top: -50px;
        &.serif{
          font-family: "Times New Roman", Georgia, Serif;
        }
      }
    }
  }
}




  

var setSkrollr = function($el, data) {
    for (var i = 0, l = data.length; i < l; i++) {
        var d = data[i],
            px = d[0];
            css = d[1];
        $el.attr('data-' + px, css);
    }
}

jQuery(function($) {
    skrollr.init({
        smoothScrolling: true,
      forceHeight: false
    });
  
});

//Kicks in on load if too slow
window.onload = function(){
  skrollr.init({
    smoothScrolling: false,
    forceHeight: false
  });
}