body {

  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}


/** Topbar menu **/
.button {
 /* color: green; /**/
  cursor: pointer; /**/
  background: none; /**/
  border: none; /**/
}

.menu-item:hover .button,
.menu-item.active .button {
  color: yellow; /*Color of menu item when active*/
}

.menu-item {
  overflow: visible !important;
  position: relative; /* required for absolute submenu positioning */
}

.menu-item.active .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sub-menu {
  position: absolute; /**/
  /*left: -10px; /**/
  top: calc(100% + 0.9rem); /**/
  background-color: #699999; /**/
  padding: 0.75rem 1.0rem; /**/
  border-radius: 0.25rem; /**/
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /**/
  opacity: 0; /**/
  transform: translateY(-10px); /**/
  pointer-events: none; /**/
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; /**/
  z-index: 1000; /**/
}

.sub-menu.active {
	opacity: 1;
	pointer-events: auto;
}

.sub-menu-item {
	 white-space: nowrap;
	 color: white;
	 cursor: pointer; /**/
}
.sub-menu-item:hover {
	 color: black;
	 
}

/*------------------------------------------------------------------------------*/