/*
* nav.css
* stylesheet to hold nav styles not yet folded into layout.css
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Nav Styles
- Media Queries
*/
@import url(https://fonts.googleapis.com/css?family=EB+Garamond|Nunito:400,300,700|Josefin+Sans:400,300,300italic,400italic,600,600italic,700,700italic);


/* Nav Styles from cssmenus
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#globalnav {
}

#cssmenu {
  display: block;/* inline style hides the menu initially*/
	padding:20px 5px 0 20px;
  font-family: 'Josefin Sans', Arial, sans-serif;
  line-height: 1;
  width: 320px;
  height:100%;
  overflow:auto;
  position:absolute;
  z-index:200;
  background-color:rgba(255, 255, 255, 0.8);
}
.align-right {
  float: right;
}
#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
#cssmenu ul li {
  position: relative;
  margin: 0;
  padding: 0 0 6px 0;
}
#cssmenu ul li a {
  text-decoration: none;
  cursor: pointer;
}
#cssmenu > ul > li > a {
  color: #6d6e70;
  text-transform: uppercase;
  display: block;
  padding: 6px;
  padding-bottom: 0px;
  border-top: none;
  border-right: none;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
  letter-spacing: 1px;
  font-size: 18px;
  font-weight:700;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  position: relative;
}
#cssmenu > ul > li:first-child > a {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
#cssmenu > ul > li:last-child > a {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: none;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
  color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  left: 0;
  bottom: 0px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  left: 0;
  bottom: -12px;
  z-index: 3;
  opacity: 0;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
/* #cssmenu ul > li.has-sub::after { this produces the down arrow 
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: #dddddd;
  z-index: 2;
  right: 20px;
  top: 10px;
  pointer-events: none;
} */
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
  border-top-color: #ffffff;
}
#cssmenu ul > li.has-sub.open > a::after {
  opacity: 1;
  bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
  opacity: 1;
  bottom: -12px;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu ul ul li {
  border-left: none;
  border-right: none;
}
#cssmenu ul ul li a {
  background: #fff;
  display: block;
  position: relative;
  font-size: 16px;
  padding: 8px;
  padding-bottom: 3px;
  padding-left: 16px;
  border-bottom: none;
  color: #6d6e70;
  font-weight: 700;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -ms-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
  padding-top: 8px;
  margin-top: 5px;
}
#cssmenu ul ul ul li {
  border: 0;
}
/*#cssmenu ul ul li.open > a,
#cssmenu ul ul li:hover > a {
  background: #e4e4e4;
  color: #6d6e70;
} */
#cssmenu ul ul li.active > a {
  background: #fff;
  color: #6d6e70;
}
#cssmenu ul ul > li.has-sub > a::after {
  border-top: none;
}
#cssmenu ul ul > li.has-sub > a::before {
  border-top: none;
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
  top: 18.5px;
  border-width: 6px;
  border-top-color: #fff;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
  border-top-color: #fff;
}


/* Primary Navigation css added by Bill */
/* ================================================== */


.menu-button { /* used for style menu hamburger content */
  font-family: Arial, 'Josefin Sans', sans-serif;/* add Avenir at the begining of this list if we find it*/
  font-weight:700;
  font-size: 1.6em;
  position: relative;
  display: block;
  padding: 0 20px 0px 0px;
  background: #fff;
  color: #6d6e70;
  cursor: pointer;
  text-align: left; 
  }

.hamburger {
    background:url('../images/hamburger-up.png') no-repeat;
	width:138px;
	height:21px;
}

.hamburger:hover {
    background:url('../images/hamburger-dn.png') no-repeat;
}


.menu1 a{
	border-left:2px solid #66cc00;
}



#cssmenu > ul > li.menu1:hover > a,
#cssmenu > ul > li.menu1 li:hover > a,
#cssmenu > ul > li.menu1.open > a,
#cssmenu > ul > li.menu1.active > a {
 background: #66cc00;
 color:#fff;
}



.menu2 a {
	border-left:2px solid #006633;
}

#cssmenu > ul > li.menu2:hover > a,
#cssmenu > ul > li.menu2 li:hover > a,
#cssmenu > ul > li.menu2.open > a,
#cssmenu > ul > li.menu2.active > a {
 background: #006633;
 color:#fff;
}

.menu3 a {
	border-left:2px solid #006699;
}

#cssmenu > ul > li.menu3:hover > a,
#cssmenu > ul > li.menu3 li:hover > a,
#cssmenu > ul > li.menu3.open > a,
#cssmenu > ul > li.menu3.active > a {
 background: #006699;
 color:#fff;
}

.menu4 a {
	border-left:2px solid #0099cc;
}

#cssmenu > ul > li.menu4:hover > a,
#cssmenu > ul > li.menu4 li:hover > a,
#cssmenu > ul > li.menu4.open > a,
#cssmenu > ul > li.menu4.active > a {
 background: #0099cc;
 color:#fff;
}

.menu5 a {
	border-left:2px solid #ffcc00;
}

#cssmenu > ul > li.menu5:hover > a,
#cssmenu > ul > li.menu5 li:hover > a,
#cssmenu > ul > li.menu5.open > a,
#cssmenu > ul > li.menu5.active > a {
 background: #ffcc00;
 color:#fff;
}

.menu6 a {
	border-left:2px solid #ff9900;
}

#cssmenu > ul > li.menu6:hover > a,
#cssmenu > ul > li.menu6 li:hover > a,
#cssmenu > ul > li.menu6.open > a,
#cssmenu > ul > li.menu6.active > a {
 background: #ff9900;
 color:#fff;
}

.menu7 a {
	border-left:2px solid #6d6e70;
}

#cssmenu > ul > li.menu7:hover > a,
#cssmenu > ul > li.menu7 li:hover > a,
#cssmenu > ul > li.menu7.open > a,
#cssmenu > ul > li.menu7.active > a {
 background: #6d6e70;
 color:#fff;
}




/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


@media only screen and (min-width: 400px) and (max-width: 549px) {

nav {
	width:540px;
}