<style>
      .navbar-toggle{
        padding: 15PX 10PX;
        border:2px solid #570000;
        border-radius: 0px;

      }
      .icon-bar{
        background-color:#570000;
      }
      .navbar{
        border-radius: 0px;
        background-color: #f9f9f9;
        padding: 20px 0px;
      }
      .nav li {
        padding: 5px 0px;
      }
      .nav .active a{
        border-bottom:4px solid #c94c06;
        color:gray;
      }
      .nav .round a{
        border:2px solid #fff;
        color:gray;
        margin-right: 20px;
      }
      .nav li a{
        color: #fff;
        font-size: 14px;
      }
      .nav li a:hover{
        color: #fff;
        background-color: transparent;
      }
      .navbar-brand {
        color: #fff;
        margin-top: -20px;
        padding: 20px 20px;
      }
      .inner-dropdown ul{
        background-color: #123962;
        box-shadow: 0 0 4px 0 rgba(0,0,0,.50), 0 2px 4px 0 rgba(0,0,0,.50);
      }
      .inner-dropdown ul li{
        padding: 3px 3px;
        background-color: transparent;
      }
      .inner-dropdown ul li a:hover{
        background-color: transparent;
      }
      ul .divider{
        padding: 0px 0px;
        background-color: red;
      }
      .top-header{
        margin: 0px;
        width: 100%;
      }
      .top-header{
        width:100%;
        margin-top: 0px;
        margin-left: 0px;
        height:45px;
        background-color: #830b0b;
        color:#fff;
      }
      .top-header ul{
        list-style: none;
        display: inline;
        margin-top: 20px;
        margin-right: 0px;
      }
      .top-header ul li{
        display: inline;
        padding: 10px 15px;
      }
      .top-header ul li a{
        color:#fff;
        font-size: 14px;
      }
      .top-header .z-nav-left {
         float: center;
         padding: 0px 128px;
      }
      .login-button{
        padding: 10px 20px;
        background-color: #db0011;
        color:white;
        text-decoration: none;
      }
      .login-button:hover{
        padding: 10px 20px;
        background-color:darkred;
        color:white;
        text-decoration: none;
      }

      ul {
          list-style-type: none;
          padding: 0;
          margin: 0;
      }

      div ul li {
          display: table-row;
      }    

      .img {
          float: left;
          margin: 0 0 5px 0;
          padding: 0px;
          vertical-align: middle;
      }
      .o-bnk-btn{
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 43px;
    right: 230px;
    border-top: 12px solid #570000;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    z-index: 200;
}
.nav-login{
  position: relative;
  top: 45px;
  right: 128px;
  height: 240px;
  width: 200px;
  background-color:#fff;
  z-index: 100;
  color: gray;
  padding: 10px 10px;

}
.z-nav-left li a{
   font-size: 14px;
}
    </style>


    <div class="hidden-xs">
          <div class="top-header hidden-xs" align="center">
              <ul class="z-nav-left" style="position:relative; top: 11px;">
                <li><a href="location.php">LOCATIONS</a></li>|
                <li><a href="financial-tools.php" style="cursor: pointer;">FINANCIAL TOOLS</a></li>|
                <li><a href="about.php">ABOUT</a></li>|
                <li><a href="contact-us.php">CONTACT</a></li>|
                <li><a href="community.php">COMMUNITY</a></li>|
                <li><a><input type="text" name="search" placeholder="Search..." style="width: 100px;"></a>&nbsp;<a href=""><I class="fa fa-search-plus" ></I></a></li>
                <li><a><i class="fa fa-facebook" style="color:#fff; background-color:#3b5998; padding: 4px 5px 2px 6px;"></i>&nbsp;&nbsp;<i class="fa fa-twitter" style="color:#fff; background-color:#00acee; padding: 4px 5px 2px 6px;"></i></a></li>
              </ul>
          </div>
    </div>

       <div class="container-fluid hidden-xs hidden-sm" style="background-color: #f9f9f9; padding: 25px 140px;">
       <div class="row">
         <div class="col-sm-12">
          <div class="row">
            <div class="col-sm-2"><a href="index.php"><img src="images/eagle.jpeg" class="img-responsive" width="120px" style=" padding: 10px 10px;"></a></div>
            <style>
              .nav-pc ul li{
                display: inline;
                padding: 50px 0px;
                margin-top: -10px !important;
              }
              .nav-pc ul{
                padding: 20px 0px;
                margin-top: -10px;
              }
              .nav-pc ul li a{
                color:#000;
                text-decoration: none;
                padding: 38px 40px;
              }
              .nav-pc ul .active a{
                background-color:#570000;
                color:#fff !important;
                text-decoration: none;
                transition: opacity 4s ease-out;

              }
              .p-menu{
                position: absolute;
                top: 63px;
                left: 85px;
                width: 250px;
                height:420px;
                background-color: #f9f9f9;
                z-index: 101;
                display: none;
              }
              .p-menu ul li{
                display: block;
                padding: 10px 5px;
              }
              .p-menu ul li a{
                color:gray;
              }
              .b-menu{
                position: absolute;
                top: 63px;
                left: 225px;
                width: 250px;
                height:120px;
                background-color: #f9f9f9;
                z-index: 101;
                display: none;
              }
              .b-menu ul li{
                display: block;
                padding: 10px 5px;
              }
              .b-menu ul li a{
                color:gray;
              }
              .l-menu{
                position: absolute;
                top: 63px;
                left: 346px;
                width: 250px;
                height:220px;
                background-color: #f9f9f9;
                z-index: 101;
                display: none;
              }
              .l-menu ul li{
                display: block;
                padding: 10px 5px;
              }
              .l-menu ul li a{
                color:gray;
              }
            </style>
            <div class="col-sm-10 nav-pc" align="left">
               <ul>
                 <li class="" id="li1"><a href="personal.php">Personal</a></li>
                 <li class="" id="li2"><a href="business.php">Business</a></li>
                 <li class="" id="li3"><a href="loan.php">Loans</a></li>
                 <li class="" id="li4"><a href="credit-card.php">Credit Cards</a></li>
               </ul>

               
            </div>
            <div class="p-menu">
              <ul class="p-ul">
                <li><a href="">Checkings</a></li>
                <li><a href="Savings.php">Savings</a></li>
                <li><a href="">Debit Card</a></li>
                <li><a href="">Mobile Banking</a></li>
                <li><a href="">Billpay</a></li>
                <li><a href="">Certificate of deposit</a></li>
                <li><a href="">Individual Retirement</a></li>
                <li><a href="">Safe Deposit Box</a></li>
                <li><a href="">Switch Kit</a></li>
              </ul>
            </div>

            <div class="b-menu">
              <ul class="b-ul">
                <li><a href="">Commercial Checking</a></li>
                <li><a href="Savings.php">Remote Deposit Capture</a></li>
              </ul>
            </div>

            <div class="l-menu">
              <ul class="l-ul">
                <li><a href="">Personal Loan</a></li>
                <li><a href="Savings.php">Agriculture Loans</a></li>
                <li><a href="">SBA Program Loans</a></li>
                <li><a href="">Business Loans & Leases</a></li>
              </ul>
            </div>

            <script>
              
              $(document).ready(function(){
                  $("#li1").mouseover(function(){
                   $("#li1").removeClass("").addClass("active");
                   $(".p-menu").show();
                  })

                  $("#li1").mouseleave(function(){
                   $("li1").removeClass("active").addClass("");
                   $(".p-menu").hide();
                  })

                  $(".p-menu").mouseover(function(){
                   $("#li1").removeClass("").addClass("active");
                   $(".p-menu").show();
                  })
                  $(".p-menu").mouseleave(function(){
                   $("#li1").removeClass("active").addClass("");
                   $(".p-menu").hide();
                  })

                 $("li1")
                  
              });  
            </script>
            <script>
              
              $(document).ready(function(){
                  $("#li2").mouseover(function(){
                   $("#li2").removeClass("").addClass("active");
                   $("#li1").removeClass("active").addClass("");
                   $(".b-menu").show();
                  })

                  $("#li2").mouseleave(function(){
                   $("#li2").removeClass("active").addClass("");

                   $(".b-menu").hide();
                  })

                  $(".b-menu").mouseover(function(){
                   $("#li2").removeClass("").addClass("active");

                   $(".b-menu").show();
                  })
                  $(".b-menu").mouseleave(function(){
                   $("#li2").removeClass("active").addClass("");
                   $(".b-menu").hide();
                  })
                  
              });  
            </script>
            <script>
              $(document).ready(function(){
                  $("#li3").mouseover(function(){
                   $("#li3").removeClass("").addClass("active");
                  // $("#li1").removeClass("active").addClass("");
                   $(".l-menu").show();
                  })

                  $("#li3").mouseleave(function(){
                   $("#li3").removeClass("active").addClass("");

                   $(".l-menu").hide();
                  })

                  $(".l-menu").mouseover(function(){
                   $("#li3").removeClass("").addClass("active");

                   $(".l-menu").show();
                  })
                  $(".l-menu").mouseleave(function(){
                   $("#li3").removeClass("active").addClass("");
                   $(".l-menu").hide();
                  })
                  
              });  
            </script>
            <script>
              $(document).ready(function(){
                  $("#li4").mouseover(function(){
                   $(this).removeClass("").addClass("active");
                  })
                  $("#li4").mouseleave(function(){
                   $(this).removeClass("active").addClass("");
                  })
              });
            </script>
          </div>
         </div>
       </div>
      </div>

      <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------MOBILE VIEW STARTS--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
      <style>
        .ttop-empty{
          background-color:#570000;
          height: 13px;
        }
      </style>
      <div class="ttop-empty hidden-lg hidden-md"></div>

      <div class="container-fluid hidden-lg hidden-md">
        <div class="row" align="center">
          <div class="col-sm-1 col-xs-1"></div>
          <div class="col-sm-10 col-xs-10">
            <h1 style="font-size: 18px; color:#570000;">ONLINE BANKING LOGIN</h1>
           
            <a href="login.php" class="btn btn-block btn-primary btn-lg" style="border-radius: 0px; background-color:#830b0b;">LOGIN</a>
          </div>
          <div class="col-sm-21 col-xs-1"></div>
        </div>
      </div>

   
      <nav class="navbar hidden-lg hidden-md">
                <div class="container">
                  <div class="navbar-header">
                    <div style="position: absolute; right: 22px; top:11px; font-size: 12px;"><span>MENU</span></div>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span> 
                    </button>
                    <a class="navbar-brand" href="index.php"><div class="hidden-lg"><img src="https://eagleonlinebnk.com/images/LabetteBank_horzlogo-alt.png" class="img-responsive" width="210"></div></a>
                  </div>
                  <div class="collapse navbar-collapse" id="myNavbar" style="background-color: #f0f0f0;">

                    <div class="panel-group" id="accordion" style="background-color: #f0f0f0;">

                          <style>
                            .panel{
                              background-color:#f0f0f0;
                            }
                            .panel a{
                              color:gray;
                            }
                            .activee{
                              background-color: #570000;
                              color:#fff;
                            }
                            .activee span{
                              color:#fff;
                            }
                            .activee i{
                              color:#fff; font-weight: bolder; font-size:16px;
                            }
                          </style>
                        <div class="panel panel-default" id="col1" style="border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:transparent; border-left: transparent; border-right: transparent;">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span>Personal</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  <i class="fa fa-plus"></i>
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                          <div id="collapse1" class="panel-collapse collapse">
                            <div class="panel-body" style="background-color: #f9f9f9;">
                              <ul>
                                <li><a href="">Personal</a></li>
                                <li><a href="">Checkings</a></li>
                                <li><a href="Savings.php">Savings</a></li>
                                <li><a href="">Debit Card</a></li>
                                <li><a href="">Mobile Banking</a></li>
                                <li><a href="">Billpay</a></li>
                                <li><a href="">Certificate of deposit</a></li>
                                <li><a href="">Individual Retirement</a></li>
                                <li><a href="">Safe Deposit Box</a></li>
                                <li><a href="">Switch Kit</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>

                        <div class="panel panel-default" id="col2" style="border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:transparent; border-left: transparent; border-right: transparent;">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span>Business</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  <i class="fa fa-plus"></i>
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                          <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body" style="background-color: #f9f9f9;">
                              <ul>
                                <li><a href="">Business</a></li>
                                <li><a href="">Commercial Checking</a></li>
                                <li><a href="Savings.php">Remote Deposit Capture</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>

                        <div class="panel panel-default" id="col3" style="border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:transparent; border-left: transparent; border-right: transparent;">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span>Loans</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  <i class="fa fa-plus"></i>
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                          <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body" style="background-color: #f9f9f9;">
                              <ul>
                                <li><a href="">Loans</a></li>
                                <li><a href="">Personal Loans</a></li>
                                <li><a href="Savings.php">Agriculture Loans</a></li>
                                <li><a href="">SBA Program Loans</a></li>
                                <li><a href="">Business Loans & Leases</a></li>
                              </ul>
                            </div>
                          </div>
                        </div>

                        <script>
                          $(document).ready(function(){


                            $("#col1").click(function(){
                              $("#col1").removeClass("panel panel-default").addClass("panel panel-default activee");
                              $("#col2").removeClass("panel panel-default activee").addClass("panel panel-default");
                              $("#col3").removeClass("panel panel-default activee").addClass("panel panel-default");
                            })

                            $("#col2").click(function(){
                              $("#col2").removeClass("panel panel-default").addClass("panel panel-default activee");
                              $("#col1").removeClass("panel panel-default activee").addClass("panel panel-default");
                              $("#col3").removeClass("panel panel-default activee").addClass("panel panel-default");
                            })

                            $("#col3").click(function(){
                              $("#col3").removeClass("panel panel-default").addClass("panel panel-default activee");
                              $("#col2").removeClass("panel panel-default activee").addClass("panel panel-default");
                              $("#col1").removeClass("panel panel-default activee").addClass("panel panel-default");
                            })


                          })
                        </script>

                        <div class="panel panel-default" style="background-color: #f0f0f0; border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:1px solid transparent; border-left: transparent; border-right: transparent;">
                          <a href="#">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span style="color:gray;">Credit Cards</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                        </div>

                        <div class="panel panel-default" style="background-color: #f0f0f0; border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:1px solid transparent; border-left: transparent; border-right: transparent;">
                          <a href="#">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span style="color:gray;">Locations</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                        </div>

                        <div class="panel panel-default" style="background-color: #f0f0f0; border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:1px solid transparent; border-left: transparent; border-right: transparent;">
                          <a href="#">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span style="color:gray;">Financial Tools</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                        </div>

                        <div class="panel panel-default" style="background-color: #f0f0f0; border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:1px solid transparent; border-left: transparent; border-right: transparent;">
                          <a href="#">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span style="color:gray;">About</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                        </div>

                        <div class="panel panel-default" style="background-color: #f0f0f0; border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:1px solid transparent; border-left: transparent; border-right: transparent;">
                          <a href="#">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span style="color:gray;">Contact</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                        </div>

                        <div class="panel panel-default" style="background-color: #f0f0f0; border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:1px solid transparent; border-left: transparent; border-right: transparent;">
                          <a href="#">
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title">
                              <div class="row">
                                <div class="col-xs-6">
                                  <span style="color:gray;">Community</span>
                                </div>
                                <div class="col-xs-6" align="right">
                                  
                                </div>
                              </div>
                            </h4>
                          </div>
                          </a>
                        </div>

                        <div class="panel panel-default" style="background-color: #f0f0f0; border-radius: 0px; border-top:1px solid #cecfcf; border-bottom:1px solid transparent; border-left: transparent; border-right: transparent;">
                          
                          <div class="panel-heading" style="padding:15px 15px; border-radius:0px;">
                            <h4 class="panel-title" style="background-color: #f0f0f0;">
                              <div class="row" style="background-color: #f0f0f0;">
                                <div class="col-xs-12" style="background-color: #f0f0f0;">
                                  <input type="text" name="search" placeholder="Search" style="width:90%; height: 40px; border-color: transparent;"/>&nbsp;&nbsp;<a href="" style="color:gray;"><i class="fa fa-search-plus"></i></a>
                                </div>
                                </div>
                              </div>
                            </h4>
                          </div>
                        </div>



                      </div> 
                  </div>
                </div>
              </nav>

              <!------------------END----------------->

  
  