.dropbtn {
  padding: 16px;
  color: #fff;
  border: none;
  background-color: #121212;
  font-family: 'TeXGyreAdventorRegular';	
  font-size: 100%;
  font-variant: small-caps;
  letter-spacing: .2rem;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  z-index: 999;
}

.dropdown-content a {
  color: black;
  padding: 1% 1%  1% 4%;
  text-decoration: none;
  display: block;
  font-variant: small-caps;
  letter-spacing: .1rem;
}

#menuItem{
  width:10%; 
}

div.smLogo {
    display: none;
  }

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

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

.dropdown:hover .dropbtn {background-color: #121212;}


/* Breakpoints */


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

.logoImage{
display:none;
visibility:none;
}

#menuItem{
  width:25%; 
}

div.smLogo {
    display: Table;
	text-align: center;
	width: 100%;
  }

 .dots {
    display: none;
  }

}

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

.logoImage{
display:none;
visibility:none;
}

#menuItem{
  width:25%; 
}

div.smLogo {
    display: Table;
	text-align: center;
	width: 100%;
  }


}


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

.logoImage{
display:none;
visibility:none;
}

#menuItem{
  width:25%; 
}

div.smLogo {
    display: Table;
	text-align: center;
	width: 100%;
  }


}