How can I hide my navigation footer for my Paywall?

I've installed a Paywall plugin that hides the content for my page if they are not paid subscriber. If you visit my site:

https://healthfulev.com/max and click on any of the 2 options, you'll see that I've restricted those pages. However the footer navigation still shows. The code I'm using is hiding everything else. I've attached a screenshot as well.

This is the code I've used:

<style>
  body:not(.sqs-edit-mode) .sqs-layout .sqs-block {pointer-events:none;opacity:0;visibility:hidden;}
  body:not(.sqs-edit-mode) .removex {pointer-events:auto !important;opacity:1 !important;visibility:visible !important;}
body:not(.sqs-edit-mode) .subslock{opacity:0 !important;pointer-events:none}body:not(.sqs-edit-mode) .fadeload{opacity:1 !important}body:not(.sqs-edit-mode) .sqs-layout{opacity:0;transition:all ease-in-out 300ms;-ms-transition:all ease-in-out 300ms;-moz-transition:all ease-in-out 300ms;-webkit-transition:all ease-in-out 300ms}
</style>
<iframe style="visbility:hidden;pointer-events:none;z-index:-9999;opacity:0;position:absolute;top:0;left:0;width:500px;height: 200px;" class="subscription-checkx" src="/account/frame/subscriptions"></iframe><div class="subsnotice subslock" style="position:fixed;z-index:9;top:55%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);width: 400px;height: 200px;transition: all ease-in-out 200ms;"><div class="subsicon" style="background:url('https://static1.squarespace.com/static/54dcf1f3e4b03174c3dc75f5/t/5be5e854352f5308e3762256/1541793876726/subspadlock.png');background-repeat:no-repeat;background-position:center;background-size:contain;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);position:absolute;width:22px;height:22px;display:block;"></div><div class="subsmessage" style="left:0;margin-top: 36px;width:100%;display:block;font-size:14px !important;text-align:center;">
  <h3><b>MAX Subscriber Access Only</b></h3>
  Please sign in to continue.
  
  </div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
  $(window).load(function(){
   setTimeout(function(){
     $(".sqs-layout").addClass("fadeload");
   },2000);
  });
</script>
<script type="text/javascript">
  $(window).load(function(){
   setInterval(function(){
     /* SUBSCRIPTION PRODUCT NAME */
     var name = "Booty MAX";
     /* YOUR SERIAL KEY */
     var serial_key = "1234-5678-9101-1121";
     
     /* DON'T CHANGE */
     var subs = "Subscriptions";
     /* DON'T CHANGE */
     var next = "Next Order";
     
    if (($(".subscription-checkx").contents().text().search(next) > -1)){
        /* ACCESS GREANTED **/
        $(".sqs-layout .sqs-block").addClass('removex');
        $(".subsnotice").addClass('subslock');
    }else{
        $(".sqs-layout .sqs-block").removeClass('removex');
        $(".subsnotice").removeClass('subslock');
      $("body").find(serial_key);
    }
   },2000);
  });
</script>

Can anyone find anything wrong with this code?

.Footer-nav {
    display: none;
}

@tuanphan Hi, that removed the navigation completely. I just want it removed when the user isn't logged into the site. The code I'm using right now is removing my all my footer blocks, except the navigation. Have any suggestions?