/* Navigation bar 
.burger {
    display: none;
    cursor: pointer;
    padding: 8.5px 4px;
    z-index: 10;
    background-color: white;
    border-radius: 10px;
  }
  
  .burger div {
    background-color: black;
    width: 30px;
    height: 2px;
    margin: 7px;
    transition: all 0.3s ease;
  }
  
  .toggle .l1 {
    transform: rotate(-45deg) translate(-6.5px, 6.5px);
  }
  
  .toggle .l2 {
    opacity: 0;
  }
  
  .toggle .l3 {
    transform: rotate(45deg) translate(-6.5px, -6.5px);
  }
  
  @media screen and (max-width: 965px) {
    .mainnav {
      display: none;
    }
  
    .burger {
      display: block;
    }
  
    .navbar {
      width: 100%;
    }
  
    .navbar-toggle {
      position: absolute;
      top: 17px;
      right: 20px;
    }
  
    .active {
      display: block;
    }
  
    .mainnav li {
      width: 100%;
      text-align: center;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
    }
  
    .mainnav li a {
      display: block;
      padding: 1rem;
    }
  
    .navcontent {
      display: block;
    }
  
    nav ul li {
      padding: 10px 10px;
    }
  
  }*/
  
/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
	width: 100%;
	z-index:10;
	position:relative;
	float:left;
	font-size:20px;
	margin-bottom:15px;
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
}
#nav li a{
	color: #000;
	display: block;
	text-decoration:none;
}

/* first level */

#nav > ul{
	text-align:center;
	padding-left:0px !important;
	margin-left:0px !important;
}
#nav > ul > li{
	margin:0px 12px;
	padding:4px 6px;
	height: 100%;
	display:inline-block;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
}
#nav > ul > li:not( :last-child ) > a{
	
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a{
	
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:170px;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
}
#nav li ul a{
	color:#000;
	padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
}
/* -------------------- End Navigation -------------------- */

@media only screen and (max-width:720px){
	/* -------------------- Start Navigation -------------------- */
	#nav{
        position: relative;
    }
	#nav > a{
	}
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: block;
		width:100%;
		text-align:center;
		color:#000;
		font-size:20px;
		padding:5px 0px;
		text-decoration:none;
	}
	
	#nav a{
		font-size:18px;	
	}
 
    /* first level */
 
    #nav > ul{
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background-color:#ccc;
		margin-top:8px !important;
		padding-bottom:10px;
    }
	#nav:target > ul{
		display: block;
	}
	#nav > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
		padding:4px 0px;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	/*End Navigation*/
}