@charset "UTF-8";
/* CSS Document */

/* label tag that displays hamburger menu and the "menu" text" */
#hamLabel {
  display:none;
  cursor: pointer;
  width: 50px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #efefef;
  text-align: center;
  padding-top: 7px;
  position: absolute;
  z-index: 100;
  top: 10px;
  right: 10px;
  /*transition: background-color 0.2s ease;
*/

}

#hamLabel:hover{
	background-color: #BBB;
	color:white;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  /*display: none;*/
  width: 100%;
  position: absolute;
  height: 160px;
  top: -300px; /* HIDE MENU OFF SCREEN */
  left: 0px;
  list-style: none;
  /*border: 1px solid red;*/
  /*background-color: #ddd;*/
  transition: top 0.4s ease; /* NEEDED FOR ANIMATION SLIDE */
  margin: 0;
  padding: 0;
}

#menu li{
	border-bottom: 1px solid #ccc;
	
}

#menu li a{
	display: block;
	padding: 15px 40px;
	text-decoration: none;
	text-align: center;
	color: white;
	font-size: 16pt;
	background-color: #666;
	transition: all 0.4s ease; /* hover state color change animation */
}

#menu li a:hover{
	background-color: #949595;
}

/* make menu show the fuck up, i.e. THIS IS THE MAGIC */
#menu-toggle:checked + #menu {
  display: block;
  top: 0; /* move from -195px to top of screen */
}

@media screen and (max-width: 768px) {
	/* swap visiable navigation menus */
  #hamLabel{display: block;}
	#navtop nav{display: none;}

}