#Header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.grid-container1 {
  display: grid;
  grid-template-columns: 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6% 6%;
  grid-gap: 5px;
  background-color: gold;
  padding: 10px;
}

.grid-container1 > div {
  font-family: Helvetica, Arial, sans-serif;
  color: midnightblue;
  background-color: gold;
  text-align: center;
  padding: 0px 0;
  margin-left: 10px;
  margin-right: 10px;
}

.Logo {
  grid-area: 1 / 6 / 2 / 12;
  
}

.menu1 {
  grid-area: 2 / 1 / 3 / 5;
}

.menu2 {
  grid-area: 2 / 5 / 3 / 9;
}

.menu3 {
  grid-area: 2 / 9 / 3 / 13;
}

.menu4 {
  grid-area: 2 / 13 / 3 / 16;
}

.dropbtn {
  background-color: gold;
  color: midnightblue;
  padding: 12px 15px;
  text-decoration: none;
  font-size: 1.5em;
  border: none;
  cursor: pointer;

}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lemonchiffon;
  min-width: 150px;
  z-index: 1;
}

.dropdown-content a {
  color: midnightblue;
  padding: 12px 15px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: midnightblue;
  color: gold;
}

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

.dropbtn a:hover {
  background-color: midnightblue;
  color: gold;
}

a{ 
  text-decoration: none;
}

@media only screen and (max-width: 1007px) {

#Header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.grid-container1 {
  display: grid;
  grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
  grid-gap: 3.5px;
  background-color: gold;
  padding: 7px;
}

.grid-container1 > div {
  font-family: Helvetica, Arial, sans-serif;
  color: midnightblue;
  background-color: gold;
  text-align: center;
  padding: 0px 0;
  margin-left: 7px;
  margin-right: 7px;
}

.Logo {
  grid-area: 1 / 3 / 2 / 7;
  
}

.menu1 {
  grid-area: 2 / 1 / 3 / 3;
}

.menu2 {
  grid-area: 2 / 3 / 3 / 5;
}

.menu3 {
  grid-area: 2 / 5 / 3 / 7;
}

.menu4 {
  grid-area: 2 / 7 / 3 / 9;
}

.dropbtn {
  background-color: gold;
  color: midnightblue;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 1em;
  border: none;
  cursor: pointer;

}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lemonchiffon;
  min-width: 100px;
  z-index: 1;
}

.dropdown-content a {
  color: midnightblue;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: midnightblue;
  color: gold;
}

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

.dropbtn a:hover {
  background-color: midnightblue;
  color: gold;
}

a{ 
  text-decoration: none;
}

}

@media only screen and (max-width: 600px) {

#Header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.grid-container1 {
  display: grid;
  grid-template-columns: 12% 12% 12% 12% 12% 12% 12% 12%;
  grid-gap: 2.5px;
  background-color: gold;
  padding: 5px;
}

.grid-container1 > div {
  font-family: Helvetica, Arial, sans-serif;
  color: midnightblue;
  background-color: gold;
  text-align: center;
  padding: 0px 0;
  margin-left: 5px;
  margin-right: 5px;
}

.Logo {
  grid-area: 1 / 3 / 2 / 7;
  
}

.menu1 {
  grid-area: 2 / 1 / 3 / 3;
}

.menu2 {
  grid-area: 2 / 3 / 3 / 5;
}

.menu3 {
  grid-area: 2 / 5 / 3 / 7;
}

.menu4 {
  grid-area: 2 / 7 / 3 / 9;
}

.dropbtn {
  background-color: gold;
  color: midnightblue;
  padding: 4px 5px;
  text-decoration: none;
  font-size: 1em;
  border: none;
  cursor: pointer;

}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lemonchiffon;
  min-width: 50px;
  z-index: 1;
}

.dropdown-content a {
  color: midnightblue;
  padding: 4px 5px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: midnightblue;
  color: gold;
}

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

.dropbtn a:hover {
  background-color: midnightblue;
  color: gold;
}

a{ 
  text-decoration: none;
}

}

@media only screen and (max-width: 375px) {

#Header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.grid-container1 {
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 9% 9% 9%;
  grid-gap: 1px;
  background-color: gold;
  padding: 1px;
}

.grid-container1 > div {
  font-family: Helvetica, Arial, sans-serif;
  color: midnightblue;
  background-color: gold;
  padding: 0px 0;
}

.Logo {
  grid-area: 1 / 3 / 3 / 8;
  
}

.menu1 {
  grid-area: 3 / 1 / 4 / 3;
}

.menu2 {
  grid-area: 3 / 3 / 4 / 5;
}

.menu3 {
  grid-area: 3 / 5 / 4 / 7;
}

.menu4 {
  grid-area: 3 / 7 / 4 / 9;
}

.menu5 {
  grid-area: 3 / 9 / 4 / 11;
}

.dropbtn {
  background-color: gold;
  color: midnightblue;
  padding: 0.5px 0.5px;
  text-decoration: none;
  font-size: 0.7em;
  text-align: center;
  border: none;
  cursor: pointer;

}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lemonchiffon;
  font-size: 0.7em;
  text-align: left;
  min-width: 10px;
  z-index: 1;
}

.dropdown-content a {
  color: midnightblue;
  padding: 0.5px 0.5px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: midnightblue;
  color: gold;
}

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

.dropbtn a:hover {
  background-color: midnightblue;
  color: gold;
}

a{ 
  text-decoration: none;
}

}