* {
	  font-family: arial, sans-serif;
	  box-sizing: border-box;
	}

	/* menu block at top of page */
	.menu-block {
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: rgba(0, 0, 0, 0.5);
	  color: #f1f1f1;
	  width: 100%;
	  font-size: 14pt;
	}

	.top-nav {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: space-between;
	  /* background: linear-gradient(to right, #efeded, #000000); */
	  color: #FFF;
	  height: 50px;
	  padding: 1em; 
	}

	.menu {
	  display: flex;
	  flex-direction: row;
	  list-style-type: none;
	  margin: 0;
	  padding: 0; 
	}

	.menu > li {
	  margin: 0 1rem;
	  overflow: hidden;
	}

	.sub-item {
	  display: none;
	  position: absolute;
	  background-color: #000000;
	  font-size: 12pt;
	  font-weight: bold;
	  /* min-width: 120px; */
	  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
	  margin-left: -30px;
	  padding: 3px;
	  z-index: 1;
	}
	
	.sub-list {
	  list-style-type: none;
	}

	.menu > li:hover .sub-item {
	  display: block;
	}
    
	/* hamburger menu button */
	.menu-button-container {
	  display: none;
	  height: 100%;
	  width: 30px;
	  cursor: pointer;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}

	#menu-toggle {
	  display: none;
	}

	.menu-button,
	.menu-button::before,
	.menu-button::after {
	  display: block;
	  background-color: #fff;
	  position: absolute;
	  height: 4px;
	  width: 30px;
	  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
	  border-radius: 2px;
	}

	.menu-button::before {
	  content: '';
	  margin-top: -8px;
	}

	.menu-button::after {
	  content: '';
	  margin-top: 8px;
	}

	#menu-toggle:checked + .menu-button-container .menu-button::before {
	  margin-top: 0px;
	  transform: rotate(405deg);
	}

	#menu-toggle:checked + .menu-button-container .menu-button {
	  background: rgba(255, 255, 255, 0);
	}

	#menu-toggle:checked + .menu-button-container .menu-button::after {
	  margin-top: 0px;
	  transform: rotate(-405deg);
	}

	.subitem_li_1 {
	  background-color: #3e3e3e;
	  padding-top: 10px;
	  padding-bottom: 10px;
	}
	.subitem_li_2 {
	  background-color: #0e0e0e;
	  padding-top: 10px;
	  padding-bottom: 10px;
	}
	.subitem_li_3 {
	  background-color: #3e3e3e;
	  padding-top: 10px;
	  padding-bottom: 10px;
	}

	@media (max-width: 768px) {
	  .menu-button-container {
		display: flex;
	  }
	  .menu {
		position: absolute;
		top: 0;
		margin-top: 50px;  /* set same as .top-nav height */
		right: 0;
		flex-direction: column;
		width: 30%;
		justify-content: center;
		align-items: center;
	  }
	  #menu-toggle ~ .menu li {
		height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	  }
	  #menu-toggle:checked ~ .menu li {
		border: 1px solid #333;
		height: 3em;
		padding: 0.5em;
		transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
	  }
	  .menu > li {
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0.5em 0;
		width: 100%;
		color: white;
		background-color: #222;
	  }
	  .menu > li:not(:last-child) {
		border-bottom: 1px solid #444;
	  }
	  .sub-item {
	    margin-left: -180px;
      }
	}