.primary {  
    width: auto;
    z-index: 1000;   
    text-align: left; 
    font-size: 1.15em;
    line-height: 1; 
    height: 60px; }
    
    @media (min-width : 330px) { .primary { height: 28px; padding: 17.5px; }}
    @media (min-width : 370px) { .primary { height: 28px; padding: 21px; }}

  
/* --- Buttons --- */
.primary .buttons { 
  position: absolute;
  right: 5px;
  top: 16px;
  z-index: 500; }
  
@media (min-width : 330px) { .primary .buttons { top: 20px; }}
@media (min-width : 370px) { .primary .buttons { top: 22px; }}

.primary .button {
    background: white; 
    color: #0066ba; 
    display: inline-block;
    padding: 4px 16px;
    margin-left: 8px;
    text-transform: uppercase;
    cursor: pointer; 
    font-size: 1em;
    line-height: 1; 
    float: left;
    }

.primary .button .icons:before { 
    width: 20px;
    display: inline-block;
    font-size: 1.25em;
    line-height: .75;
    text-align: center;
    float: left;
    margin-right: 4px; }

.primary .button.active .icons:before { 
  font-size: .9em; 
  content: "x";
  line-height: 1.1; }

.primary .button:active {
    background: #0066ba; 
    color: white; 
    }

.primary .button.active {
    background: #003158; 
    color: white;
    -moz-box-shadow:    inset 0 1px 2px rgba(0,0,0,.25);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
    box-shadow:         inset 0 1px 2px rgba(0,0,0,.25);  
    }

.primary .menu .icons:before { content: "m"; }


.primary .join-us { 
    background: #0066ba;
    color: white;
    position: relative;
    margin-right: 8px;
    }
  
.primary .join-us:active,
.primary .join-us.active { 
  background: #012442;
  color: #fff; }

#menu { 
    background: white;
    border-top: 4px solid #fdba31;
    width: 80%;
    position: absolute;
    top: 60px;
    right: 100%;
    z-index: 1000;  
    -moz-box-shadow:    0 0 10px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    box-shadow:         0 0 10px rgba(0,0,0,.3); 
    }
  
    @media (min-width : 330px) { #menu { top: 63px }}
    @media (min-width : 370px) { #menu { top: 70px }}
  
#menu.active { right: 20%; }  

.primary ul > li { 
    display: block;
    text-align: left;
    list-style: none;
    margin: 0; 
    position: relative;
    border-bottom: 0; 
    }
  
.primary ul > li a { 
    padding: 10px;
    display: block; 
    font-size: 1em;
    text-transform: uppercase;
    }
  
.primary ul li:active a {  background-color: #eeeeee; }	

/* --- Join Form --- */

#join-form {
    background: #004881;
    width: 100%;
    overflow: hidden;
    padding: 20px;
    text-align: left;
    position: absolute;
    top: -100px;
    right: 0;
    z-index: 50;
    -moz-box-sizing:    border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:         border-box; 
    }
  
#join-form.active { top: 60px; }
    
    @media (min-width : 330px) { #join-form.active { top: 63px }}
    @media (min-width : 370px) { #join-form.active { top: 70px }}

#join-form h3 {
  color: #fff;
  text-transform: uppercase; }

#join-form form { 
  background: white;
  display: block;
  text-align: left;
  position: relative; }
  
#join-form form.active { background: #fff; }	
	 
#join-form form div.cf { width: 85%; float: left; }   
   
#join-form form label { 
    position: absolute;
    left: 14px;
    top: 16px;
    font-size: 1.3em;
    color: #004881; 
    -moz-box-sizing:    border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:         border-box;    
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out; 
    }
  
#join-form .active label { color: #336d9a; }

strong.error { 
    background: #fdba3c;
    padding: 3px;   
    display: block;
    white-space: nowrap;
    position: absolute; 
    left: 0;
    top: 36px;
    z-index: 9999;
    font-size: .8em;
    line-height: 1;
    font-weight: 400;
    color: #000; 
    text-transform: uppercase; 
    } 
  
strong.error:after { 
    height: 0; 
    width: 0;    
    margin-left: -6px;  
    content: " ";    
    position: absolute; 
    left: 15px; 
    bottom: 100%;
    border-color: rgba(235, 110, 31, 0);    
    border: solid transparent; 
    pointer-events: none;
    border-bottom-color: #fdba3c; 
    border-width: 6px; 
    }

#join-form form input { 
    background: transparent;   
    border: none;
    width: 100%;
    float: left;
    margin: 0 auto;
    padding: 12px 4px 10px 45px; 
    cursor: pointer; 
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1.5;
    color: #002f54;
    -moz-box-sizing:    border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:         border-box;  
    transition:         all .35s ease-in-out;    
    -webkit-transition: all .35s ease-in-out;  
    -moz-transition:    all .35s ease-in-out;  
    -o-transition:      all .35s ease-in-out;  
    -ms-transition:     all .35s ease-in-out; 
    } 
  
#join-form form:active input { color: #d81e05; }
#join-form form.active input { color: #0066b2; }

#join-form input:-moz-placeholder                 { opacity: 1; }
#join-form input::-moz-placeholder                { opacity: 1; }
#join-form input:-ms-input-placeholder            { color: #012442; }
#join-form input::-webkit-input-placeholder       { color: #012442; }
#join-form input:hover:-ms-input-placeholder      { color: #d81e05; }
#join-form input:hover::-webkit-input-placeholder { color: #d81e05; }       

#join-form button {
  float: right;
  background: #fdba3c;
  width: 15%;
  display: block;
  padding: 13.5px 0;
  font-weight: 400;  
  color: #003157;
  font-size: 1.3em;
  text-transform: uppercase;
  border: none;   
  position: relative;
  cursor: pointer; } 
  
#join-form button .icons { font-size: .8em; }

#join-form button:active { background: #e19300; } 


/* --- Social Networking --- */

.primary .facebook,
.primary .twitter { 
    display: none;
    font-family: 'trilogyicons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    color: white; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    height: 28px;
    width: 28px;
    font-size: 14px;
    line-height: 28px;
    -moz-border-radius:    50%;
    -webkit-border-radius: 50%;
    border-radius:         50%;
    color: white;
    margin: -2px 0 2px 4px;
    float: left;
    }
    
    @media (min-width : 370px) { .primary .facebook, .primary .twitter { display: block }}


.primary .facebook { background: #4a6ebb; }
.primary .facebook:active { background: #5883de; }
      
.primary .twitter { background: #55acee; }
.primary .twitter:active { background: #74c3ff; }


 /* Section Nav
------------------------------------ */


.snav { 
    padding: 20px;
    position: relative;
    background: white;   
    border-top: 3px solid #d3d3d3; 
    text-align: left; }  
    
.find .snav.main-list { padding: 20px 5px; }
    
.snav h3 { margin-bottom: 10px; }
.snav h3 a { color: #00192c; }


.snav ul { 
  margin: 0 auto;
  list-style: none; }   

.snav li { margin: auto; } 

.snav li:last-child { margin: 2px auto auto auto; } 

.snav li a { 
    background: rgba(0,72,129,0);
    padding: 5px 5px 5px 0; 
    display: block;
    font-size: 15px;
    line-height: 1;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out; }  
.find .snav li a { line-height: 1.3; }

.snav li a small {
  display: block;
  color: #0d1b35;
  font-size: 11px;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition:    all .3s ease-in-out;
  -o-transition:      all .3s ease-in-out;
  -ms-transition:     all .3s ease-in-out;
  transition:         all .3s ease-in-out; }
.snav li a:hover small { color: #fdba31; }
  
.snav li a:hover { 
    background: rgba(0,72,129,1);
    padding: 5px 5px 5px 10px; 
    color: #fff;
    -moz-box-shadow:    inset 1px 1px 2.5px rgba(0,0,0,0);
    -webkit-box-shadow: inset 1px 1px 2.5px rgba(0,0,0,0);
    box-shadow:         inset 1px 1px 2.5px rgba(0,0,0,0); }
     
.snav li a:active { 
    background: rgba(0,72,129,.8);
    padding: 5px 5px 5px 10px; 
    -moz-box-shadow:    inset 1px 1px 2.5px rgba(0,0,0,.3);
    -webkit-box-shadow: inset 1px 1px 2.5px rgba(0,0,0,.3);
    box-shadow:         inset 1px 1px 2.5px rgba(0,0,0,.3);   
    color: #fff; }    
   
.snav li a:hover:after { content: " »" }
.districts .snav li a:hover:after,
.snav.main-list li a:hover:after { content: "" }

.snav li ol { 
  list-style: none;
  margin: 0 auto 5px; }

.snav ol li a { 
  color: #336d9a;
  font-size: 14px;
  padding: 5px 5px 5px 18px;   
  position: relative; }
.snav ol li a:hover { padding: 5px 5px 5px 18px; }
.snav ol li a:hover:after { content: " " }


.snav ol li a:before { 
  background: #003158;
  content: " ";
  width: 4px;
  height: 4px; 
  display: block;
  position: absolute;
  left: 7px;
  top: 10px;
  -webkit-transition: all .35s ease-in-out;
  -moz-transition:    all .35s ease-in-out;
  -o-transition:      all .35s ease-in-out;
  -ms-transition:     all .35s ease-in-out;
  transition:         all .35s ease-in-out; }
.snav ol li a:hover:before { background: #fff; }


.snav li.active > a:first-child { color: #00192c; } 
.snav li.active > a:first-child:hover { color: #fff; } 

.snav li a.active { 
  color: #7d7d7d;
  cursor: auto; }
.snav li a.active:hover { 
  background: transparent;
  color: #7d7d7d; }
.snav li a.active:active { 
  -moz-box-shadow:    0 0 0 rgba(0,0,0,0);
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
  box-shadow:         0 0 0 rgba(0,0,0,0); }

.snav ol li a.active:before,
.snav ol li a.active:hover:before { background: #7d7d7d; }

.snav .ordinal_2 .ordinal_3 { display: none; }
.snav .active.ordinal_2 .ordinal_3 { display: block; }