html, * {
  margin: 0;
  height: 100%;
}

body {
  background: #4682B4;
  margin: 0;
  overflow-x: hidden;
}

.nav-container {
  float: right;
  margin-top: 0;
  width: 30%;
  position:absolute;
  right:0;
  top:0;
}

.content {
  height: 100%;
  width: 100%;
}

.nav-link-container {
  -moz-border-radius: 30px/30px;
  -webkit-border-radius: 30px 30px;
  border-radius: 30px/30px;
  width: 30px;
  height: 30px;
  background: white;
  float: right;
  margin-right: 3%;
  margin-top: 20px;
  position: absolute;
  margin-left: 27%;
}

.nav-menu-link {
  border-bottom: 5px double #4682B4;
  border-top: 2px solid #4682B4;
  height: 2px;
  width: 10px;
  position: absolute;
  margin-left: 10px;
  margin-top: 10px;
}

.nav-menu {
  float: right;
  background: #fafafa;
  list-style: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding-left: 0;
  font-family: 'Roboto', Helvetica, Arial;
  font-size: 11px;
  -ms-transition: transform 0.4s ease;
  -webkit-transition: transform 0.4s ease;
  -moz-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);
}

.nav-inactive-menu-link-container { display: none; }

.inactive-body { background: rgba(0, 0, 0, 0.7); }

.nav-active-menu-container {
  -ms-transform: translate(0);
  -webkit-transform: translate(0);
  -moz-transform: translate(0);
  transform: translate(0);
}

.nav-menu li {
  padding-left: 20px;
  height: 40px;
  border-bottom: 2px solid #f2f2f2;
}

.nav-menu li a {
  text-decoration: none;
  line-height: 40px;
  color: #b3b3b3;
  font-weight: bold;
}

.nav-menu li a:hover { color: #4682B4; }

.nav-close-menu-li {
  background: #4682B4;
  display: block;
}

.nav-close-menu-li a { color: white !important; }