@media only screen and (max-width: 1450px){
   #logo { left: 20px; height: 60px; top: 22px; }
   nav { right: 20px; }
   nav ul#menu li a { font-size: 18px; }
}

@media only screen and (max-width: 1250px){
   nav ul#menu li a { font-size: 17px; }
   #body { width: auto; }
   #content { width: 60%; margin: 2%; float: left;}
   #content.wide, {  width: 100%; margin: 1em auto; float: none; }
   body.simple #content {  width: 92%; margin: 1em auto; float: none; }
   #options { float: right; margin: 0 2% 0 0; }
   #snav { width: 90%; padding: 5%; }
   #snav h2 span.large { font-size: 20px; display: block; }
   #snav li a { font-size: 16px; }
   #snav li:before { font-size: 11px; padding: 0; }
   
   #id { padding: 0 0 0 20px; }
   #id a h1 { font-size: 20px; }
   
   article img, article object, article embed, article iframe { max-width: 100% !important; height: 100% !important;}
   p img, p object, p embed, p iframe { max-width: 100% !important; height: 100% !important;}
   .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; 	height:0; overflow:hidden; }
   .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

   footer { width: 94%; padding:3%; }
   footer #signup { width: auto; padding: 1em 5%; clear: both; }
   footer #signup h1 { margin: 0 10px 0 0; }
   footer #signup form { float: right; }
}

@media only screen and (max-width: 1170px){
   body#home #logo { display:none; }
   .wrap { width: auto; }
   img#main-logo { left: 2%; width: 220px; }
   #donate { right: 2%; top: 30px; }
   #oh-needs-to-know { right: 360px; }
   #home-signup #signup { top: 460px; left: 2%; width: 220px;  height: 220px;}
   #home-signup #signup h1, #home-signup #signup h1 span.ital { font-size: 30px; }
   #home-signup #signup form { margin: 0; }

   nav ul#menu li a { font-size: 15px; }
}

@media only screen and (max-width: 1040px){   
   .wrap { width: 100%; }
   body#home header { bottom: auto; top: 650px; }
   
   #oh-needs-to-know { right: 340px; top: -2px; padding: 10px 20px; }
   #oh-needs-to-know h1 { font-size: 24px; line-height: 24px; top: 10px; position: relative; }
   #oh-needs-to-know span.oh { background-size: 44px auto; }
   #oh-needs-to-know span.small { font-size: 10px; bottom: -17px; right: 0; }
   
   #home-signup #signup { top: 300px; }
   
   #donate { right: 2%; top: -2px; padding: 10px; }
   #donate h1 { font-size: 24px; line-height: 24px; top: 20px; }
   form#contribute { top: 0; right: 0; }

   #hero { height: 750px; }
   .slide, .mask  { height: 700px; }
   #hero .control { top: 25%; }
   body#interior nav { margin: 0 auto; position: absolute; }
   body#interior nav ul#menu { margin: 0 0 0 5px; float: right;}
   body#interior nav ul#menu li { display: none; }
   body#interior nav ul#menu li#donation { display: block !important; top: 30px; right: 65px; }
   body#interior nav ul#menu li#top-menu { display: block !important; }
   body#interior nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   body#interior ul#social{ display: none; }
   
   body.act #body { background-size: cover; background-position: left bottom; background-repeat: no-repeat; }
   body.act .text { margin-right: 400px; width: auto; float: left; }
   body.act .form { width: 400px; margin: 0; position: relative; right: 0; }
   
   #options #signup { display: none; }
}

@media only screen and (max-width: 960px){
   nav ul#menu li a { font-size: 12.5px; }
   .issue a h2 { font-size: 24px;}
   #signup h1 { font-size: 24px !important; }
   #signup h1 span.ital { display: inline-block; font-size: 24px !important; }
   footer #signup { width: 96%; padding: 1em 2%; }
   footer #signup form input.email, footer #signup form input.zip { font-size: 15px; }
   footer #signup button { padding: 0 20px; height: 50px; font-size: 18px; }
}

@media only screen and (max-width: 900px){
   body#home #logo { display:block; }
   nav { margin: 0 auto; position: absolute; }
   nav ul#menu { margin: 0 0 0 5px; float: right;}
   nav ul#menu li { display: none; }
   nav ul#menu li#donation { display: block !important; top: 30px; right: 65px; }
   nav ul#menu li#top-menu { display: block !important; }
   nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   ul#social{ display: none; }
   
   #oh-needs-to-know { top: 500px; right: 2%;}

   .issue a h2 { font-size: 22px;}
}

@media only screen and (max-width: 800px){
   img#main-logo { left: 2%; width: 180px; }
   #home-signup #signup { top: 210px; left: 2%; width: 220px; height: 220px;  padding: 20px;}
   #home-signup h1 { margin-top: 30px; }
   
   #alert { position: absolute; top: -24px; }
   #alert a { height: 32px;line-height: 32px;font-size: 18px; }
   
   #oh-needs-to-know { top: 410px; }
   
   body#home header { top: 500px; }
   #hero { height: 600px; }
   .slide, .mask { height: 500px; }
   #signup h1 { font-size: 24px !important; }
   #signup form { margin-top: 0 !important; }
   .form li {  }
   .form .email, .form .zip { width: 80%; display: inline-block; padding: 10px 5% 10px 15%; border: 0;  margin: 0 0 5px 0; -webkit-box-shadow:inset 0 0 0 1px #a4c9d7; box-shadow:inset 0 0 0 1px #a4c9d7; }
   .form button, .button { margin-bottom: 0; }
   
   body.folder #id { background-color: rgba(27,31,35,1) !important; }
   figure.photo.folder { height: 200px;background-position: center center; margin: 0;}
   
   #content { width: auto; float: none;}
   #options { width: auto; float: none; clear: both; border-left: none; padding: 0; margin: 0; top: initial !important; }
   #snav { width: 96%; padding: 2%; margin: 0 auto !important; position: relative !important; display: block; clear: both; right: initial; top: initial !important; }
   #snav h2 span.large { font-size: 24px; display: initial; }
   #content img.story, img.wp-post-image  { max-width: 50% !important; }
   .issue a h2 { font-size: 20px;}
   
   body.trilogy-hub-form.volunteer.volunteer-for-ted #body { background-size: contain; background-repeat: no-repeat; background-position: bottom; }
   
   #copyright { float: none; text-align: center; clear: both; }
   #credit { text-align: center; float: none; }
}

@media only screen and (max-width: 740px){ 
   .issue a h2 { font-size: 20px;}
   footer #signup h1 { text-align: center; float: none;}
   footer #signup form { float: none; display: inline-block; }  
}

@media only screen and (max-width: 640px){ 
   body#home header { position: relative; z-index: 1000; top: 0; }
   #logo-hero { display: none; }
   #hero { position: relative; height: 480px; background: white;}
   .slide, .mask { height: 400px; }
   #hero .control { width: 50px; height: 50px;}
   .control span.arrow { line-height: 50px; font-size: 32px; }
   
   #alert { position: absolute; top: 100px; }
      
   figure.photo.folder { height: 150px;background-position: center center; margin: 0;}
   
   #home-signup #signup { z-index: 1000; -webkit-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px;  padding: 10px; position: relative; width: 90%; top: 370px; left: initial; height: auto; }
   #home-signup #signup h1 { text-align: center; float: none; margin: 0 10px 10px 0; }
   #home-signup #signup form { float: none; display: inline-block; }
   #home-signup #signup form li { float: left; margin: 0 1px; }
   #home-signup form input.email, #home-signup #signup form input.zip { font-size: 15px; padding: 0 10px;  margin: 0; height: 50px; line-height: 50px; }
   #home-signup #signup form input.email { width: 200px; }
   #home-signup #signup form input.zip { width: 100px; }
   #home-signup #signup button { padding: 0 20px; height: 50px; font-size: 18px; margin: 0;}

   body.act #body { background: white !important; height: auto !important;}
   body.act .text { width: auto; margin: 0 auto; clear: both; font-size: 15px; float: none;  }
   body.act .form { width: auto; margin: 1em 0; position: relative; clear: both; }   
   section.content { display: -webkit-box; display: -moz-box;display: box;-webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; }
   section.content > h1 { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; box-ordinal-group: 1; }
   section.content > .text { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; box-ordinal-group: 3;}
   section.content > .form { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; box-ordinal-group: 2;}
   #hub-form, #hub-form-response, #twitter-widget, #share-widget { float: none; width: 90%; padding: 1em 5%; }
   #hub-form h2, #hub-form-response h2 {  margin: 0 1em; font-size: 22px; }
   #hub-form form ol, #hub-form form ul { margin: 1em; }
   #hub-form li, #hub-form div { clear: both; }
   #hub-form li { padding: 0 0 .25em 0; width: 100%; }
   #hub-form input, #hub-form select, #hub-form textarea, #hub-form #email, #hub-form #zip, #hub-form input#phone { width: 95.5%; }
   #hub-form button { width: 100%; }

      
   #feed, #ohioans-for-ted { position: relative; }
   .masonry article { float: none; width: auto; margin: 2%; padding: 2%; }
   
   .issue a { height: 90px; }
   .issue figure { width: 135px; height: 90px; }
   .issue a h2 { font-size: 18px; margin-left: 160px; }
   .issue a p { margin-left: 160px; }
      
   a.button, form button { width: auto; }
   footer #signup h1 {  text-align: center; float: none; }
   
   #modal { margin: 2%; }
   .modal_close { padding: 0; background: none; color: black; font-size: 100%;  border: 0; position: absolute; right: 10px; top: 10px; }
   #modal-wrapper { width: 84%; padding: 8%; }
   #modal .button { margin: 0 auto; width: 100%; padding: .5em 0; font-size: 100%; }

}

@media only screen and (max-width: 540px) { 
   #hero { height: 480px; background: white;}
   .slide, .mask { height: 270px; }
   #hero .control { top: 20%; }
   #content img.story, img.wp-post-image { max-width: 100% !important; margin: 1em 0; border: 0; padding: 0; }
   #content { margin: 3%; }
   #options { padding: 3%; background-color: #eee; }
   #credit { text-align: center; float: none; margin: 1em; }
   
   #alert a { height: auto; padding: 8px 0; line-height: 1;font-size: 16px; }

   figure.photo.folder { height: 120px;background-position: center center; margin: 0;}
   
   .issue a h2 { font-size: 16px; margin-left: 150px; }
   .issue a p { margin-left: 150px; }
   body.team-ted .more { float: none !important; text-align: right; display: block; }

   #home-signup #signup { padding: 5%; width: 84%; top: 230px; }
   footer #signup { width: 90%; padding: 5%; }
   
   footer #signup h1, #home-signup #signup h1 { margin: 0 0 10px 0; line-height: 24px; display: inline-block; }
   #home-signup #signup form, footer #signup form { display: block; }
   footer #signup form li, #home-signup #signup form li { float: none; display: block; width: 100%; margin: 2px 0;}
   #home-signup #signup form li.email-container, #home-signup #signup form li.zip-container { width: 100%; }

   footer #signup form li.submit, #home-signup #signup form li.submit { display: block; width: 100%; margin: 0 auto; }
   footer #signup form input.email, footer #signup form input.zip, #home-signup #signup form input.email, #home-signup #signup form input.zip {  font-size: 17px; display: block; width: 90%; padding: 0 5%; height: 50px;}
   footer #signup button, #home-signup #signup button { width: 100%; }
}

@media only screen and (max-height: 775px) { 
   body#home header { top: 0; position: relative; z-index: 1000; height: 100px; }
   #alert { top: 90px; }
   #hero { height:700px; background: white;}
   .slide, .mask { height: 700px; }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 740px) and (orientation : landscape) { 
   body#home header { top: 0; position: relative; z-index: 1000; height: 100px; }
   #hero { height:500px; background: white;}
   .slide, .mask { height: 500px; }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 740px) and (orientation : portrait) { 
   body#home header { top: 0; position: relative; z-index: 1000; height: 100px; }
   #hero { height:480px; background: white;}
   .slide, .mask { height: 270px; }
}