

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bakasyunan Resort and Conference Center</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" charset="IE=Edge">
  <meta name="description" content="Bakasyunan Resort and Conference Center.
  Head Office Numbers:
  Tel. No.: 4047252/4047238/7064509
    Globe: 09175755116/09178303438
    Smart: 0998-994-2513
  Email : bakasyunanmarketing5@gmail.com
    bakasyunanmarketing4@gmail.com
    bakasyunanresort2@yahoo.com
    marketingbakasyunanresort@yahoo.com
  Zambales Resort Numbers:
    Tel. No.: (02)668-8986 
    Globe: 0917-575-5158 
    Smart: 0998-994-2512 
    Email : bakasyunanresortzambales@gmail.com 
  Tanay Resort Numbers:
    bakasyunanresort2@yahoo.com
    Contact us at:
    Mobile : 09175755120 / 09989942514
    Tel. : (02) 579-5818">

  <meta name="keywords" content="bakasyunan resort and conference center,bakasyunan,bakasunan website,bakasyunan resort tanay,bakasyunan resort zambales,bakasyunan website,rizal resort,resort in rizal,zambales resort,
  resort in tanay,resort in zambales,team building in tanay,hotel in tanay">

  <link rel="shortcut icon" href="img/favicon.ico">

  <!-- google font -->
  <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- import css -->
  <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134064163-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-134064163-1');
</script>

 <style>
 @font-face {
  font-family: myFirstFont;
  src: url(fonts/impact.ttf);
}

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
         box-sizing: border-box;
}

body {
  font-family: impact;
}

/**************loader*****************/

#wrappers {
  overflow: hidden;
  position: absolute;
  padding-top: 5%;
  background: #fcf8d9;
  height: 100vh;
  width: 100%;
  font-style: italic;

  }

.water-fill {
  animation: wave 0.9s infinite linear, 
             fill-up 4.5s infinite  ease-out alternate;
  
  }

@keyframes wave {
  0% { x: -400px; }
  100% { x: 0; }
  }

@keyframes fill-up {
  0% {
    height: 50px;
    y: 400px;
  }

  100% {
    height: 500px;
    y: -100px;
    }
}

/****************loader******************/

.hero4 a img {
  height: 120px;
}

.hero5 a img {
  height: 130px;
}

.col-override{
  width: 24%;
}

.col-override2{
  width: 19%;
}

.front-logo {
  height: 27vh;
}

.front-logo-pos {
  position: absolute;
  top: 33%;
  left: 40%;
  z-index: 1;
}

.branchlogo {
  width: 100%;
}

.navbar {
  z-index: 2;
  width: 1000px;
  margin: 0 auto;
  padding-left: 130px;
}

 .hero3 {
  position: absolute;
  height: 50vh;
  width: 50vh;
  top: 25%;
  left: 5%;
  z-index:3;

}

.hero6 {
  position: absolute;
  height: 50vh;
  width: 50vh;
  top: 25%;
  right: 10%;
  z-index:3;

}

.hero4 {
  position: absolute;
  bottom: 5%;
  left: 35%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.hero5 {
  position: absolute;
  bottom: 5%;
  left: 65%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.hero7 {
  position: absolute;
  bottom: 30%;
  left: 35%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.hero8 {
  position: absolute;
  bottom: 10%;
  left: 55%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}
 /*animations*/
.animate-hide {
  visibility: hidden;
}

.fade {
  opacity: 1;
  visibility: visible;
  animation-name: fade;
  -webkit-animation-name: fade;
  -ms-animation-name: fade;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -ms-animation-duration: 2s;
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
  -ms-animation-timing-function: ease-in;
}

@-webkit-keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-ms-keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {

  from {
    opacity: 0;

  }

  to {
    opacity: 1;
  }

}

@-webkit-keyframes bounceInDown {
 from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  visibility: visible!important;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

 @-webkit-keyframes hover-animate {

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes hover-animate {
 
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.hero3:hover {
  -webkit-animation-name: hover-animate;
  animation-name: hover-animate;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hero6:hover {
  -webkit-animation-name: hover-animate;
  animation-name: hover-animate;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

/*animations*/

/*div*/
.left,.right {
  padding:0;
  height: 100vh;
  overflow: hidden;
}
/**/

video {
  object-position: bottom;
  min-height: 100%;
  width: auto;
}

/****overlay-menu****/
.font-yellow-italic {
  font-style: italic;color: yellow!important;
  transform: rotate(-20deg);
}

.drop-menu{
  display: none;
}

div.nav-overlay-menu {
  font-size: 20px ;
  padding: 0;
  border-left: 1px solid #666; 
  height: 100vh;
}

div.nav-overlay-menu:hover{
  background-size: cover;
  background-repeat: no-repeat;
  color: #000;
  overflow: hidden;

}

/****overlay-menu****/

/* The Overlay (background) */
.overlay {
  background-color: #fff;
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 0%;
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  left: 0;
  top: 0;
  /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  color: #818181;
  /*  display: block;*/ /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover {/* , .overlay a:focus*/
  color: #f1f1f1;
  transition: 0.5s;
}
/******overlay******/

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 0px;
  right: 20px;
  font-size: 60px;
  z-index: 1;
}

.landing li a {
  font-size: 16px; 
  color: yellow;
  padding: 20px 35px;
}

.landing li a:hover {
  background-color: yellow;
  color: #000!important;
  transition: 0.9s;
  transition-delay: 0.5s;
}

.landing li a:before {
  content:'';
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 0%;
  background: rgba(255,255,0,1);
  color: #000;
  /*border-radius: 5px;*/
  transition: all 0.8s ease;

} 
.landing li a:hover:before {
  height: 100%; 
  opacity: 0.1;
}

.rev-hide {
  display: none;
}

/*media queries for mobile********************************************************/
@media only screen and (max-width: 481px) {
body {
  font-family: myFirstFont;
}


video {
  display: none;
}

.left {
  background-image: url("img/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.right {
  background-image: url("img/zambalesmin.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/*.row {
  background-color: rgba(169,169,169,0.6);
}*/

.front-logo-pos {
  display: none;
}

.hero4,.hero5,.hero3,.hero6 {
  visibility: visible;
}

.hero4 {
  /*display: block!important;*/
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index:1;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  /*text-shadow: 1px 1px 0 rgba(0,0,0,.75);*/
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}

.hero5 {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index:1;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.col-override{
  width: 100%;
}

.navbar {
  background-color: rgba(169,169,169,0.7);
  z-index: 2;
  width: auto;
  margin: auto;
  padding-left: 0px;
}

.overlay a {
  font-size: 20px
}

.overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
}

.left,.right {
  padding:0;
  height: 100vh;
}

.hide-mobile {
  display:none!important;
}

.rev-hide {
  display: block;
}

.branchlogo {
  width: 90%;
}

.hero3,.hero6 {

  top: 20%;
  left: 30px;
  z-index:1;

}

/*.hero6 {
  top: 20%;
  left: 55px;
  z-index:1;
}*/

}/*end mobile*/

/* ##Device = Most of the Smartphones Mobiles (Portrait)/tablet
  ##Screen = B/w 320px to 479px*/
@media (min-width: 481px) and (max-width: 768px) {
body {
  font-family: myFirstFont;
}

.front-logo {
    height: 25vh;
  }
.front-logo-pos {
  position: absolute;
  top: 40%;
  left: 30%;
  z-index: 1;
  }

.branchlogo {
  width: 100%;
  }

.hero4 {
  position: absolute;
  bottom: 2%;
  left: 50%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.hero5 {
  position: absolute;
  bottom: 2%;
  left: 50%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.col-override{
  width: 100%;
}

.navbar {
  z-index: 2;

}

.left,.right {
  padding:0;
  height: 50vh;
}

.landing li a {
  font-size: 1.1em; 
  color: yellow;
  padding: 5px;

}

.hero3 {
  position: absolute;
  height: 30vh;
  width: 30vh;
  top: 25%;
  left: 30%;
  z-index:3;

}

.hero6 {
  position: absolute;
  height: 30vh;
  width: 30vh;
  top: 25%;
  left: 30%;
  z-index:3;

}

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/


/***************##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px*********************************************/
@media (min-width: 769px) and (max-width: 1025px) {

body {
  font-family: myFirstFont;
}

.front-logo {
  height: 20vh;
  }

.front-logo-pos {
  position: absolute;
  top: 40%;
  left: 32%;
  z-index: 1;
  }

.hero4 {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.hero5 {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.col-override{
  width: 100%;
}

.navbar {
  z-index: 2; 
}

.left,.right {
  padding:0;
  height: 50vh;
}

.landing li a {
  font-size: 1.3em; 
  color: yellow;
  padding: 15px;

}

.hero3 {
  position: absolute;
  height: 30vh;
  width: 30vh;
  top: 25%;
  left: 30%;
  z-index:3;

}

.hero6 {
  position: absolute;
  height: 30vh;
  width: 30vh;
  top: 25%;
  left: 30%;
  z-index:3;

}

}/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 769px) and (max-width: 1025px) and (orientation: landscape) {

  body{
    font-family: myFirstFont;
  }

.front-logo {
  height: 20vh;
  }

.front-logo-pos {
  position: absolute;
  top: 40%;
  left: 40%;
  z-index: 1;
  }

.hero4 {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.hero5 {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index:3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
    -webkit-transform: translate3d(-50%,-50%,0);
       -moz-transform: translate3d(-50%,-50%,0);
        -ms-transform: translate3d(-50%,-50%,0);
         -o-transform: translate3d(-50%,-50%,0);
            transform: translate3d(-50%,-50%,0);
}

.hero4 a img {
  height: 65px;
}

.hero5 a img {
  height: 70px;
}

.col-override {
  width: 100%;
}

.navbar {
  z-index: 2;
  padding-left: 10%;
}

.left,.right {
  padding:0;
  height: 50vh;
}

.landing li a {
  font-size: 1.3em; 
  color: yellow;
  padding: 15px;
}

.hero3 {
  position: absolute;
  height: 30vh;
  width: 30vh;
  top: 25%;
  left: 40%;
  z-index:3;
}

.hero6 {
  position: absolute;
  height: 30vh;
  width: 30vh;
  top: 25%;
  left: 40%;
  z-index:3;
}

</style>

</head>
<body>
<!-- loader -->
<div id="wrappers" class="hide-mobile"  style="z-index: 99;"> <!-- hide-mobile -->

  <div style="text-align: center;margin-left: 40px;">
  <img id="menulog" src="img/sun.png" height="190" width="300">
  </div>

<div style="text-align: center;">

<svg class="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="500px" height="100px" viewBox="0 0 1400 400" enable-background="new 0 0 574.558 120" xml:space="preserve">
  <defs>
    <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
      <path fill="#ff0000" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern> 

    <text class="verse" id="text"  >
        <tspan dy="1em" x="10" font-size="250">BAKASYUNAN</tspan>
        <tspan dy="1em" x="10"  font-size="100">RESORT AND CONFERENCE CENTER</tspan>
    </text>
    
    <mask id="text_mask">
      <use x="0" y="0" xlink:href="#text" opacity="1" fill="#fff"/>
    </mask>
  </defs>
 
  <use x="0" y="0" xlink:href="#text" fill="#fff"/>
  <rect class="water-fill" mask="url(#text_mask)" fill="url(#water)" x="-400" y="400" width="1800" height="500"/>

</svg>

  </div>
    <br>
      <div style="text-align: center;">
    <img id="loading" src="img/loading.gif" height="15" width="100">
  </div>

</div>

<!-- loader -->

<nav class="navbar navbar-fixed-top">

  <div class="container">

      <div class="navbar-header">
        <a href="index.php" class="pull-left rev-hide" style="height: auto;"><img src="img/logo.png" class="img-responsive"></a>
        <button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span>
          <i class="fa fa-lg fa-bars" style="font-size: 2.5em;color: yellow;"></i>
          </span>
         </button>
      </div>

    <div class="row">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
        <!-- <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> -->
        <ul class="nav navbar-nav landing" >
         <!--  <li class="border-solid-white" style="border:0.5px solid rgba(255,255,255,1);">
            <a href="#" onclick="return false;"  class="OpenNav"> 
            <i class="fa fa-lg fa-bars OpenNav"></i>
            </a>
          </li> -->
          <li class="border-solid-white">
            <a href="http://www.bakasyunanresorttanay.com/" >T A N A Y</a>
          </li>
          <li class="border-solid-white">
            <a href="zambales/index.php" >Z A M B A L E S</a>
          </li>
       <!--   <li class="border-solid-white">
            <a href="index.php" style="padding: 0;"><img src="img/menulogo.png" class="img-responsive logonav"></a>
          </li> -->
          <li class="border-solid-white">
            <a href="https://www.facebook.com/BakasyunanInnLaoag" >L A O A G</a>
          </li>
           <li class="border-solid-white">
            <a href="contact.html" >C O N T A C T</a>
          </li>
           <li class="border-solid-white">
            <a href="#" >B O O K N O W</a>
          </li>
        </ul>
    
      </div>
    </div>
  </div>

</nav>

<main style="-ms-overflow-style: none;">

  <div class="wrapper">  
    <div class="front-logo-pos" class="hide-mobile">
      <a href="index.php" style="padding: 0;"><img src="img/menulogo.png" class="front-logo img-responsive">
      </a>
    </div>  

    <div class="left col-lg-6 col-md-12 col-sm-12 col-xs-12">
        <div class="hero3 animate-hide" id="tanay">               
          <a href="http://www.bakasyunanresorttanay.com">
            <img src="img/tanay.png" onmouseout="document.getElementById('discover').src='img/discover.png';" onmouseover="document.getElementById('discover').src='img/discover_over.png';" class="branchlogo">
          </a>
        </div>

        <div class="hero4" data-id="discover">
          <a href="http://www.bakasyunanresorttanay.com">
            <img id="discover" src="img/discover.png" onmouseout="this.src='img/discover.png'" onmouseover="this.src='img/discover_over.png'">
          </a>         
        </div>

      <video class="myvideos" preload="auto" loop muted playsinline>
        <source src="video/tanay.webm" type='video/webm' />
        <source src="video/tanay.mp4" type='video/mp4' />
      </video>
    </div>

    <div class="right col-lg-6 col-md-12 col-sm-12 col-xs-12">
        <div class="hero6" id="zambales">        
          <a href="zambales/index.php">
            <img src="img/zambales.png"  onmouseout="document.getElementById('beach').src='img/beach.png'" onmouseover="document.getElementById('beach').src='img/beach_over.png'" class="branchlogo">
          </a>          
        </div> 

        <div class="hero5" data-id="beach">
          <a href="zambales/index.php">
          <img src="img/beach.png" id="beach" onmouseout="this.src='img/beach.png'" onmouseover="this.src='img/beach_over.png'">
          </a>          
        </div>

      <video class="myvideos" preload="auto" loop muted playsinline>
        <source src="video/zambales.webm" type='video/webm' />
        <source src="video/zambales.mp4" type='video/mp4' />
      </video>
    </div>

  </div><!-- wrapper -->
 
<!-- The overlay
<div id="myNav" class="overlay" >

   Button to close the overlay navigation 
  <a href="#" onclick="return false;" class="closebtn" id="CloseNav">&times;</a>

   Overlay content
  <div class=" font-color-white">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-1 col-override text-center" style="height: 100vh;padding-top: 60vh;background-color: #F0E68C;">
          <a href="about.php" class="font-yellow-italic">Menu</a>
        </div>
        <div id="rooms" class="nav-overlay-menu col-lg-2 text-center hide-mobile col-override2">
          <a  href="#" class="drop hero7 font-yellow-italic">
            Rooms &nbsp;
          <i id="icon" class="fa fa-plus-square"></i>
          </a>
          <div class="row drop-menu hero8">
          <a href="#" class="font-yellow-italic">Tanay</a>
          <a href="#" class="font-yellow-italic">Zambales</a>
          <a href="#" class="font-yellow-italic">Laoag</a>
          </div> 
          <video class="myvideos" preload="auto" loop muted playsinline>
          <source src="video/zambales.webm" type='video/webm' />
          <source src="video/zambales.mp4" type='video/mp4' />
          </video>
        </div>
        <div id="experience" class="nav-overlay-menu text-center col-lg-2 hide-mobile col-override2">
          <a href="#" class="hero7 font-yellow-italic">Experience</a>
          <video class="myvideos" preload="auto" loop muted playsinline>
          <source src="video/tanay.webm" type='video/webm' />
          <source src="video/tanay.mp4" type='video/mp4' />
          </video>
        </div>
        <div id="dining" class="nav-overlay-menu text-center col-lg-2 hide-mobile col-override2">
          <a href="#" class="hero7 font-yellow-italic">Dining</a>
          <video class="myvideos" preload="auto" loop muted playsinline>
          <source src="video/zambales.webm" type='video/webm' />
          <source src="video/zambales.mp4" type='video/mp4' />
          </video>
        </div>
        <div id="cont" class="nav-overlay-menu text-center col-lg-2 hide-mobile col-override2">
          <a href="#" class="hero7 font-yellow-italic">Contact</a>
          <video class="myvideos" preload="auto" loop muted playsinline>
          <source src="video/tanay.webm" type='video/webm' />
          <source src="video/tanay.mp4" type='video/mp4' />
          </video>
        </div>
      </div>
    </div>
  </div>
</div>-->

</main>
<!-- uncompressed version -->
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
<!-- minfied version for production -->
<!-- <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script> -->

<!-- Imports Font Awesome icons -->
<script src="https://use.fontawesome.com/c5d1608731.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(window).ready(function () {

/*overlay menu*/
  $('.OpenNav').on("click",function(){
  $('#myNav').css("width","100%");    
  })
  $('#CloseNav').on("click",function(){
    $('#myNav').css("width","0");
  })

/*hover play video*/
  $(".hero3,.hero4,.hero5,.hero6").on("mouseover", function(event){
  //fix animate on hover
  $(this).removeClass("bounceInDown");

    var id = $(this).attr('id');
    var ids = $(this).attr("data-id");

      if (id == "tanay" || ids == "discover") {
        $('.myvideos').get(0).play();
    } else {
        $('.myvideos').get(1).play();
    }
    }).on("mouseout", function(event) {
    var id = $(this).attr('id');
    var ids = $(this).attr("data-id");

      if (id == "tanay" || ids == "discover") {
        $('.myvideos').get(0).pause();
        $('.myvideos').get(0).currentTime = 0;
    } else {
        $('.myvideos').get(1).pause();
        $('.myvideos').get(1).currentTime = 0;
    } 
  });
    
  /*hoverplay for overlay menu*/
  $(".nav-overlay-menu").on("mouseover", function(event){
    var id = $(this).attr('id');

    switch (id) {
  case "rooms":
        $('.myvideos').get(2).play();
    break;
  case "experience":
        $('.myvideos').get(3).play();
    break;
  case "dining":
        $('.myvideos').get(4).play();
    break;
  case "cont":
        $('.myvideos').get(5).play();
    break;
  }     
  }).on("mouseout", function(event) {
    var id = $(this).attr('id');

    switch (id) {
  case "rooms":
        $('.myvideos').get(2).pause();
    break;
  case "experience":
        $('.myvideos').get(3).pause();
    break;
  case "dining":
        $('.myvideos').get(4).pause();
    break;
  case "cont":
        $('.myvideos').get(5).pause();
    break;
  }
  });

/*overlay-menu-dropdown*/
  $(".drop").click(function() {
    $('.drop-menu').slideToggle("slow");
    $('#icon').toggleClass('fa-plus-square fa-minus');
    });
  });

   ///browser check
    // Opera 8.0+
    //var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Firefox 1.0+
    var isFirefox = typeof InstallTrigger !== 'undefined';
    // Safari 3.0+ "[object HTMLElementConstructor]" 
    //var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
    // Internet Explorer 6-11
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    // Edge 20+
    var isEdge = !isIE && !!window.StyleMedia;
    // Chrome 1+
    var isChrome = !!window.chrome && !!window.chrome.webstore;
    // Blink engine detection
    //var isBlink = (isChrome || isOpera) && !!window.CSS;

  console.log(isFirefox);
  if (isFirefox||isEdge) {
        $({y:$('.water-fill').attr('y')})
          .animate(
          {y: -40},
          {duration:4000,
           step:function(now)
            {
              $('.water-fill').attr('y', now);
            },queue:false
        });

        $({x:$('.water-fill').attr('x')})
          .animate(
          {x: 0},
          {duration:3000,
           step:function(now)
            {
              $('.water-fill').attr('x', now);
            },queue:false
        });
  };

  $(function(){
      $(window).resize(function(){
         if($(this).width() >= 768){
          //loader timer
          setTimeout( function() {  
          $(".hero4,.hero5").addClass("fade");
          $(".hero3,.hero6").addClass("bounceInDown");
          $(".hero3,.hero6,.hero4,.hero5").removeClass("animate-hide");
          }, 4500);
          //logo fadein effect
          $("#menulog")
            .css('opacity', 0)
            .animate(
              { opacity: 1 },
              { queue: false, duration: 4000 }
            );

         }
      })
    .resize();//trigger resize on page load
  });
//removeoverlay
setTimeout( function() { $('#wrappers').slideUp(); }, 4000);

</script>
</body>

</html>