/* Section ID
------------------------------------ */

#id {
  position: relative; 
  text-align: left;
  background: #00192c;
  display: block;
  clear: both;
  padding: 9px 7px;
  -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; }

#id a { display: block; }

#id a {
  margin: 0 auto;
  display: inline-block;
  float: left;
  font-size: 13px;
  text-transform: uppercase;
  font-family: "Arimo",helvetica,arial,sanserif;
  line-height: 1; 
  font-weight: 400; 
  padding: 0 0 0 0; }
    
#id .chevron { margin-right: 5px; }
#id .chevron:after { content: ' » '; }
       
#id a { 
  color: #89acca;
  -webkit-transition: all .25s ease-in-out;  
  -moz-transition:    all .25s ease-in-out;  
  -o-transition:      all .25s ease-in-out;  
  -ms-transition:     all .25s ease-in-out; 
  transition:         all .25s ease-in-out; }

#id a:hover { color: #aacdeb; }
#id a:active { color: #bbd1e4; }
       
       
#content {
    padding: 15px;
    text-align: left; }
    
#content .photo {
    max-width: 37%;
    display: block;
    float: right;
    margin: 0 0 15px 15px;
    position: relative; }
    
#content .photo img { 
  width: 100%; 
  height: auto !important; }
#content  img { 
  max-width: 100%;
  height: auto !important; }


/* Heros
------------------------------------ */

.above { 
    background: #004881; 
    background-repeat: no-repeat;
    background-position: center top;
    color: #fff;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition:    all .5s ease-in-out;
    -o-transition:      all .5s ease-in-out;
    -ms-transition:     all .5s ease-in-out;
    transition:         all .5s ease-in-out; 
    }   
    
.above img { width: 100%; }

.above h1 { color: #fff; }

.above .hero { 
  display: block;
  position: relative; }
.districts .hero { text-align: left; }

.above .hero .text {
  padding: 20px;
  display: block; }
  
  
.hero .buttons a {
  padding: 10px; 
  display: block;
  margin-bottom: 4px;
  font-family: "Arimo",helvetica,arial,sanserif;  
  font-weight: 400;  
  -webkit-transition: all .5s ease-in-out;
  -moz-transition:    all .5s ease-in-out;
  -o-transition:      all .5s ease-in-out;
  -ms-transition:     all .5s ease-in-out;
  transition:         all .5s ease-in-out; }    

.hero .director { 
    background: #003158; 
    color: #fdb930; 
    line-height: 1;
    font-size: 15px; 
    min-height: 50px;
    }
  
.hero .director:hover {
    background: #fdb930;
    color: #003158; 
    }
  
.hero .contact { 
    background: #fdb930; 
    color: #003158; 
    font-size: 17px; 
    line-height: 40px;
    text-transform: capitalize;
    text-align: center; 
    }

.hero .contact:active {
  background: #00192c;
  color: #fff;}

.hero .buttons a strong {
  text-transform: uppercase;
  font-size: 12px;
  color: #fff;
  padding: 5px 0 3px;
  display: block; } 

.hero .director img {
  width: 35px;
  float: left;
  margin: 0 8px 0 0;
 }   
  



.box {
  padding: 20px;
  margin: 0;
  position: relative;
  background: white;   
  border-top: 3px solid #d3d3d3;
  font-size: 13px;
  line-height: 1.2;
  text-align: left; }  
.box p:last-child { margin: 0; }  


.below h2 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase; }

.below h2 a { color: #00192c; }
.below h2 a:active { color: #004881; }



/* Our Union
------------------------------------ */

.union .above { 
  padding: 0 0 10px; 
  position: relative; }

.union .above .intro  { 
  background: rgba(0,72,129,.7);
  padding: 15px; }
        
.union .above .intro p {
  margin: 0;
  font-size: 15px;
  line-height: 20px; }
  
.union .above .buttons  { 
  text-align: center; 
  padding: 0 10px; }
  
.union .buttons a { 
  display: inline-block;
  width: 21%; 
  vertical-align: top;
  margin: 0 1%; }  
    
.union .buttons figure { 
    background-color: #003158;   
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70%;
    width: 50px;
    height: 50px;
    margin-bottom: 5px; 
    -moz-border-radius:    50%;
    -webkit-border-radius: 50%;
    border-radius:         50%;
    -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; 
    }
  
  
.union .buttons a:hover figure { background-color: #00192C; }


.union .above h2 { 
    font-weight: 500;
    color: #fdba31; 
    text-transform: uppercase;
    -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; 
    }
  
.union .above a:hover h2 { color: #fff; }


    
@media (orientation: portrait) { 
.union .buttons figure { 
    width: 50px;
    height: 50px; }
    
.union .above h2 { font-size: 13px; } 
}   

@media (orientation: landscape) { 
.union .buttons figure { 
  width: 70px;
  height: 70px; }
.union .above h2 { font-size: 14px; } 
}  


/* Expander 
--------------------------------------------------- */

.expander { margin: 0 0 5px; }

.expander-header { 
  cursor: pointer;
  padding: 10px 0;
  display: block;  
  -webkit-transition: background-color .35s ease-in-out, color .35s ease-in-out;
  -moz-transition:    background-color .35s ease-in-out, color .35s ease-in-out;
  -o-transition:      background-color .35s ease-in-out, color .35s ease-in-out;
  -ms-transition:     background-color .35s ease-in-out, color .35s ease-in-out;
  transition:         background-color .35s ease-in-out, color .35s ease-in-out; }

.expander-header h2 {
  font-size: 18px;
  color: #12588d;
  line-height: 1;
  text-transform: none;
  margin: 0;
  padding: 2px 0 0 29px;
  position: relative;
  padding-bottom: 0 !important; 
  transition:         color .3s ease-in-out;    
  -webkit-transition: color .3s ease-in-out;  
  -moz-transition:    color .3s ease-in-out;  
  -o-transition:      color .3s ease-in-out;  
  -ms-transition:     color .3s ease-in-out; }   
.expander-header:hover h2,
.expander-header.selected h2 { color: #003158 !important; }   
.expander-header.selected:hover h2 { color: #002645 !important; }   

.expander-header h2:before {
  background: #003158; 
  width: 22px;
  height: 22px;
  display: block;
  content:"+";
  -moz-border-radius:    20px;
  -webkit-border-radius: 20px;
  border-radius:         20px;    
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  transition:         all .3s ease-in-out;    
  -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; 
  font-family: 'trilogyicons';
  speak: none;
  color: #fff;
  font-size: 12px;
  line-height: 22px;  
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  
.expander-header:hover h2:before { 
  background: #fdba31; 
  color: #003158 !important; }

.expander-header:active h2:before { 
  background: #00192c; 
  box-shadow:         inset 1px 1px 2px rgba(0, 0, 0, 0.3);       
  -moz-box-shadow:    inset 1px 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);  }

.expander-header.selected h2:before {
  background: #fdba31; 
  color: #00284; 
  content:"-"; }

.expander-header p { margin-bottom: 0; }

.expander-header:hover {  }
.expander-header:active {  }        

.expander-body { 
  background: #fff;
  padding: 7px 0 7px 29px; }       
.expander-body p:last-child { margin-bottom: 0; } 


  /* Activism 
------------------------------------ */
.activism .hero {
  background-repeat: no-repeat;
  background-position: center center; 
  width: auto !important;
  height: auto !important; }

.activism .logo {
  display: inline-block;
  -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; }
.activism .blurb {
  color: #fff; 
  text-align: left;
  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; }
  
.activism .logo img { 
  width: 100%;
  margin-top: 10px; }
.activism .blurb .pad { padding: 20px; }

.activism .blurb p:last-child { margin-bottom: 0; }

.activism .below h2  {
  margin-bottom: 0; }
.activism .below h2 a {
  font-size: 15px;
  color: #00192c;
  font-weight: 700;
  text-transform: uppercase; }

.activism .below .feed { 
  padding-bottom: 15px;
  display: block; }


/* Plates (Issues, Activisms, etc.)
------------------------------------ */

.plates { margin-top: 10px; }
.plates article { 
  width: 50%;
  float: left; }
.plates article a {
  background-color: #003158; 
  text-align: center;
  padding: 20px 0;
  display: block;
  margin: 0 10px 10px 0;
  position: relative;
  -moz-box-shadow:    inset 0 -2px 0 #fdb931;
  -webkit-box-shadow: inset 0 -2px 0 #fdb931;
  box-shadow:         inset 0 -2px 0 #fdb931;  
  -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; }  
.plates article a:hover {
  background-color: #004881;
  -moz-box-shadow:    inset 0 -5px 0 #fdb931;
  -webkit-box-shadow: inset 0 -5px 0 #fdb931;
  box-shadow:         inset 0 -5px 0 #fdb931; }
  

@media (orientation: portrait) { 
.plates article a { min-height: 80px; }

}   
@media (orientation: landscape) { 
.plates article a { min-height: 120px; }

} 


.plates img { width: 90%; }
  
.plates h3 {
  font-size: 19px;
  color: #fff;
  padding: 0 10px 10px 10px;
  margin: 0;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0; 
  -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; }
.plates a:hover h3 { 
  color: #fdba31;
  bottom: 3px; }
  
  
  

/* Members
------------------------------------ */

.members .above {
  background-position: 0 0;
  padding: 20px; }
  
.members .above .intro  { 
  margin-bottom: 15px; }
.members .above .buttons  { 
  text-align: center;}

.members .above a { 
  display: inline-block;
  width: 70px; 
  vertical-align: top;
  margin: 0 10px; }
  
.members .above figure { 
  background-color: #003158;   
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 80%;
  height: 70px;
  margin-bottom: 10px;
  -moz-border-radius:    50%;
  -webkit-border-radius: 50%;
  border-radius:         50%;
  -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; }
.members .above a:active figure { background-color: #00192C; }

.members .above h2 { 
  font-size: 13px;
  font-weight: 700;
  color: #fdba31; 
  text-transform: uppercase;
  -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; }
.members .above a:hover h2 { color: #fff; }


  
/* Press Inquiries
--------------------------------------------------- */

#content form * {
  -moz-box-sizing:    border-box; 
  -webkit-box-sizing: border-box;
  box-sizing:         border-box; 
  transition:         all .25s ease-in-out;    
  -webkit-transition: all .25s ease-in-out;  
  -moz-transition:    all .25s ease-in-out;  
  -o-transition:      all .25s ease-in-out;  
  -ms-transition:     all .25s ease-in-out; }

#content form ol { 
  list-style: none;
  margin: 0; }

#content form li { 
  margin: 0 0 5px;
  display: block; }

#content form input,
#content form select,
#content form textarea { 
  border: none;
  box-shadow:         inset 0 0 2px rgba(0, 0, 0, 0.25);       
  -moz-box-shadow:    inset 0 0 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25); 
  width: 100%;
  padding: 8px;
  background: #efefef;
  color: #717171;
  font-size: 13px;
  font-family: arial,helvetica,sanserif; } 

#content form textarea { height: 85px; }    
            
#content form input:hover,
#content formselect:hover,
#content form textarea:hover { 
  background: white;
  color: #a0a0a0; }

/* ---- Placeholder Text Equalizer ---- */

#content form input:-ms-input-placeholder            { color: #a0a0a0; }
#content form input::-webkit-input-placeholder       { color: #a0a0a0; }
#content form input:hover:-ms-input-placeholder      { color: #a0a0a0; }
#content form input:hover::-webkit-input-placeholder { color: #a0a0a0; }     

#content form textarea:-ms-input-placeholder             { color: #a0a0a0; }
#content form textarea::-webkit-input-placeholder        { color: #a0a0a0; }
#content form textarea:hover:-ms-input-placeholder       { color: #a0a0a0; }
#content form  textarea:hover::-webkit-input-placeholder { color: #a0a0a0; }      

#content form input:focus,
#content form select:focus,
#content form textarea:focus { 
  background: white;   
  color: #b5b5b5;
  cursor: text; 
  box-shadow:         inset 0 0 4px rgba(0, 0, 0, 0.25);       
  -moz-box-shadow:    inset 0 0 4px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25); }   

#content form button { 
  background: #0066ba;  
  width: 100%;
  padding: 5px 7px;
  display: block;
  border: 0;
  cursor: pointer;
  font-family: "Arimo",helvetica,arial,sanserif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  -moz-border-radius:    3px;
  -webkit-border-radius: 3px;
  border-radius:         3px;   
  -webkit-transition: background-color .3s ease-in-out;
  -moz-transition:    background-color .3s ease-in-out;
  -o-transition:      background-color .3s ease-in-out;
  -ms-transition:     background-color .3s ease-in-out;
  transition:         background-color .3s ease-in-out; }
  
#content form button:hover { 
  background: #004881; 
  -moz-box-shadow:    0 1px 1px rgba(0,0,0,.15);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
  box-shadow:         0 1px 1px rgba(0,0,0,.15); }   
  
#content form button:active { 
  margin-top: 2px;
  margin-bottom: -2px;
  margin-left: 2px;
  background: #003865;
  -moz-box-shadow:    inset 0 1px 1px rgba(0,0,0,.35);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
  box-shadow:         inset 0 1px 1px rgba(0,0,0,.35); }  
  
.promos .withimage {
    background-size: cover;
    height: 120px;
}

/* Campaign */
.campaign .hero {
  text-align: left;
}

/* Action Network */
#can_embed_form ul {
    margin: 0;
}


.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	margin-bottom: 1em;
	} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	}