.topnav {
	overflow: hidden;
	top: 0;
	left: 0;
	position: fixed;
	z-index:1;
	width: 100%;
	border-bottom: 1px solid gray;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	background-color: white;
	padding: 8px 16px!important;
}
.topnav a {
    float: right;
	display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.topnav a:hover {
    background-color: lightgray;
}
.topnav .active {
    background-color: gray;
}
.topnav .icon {
	display: none;
}
.topnav a.left {
	float: left;
	display: block;
    text-align: center;
    padding: 14px;
    text-decoration: none;
	font-weight: bold;
	font-size: 18pt;
}

@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive .icon {
	position: absolute;
    right: 16px;
    top: 8px;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive {float: none;}

  .topnav.responsive {
    display: block;
    width: 100%;
    text-align: left;
  }
}