/* ==MEGA MENU STYLES--*/

/*.mega*/
nav{
background: #fff;
font-family: 'Source Sans Pro', sans-serif;
font-weight: normal;
width: 1200px;
margin: 0 auto;
}
 
/*large ul that serves as a container for multiple divs*/ 
/*ul class*/
.menu-main {
width: 1200px;
height: auto;
padding-right: 0;
background-color: #249f56;
padding: 0;
margin: 0 auto;
z-index: +2;
}
 
ul.menu-main + li a:hover{
color: white;
}
 
/*.menu-main*/ 
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
text-align: left;
box-sizing: border-box;
}
 
nav li {
display: inline-block;
font-weight: 300;
color: white;
}
  
.first-item {
padding: .75em 1.75em;
}

.first-item:hover {
cursor: pointer;
}
 
nav a {
color: white;
text-decoration: none;
display: block;
padding: .75em 1.75em;
font-weight: 300;
}
 
nav li:hover {
background-color: #0e7a2d;
}

/*this makes the dropdown links black, but also the main items*/
nav li:hover a {
color: black;
}

/*div class*/ 
.menu-sub {
/*don'touch:*/
display: none;
position: absolute;
left: 0;
/*background: #444;*/
/*background: yellow;*/
color: #fff;
padding: 0;
padding: 10px;
width: 1200px;
box-sizing: border-box;
margin-top: 15px;
/*margin-top 15px lines the bottom up with the other links, but that extra 5px gap means the cursor can lose the menu*/
margin-top: 12px; 
/*padding-top: 15px;*/
 padding-left: 25px;
}
 
/*8px is the maximum gap without breaking the hover state*/
.menu-sub {
margin-top: 8px;
}

/*not sure if this makes a difference*/
.menu-sub {
padding-top: 10px; 
}

 
 
nav li:hover .menu-sub {
display: block;
background-color: white;
/*box-shadow: 0px 4px 4px #bbb;*/
box-shadow: 0px 4px 4px #444;

}
 
.menu-sub li {
display: block;
}
 
.menu-sub a {
padding: 0;
margin-bottom: .5em;
}
 
.menu-sub a:hover {
text-decoration: underline;
background-color: white;
color: blue;
} 

/*h3*/
.menu-category {
color: #21914f;
font-weight: 600;
text-transform: uppercase;
margin-top: 0;
line-height: 120%;
}

.menu-column {
float: left;
display: inline-block;
width: auto;
margin-right: 30px;
/*border: 1px dotted gray;*/
}
 
.floated-list {
float: left;
display: inline-block;
margin-right: 25px;
}

  
/*smaller sub-menus - don't extend full width like mega menu*/

/*this keeps the top links parent color*/
.top-link a:hover {
color: white;
}

/*this keeps the top links parent color for sub menus that are not mega-menus*/
li.active-link:hover > a  {
color: white;
}

li.top-link .small-sub ul li a:hover {
color: blue;
}

/*test*/


/*small-sub div is enclosed in the .top-link li */
.small-sub{
display: none;
}

nav li:hover .small-sub {
display: block;
}

.small-sub ul {
background-color: #444;
position: absolute;
}

.small-sub ul li:hover a {
color: blue;
}

.small-sub ul{
background-color: white;
box-shadow: 0px 4px 4px #bbb;
 
}

.small-sub ul li:hover{
background-color: white;
box-shadow: none;
color: red;
}
 
/*etc*/

#top {
display: none;
}

.mobile-mast-wrap {
display: none;
}

/*user css*/

#bigLogo {
height: 70px;
display:none;
}
 
.navWrap {
width: 1200px!important;
height: 200px;
margin-left: 0;
margin: 0 auto;
position: absolute;
margin-top: 80px;
}

.mast-inner-container {
width: 1200px;
border: 1px solid green; 
}

.masthead-full {
width: 1200px;
height: 125px;
}

/*this makes room for full dropdown*/
.site-header {
height: auto;
padding-bottom: 0;
}

.mast-inner-container {
position: absolute;
border: none;
}

.mast-top-level {
float: right;
margin-top: 35px;
}
 
/*This makes parent level links evenly spaced*/
ul.menu-main  {
display:flex;
flex-direction: row;
justify-content: space-around;
}
 
 /*instead of flex, this centers the top links so there is a larger gap on the sides*/
 ul.menu-main {
/*
 margin: 0 auto;
 text-align: center;
*/
 }


/*sub-menu background colors*/ 
nav li:hover .menu-sub {
/* background-color: #fffbd0; */
/* background-color: #ecf6fc; */
 /* background-color: #fffef2; */
/* background-color: #eee; */
/*  background-color: #fffce1;*/
background-color: white;
}
 
/*last round*/

#bigLogo {
 display: block;
}

.menu-sub {
z-index: +1;  
}
.menu-main {
height: 30px;
margin-top: 10px;  
/* padding-top: -5px; */
}
.menu-main a, .menu-main .first-item  {
 padding-top: 6px;
}

.menu-main {
  /* background-color: black; */
  /* background-color: #2b2b2b; */
  /* background-color: #3c3c3c; */
  /* background-color: #3789c8; */
   background-color: #0b7ba3; 
  /* background-color: #0e7a2d; */
  /* background-color: #ffcf65; */
  /* background-color: #ba8000; */
  /* background-color: #2b93ce; */
 }

/*makes header green text over white background with green border*/
.prominent h1 {
/*
color: #00a253;
background-color: white;
border: 2px solid #00a253;
font-weight: 400;
*/
}




/*====MOBILE NAVIGATION====*/
@media (max-width: 600px) {

.mega {
display: none;
}

.mobile-mast-wrap {
display: block;
}

/*mobile styles copied from main site*/

.deskNav  {
display: none;
}
 
#mobileMenu {
display: block!important;
width: 100%;
margin-top: 10vw;
}

.navWrap {
position: absolute;
display: none;
}

#mobileMenu button {
padding: 12px;
float: right; 
z-index: +999;
border: 1px solid gray;
position: absolute;
right: 0;
border-radius: 4px 4px 4px 4px;
margin-right: 5px;
margin-right: 10px;
margin-top: 5px;
padding-bottom: 21px;

-webkit-tap-highlight-color: white;
/*this is the button to show the nav menu*/
display: block;
background-color: white;
background-color: #00a253;
background-color: #3789c8;
color: white;
}

#mobileMenu button:active, #mobileMenu button:hover {
background-color: white;
color: black;
}

#toggleNav {
border: 1px solid white;
z-index: +1;
position: absolute;
overflow: hidden;
height: auto;
width: 100%;
box-shadow: 0 0 10px 0 black;
background-color: gray;
}

/*vs2*/
#toggleNav {
background-color: #f9dd97;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fbf2db' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/*vs3*/
#toggleNav {
background: none;
background-color: #00a253;
background-color: #3789c8;
}
     
#toggleNav ul {
list-style:none;
}

#toggleNav li {
list-style-type:none;
display: inline-block;
border: 1px solid black;
text-align: center;
font-weight: lighter;
width: 23%;
margin-bottom: 9px;
margin-right: 2px; 
margin-top: 5px;
margin-left: 5px;
-webkit-tap-highlight-color: white;
}
    
#toggleNav li a {
display: block;
padding: 15px;
color: black;
font-family: 'Source Sans Pro', sans-serif;
font-size: .9em;
}
    
#toggleNav li a:link, #toggleNav li a:visited {
background-color: #eee;
text-decoration: none;
} 
     
#toggleNav li a:hover, #toggleNav li a:active {
background-color: white;
color: black;
} 

/*testing for hover state colors on mobile*/
#mobileMenu button:active {
background-color: white;
}

/*this pertains to Javascript*/
nav#mobileMenu {
display: none;
}


  
/*dont touch*/
}