html { background: #fff; }
body {  text-align: center; }
.wrap { width: 980px; }    

header { position: relative; }

.logo {
  background: #fff;
  display: inline-block;
  padding: 15px;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  margin-left: -167px;  
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition:    opacity .5s ease-in-out;
  -o-transition:      opacity .5s ease-in-out;
  -ms-transition:     opacity .5s ease-in-out;
  transition:         opacity .5s ease-in-out; }
.logo:hover { opacity: .9; }
.logo:active { opacity: .8; }

#hero {
  background-repeat: no-repeat;
  background-position: center center; }
#home #hero { height: 468px; }
#interior #hero { height: 270px; }

#hero ul { display: none; }
  
#hero article {
  background-repeat: no-repeat;
  background-position: center center;
  height: 468px; }
#home #hero article { height: 468px; }
#interior #hero article { height: 270px; }

/* -- Join -- */  
  
.updates {
  background: #3369a4;
  width: 290px;
  padding: 25px;
  color: #fff;
  line-height: 1.2;
  -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; }  
.updates:hover { background: #215288; } 

#home .updates {
  position: absolute;
  left: 50%;
  top: 300px;
  z-index: 100;  
  margin-left: -175px; }

.updates h3 {
  font-family: "proxima-nova-condensed",sans-serif;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 10px; }
    
.join { display: block; }   

.join ol { margin: 0; }

.join li { 
  float: left; 
  padding: 0 5px 0 0; 
  display: inline-block;
  text-align: left; }
.join li.submit { }

.join input { 
  background: #f2f2f2;   
  border: none;
  width: 134px;
  margin: 0 auto;
  padding: 9px 8px 9px 8px; 
  cursor: pointer; 
  font-family: "proxima-nova-condensed",sans-serif;
  font-size: 16px;
  line-height: 1;
  color: #133145;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px;  
  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 .zip {  width: 70px; }

.join input:hover { 
  background-color: #c8272e;
  color: #fff;
  -moz-box-shadow:    0 1px 2px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow:         0 1px 2px rgba(0,0,0,.2);  }
  
.join input:-moz-placeholder                 { opacity: 1; }
.join input::-moz-placeholder                { opacity: 1; }
.join input:-ms-input-placeholder            { color: #0f2846; }
.join input::-webkit-input-placeholder       { color: #0f2846; }
.join input:hover:-ms-input-placeholder      { color: #0f2846; }
.join input:hover::-webkit-input-placeholder { color: #0f2846; }       

.join input:focus { 
  background: #fff;
  color: #3369a4;
  cursor: text; 
  box-shadow:         inset 1px 1px 2px rgba(0, 0, 0, 0.25);       
  -moz-box-shadow:    inset 1px 1px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25); }
  
.join button {
  background: #133145; 
  width: 38px;
  height: 39px;
  line-height: 39px;  
  border: none;   
  overflow: hidden;  
  display: block;
  cursor: pointer;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px;
  font-size: 20px;
  color: #fff;
  -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; }  
.join button:hover { background: #c8272e; }
.join button:active { 
  box-shadow:         inset 1.5px 1.5px 3.5px rgba(0, 0, 0, 0.25);     
  -moz-box-shadow:    inset 1.5px 1.5px 3.5px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 1.5px 1.5px 3.5px rgba(0, 0, 0, 0.25); } 

.join-response {
  display: block; 
  font-size: 19px; }
  

  
  
  
.below { margin-top: 20px; }

.below section {
  padding: 10px 0 30px;
  width: 205px;
  padding: 0 20px;
  float: left; }  
  
.below section a * {
  -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; }

.below section h3 {
  font-size: 21px;
  font-weight: 600;
  color: #133145;
  text-transform: uppercase;
  margin: 20px 0 10px; }
.below section a:hover h3 { color: #c8272e; }
  
.below section p { 
  color: #7b7b7b;
  line-height: 1.7;
  margin-bottom: 5px; }  
  
  
.below section strong {
  background: #c8272e; 
  display: inline-block;
  padding: 6px;
  margin-top: 8px;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px;
  font-family: "ff-din-web",sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 600;
  color: #fff; }  
.below section a:hover strong { background: #3369a4; }

.below section strong.more { margin-bottom: 15px; }

.content {
  padding: 25px 15px;
  text-align: left; }  
  
.meta { 
  border-bottom: 1px solid #e5e5e5; 
  padding: 0 0 10px;
  margin-bottom: 15px; }

.meta small {
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase; }    
  
.meta h1 { 
  margin-bottom: 10px; }
  
/* Error LABEL
--------------------------------------------------- */

form label { position: relative; }

strong.error { 
  background: #c8272e;
  padding: 3px 6px;   
  display: block;
  white-space: nowrap;
  position: absolute; 
  left: 50%;
  top: 30px;
  z-index: 9999;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px; 
  font-family: "ff-din-web",sans-serif;
  font-weight: 600;   
  font-size: 11px;
  line-height: 1;
  color: #fff; 
  text-transform: uppercase; } 
strong.error:after { 
  height: 0; 
  width: 0;    
  margin-left: -6px;  
  content: " ";
  position: absolute; 
  left: 15px; 
  bottom: 100%;
  border-color: rgba(241, 198, 0, 0);    
  border: solid transparent; 
  pointer-events: none;
  border-bottom-color: #c8272e; 
  border-width: 6px; } 

/* Site Footer
------------------------------------ */
footer { 
  padding-bottom: 20px;
  display: block;
  clear: both;
  font-size: 12px;
  line-height: 1.4; }
  
/* Social
------------------------------------ */
.social { 
  display: inline-block;
  padding: 40px 0 30px;
  text-align: center; } 
  
.social > div {
  width: 28px;
  height: 28px;
  padding: 3px;  
  float: left;
  overflow: hidden;
  -moz-border-radius:    4px;
  -webkit-border-radius: 4px;
  border-radius:         4px;  
  -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; }
.social > div:hover  { 
  background-color: #133145;  
  -moz-box-shadow:    0 0 5px rgba(12,37,53,.3);
  -webkit-box-shadow: 0 0 5px rgba(12,37,53,.3);
  box-shadow:         0 0 5px rgba(12,37,53,.3); }

.social .facebook:hover { width: 119px; }
.social .twitter:hover { width: 100px; }

.social > div a,
.social .instagram {
  background-color: #c8272e;
  background-position: center center;
  background-repeat: no-repeat;
  width: 28px;
  height: 28px;
  line-height: 28px;  
  color: #fff;
  -moz-border-radius:    14px;
  -webkit-border-radius: 14px;
  border-radius:         14px; 
  display: block;
  float: left;
  position: relative;
  -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; }
  
.social > div a:hover,
.social .instagram:hover { background-color: #3369a4; }

.social > div a:active,
.social .instagram:active { 
  background-color: #7fb812;
  -moz-box-shadow:    inset 1px 1px 2px rgba(0, 0, 0, .25);
  -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .25);
  box-shadow:         inset 1px 1px 2px rgba(0, 0, 0, .25); }
  
.facebook iframe { 
  width: 80px;
  height: 20px; }

.social .facebook a {  }
.social .twitter a { }
.social .instagram { margin: 3px; }

.button { 
  opacity: 0;
  margin: 5px; 
  float: right;
  overflow: hidden;
  -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; }
.social > div:hover .button { opacity: 1; }