<div id="nav-top">
  <div class="nav-logo">
    <i class="brand fab fa-angrycreative"></i>
  </div>
  <div class="nav-menu">
    <span id="nav-menu-cont" class="nav-menu-cont"><i class="menu fas fa-bars"></i><span id="nmt" class="nav-menu-text">Menu</span></span>
  </div>
  <div class="nav-contact">
    <span>+63 995 450 3163 / asterisk766@gmail.com</span>
  </div>
  <div class="nav-request">
    <a class="nav-request-flex"><i class="fas fa-play"></i><span class="nav-request-text">Let's get started</span></a>
  </div>
</div>
<div id="menu-panel" class="menu-panel">
  <div id="menu-panel-close" class="menu-panel-close"><i class="t00 f50 top right fas fa-times"></i>
  </div>
  <div class="menu-panel-content">
    <div  id="h1-about" class="menu-panel-item"><h1>About Us</h1></div>
    <div id="h1-services" class="menu-panel-item"><h1>Services Offered</h1></div>
    <div id="h1-contact" class="menu-panel-item"><h1>Contact Us</h1></div>
    <div id="h1-careers"class="menu-panel-item"><h1>Careers</h1></div>
  </div>
  <div id="menu-panel-sidebar" class="menu-panel-sidebar menu-bg1"></div>
</div>
<div id="page-contact">
  
</div>

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");

$image-menu-ini : url('http://www.prointeriordecor.com/decor/executive_office_interior_design_1093029808.jpg');
$image-menu-about: url('https://i.pinimg.com/originals/1d/23/3a/1d233a80f36b7a9366b109f88d1453ed.jpg');
$image-menu-services: url('https://thoitrangcase.vn/uploads/source/xuonginuv/uv17.jpg');
$image-menu-contact: url('https://www.takeda.com/siteassets/system/who-we-are/contact-us/contact1600x900.jpg');
$image-menu-careers: url('https://i2.wp.com/tecraze.com/wp-content/uploads/2018/03/MOBILE-APP-DEVELOPMENT.jpg?fit=1600%2C900');
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: rgb(17, 17, 28);
  font-family: "Open Sans";
}

* {
  box-sizing: inherit;
  font-family: inherit;
  transition: 0.3s;
}
#nav-top {
  display: flex;
  height: 100px;
  width: 100%;
  z-index:3;
}
.brand {
  padding-left: 50px;
  font-size: 100px;
  color: white;
}

.menu {
  font-size: 30px;
  color: white;
  margin: 5px;
}

.nav-logo {
  flex: 1;
}

.nav-menu {
  line-height: 100px;
  flex: 3;
  justify-items: center;
  align-items: center;
  .nav-menu-cont {
    cursor:pointer;
    &:hover > nav-menu-text {
      padding-left: 10px;
    }
    .nav-menu-text {
      padding-left: 10px;
      font-size: 30px;
      color: white;
      font-weight: 500;
    }
  }
}

.nav-contact {
  line-height: 100px;
  flex: 2;
  color: white;
  font-weight: 300;
}

.nav-request {
  line-height: 60px;
  flex: 1;
  color: white;
}

.nav-request-flex {
  background:linear-gradient(135deg,#9a142b,#b11731,#c71a38,#de1d3e,#e4304f,#e74762,#ea5e76,#e74762,#e4304f,#de1d3e,#c71a38,#b11731,#9a142b);
  background-size:300%;
  height:60px;
  margin:20px;
  box-sizing:border-box;
  align-items:center;
  text-align:center;
  border-radius:30px;
  position:absolute;
  width: 200px;
  text-decoration:none;
  cursor:pointer;
  z-index:0;
  &:hover {
    animation: animate 5s linear infinite;
    &:before {
      content:'';
      filter:blur(20px);
      opacity:.7;
      animation:animate 5s linear infinite;
    }
  }
  &:before {
    filter:blur(20px);
    content:'';
    position:absolute;
    top:-5px;
    left:-5px;
    bottom:-5px;
    right:-5px;
    background:linear-gradient(135deg,#9a142b,#b11731,#c71a38,#de1d3e,#e4304f,#e74762,#ea5e76,#e74762,#e4304f,#de1d3e,#c71a38,#b11731,#9a142b);
    background-size:300%;
    border-radius:30px;
    opacity:0;
    transition:0.5s;
  }
}


.nav-request-text {
  padding-left: 10px;
}


.menu-panel {
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:0%;
  color:white;
  background-color:rgba(27,27,38,1);
  transition:ease-out .60s ;
  z-index:2;
}
.menu-panel-close {
  position:absolute;
  top:0;
  right:0;
  padding:10px;
  cursor:pointer;
  z-index: 99;
  
    &:hover {
      color:crimson;
      }
}

.menu-panel-content {
 /*background-color:crimson;*/
  min-width:800px;
  width:50vw;
  height:60vh;
  display:flex;
  flex-direction:column;
  margin:20vh 0;
}

.menu-panel-item {
  width:50vw;
  flex:1;
  margin:0 auto;
  justify-items:center;
  align-items:center;
  text-align:center;
  transition: ease-out 5s linear;
  cursor:pointer;
}

.menu-panel-sidebar {
  position:absolute;
  right:0;
  top:0;
  height:100vh;
  width:50vw;
  background-repeat:no-repeat;
  background-size:cover;
  transition:1s;
  background-position:90%;
  overflow:hidden;
  z-index:1;
}

.menu-bg1 {
   background-image: $image-menu-ini; 
}

.menu-bg2 {
  background-image: $image-menu-about;
}

.menu-bg3 {
  background-image: $image-menu-services;
}

.menu-bg4 {
  background-image: $image-menu-contact;
}

.menu-bg5 {
  background-image: $image-menu-careers;
}

.frostnova {
  animation:frostnova 1s linear;
}


.c-red {
  color:crimson;
}

.top {
  top:0;
}

.right {
  right:0;
}

.f50 {
  font-size:50px;
}

.w100 {
  width:100%;
}

.t00 {
  transition: 0s ease-in;
}

@keyframes animate {
  0% {
    background-position:300%;
  }
  100% {
    background-position:0%;
  }
}

@keyframes frostnova {
  0% {
     filter:blur(10px);
  }
  100% {
     filter:blur(0px);
  }
}

/***********************************************************/
var menuLast = 0;
/***********************************************************/

$("#nav-menu-cont").click(function() {
  $("#menu-panel").toggleClass("w100");
  setTimeout(function() {
    $("#menu-panel-sidebar").addClass("frostnova");
  }, 10);
});

$("#menu-panel-close").click(function() {
  $("#menu-panel").toggleClass("w100");
  $("#menu-panel-sidebar").attr("class", "menu-panel-sidebar menu-bg1");
  menuLast = 0;
});

$("#h1-about").mouseenter(function() {
  $("#h1-about").addClass("c-red");
  if (menuLast != 1) {
    $("#menu-panel-sidebar").attr("class", "menu-panel-sidebar menu-bg2");
    setTimeout(function() {
      $("#menu-panel-sidebar").addClass("frostnova");
    }, 10);
    menuLast = 1;
  }
});
$("#h1-about").mouseleave(function() {
  $("#h1-about").removeClass("c-red");
});

$("#h1-services").mouseenter(function() {
  $("#h1-services").addClass("c-red");
  if (menuLast !=2) {
  $("#menu-panel-sidebar").attr("class", "menu-panel-sidebar menu-bg3");
  setTimeout(function() {
    $("#menu-panel-sidebar").addClass("frostnova");
  }, 10); 
    menuLast = 2;
  }
});
$("#h1-services").mouseleave(function() {
  $("#h1-services").removeClass("c-red");
});

$("#h1-contact").mouseenter(function() {
  $("#h1-contact").addClass("c-red");
   if (menuLast !=3) {
  $("#menu-panel-sidebar").attr("class", "menu-panel-sidebar menu-bg4");
  setTimeout(function() {
    $("#menu-panel-sidebar").addClass("frostnova");
  }, 10);
      menuLast = 3;
  }
});
$("#h1-contact").mouseleave(function() {
  $("#h1-contact").removeClass("c-red");
});

$("#h1-careers").mouseenter(function() {
  $("#h1-careers").addClass("c-red");
   if (menuLast !=4) {
  $("#menu-panel-sidebar").attr("class", "menu-panel-sidebar menu-bg5");
  setTimeout(function() {
    $("#menu-panel-sidebar").addClass("frostnova");
  }, 10);
     menuLast = 4;
  }
});
$("#h1-careers").mouseleave(function() {
  $("#h1-careers").removeClass("c-red");
});