/* https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-navigation-bar-with-flexbox--cms-33535 */




nav.top-of-page 			{
				border: 0px solid purple;
				/* font-family: "Lato"; */
				font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
				padding: 1rem .9rem;
				}
				
/* 0. List styling: ul and li --------------------------------------------- */ 

				
ul.menu		{	
				align-items: center;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				list-style-type: none;
				
				}				


ul.menu	 li.nav-item {
				order: 1;
				position: relative;
				display: block;
				padding: .3rem;
				width: auto;
				}		
				

li.active.nav-item {
  				display: block;
				}


@media screen and (max-width: 768px) {  
/* turns the top nav into two decks when narrower than 768px */
ul.menu {
				justify-content: left; /* yes! great! */
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				margin: auto .5rem; 
				padding: auto .5rem;			
				}
li.nav-item :nth-child(2) {
    			margin-left: 0rem; padding-left: 0rem;
    			border: 0px solid red;
    			/* scoot 2nd list elemetn all the way to the left, no padding */
				} 
li.logo 		{
				flex: 1;
				font-size: 1.2rem;
				order: 0;
				padding-left: .3rem;
				padding-bottom: .4rem;
				flex-basis: 100%;
			    /* https://stackoverflow.com/questions/19574851/how-to-specify-an-element-after-which-to-wrap-in-css-flexbox */
				border-bottom: .1rem solid slategray;
				}				
}


@media screen and (min-width: 1120px) {  
/* turns the top nav into two decks when narrower than 768px */
ul.menu {
				margin-right: 10%;		
				}
}


/* mobile 
ul.menu {
				justify-content: center;
				align-items: flex-start;
				background: none;
				flex-wrap: nowrap;
				}
li.nav-item {
				display: none;
				order: 3;
				text-align: center;
				width: 100%;
				}
*/

	
/* 0. Hyperlink styling --------------------------------------------- */ 
				
nav.top-of-page  a 		{
				color: #333;
				text-decoration: none;
				border: 0px solid brown;
				padding: .4rem;
				}
nav.top-of-page  a:hover	{
				color: tomato;				
				text-decoration: underline;
				}				

ul.menu li.nav-item a {
				display: block;
				padding: .3rem !important;
				}
ul.menu li.nav-item a:hover	{
				color: tomato;
				text-decoration: underline;
				}	
				
			
/* 2. Onesides toggle, logo styling --------------------------------------------- */ 
		
.logo 			{
				flex: 1;
				font-size: 1.2rem;
				order: 0;
				padding-left: 0rem;
				}
				
.toggle {		
				display: none;
				flex: 1;
				font-size: 20px;
				order: 1;
				text-align: right;
				}				





/* 2. Buttons  --------------------------------------------- */ 
/*  not used ----------------------------------------------------------------------------- */ 
/*  end not used --------------------------------------------- */ 
			
				
				
/*  Submenu  --------------------------------------------- */ 
/*   not used --------------------------------------------- */ 
/*   end not used --------------------------------------------- */