body#home header { 
   position: absolute;
   bottom: 0;
   width: 100%; }
   
#hero {
   width: 100%;
   height: 100vh;
   background:#1b1f23; }
   
#logo-hero {
   position: relative;
   z-index: 100;
}

img#main-logo {
   padding: 25px 40px 20px;
   background: rgba(255,255,255,.7);
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
   -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2);
   box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2);
   position: absolute;
   top: -5px;
   left: -40px;   
}
  
.slide {
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  background-size: cover;
  height: 100vh;
}   

.mask {  
   height: 100vh;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b1f23+0,1b1f23+100&0+60,1+100 */
   background: -moz-linear-gradient(top,  rgba(27,31,35,0) 0%, rgba(27,31,35,0) 60%, rgba(27,31,35,1) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(top,  rgba(27,31,35,0) 0%,rgba(27,31,35,0) 60%,rgba(27,31,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to bottom,  rgba(27,31,35,0) 0%,rgba(27,31,35,0) 60%,rgba(27,31,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001b1f23', endColorstr='#1b1f23',GradientType=0 ); /* IE6-9 */
}

#hero .text {
   display:block;
   float:left;
   width: 350px;
   height: auto;
   padding: 0px;   
   font-size: 17px;
   color: #fff;
   position: absolute;
   text-align: center;
   top: 40px;} 

#hero .photo {
   display: block;
   float: right;
   width: 640px;
   height: auto;
   padding: 0;
   position: absolute;
   text-align: center;
   top: 100px;
   right: 0; }
   
#hero .photo figure {
   -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,.2);
   box-shadow: 0 0 15px 0 rgba(0,0,0,.2); }

#hero h1 {
  color: #fff; 
  font-family: "Roboto Slab", serif;
  font-size: 50px;
  line-height: .9;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  word-spacing: 0;
  margin: 0 0 7px; 
}	

#hero a:hover h1 { color: #79e1ff; }
#hero p {
  color: #fff;
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 12px;
}    

#hero a:hover p { color: #79e1ff; }

/* --- Slide Tabs --- */

#hero ul { 
  list-style: none; 
  display: none;
  position: absolute;
  bottom: 120px; 
  left: 48.5%;
  z-index: 10;
  font: 300 1px/1 museo-sans, arial; }

#hero li { 
   }

#hero li a { 
  background-color: #fff; 
  color: #fff;
  padding: 10px;
  display: block;
  -moz-border-radius:    10px;
  -webkit-border-radius: 10px;
  border-radius:         10px;
  -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 li:hover a { 
  background-color: #de681a; 
  color: #de681a;}
#hero li:active a { 
  background-color: #2DAB2D;
  color: #2DAB2D;}
  
#hero li.ui-tabs-active a { color: #de681a; background-color: #de681a;  opacity: 1; }
#hero li.ui-tabs-active hover a { background: transparent; }


/* --- Back/Next Buttons --- */

#hero .control {
  background-color: rgba(230,77,60,.2);    
  background-position: center center;
  background-repeat: no-repeat;
  width: 60px;
  height: 10%; 
  position: absolute;
  top: 45%;
  opacity: 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; }	
#hero .control:hover { 
  background-color: rgba(230,77,60,.6); 
  opacity: 1;}
#hero .control:active { 
  background-color: rgba(230,77,60,1);
  opacity: 1; }

#hero .control.back {
  left: 0; }			
#hero .control.next {
  right: 0; }	

.control span.arrow { line-height: 80px; font-family: 'trilogyicons'; font-size: 60px; color: #fff; opacity:.2;}

#hero .action h2 { color: #fff; }

#oh-needs-to-know {
   background: #004760;
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
   -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2);
   box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2);
   color: white;
   font: 30px/46px "Merriweather",serif;
   font-weight: 500;
   text-transform: capitalize;
   letter-spacing: -1px;
   padding: 20px;
   height: 40px;
   width: auto;
   position: absolute;
   right: 340px;
   top: 30px;
   color: #fff;
   -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; }
#oh-needs-to-know a { color: #fff; }
#oh-needs-to-know:hover { background: #e84d3d; }

#oh-needs-to-know span.oh {
   color: #004760;
   background: url('/theme/img/ohio-outline.png') no-repeat center center;
   padding: 13px 20px;
   margin: -20px;
   -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; }
#oh-needs-to-know:hover span.oh { color: #e84d3d; }

#oh-needs-to-know span.small {
   font-size: 12px;
   font-style: italic;
   color: #a7a7a7;
   text-align: right;
   position: absolute;
   display: block;
   bottom: 7px;
   right: 20px;
   letter-spacing: 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; }
#oh-needs-to-know:hover span.small { color: #fff; }

#alert {
   position: absolute;
    top: -42px;
    width: 100%;
    display: none; }
body#home #alert { display: block; }

#alert a { 
   background: #e84d3d;
   width: 100%;
   height: 42px;
   line-height: 42px;
   text-align: center;
   color: white;
   font-size: 24px; 
   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; }
#alert a:hover {
   background: #377dc4; }
   


/* --- Contribute --- */
#donate {
   background: #e84d3d;
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
   -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2);
   box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2);
   color: white;
   font: 24px/24px "Merriweather",serif;
   font-weight: 500;
   text-transform: capitalize;
   letter-spacing: 1px;
   padding: 20px;
   height: 40px;
   width: 290px;
   position: absolute;
   right: 0;
   top: 30px; }
#donate.alt { height: 80px; }
   
#donate h1 {
   color: white;
   font: 30px/30px "Merriweather",serif;
   font-weight: 700;
   text-transform: capitalize;
   letter-spacing: -1px;
   position: absolute;
    left: 20px;
    top: 28px; }
#donate h1 a { color: white; }

#donate span.disclaimer {
   font-size: 10px;
   color: white;
   display: block;
   position: relative;
   font-style: italic;
   line-height: 14px;
   clear: both;
   top: 60px;
   text-align: left;}


/* Contribute
--------------------------------------------------- */
form#contribute {
   margin: 0 auto;
   background: #d04537; 
   padding: 10px;
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;
   width: 150px;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 40px; }

li.dollar {
   color: white;
   font: 20px/20px "Lato",sans-serif;
   width: 8%;
   font-weight: 100;
   margin: 0;
   height: 30px;
   line-height: 1;
   padding: 10px 1%;
   background: none;}
   
li.amount {
   font: 20px/20px "Lato",sans-serif;
   width: 60%;
   background: none;
   margin: 0 1% 0 0; }
   
input#donation-amount {
   width: 90%;
   font: 30px/30px "Lato",sans-serif;
   color: white;
   background: none;
   font-weight: 300;
   text-align: left;
   margin: 0;
   padding: 0 5%;
   height: 40px;
   border: 0; }

form#contribute li.button {
   padding: 0;
   margin: -22px -10px 0 0;
   float: right; }

form#contribute li.button button {
   background: #953429;
   width: auto;
   height: 60px;
   padding: 0 10px;
   display: inline-block;
   border: 0;
   cursor: pointer;
   font-family: 'trilogyicons'; 
   font-size: 24px; 
   color: white;
   text-transform: uppercase;
   position: absolute;
   right: 0;
   -webkit-border-radius: 0 2px 2px 0;
   border-radius: 0 2px 2px 0;}
   
form#contribute li.button button:hover {
   color: #e84d3d;
   background: white; }   


/* --- Feed --- */
#feed {
   padding: 2em 0;
   background: white;}
   
#feed h1 {
   margin: 0; }
  
.feed.masonry {
    width: 100%;
    position: relative;  }
    
.masonry article {
   background: #fff;
   float: left;
   width: 29%;
   padding: 1%;
   margin: 1%;
   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;
   -webkit-border-radius: 2px 2px 2px 2px;
   border-radius: 2px 2px 2px 2px;}
    
.masonry article small {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase; }

.masonry article h3 {
   color: #444;
   line-height: 1.2;
   font-size: 20px;
   font-family: "Lato",sans-serif;
   font-weight: 300; }
   
.masonry article h3 a {
   color: #377dc4;
   -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;}

.masonry article h3 a:hover {
   color: #e64d3c; }
            
.masonry article:hover {
    background-color: #eee; }
  
.masonry article:active {
    background-color: #ddd; }



#ohioans-for-ted {
   background: #fff; 
   padding: 2em 0 2em 0;
}


#modal { }

.modal_close {
   padding: 0;
   background: none;
   color: white;
   font-size: 100%;
   border: 0;
   position: absolute;
   right: 0;
   top: -30px; }

#modal-wrapper { 
   background: #fff;
   width: 500px;
   padding: 5%; 
   text-align: center; }
   
#modal figure { 
   width: 100%;
   height: auto;
   margin-bottom: 2%; }

#modal figure img { 
   width: 100%;
   height: auto; }

#modal .button {
   margin: 0 auto;
   width: 100%;
   padding: 1em 0; }