.hamburger-menu
{
  position: absolute;
  display: none;
  cursor: pointer;
  z-index: 10001;
}
.hamburger-menu img {
  width: 4vw;
}
nav {
  z-index: 101;
}
nav ul {
  -webkit-margin-before: 0;
}
@media screen and (min-width: 500px) {
  nav {padding-top: 1vw;}
  nav {position: absolute; display: inline; width: 100%;}
  nav a:link {/*color:white; */text-decoration:none;}
  nav a:visited {/*color:white; */text-decoration:none;}
  nav ul ul {display: none; text-align: left; width: 24.5vw;}
  nav ul li:hover > ul {display: block;}
  nav ul {background: #3f6794; background: linear-gradient(top, #3f6794, #5e81a9, #3f6794); background: -moz-linear-gradient(top, #3f6794, #5e81a9, #3f6794); background: -webkit-linear-gradient(top, #3f6794, #5e81a9, #3f6794); padding: 0px; list-style: none; position: relative; display: inline-table; width: 100%;}
  nav ul:after {content: ""; clear: both; display: block;}
  nav>ul>li {font-size: larger; float: left; margin: 0px 1vw; color: darkblue; text-decoration:none; width: 22.5vw;}
  nav>ul>li:first-child { padding-left: 16vw;}
  nav ul li:hover>a {color: darkblue; text-decoration: none;}
  nav ul li a {display: block; padding: 0px 0px; color: black; text-decoration: none;}
  nav ul ul {background: #3f6794; border-radius: 0px; padding: 0; margin: 0; position: absolute; top: 100%; z-index: 1000;}
  nav ul ul li {float: none; border-bottom: .vw solid yellow; position: relative; z-index: 1000; font-size: medium; margin: 0px 1vw; width: 22vw;}
  nav ul ul li:last-of-type {border: none;}
  nav ul ul li a {padding: .5vw 0; color: #fff;}
  nav ul ul ul {position: absolute; left: 100%; top: 0; z-index: 1000;}
  /* Project Specific */
  nav ul {
    background: transparent;
    width: auto;
  }
  nav>ul>li {
    position: relative;
    margin: 1.4vw 1.0vw;
    font-size: 1.8vw;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    text-decoration: none;
    line-height: 1vw;
    width: auto;
  }
  nav ul>li>a:link {
    color: #003399;
  }
  nav>ul>li>a:visited {
    color: #5050b1;
  }
  nav>ul>li>ul>li>a:visited {
    color: white;
  }
  nav ul li:hover>a {
    color: darkblue;
  }
  nav ul ul {opacity: 1.0; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; padding: .2vw; padding-top: 1vw; margin: 0; position: absolute; top: 100%; z-index: 1000; width: auto;}
  nav ul ul {
    background: linear-gradient(top, transparent, #003300, #003300);
    background: -moz-linear-gradient(top, transparent, #003300, #003300);
    background: -webkit-linear-gradient(top, transparent, #003300, #003300);
  }
  nav ul ul li {float: none; border-bottom: none; position: relative; z-index: 1000; font-size: 1.4vw; margin: 0px .5vw; width: auto;}
  nav ul ul li:last-of-type {border: none;}
  nav ul ul li a:link {padding: .3vw 0; color: #ffffff; opacity: 1.0;}
  nav ul ul li a:hover {color:#CCCC33; opacity: 1.0;}
}

@media screen and (max-width: 500px) {
  div.hamburger-menu {
		display: inline-block;
    left: 90vw;
    top: 4vw;
    line-height: 1.0;
  	z-index: 10002;
  }
  nav {
    visibility: hidden;
  }
  nav {position: absolute; display: block; width: 100%; z-index: 10002;}
  nav {top 0; left 0; padding-left: 1vw;}
  nav {
    background: linear-gradient(right, transparent, #003300, #003300);
    background: -moz-linear-gradient(right, transparent, #003300, #003300);
    background: -webkit-linear-gradient(right, transparent, #003300, #003300);
    color: white;
  }
  nav a:link {color:white; text-decoration:none;}
  nav a:hover {color: #66CC99;}
  nav a:visited {color:white; text-decoration:none;}
  nav {padding: 0; margin: 0; border: 0;}
  nav ul,
  nav ul li,
  nav ul ul {list-style: none; margin: 0; padding: 0; border: 0; z-index: 20000}
  nav ul {position: relative;}
  nav ul li {
    line-height: 1.6;
    vertical-align: middle;
    font-size: 4vw;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    text-decoration: none;
	}
  nav ul ul li {
    font-size: 3vw;
	}
  nav ul ul {display: block; position: relative; padding-left: 2vw; z-index: 30000; width: 100%;}
}