#top {
   margin-top: 145px;
   background: #e1e1e1; }

#mid {
   background: #003158; }

#bottom {
   background: white; }
   
.topbanner {
   width: 100%; }
   
   .topbanner h1 {
      display: block;
      background: #fdba31;
      width: 100%;
      text-align: center;
      font-size: 200%; 
      color: white;
      font-weight: 700;  
      margin: 0;
      padding: .75em 0;
      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;
   }
   
   .topbanner h1:hover {
      background: #008cff; }


/* ----- HERO ----- */
#hero {   
   background: #003158;
   width: 1000px;
   height: 700px;
   position: relative; 
   margin: 0;
   float: left;
   background-size: cover;
   background-position: top left; }    
        
#hero .text {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0d1b+0,0e0d1b+100&0+50,0+50,1+100 */
   background: -moz-linear-gradient(top, rgba(14,13,27,0) 0%, rgba(14,13,27,0) 50%, rgba(14,13,27,.7) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, rgba(14,13,27,0) 0%,rgba(14,13,27,0) 50%,rgba(14,13,27,.7) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, rgba(14,13,27,0) 0%,rgba(14,13,27,0) 50%,rgba(14,13,27,.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000e0d1b', endColorstr='#0e0d1b',GradientType=0 ); /* IE6-9 */
   width: 1000px;
   height: 700px;
   position: absolute;
   text-align: center;
   -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; } 
   
#hero a:hover .text {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0d1b+0,0e0d1b+100&0+50,0+50,1+100 */
   background: -moz-linear-gradient(top, rgba(14,13,27,0) 0%, rgba(14,13,27,0) 50%, rgba(14,13,27,.9) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top, rgba(14,13,27,0) 0%,rgba(14,13,27,0) 50%,rgba(14,13,27,.9) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom, rgba(14,13,27,0) 0%,rgba(14,13,27,0) 50%,rgba(14,13,27,.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000e0d1b', endColorstr='#0e0d1b',GradientType=0 ); /* IE6-9 */ }   
  

#hero h1 {
   color: #fff;
   width: 90%;
   margin: 0 5%;
   font-family: "Arimo",helvetica,arial,serif;   
   font-size: 50px;
   line-height: 1;
   font-weight: 600;
   position: absolute;
   bottom: 0.75em;
   -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; }  
  
#hero a:hover h1 { 
   color: #fdba31;}
      


/* ----- HERO RAIL ----- */
.join-us {
   float: none;
   height: auto;
   display: block;
   padding: 30px;
   text-align: left;
   font-size: 100%;
   border: 0; }
   

   
   .join-us h2 {
      color: #003158; }
      
   .join-us ol li {
       float: none;
       display: inline-block; }
   
   .join-us input {
       background: white;
       width: 160px;
       border: none;
       padding: 10px;
       margin-right: 6px;
       font-size: 100%;
       color: #717171;
       cursor: pointer;
       -moz-box-shadow: initial;
       -webkit-box-shadow: initial;
       box-shadow: initial;
       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-us .zip {
       width: 85px;
       margin: 0; }
   
   .join-us li.submit {
      float: none;
      width: 100%;
      text-align: center; }

   .join-us button {
      margin-top: .5em;
       background: #003158;
       border: none;
       width: auto;
       line-height: 1;
       padding: 0.5em 2em;
       font-size: 120%;
       -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
       border-radius: 0px;}
   
#rail {
   background: #c1c1c1;
   width: 360px;
   height: 700px;
   float: left; }

article.news-front {
   width: 300px;
   background:white;
   -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; }
   
   article.news-front:hover {
      -moz-transform: scale(1.05);
      -webkit-transform: scale(1.05);
      -o-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05); }
    
   article.news-front figure {
      width: 300px;
      height: 160px;
      background: #003158;
      z-index: 1; }
   
   article.news-front figure .image {
      width: 300px;
      height: 160px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      opacity: .75;
      -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; }
      
      article.news-front:hover figure .image {
         opacity: 1; }
    
    article.news-front h3 {
       padding: .75em;
       font-size: 100%;
       text-align: left;
       color: #003158; }
    
/* ----- EVENTS AND MEMBER BAR ----- */
#mid .pad {
   padding: 50px 30px;
   width: auto; }
   
#mid h2 {
   color: white;
   text-align: left;
   width: 100%; }
   
   #mid h2 .button {
      font-size: 40%;
      padding: .35em .75em;
      -webkit-border-radius: 3px 3px 3px 3px;
      border-radius: 3px 3px 3px 3px;
      background: white;
      line-height: 1;
      margin: 0 0 0 10px;
      top: -5px;
      position: relative;
      -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; }
      
      #mid h2 .button:hover {
         background: #008cff;
         color: white; }
    
.events {
   width: 980px;
   margin: 0;
   background: none;
   float: left; }
    
   .events article {
       width: 30%;
       margin: 1em 3% 0 0;
       padding: 0; 
       float: left; 
       text-align: left;
       -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; }
     
   .events article:hover { background: none; }
       
   .events time {
       font-size: 80%;
       line-height: 1;
       text-transform: uppercase;
       color: #fdba31;
       width: auto;
       float: none;
       margin: 0 0 8px 0;
       text-align: left;
       display: block; }   
       
   .events h4 { 
       font-size: 140%;
       margin-bottom: 5px; 
       display: block;
       color: white;
       -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; }
       
       .events article:hover h4 { color: #fdba31; }
     
   .events .description {
       font-weight: 300;
       font-size: 90%;
       display: block;
       color: white; 
       font-style: italic; 
       line-height: 1.3; }
        
#help {
   float: right;
   width: 240px;
   padding: 20px 30px;
   background: #004985;
   -webkit-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px; }

   #help .buttons {  }
   
   #help .buttons a {
      width: calc(50% - 1.4em);
      font-size: 100%;
      text-align: center;
      height: auto;
      background: #008cff;
      float: left;
      margin: .2em;
      -moz-border-radius:    4px;
      -webkit-border-radius: 4px;
      border-radius:         4px;
      padding:  .25em .5em;
      color: #fff;
      line-height: 1.5;
      -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;  }
     
   #help .buttons a:hover { background: white; color: #008cff; }
   #help .buttons a:active { background: #003158;}
       
   #help .buttons a.more {
      float: none;
      background: none;
      color: white;
      margin: 0 auto;
      text-decoration: underline;
      font-size: 80%; }
  
  
/* ----- EVENTS AND MEMBER BAR ----- */
#bottom .wrap { width: 1300px; }

#video, #news-pr {
   margin-top: 50px;
}

#video h2, #news-pr h2 {
   color: #003158;
   text-align: left;
   width: 100%; }
   
   #video h2 .button, #news-pr h2 .button {
      font-size: 40%;
      padding: .35em .75em;
      -webkit-border-radius: 3px 3px 3px 3px;
      border-radius: 3px 3px 3px 3px;
      background: #003158;
      color: white;
      line-height: 1;
      margin: 0 0 0 10px;
      top: -5px;
      position: relative;
      -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; }
      
      #video h2 .button:hover, #news-pr h2 .button:hover {
         background: #008cff;
         color: white; }
         
      #video article {
         width: 900px;
         height: 475px; 
         display: inline-block; }
         
      #video article a {
         display: block;
         position: relative; }
         
      #video article .icon {
         position: absolute;
         color: #fdba31;
         font-size: 70px;
         font-family: 'trilogyicons';
         z-index: 101;
         top: 40%;
         left: calc(50% - 35px);
         text-transform: uppercase;}
         
      #video article figure {
         width: 900px;
         height: 475px;
         background: #003158;
         position: absolute;
         z-index: 1; }
      
      #video article figure .image {
         width: 900px;
         height: 475px;
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
         opacity: .25;
         -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; }
         
         #video article:hover figure .image {
            opacity: .65; }
         
      #video article h2 {
         color: white;
         font-size: 240%;
         position: absolute;
         z-index: 100;
         text-align: center;  }
         
      #video article.vid-1 {
         float: left; }
         
      #video article.vid-1 .icon {
         font-size: 100px;
         top: 50%;
         left: calc(50% - 50px);}
         
      #video article.vid-1 a {
         height: 475px; }
         
      #video article.vid-1 h2 {
         bottom: 40px;
         font-weight: 700; }
         
      #video article.vid-1 time {
         position: absolute;
         z-index: 100;
         text-align: center;
         bottom: 25px;
         color: #fdba31;
         text-transform: uppercase;
         font-weight: 700;
         left: 0;
         width: 100%; }
         
      #video article.vid-2, #video article.vid-3  {
         width: 360px;
         height: auto; }

      #video article.vid-2 figure, #video article.vid-3 figure  {
         width: 360px;
         height: 190px;
         position: relative; }

      #video article.vid-2 figure .image, #video article.vid-3 figure .image   {
         width: 360px;
         height: 190px; }
         
      #video article.vid-2 h2, #video article.vid-3 h2 {
         color: #003158;
         font-size: 100%;
         position: relative;
         z-index: 100;
         text-align: left;
         margin-top: 5px;
         line-height: 1.15;}
         
      #video article.vid-2 time, #video article.vid-3 time { display: none; }


article.news-pr {
   display: inline-block;
   width: 31%;
   position: relative;
   vertical-align: top;
   text-align: left;
   margin: 1em 3% 1em 0;
   float: left;}
   
   article.news-pr:nth-child(3n+4) { margin-right: 0; }
   article.news-pr:nth-child(3n+5) { clear: both; margin-right: 3%;}
   article.news-pr h3 { 
      -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; }
   article.news-pr:hover h3 { color: #008cff; }

#store-promo {
   margin-top: 50px; }

   .store-banner {
      display: 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;}
      
   .store-banner:hover {
      -moz-transform: scale(1.05);
      -webkit-transform: scale(1.05);
      -o-transform: scale(1.05);
      -ms-transform: scale(1.05);
      transform: scale(1.05); }   
      

#presidents-perspective {
   margin: 50px 0;
   width: calc(100% - 80px);
   height: 420px;
   background: #003158;
   padding: 40px; 
   position: relative;
   background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;}
   
   #presidents-perspective .author {
      position: absolute;
      left: 40px; }
   
   #presidents-perspective h2 {
      font-size: 100%;
      width: auto;
      display: block;
      padding: .5em 1em;
      text-transform: uppercase;
      font-weight: 700;
      -webkit-border-radius: 3px 3px 3px 3px;
      border-radius: 3px 3px 3px 3px;
      background: #fdba31;
      color: white;
      line-height: 1;
      margin: 0 0 10px 0;
      position: relative;
      -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; }
      
      #presidents-perspective h2 a { color: white; }
      
      #presidents-perspective h2:hover {
         background: #008cff;
         color: white; }
         
      #presidents-perspective figure {     
         position: absolute;
         left: 15px;}
      
      #presidents-perspective figure img { border: 1px white solid; max-width: 50px; }
      
      #presidents-perspective .author-title { 
         display: block;
         position: relative;
         left: 80px;
         top: 5px; }
         
      #presidents-perspective .author-title .name { 
         display: block;
         font-size: 125%;
         color: white;
         text-align: left; }
      
      #presidents-perspective .author-title .job { 
         display: block;
         font-size: 90%;
         color: white;
         text-align: left; }
         
   #presidents-perspective .right {
      width: 45%;
      text-align: left;
      position: absolute;
      right: 40px;
      bottom: 40px;}
      
   #presidents-perspective .left {
      width: 45%;
      text-align: left;
      position: absolute;
      left: 40px;
      bottom: 40px;}
      
   #presidents-perspective h3 { 
      color: white;
      margin: 15px 0 2px 0; }
      
   #presidents-perspective time {
      color: white;
      text-transform: uppercase; 
      font-size: 80%; }

   #presidents-perspective a h3, #presidents-perspective a time {
      -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; }
      
   #presidents-perspective a:hover h3, #presidents-perspective a:hover time {
      color: #fdba31; }
      
      
@media only screen and (max-width: 1360px)  {
   #top .wrap { width: 100%; -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);  transform: scale(1); }
   #mid .wrap, #bottom .wrap { width: 94%; -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);  transform: scale(1); }
   #hero, #hero .text { width: 100%; float: none; }
   #rail { width: 100%; height: auto; float: none; padding: 2em 0; }
   .join-us { float: none; display: inline-block; width: 30%; vertical-align: middle; }
   .join-us:hover { background: none; }
   .join-us ol li:first-child { width: 70%; }
   .join-us ol li:nth-child(2) { width: 28%; }
   .join-us input { width: calc(100% - 20px) !important; }
   article.news-front { width: 28%; margin: 0 1%; display: inline-block; vertical-align: middle; }
   article.news-front figure { width: 100%; }
   article.news-front figure .image { width: 100%; }
   article.news-front h3 { text-align: center; }
    
   #mid .pad { padding: 2em 0; }
   .events { width: 68%; }
   #help { width: calc(30% - 60px); }
   #video article { width: 720px; height: 440px; }
   #video article.vid-1 a { height: 440px; }
   #video article figure, #video article figure .image {  width: 720px; height: 440px; }
   #video article.vid-2, #video article.vid-3 { float: right; }
      
   .store-banner img { width: 100%; height: auto; }
}


@media only screen and (max-width: 1200px)  {
   #video article { width: 600px; height: 400px; }
   #video article.vid-1 a { height: 400px; }
   #video article figure, #video article figure .image {  width: 600px; height: 400px; }
}
@media only screen and (max-width: 1100px)  {
   #video article { width: 560px; height: 360px; }
   #video article.vid-1 a { height: 360px; }
   #video article figure, #video article figure .image {  width: 560px; height: 360px; }
}

@media only screen and (max-width: 800px)  {
   #hero, #hero .text { height: 500px; }
   .events, #help {  width: auto; float: none; }
   .events article { width: 100%; margin: 2em 0; float: none; }
   article.news-pr { width: 100%; margin: 0 auto 1em !important; }
   article.news-pr h3 { font-size: 140%;  margin-bottom: .1em; }
   #video article.vid-1, #video article figure, #video article figure .image { float: none; width: 100%; }
   #video article.vid-2, #video article.vid-3 { float: none; }
   #presidents-perspective { height: auto;}
   #presidents-perspective .author, #presidents-perspective .right, #presidents-perspective .left { width: auto; text-align: left; position: relative; top: initial; left: initial;  right: initial; bottom: initial; }
   #presidents-perspective .right { margin-top: 2em; }
}