header#masthead {
position: fixed;
width: 100%;
height: 190px;
z-index: 999;
padding-top: 10px;
background: transparent;
}

header#masthead .container {
width: 100%;max-width: inherit;
}

body.menu-open {
height: 100vh; /* Prevent scrolling */
overflow: hidden; /* Hide overflowing content */
position: fixed; /* Prevent movement */
width: 100%; /* Avoid shifting issues */
}

#navigation .logo-transparent {
position: absolute;
z-index: 9;
right: 50px;
bottom: 50px;
height: 400px;
width: 400px;
}


#navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #293a52;
transform: translateX(100%);
transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 9999;
/*--overflow-y: auto; /* Enables vertical scrolling */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}


#navigation .nav-menu {
height: 100vh;
position: absolute;
right: 0;
top: 0;
width: 550px;
padding: 30px 3% 50px 0;
display: flex;
flex-direction: column;
overflow-y: auto;
margin: 0px;  
}

#navigation .dropdown-arrow {
position: absolute;
right: 2%;
font-size: 14px;
color: #ffffffc2;
font-style: normal;
top: 22px;
}

#navigation .nav-menu li {
position: unset;
width: 100%;
height: 65px;
z-index: 99;

}

#navigation .nav-menu li li {
height: auto;
}

#navigation .nav-menu a {
text-decoration: none;
color: #FFF;
padding: 10px 45px;
display: block;
font-size: 25px; font-weight: 300;
transition: background 0.3s;
position: relative;
}

#navigation .nav-menu a:hover,
#navigation .nav-menu a:focus {
background: rgba(255, 255, 255, 0.1%);
}

/* Dropdown Menu */
#navigation .quicklink-menu {
list-style: none;
margin: 0;
padding: 50px 0;
top: 100%;
left: 0;
background-color: #ffffff05;
min-width: 200px;
position: absolute;
left: 45%;height: 100%;
width: 55%;
top: 0px;z-index: 99; height: 100%;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */  
overflow-y: auto;
height: 100vh;

}

#navigation .quicklink-menu li {
width: 100%;
}

#navigation .quicklink-menu a {
padding: 10px 50px;
display: block;
color: white;
font-size: 19px;font-weight: 500;
transition: background 0.3s;
}

#navigation .quicklink-menu a:hover,
#navigation .quicklink-menu a:focus {
background: rgba(255,255,255,0.02);
}


#navigation .nav-menu {
width: 550px;
transition:
width 0.6s cubic-bezier(0.77, 0, 0.175, 1),
transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}


#navigation .nav-menu.expanded {
width: 850px;
}


#navigation .nav-menu.expanded li {
width: 370px;
}


.quicklink-toggle .dropdown-arrow{
  display:inline-block;
  width:0;
  height:0;
  margin-left:6px;
  vertical-align:middle;

  border-left:6px solid currentColor;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;

  transition:transform .2s ease;
}

.quicklink-toggle .dropdown-arrow.is-open{
  transform:rotate(90deg);
}




#navigation.menu-open {
transform: translateX(0);
}

.menu-button {
position: fixed;
right: 70px;
top: 70px;
display: block;
z-index: 999999;
background: none;
width: 50px;
height: 50px;
background-size: 30px auto;
background-repeat: no-repeat;
background-position: center;
border: none;
color: transparent;
cursor: pointer;
background: transparent url(https://trust.merciaadmin.com/wp-content/themes/madebycoda/images/nav.svg) no-repeat;
background-position: center center;
}  

.menu-open .menu-button {
right: 40px;
top: 40px;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}


@media (max-width: 750px) {
  
  #navigation .nav-menu {
    padding: 30px 0% 50px 0;
  }
  #navigation .nav-menu,
  #navigation .nav-menu.expanded {
    width: 100%;
  }
  
  #navigation .nav-menu li {
    height: auto;
  }
  
  #navigation .quicklink-menu {
    width: 100%;
    position: relative;
    left: 0;
    height: inherit;
    overflow-y: inherit;
    padding: 10px 0;
  }
  
  #navigation .dropdown-arrow {
    right: 8%;
  }
  
  #navigation .nav-menu.expanded li {
      width: 100%;
  }
  
}


@media (max-width: 600px) {
  
#navigation .transparent-logo  {
  opacity: 0.3
}
   
 #navigation .nav-menu a {
   font-size: 20px;
   padding: 10px 25px;
 }
 
 #navigation .quicklink-menu a {
 padding: 10px 30px;
 }
 
 #navigation .quicklink-menu a {
   font-size: 17px;
 }
 
 .menu-open .menu-button {
     right: 30px;
     top: 35px;
 }
 
 #navigation .dropdown-arrow {
     right: 50px;
 }
  
}