nav{
  z-index:2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul{
  margin: 0;
  list-style: none;
}
nav a{
  display: block;
  text-decoration: none;
  color: black;
}
/*Medium up (i.e. large screens)*/
@media(min-width: 769px){
	nav > ul {
		z-index:3;
		white-space:nowrap;
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		line-height:1;
	}
	nav > ul > li {
		position:relative;
	}
	nav > ul > li:not(:last-child){
    margin-right: 40px;
	}
	nav > ul > li > a {
    font-family:var(--font-family-serif);
    font-size: 1.25rem;/*20px*/
		padding:12px 0;
	}
	nav > ul > li:hover > a,
	nav > ul > li.hover > a,
  nav > ul > li.active > a{
		color:var(--secondary);
	}
	/*NAV-SUBNAV*/
	nav ul ul {
		background:white;
		position: absolute;
		top: -999em;
		z-index: 1;
		height: auto;
		opacity:0;
		white-space:nowrap;
		box-shadow:var(--box-shadow);
		min-width:200px;
    visibility: hidden;
    border:1px solid var(--border-color);
    padding:14px;
		line-height:1.25;
	}
	nav ul li:hover ul,
	nav ul li.hover ul{
		top:auto;
		opacity:1;
		transition: opacity 400ms;
    visibility: visible;
	}
	nav ul ul li:not(:last-child){
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
    padding-bottom: 12px;
	}
	nav ul ul a:hover,
	nav ul ul a:focus{
    color:var(--secondary);
	}
}

/*Medium down*/
@media (max-width:768px){
  nav{
    background:var(--primary);
    position: relative;
    flex-direction: column;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  nav ul{
    display: none;
  }
  nav a{
    padding:12px;
  }
  nav a:hover{
    color: inherit;
    background: rgba(0,0,0,.1);
  }
  /*Top level ul*/
  nav > ul {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    background:white;
		box-shadow:var(--box-shadow);
  }
  nav > ul.open{
    display: block;
  }
  /*Sub menu (ul ul)*/
  nav ul ul {
    background:rgba(0,0,0,.1);
    font-size: .875rem;
  }
  /*Menu button*/
  nav button {
    cursor: pointer;
    color: white;
    font-size: inherit;
  }
}