/*Reference W3 Schools - Resp Navbar Dropdown*/

body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #F1F1F1;
}

.topnav a {float: left; border: 2px solid #ddd; display: block; color: #0077EE; text-align: center; padding: 10px 6px;
	text-decoration: none; margin: 1px; font-size: 17px;}
 
.active {background-color: #4CAF50; color: white;}

.topnav .icon {display: none;}

.dropdown {float: left; overflow: hidden;}

.dropdown .dropbtn {border: 2px solid #ddd; outline: none; color: #0077EE; padding: 10px 6px; background-color: inherit;
  font-family: inherit; margin: 1px; font-size: 17px;}

.dropdown-content {display: none; position: absolute; background-color: #F1F1F1; min-width: 100px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}

.dropdown-content a {float: none; color: #0077EE; padding: 10px 6px; text-decoration: none; display: block; text-align: left;}

.topnav a:hover, .dropdown:hover .dropbtn {background-color: #F1F1F1; color: #DD0033;}

.dropdown-content a:hover {background-color: #F1F1F1; color: #DD0033;}

.dropdown:hover .dropdown-content {display: block;}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}