#hero {
   background-color: #0d2547;
   width: 100%;
   height: 900px;
   position: relative; }
   
.intro-text {
   position: absolute;
   width: 850px;
   margin: 0 auto;
   z-index: 100;
   text-align: left;
   bottom: 150px;
   left: calc(50% - 650px); }
   
   .intro-text h1 { color: #f5f1de; text-transform: uppercase; font-size: 300%; text-shadow: 0 0 45px #000000;}
   .intro-text h2 { color: #f5f1de; text-transform: uppercase; font-size: 140%; text-shadow: 0 0 45px #000000;}

.slide {
   background-repeat: no-repeat;
   background-position: center top;
   position: relative; 
   background-size: cover;
   width: 100%;
   height: 900px;
   opacity: 0.7; }   
   
/* --- Slide Tabs --- */

#hero ul { 
   list-style: none;
   display: initial;
   position: absolute;
   bottom: 40px;
   left: 0;
   z-index: 10;
   font: 300 1px/1 museo-sans, arial;
   margin: 0 auto;
   width: 100%;
   text-align: center;}

#hero li { 
  width: 24px;
  margin-right: 10px;
  display: inline-block; }

#hero li a { 
  background: rgba(255,255,255,.2); 
  color: #fff;
  padding: 12px;
  display: block;
  -moz-border-radius:    12px;
  -webkit-border-radius: 12px;
  border-radius:         12px;
  -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;
  -moz-box-shadow:    inset 0px 0px 0 2px rgba(255,255,255,1.0);
  -webkit-box-shadow: inset 0px 0px 0 2px rgba(255,255,255,1.0);
  box-shadow:         inset 0px 0px 0 2px rgba(255,255,255,1.0);}
#hero li:hover a { 
  background: rgba(255,255,255,.75);  
  color: #fff;
  -moz-box-shadow:    inset 0px 0px 0 2px rgba(255,255,255,1.0);
  -webkit-box-shadow: inset 0px 0px 0 2px rgba(255,255,255,1.0);
  box-shadow:         inset 0px 0px 0 2px rgba(255,255,255,1.0);}
#hero li:active a { 
  background: rgba(255,255,255,1); 
  color: #fff;
  -moz-box-shadow:    inset 0px 0px 0 2px rgba(255,255,255,1.0);
  -webkit-box-shadow: inset 0px 0px 0 2px rgba(255,255,255,1.0);
  box-shadow:         inset 0px 0px 0 2px rgba(255,255,255,1.0);}
#hero li.ui-tabs-active a { color: #fff; background: rgba(255,255,255,1); opacity: 1; }
#hero li.ui-tabs-active hover a { background: transparent; }


/* --- Peition --- */
#petition {
   background: #d47841; 
   padding: 2em;
   position: absolute;
   z-index: 1000;
   width: calc(500px - 2em);
   bottom: 0;
   right: calc(50% - 750px); 
   text-align: left; }
   
   #petition input {
      display: none;
      visibility: hidden; }
   #petition label {
      display: block;
      padding: 0; }
   #petition label h1 {
      color: #0d2547;
      font-family: 'Raleway', sans-serif;
      font-weight: 500;
      font-size: 180%;
      line-height: 1.1;
      margin: 0;}
   #petition label:hover { color: #000; }
   #petition label::before {
      font-family: 'trilogyicons';
      font-weight: bold;
      font-size: 40px;
      content: "^";
      vertical-align: text-top;
      display: inline-block;
      width: 25px;
      height: 25px;
      color: #f5f1de;
      background: none;
      position: absolute;
      right: 1em;
      top: .75em; }
      
   #petition #expand {
      height: 0px;
      overflow: hidden;
      transition: height 0.5s; }
   #petition #expand span.text {
      display: block;
      margin-top: 1em;
      color: #f5f1de;
      font-size: 112%;
      line-height: 1.3;}
   #petition #toggle:checked ~ #expand {
      height: 300px; }
   #petition #toggle:checked ~ label::before {
      content: "6"; }
      
   #petition .button {
      display: table;
      font-size: 180%;
      color: #0d2547;
      -webkit-box-shadow:inset 0 0 0 3px #0d2547;
      box-shadow:inset 0 0 0 3px #0d2547; }
   #petition .button:active { background: white; }
   #petition .button:hover { 
      background: #0d2547; 
      color: #d47841; 
      -webkit-box-shadow:inset 0 0 0 3px #0d2547;
      box-shadow:inset 0 0 0 3px #0d2547; }        
      
   body#interior #petition, #below #petition {
      position: relative;
      width: calc(100% - 4em);
      bottom: initial;
      right: initial; 
      text-align: center; }

   body#interior #petition h1, #below #petition h1 {
      font-weight: 500;
      font-size: 180%;}
      

#below { display: none; }

/* ---- Experts Say Section --- */
section#numbers {
   padding: 3em 0;
   background: white;
   position: relative;}
   
   section#numbers h2 {
      background: #0d2547;
      font-family: 'Raleway', sans-serif;
      font-weight: 800;
      letter-spacing: .5px;
      text-transform: uppercase;
      display: inline-block;
      font-size: 200%;
      margin: 0;
      color: #30e3ea;
      padding: .4em 1em; 
      margin-bottom: 30px; }
      
      section#numbers h3 {
         font-family: 'Roboto Slab', serif;
         font-weight: 300; 
         color: #4e4e4e;
         font-size: 160%; }
   
section#numbers .panel { width: auto; padding: 0 35px; }

section#numbers ul { display: none; }

section#numbers .control {
    background-color: none;   
    width: 60px;
    height: 60px;
    position: absolute;
    top: 55%;
    font-size: 60px;
    line-height: 1;
    text-align: center;
    color: #ddd;  
    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;  }
    
    section#numbers .control { color: rgba(0,0,0,.1); }
      
    .ie8 section#numbers .control { width: 23px; padding: 10px 0; text-align: center; background-color: #fff; }

    section#numbers .control:hover { color: rgba(0,0,0,.3); }
            
        section#numbers .control { width: 40px; padding: 11px 0; }
    
    section#numbers .control:active { color: rgba(0,0,0,.6); }

section#numbers .control.back { left: 0; }
    section#numbers .ie8 .control.back { left: 0; }
    section#numbers .control.back:hover { }
    section#numbers .ie8 .control.back:hover { left: 0; }
   
section#numbers .control.next { right: 0;}  
    section#numbers.ie8 .control.next { right: 0; }
    section#numbers .control.next:hover {  }  
    section#numbers .ie8 .control.next:hover { right: 0; }
    
    

/* --- Promos --- */

section#promos {
   padding: 3em 0;
   background: white;
   position: relative;}
   
article.promo {
   width: 400px;
   height: 250px; 
   display: inline-block; 
   margin: 0 -2px;
   position: relative; }
   
article.promo a {
   background-color: rgba(13,37,71,.5);
   display: block;
   width: 400px;
   height: 250px;
   -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.promo a:hover {
      background-color: rgba(13,37,71,.1); }
      
article.promo span.title {
   font-family: 'Raleway', sans-serif;
   font-weight: 800;
   font-size: 250%;
   word-spacing: 9999px;
   line-height: 1;
   text-transform: uppercase;
   color: white;
   margin: 0;
   position: absolute;
   width: 80%;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%); }



/* --- Testimonials --- */  
section#testimonials {
   margin: 3em 0 0 0;
   padding: 3em 0;
   background: #f5f1de;
   position: relative; }
   
   section#testimonials h2 { text-transform: uppercase; font-size: 260%; margin: 0; }
   
   section#testimonials .text { margin: .5em 0 1em 0; display: block; }
   
   .testimonial {
      background: white;
      text-align: left;
      width: 80%;
      float: left;
      margin: 0 10% -25px; }

      .testimonial:nth-child(odd) {  margin: 0 16% -25px 4%; }
      .testimonial:nth-child(even) { margin: 0 4% -25px 16%; background: #f3f3f3; }

      .testimonial figure {
         float: left;
         width: 50%;
         height: 400px;
         background-repeat: no-repeat;
         background-position: center center;
         background-size: cover; }
         
         .testimonial:nth-child(even) figure {
            float: right; }
      
      .testimonial .container {
         float: left;
         width: calc(50% - 3em);
         padding: 1.5em 1.5em 2.5em 1.5em; }
         
          .testimonial:nth-child(even) .container  {
             float: right; }
         
      .testimonial .quote { 
         display: block;
         color: #d47841;
         font-size: 130%;
         line-height: 1.4em; }
         
      .testimonial .name {
         display: block;
         font-family: 'Raleway', sans-serif;
         font-weight: 800;
         color: #0d2547;
         font-size: 130%; 
         text-transform: uppercase; }
      
      .testimonial .subhead {
         display: block;
         font-family: 'Raleway', sans-serif;
         font-weight: 800;
         color: #c4c4c4;
         font-size: 100%;
         text-transform: uppercase; }
            



/* --- Feed --- */  
#feed {
   padding: 3em 0;
   margin: 0 auto;
   position: relative;
   background: #0d2547; }

   section#feed h2 { text-transform: uppercase; font-size: 260%; margin: 0; color: #f5f1de; }

   #feed .panel { width: auto; padding: 35px 0; }
   #feed ul { display: none; }

   #feed article {
      display: inline-block;
      background: rgba(48,227,234,0); 
      width: 27%; 
      padding: 1.5%;
      margin: 0 1.5%;
      text-align: left; 
      vertical-align: top;
      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; }
      
      #feed article:hover {
         background: rgba(48,227,234,.2); }
      
      #feed article a h2 {
         letter-spacing: 0;
         font-family: 'Raleway', sans-serif;
         color: #2edae2;
         font-size: 110%; 
         font-weight: 800;
         line-height: 1.1;
         text-transform: uppercase; }
         
      #feed article a p {
         display: block;
         margin: .5em 0 0 0;
         font-size: 80%;
         color: white; }
          
      #feed article small {
         display: block;
         margin-top: 1em;
         font-family: 'Roboto Slab', sans-serif;
         font-size: 100%;
         font-weight: 300;
         text-transform: uppercase;
         color: #fff; }