/* topnav styles - last edited on 11-30-16
----------------------------------------------- */

#topnav { text-align: center; width: 100%; min-width: 980px; float: left; clear: both; margin-top: 0; padding-top: 0; position: fixed; z-index: 1000; /* a fixed position allows this to always overlap the page content */
background: #bac487 url(../css-images/mainnav.png) no-repeat center center; border-bottom: 2px solid #532380; text-align: center; }

#topnav.sticky { 
 -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.18);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.18);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.18);
}

header#branding { padding: 0; width: 100%; max-width: 880px; margin-right: auto; margin: 0 auto !important; float: none;  }

#topnav, header#branding { font-family: 'PT Serif', serif; height: 105px; }

.navwrapper { width: 100%; margin: 0 auto !important; height: auto; }
.logowrap { height: 105px; max-width: 980px; clear: none; padding: 0; }

#logo { color: #fff; float: left; clear: none; margin: 0 0 0 -2px; padding: 0; width: 100%; height: 100px; /* position: absolute; left: 0px; right: 0px; */ text-align: center; white-space: nowrap; }
 
#logo a { border: none; display: block; width: auto; overflow: visible; }
#logo a:hover { opacity: 0.9; } 

#logo img {  
 position: relative; z-index: 10000;
 width: 265px; height: auto;
 margin: 10px 0 0 -10px; 
 float: left; 
 border: none; 
 }
 
#logo img.logo-m { display: none; visibility: hidden; }
 
nav#menu { min-height: 25px; text-align: center;
 margin: -58px -10px 0 0;
 padding-right: 0px; padding-left: 13px; 
 float: right;
 position: relative; z-index: 20000;
 
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px; } 

nav#menu ul { font-family: 'PT Serif', serif; text-align: center; height: auto; width: auto; padding: 0; margin: 0 auto 0 auto; white-space: nowrap; float: none; clear: none; }
nav#menu ul li { font-family: 'PT Serif', serif; font-size: 20px; line-height: 25px; text-align: center; /* text-transform: uppercase; */ float: left; padding: 0; margin: 0 2px 0 0; list-style: none; display: inline; border: none; white-space: nowrap; }
nav#menu ul li a { color: #532380; font-weight: 700; padding: 1px 10px 2px 10px; display: block; }
nav#menu ul li a:hover { color: #7451ad; }

nav#menu ul li + li { margin-right: 0px; /* border-left: 1px solid #999; */ }


/*
Responsive ----------------------------------- */

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 980px) {

#topnav { width: 100%; min-width: 100%; text-align: center; }
.navwrapper { width: 100%; margin-left: 0 !important; } 
header#branding { max-width: 860px; margin-right: auto; margin-left: auto; }

}

@media only screen and (max-width: 960px) {
header#branding { max-width: 91%; }
.logowrap { max-width: 100%; }

}

@media only screen and (max-width: 940px) {

#topnav { width: 100%; min-width: 100%; }
.navwrapper { } 
#logo img.logo {  }

}

@media only screen and (max-width: 890px) {
.logowrap { max-width: 99%; padding-left: 0.5%; padding-right: 0.5%; }

}

@media only screen and (max-width: 870px) {
header#branding {  }
.logowrap { /* max-width: 98%; padding-left: 1.0%; padding-right: 1.0%; */ }
#logo { padding-left: 0px; }

}


@media only screen and (max-width: 850px) {
header#branding { max-width: 95%; }	
.logowrap { max-width: 95%; padding-left: 2.5%; padding-right: 2.5%; }
#logo {  }
}

@media only screen and (max-width: 820px) {
.logowrap { /* max-width: 92%; padding-left: 3%; padding-right: 3%; */ }
 
}

@media only screen and (max-width: 800px) {
header#branding { max-width: 100%; }		
.logowrap { max-width: 90%; padding-left: 5%; padding-right: 5%; }
 
}

@media only screen and (max-width: 780px) {
nav#menu { margin-right: -15px; }

}

@media only screen and (max-width: 768px) {
nav#menu { margin-right: -20px; }
nav#menu ul li a { padding-right: 8px; padding-left: 8px; }

}

@media only screen and (max-width: 759px) {
#topnav { /* position: fixed; z-index: 5000; note: remove comment to fix the topnav at sizes below 759px, don't forget to uncomment line 203 of l2-style.css - */ }
header#branding { /* padding: 0; width: 100%;  max-width: 759px; */ }
 
}

@media only screen and (max-width: 710px) {
nav#menu ul li.home { display: none; visibility: none; }

}

@media only screen and (max-width: 670px) {
#logo span { display: none; }

}

@media only screen and (max-width: 620px) { 
 #topnav { background: #bac487 url(../css-images/mainnav.png) no-repeat center -35px; border-bottom: 1px solid #532380; }
 #topnav, header#branding, .logowrap { height: 90px; }
 nav#menu { margin-top: -39px; }
 nav#menu ul li { font-size: 18px; } 
 
 #logo { height: auto; }
 #logo img { max-width: 220px; height: auto !important; float: left; margin-left: -5px; }
 
 nav#menu ul li a { padding-right: 7px; padding-left: 7px; }
}

@media only screen and (max-width: 560px) {	
 nav#menu ul li a { padding-right: 7px; padding-left: 7px; }

}

@media only screen and (max-width: 540px) {
 #logo img { max-width: 205px; margin-top: 5px; margin-left: -10px; }
 #topnav, header#branding, .logowrap { height: 80px; }
 nav#menu { margin-right: -15px; }
 nav#menu ul li a { }
  
}

@media only screen and (max-width: 519px) {
 #topnav { background: #00001a url(../css-images/mainnav.png) no-repeat center -70px; }
 #topnav, header#branding, .logowrap { height: 60px; }
 #logo img { max-width: 150px; height: auto; margin-top: 6px; }
  nav#menu { margin-top: -32px; }
	nav#menu ul li.home { display: none; visibility: none; }
	
/* nav#menu { width: 60%; margin-top: -46px; height: auto; }
 nav#menu ul { width: 100%; height: auto; }
 nav#menu ul li { width: 33%; } 
 nav#menu ul li:last-child {  }  */
} 

@media only screen and (max-width: 500px) {	
 nav#menu ul li { font-size: 17px; } 	
 nav#menu ul li a { }	
 
}

/*
@media only screen and (max-width: 470px) {
 #topnav, header#branding, .logowrap { height: 55px; }
 #logo img { max-width: 150px; height: auto; margin-top: 6px; }
  nav#menu { margin-top: -32px; }
	nav#menu ul li.home { display: none; visibility: none; }
} */

@media only screen and (max-width: 440px) {
 nav#menu { margin-top: -30px; }
 nav#menu ul li { font-size: 16px; }

}

@media only screen and (max-width: 419px) {
 #logo img.logo-m { display: block; visibility: visible; max-height: 50px; width: auto; margin-top: 5px; margin-left: -12px; }
 #logo img.logo { display: none; visibility: hidden; }
 
 nav#menu ul li { font-size: 16px; }
 nav#menu ul li a { }
 
}

@media only screen and (max-width: 400px) { 
 nav#menu {  }
 nav#menu ul li { /* font-size: 14px; */ }
 nav#menu ul li a { }	

}
  
@media only screen and (max-width: 390px) {	
 /* #logo img { max-width: 144px; height: auto; margin-top: 6px; } */
  nav#menu { }
	nav#menu ul li a { }

}  

@media only screen and (max-width: 370px) {	
 nav#menu { margin-right: -13px; }
 nav#menu ul li { }
 nav#menu ul li a {  }
 
}

@media only screen and (max-width: 350px) {
 #logo img.logo-m { margin-left: -10px; }
 nav#menu { margin-right: -12px; }
 nav#menu ul li { font-size: 15px; }

}

@media only screen and (max-width: 320px) {
 /* #logo img { max-width: 141px; height: auto; margin-top: 8px; margin-left: -13px; } */
 nav#menu { }

}



/*
END ----------------------------------- */