<script type="text/javascript">
/* get viewport height and adjust the scroll trigger position by 300px */
var vH=jQuery(window).height()-300;

/* set the overlay status */
var overlay=false;

/* set overlay bg colors for the sections */
var colors=['#4E1402','#3f2f4f','#131d0e'];

/* Add overlay */

jQuery(document).ready(function() {
	if(('.nk-awb-inner').length){
		var positionScroll = jQuery(this).scrollTop()
		jQuery('<dvi class="overlay"></div>').insertAfter(jQuery('.nk-awb-inner'));
		if(positionScroll>vH){
			overlay=true;
			/* set overlay bg per section height and change */
				var index=Number((positionScroll/vH).toFixed());
				if(colors[index]!=undefined)
					jQuery('.nk-awb-wrap .overlay').css('background', colors[index]);
			jQuery('.nk-awb-wrap .overlay').fadeIn();
		}else if(positionScroll<vH){
			overlay=false;
			jQuery('.nk-awb-wrap .overlay').fadeOut();
		}
	}


});
jQuery(document).scroll(function() {
	if(('.nk-awb-inner').length){

	/* set window scroll px */
		positionScroll = jQuery(this).scrollTop();

	/* set overlay bg per section height and change */
		var index=Number((positionScroll/vH).toFixed());
		if(colors[index]!=undefined)
			jQuery('.nk-awb-wrap .overlay').css('background', colors[index]);

	/* add/remove overlay whenever its required */
		if(positionScroll>vH && !overlay){
			overlay=true;
			jQuery('.nk-awb-wrap .overlay').fadeIn();
		}else if(positionScroll<vH && overlay){
			overlay=false;
			jQuery('.nk-awb-wrap .overlay').fadeOut();
		}
	}
});
</script>
<style>
.nk-awb-wrap .overlay{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #000, #000);
    opacity: .7;
}
.nk-awb-wrap .overlay {
    z-index: 1;
	-webkit-transition:background 1s;
	-moz-transition:background 1s;
	-o-transition:background 1s;
	transition:background 1s
}
.nk-awb-wrap > * {
    z-index: 100;
}
</style>