@media only screen and (max-width: 1520px){
   header .wrap { width: calc(100% - 2em); padding: 0 1em;}
   .intro-text { width: 50%; left: 1em; }
   #petition { width: calc(35% - 2em); right: 1em; }
   #petition #toggle:checked ~ #expand { height: 320px; }
   #petition label::before { font-size: 30px; top: 10px; right: 10px;}
}

@media only screen and (max-width: 1260px){
   .wrap { width: 100%; margin: 0; }
   .wrap.wide { width: 90%; }
   section#body { padding: 2em; width: calc(100% - 4em);}
   
   #hero, .slide { height: 800px; }
   .intro-text { bottom: 100px; }
   .intro-text, #petition { font-size: 90%; }
   #petition #toggle:checked ~ #expand { height: 300px; }
   #petition label::before { font-size: 26px; top: 10px; right: 10px;}
   .intro-text h1, .intro-text h2 { text-shadow: 0 0 25px #000000; }
   
   section#promos { padding: 2em; }
   article.promo { width: 33%; height: 240px; background-size: cover; background-repeat: no-repeat; background-position: center center;}
   article.promo a { width: 100%; height: 240px; }
   .testimonial { width: 90%; float: none; margin: 1em auto !important; background: white !important; }
      
   footer { padding: 2em 1em; width: calc(100% - 2em); }
   footer .wrap { width: auto; margin: 0 auto; }
}

@media only screen and (max-width: 1160px){
   #hero, .slide { height: 700px; }
   #petition { font-size: 80%; }
   #petition #toggle:checked ~ #expand { height: 260px; }
   #petition label::before { font-size: 22px; top: 10px; right: 10px;}
}

@media only screen and (max-width: 1060px){
   body { font-size: 15px; }
   body#home header, header { position: relative; background: rgba(13,37,71,1); }
   nav#extras { display: none; }
   nav#main { border-left: none; float: right; top: 8px; margin: 0;  padding: 0; }
   nav ul#menu li { display: none; }
   nav ul#menu li#top-menu { display: block !important; background: rgba(255,255,255,.6); width: 50px;}
   nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   nav ul#menu li#top-menu  > a { color: white !important; width: 50px; }
   nav ul#menu li#top-menu  > a:hover { color: #0470bd !important; background: rgba(255,255,255,1) !important; }
   
   h1 { font-size: 300%; }
   h2 { font-size: 200%; }
   h3 { font-size: 180%; }
   h4 {  font-size: 120%; }

   figure.photo.section-front { margin-top: 0; text-align: center; height: 340px; }
   #id h1, figure.photo.section-front .overlay { text-align: center; }
   #id { margin-top: 0; font-size: 150%; padding: .25em; height: auto; }
   #id h1, figure.photo.section-front .overlay h1 { font-size: 200%; line-height: 1; text-align: center; width: 100%;}

   #hero, .slide { height: 520px; }
}

@media only screen and (max-width: 900px){
   figure.photo.section-front { height: 300px; }
   body { font-size: 14px; line-height: 1.5; }
   #content { width: 60%; }
   #options { width: 35%; }
   
   h1 { font-size: 240%; }
   h2 { font-size: 180%; }
   h3 { font-size: 160%; }

   div.two-thirds { width: 45%; }
   div.one-third { width: 50%; }
   
   #hero, .slide { height: 460px; }
   .intro-text { width: 90%; text-align: center; margin: 0 5%; left: initial; }
   #petition { display: none; }
   
   #below, #below #petition, body#interior #petition { display: block; }
   
   article.promo { width: 33%; height: 180px; }
   article.promo a { width: 100%; height: 180px; }
   article.promo span.title { font-size: 200%; }
}

@media only screen and (max-width: 800px){
   figure.photo.section-front { height: 260px; }
   #id h1, figure.photo.section-front .overlay h1 { font-size: 180%; }

   h1 { font-size: 220%; }
   h2 { font-size: 170%; }
   h3 { font-size: 150%; }

   #hero, .slide { height: 400px; }
   .intro-text { width: 90%; text-align: center; margin: 0 5%; left: initial; font-size: 80%; bottom: 60px; }
   #hero ul { bottom: 20px; }
   .intro-text h1, .intro-text h2 { text-shadow: 0 0 15px #000000; }

   article.promo { width: 33%; height: 150px; }
   article.promo a { width: 100%; height: 150px; }
   article.promo span.title { font-size: 150%; }
   
   #testimonials { padding: 2em 1em; }
   section#testimonials h2 { font-size: 160%; }
   .testimonial figure { float: left; width: 200px; height: 200px; margin: 2em; }
   .testimonial .container { width: calc(100% - 300px); }

   #feed { padding: 2em 1em; }
   section#feed h2 { font-size: 160%; }
   #feed article { display: block; width: 95%; margin: .5em 0; padding: 2.5%; background: rgba(48,227,234,.1);}
}

@media only screen and (max-width: 680px){
   #body { font-size: 13px; line-height: 1.5; }
   #content, #options { float: none; }
   #content { width: 100%; margin: 1em 0; }
   #options { width: 100%; margin: 1em 0; top: initial; right: initial; }
   #snav li a { font-size: 20px; }

   h1 { font-size: 180%; }
   h2 { font-size: 150%; }
   h3 { font-size: 130%; }

   figure.photo.section-front { height: 220px; }
   #id h1, figure.photo.section-front .overlay h1 { font-size: 160%; }
   div.left,div.right { float: none; width: 100%; margin-bottom: 2em; }
   
   #hero, .slide { height: 360px; }
   .intro-text { font-size: 70%; bottom: 50px; }
   #hero ul { bottom: 15px; }
   .intro-text h1, .intro-text h2 { text-shadow: 0 0 10px #000000; }
}

@media only screen and (max-width: 600px){
   figure.photo.section-front { height: 180px; }
   #id h1, figure.photo.section-front .overlay h1 { font-size: 140%; }
   #logo { top: 21px; font-size: 140%; }
   
   #hero, .slide { height: 300px; }
   .intro-text { font-size: 60%; }
   .intro-text h1, .intro-text h2 { text-shadow: 0 0 5px #000000; }

   article.promo { width: 33%; height: 120px; }
   article.promo a { width: 100%; height: 120px; }
   article.promo span.title { font-size: 120%; }
   .testimonial figure { float: right; width: 120px; height: 120px; margin: 2em; }
   .testimonial .container { width: auto; float: none !important; }
}

@media only screen and (max-width: 480px){
   article.promo { width: 33%; height: 100px; }
   article.promo a { width: 100%; height: 100px; }
   article.promo span.title { font-size: 110%; }
   figure.photo.section-front { height: 140px; }
}



/* 
@media only screen and (max-width: 1060px){

   #hero { height: auto;}

}


@media only screen and (max-width: 680px){    
   figure.photo.section-front, figure.photo.section-front.coalition { height: 300px; }
   figure.photo.section-front .overlay h1.supporters { font-size: 50%;  }
   #id, #id h1, figure.photo.section-front .overlay h1  { font-size: 26px;}
   #body { width: 90%; margin: 0 5%; font-size: 13px; line-height: 1.4; }
   #content, #options { float: none; }
   #content { width: 100%; margin: 1em 0; }
   #options { width: 100%; margin: 1em 0; top: initial; right: initial; }
   #snav li a { font-size: 20px; }
   .title.alt ul li a { font-size: 140%; padding: 8px; }
   h2.title { font-size: 180%; margin: 1em 0 0 0; padding: .35em .5em .25em .5em;}
   body#home #feed article h2 { font-size: 100%;  }
   body#home #feed article { width: 90%; margin: 5%; }
   section#intro { height: 450px; }
   section#intro p { font-size: 120%; }
   section#intro .bottom-icons { margin-top: 2em; }
   section#intro article { width: 30%; display: inline-block; float: none; height: 150px; vertical-align: middle; }
   .social-links { padding-top: 0px; }
   section#voices h2 { font-size: 130%; }
   section#voices article.voice { font-size: 150%; }
   section#voices article.voice figure.logo img { width: 50%; }
   table, thead, tbody, th, td, tr { display: block; }
   section#endorsers { height: auto; background-size: cover; }
   section#endorsers .bottom { top: 2em; }
   section#endorsers .bottom h3 { font-size: 140%; }
   section#endorsers .bottom h4 {  font-size: 100%; }
   section#endorsers .bottom h4 strong { font-size: 120%; }
   #hero .top h1 { font-size: 120%; }
   #hero .top h1 strong { font-size: 160%; }
   #hero .top h2 { font-size: 110%; }
   #hero .bottom { font-size: 120%; }
   #hero .join { width: 80%; margin: 2em auto;}
   div.two-thirds { float: none; width: 100%; }
   div.left, div.right { float: left; width: 48%; margin-left: 2%;}
   div.one-third { float: none; width: 100%; margin-top: 2em; }
   body#interior.take-action a.act-btn span { left: 75%; font-size: 70%; }
}

@media only screen and (max-width: 560px){
   figure.photo.section-front, figure.photo.section-front.coalition { height: 240px; }
   .title.alt ul li { width: 32% !important; height:55px; display: table; }
   .title.alt ul li a { font-size: 120%; padding: 8px 0; width: 100%; text-align: center; vertical-align: middle; }
   h2.title { font-size: 160%; margin: 1em 0 0 0; }
   article.quote .title { font-size: 110%; }
   article.quote figure.logo { float: none; margin: .25em 0; }
   section#intro p { font-size: 100%; }
   section#endorsers { height: auto; background-size: contain; }
   section#endorsers .bottom { top: 1em; }
   div.left, div.right { float: none; width: 100%; margin: 1em 0 0 0;}
   body#interior.take-action a.act-btn span { left: 66%; font-size: 80%; }
}

@media only screen and (max-width: 480px){
   figure.photo.section-front, figure.photo.section-front.coalition { height: 200px; }
   #id, #id h1, figure.photo.section-front .overlay h1   { font-size: 22px;}   
   .title.alt ul li a { font-size: 110%; padding: 8px; width: auto; display: table-cell; }
   h2.title { font-size: 150%; margin: 1em 0 0 0; }
}

*/