@media only screen and (max-width: 1240px){
   .wrap { width: 100%; margin: 0; }
   header .wrap { margin: 0 auto; }
      
   #body { width: 100%; margin: 0 auto; font-size: 95%; }
   #content { margin: 0 auto 2em; padding: 2em; }
   section#body { margin: 0 auto; }
   #id { height: auto; }
   #id .star { display: none; }
   #id h1 { font-size: 200%; line-height: 1; margin: .5em 0; }  
   
   body#home #content { margin: 1em auto; font-size: 110%; width: 90%; }
   #hero { height: auto;}
   .slide, .mask { height: 350px; }
   #hero .text { width: 50%; margin: 0 20%; bottom: 30px;}
   #hero .text.left { width: 50%; margin-left: 2%; }
   #hero h1 { font-size: 160%; }
   #hero a.button { font-size: 120%; }

   .profile-head figure {width: 180px; height: 180px; }
   .profile-head .left {width: 250px;}
   .profile-head .right {margin: 30px 0 0 20px;}
   .profile-head h1 {}
   .profile-head .office {}
   .profile-head .year-elected  { }
   .two-column { width: calc(100% - 3em);padding: 1.5em;}
   .two-column .left {width: 20%;}
   .two-column .right {width: 70%;margin-left: 5%;}
   
   body#home section#what-we-do, body#home section#featured, body#home section#bottom { display: block; font-size: 90%; }
   body#home section#bottom #social { width: 100%; }
   body#home section#bottom #updates { width: 100%; }
   body#home section#bottom .pad { padding: 5%;  width: 90%; }
   body#home section#bottom #social .pad { float: none; margin-right: 0px; color: white; }
   body#home section#bottom #updates .pad { float: none; margin-left: 0px; color: white; }
   
   body#home section#bottom h1 { font-size: 200%; }
   body#home section#bottom #social small, body#home section#bottom #social time { font-size: 90%x;}
   body#home section#bottom #updates small, body#home section#bottom #updates time {  font-size: 90%;}
   body#home section#bottom article { font-size: 130%; }
   body#home section#bottom article h3, body#home section#bottom span.title { font-size: 160%;  }
   body#home section#bottom ul.folder-list li a { font-size: 130%; }

   footer { width: 92%; padding: 4%; font-size: 90%; }
   footer .wrap { width: 100%; margin: 0; }
   footer h3 { font-size: 120%; }
}

@media only screen and (max-width: 1100px){
   header { height: 95px; }
   #logo img { height: 36px; }
   nav#main { top: -40px; z-index: 1000; background: none;}
   nav ul#menu li { display: none; }
   nav ul#menu li#top-menu { display: block !important; width: 50px;}
   nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   nav ul#menu li#top-menu  > a {  }
   nav ul#menu li#top-menu  > a:hover { color: white !important; background: #18162e !important; }
   
   body#home section#what-we-do ul { display: block; margin: 0 auto; width: 90%; }
   body#home section#what-we-do ul li { margin-bottom: 20px; font-size: 140%;}
   
   #filter select { display: block; width: 50%; margin: .25em 0; }
}

@media only screen and (max-width: 900px){
   body { font-size: 85%; }
   .two-column .left {width: 30%;}
   .two-column .right {width: 60%;margin-left: 5%;}
}

@media only screen and (max-width: 760px){
   #id h1 { font-size: 150%; }  
   section#signup h1 { margin-bottom: .5em; }
   #subscribe, .form-fields, form li, form li.submit, form input.email, form input.zip { display: block; float: none; width: 100%; }
   #subscribe { width: 60%; }
   body#home section#featured, body#home section#bottom, body#home section#what-we-do { font-size: 80%; }

   h1 { font-size: 180%;}
   h2 { font-size: 150%; }
   h3 {  font-size: 120%; }
   h4 { font-size: 110%;}

   .profile-head figure {width: 150px; height: 150px; }
   .profile-head .right {  margin: 1em 0; text-align: center; font-size: 80%; width: 100%;}
   .profile-head .left {  width: 100%; text-align: center; }
   .profile-head figure {    margin: 0 auto; }
   .two-column .left, .two-column .right { width: 100%; }
   
   .recipients {  
         list-style: none;
         margin: 0;
         padding: 0;
         width: 100%;
         /* flex: 0 0 auto; */
         display: flex;
         flex-direction: column;
         flex-wrap: nowrap;
         justify-content: flex-start; }
    
   .recipients .recipient { 
         flex: auto;
         margin: 0 10px 10px;
         padding: 20px;
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-between;
         align-items: center;
         text-align: left;}
         
   .recipient a { width: 100%; }
    
   .recipients .recipient picture { 
         margin: 0 0 0 0;
         flex: 1 0 2rem;
         height: 120px;
         width: 120px;
         display: inline-block; }
    
    .recipient .details {
         flex: 1 0 auto;
         flex-direction: column;
         display: inline-block;
         margin-bottom: 0;
         text-align: left;
         width: 60%;
         margin: 25px 0 0 25px;
         vertical-align: top; }
         
    #filter select { display: block; width: 100%; clear: both; margin: .5em 0; }     
         
}

@media only screen and (max-width: 560px){
   .recipients .recipient picture {  height: 80px; width: 80px; }
    .recipient .details { width: 60%; margin: 0px 0 0 15px;  }
   #hero { height: auto;}
   .slide, .mask { height: 220px; }
   #hero .text { width: 50%; margin: 0 20%; bottom: 20px;}
   #hero .text.left { width: 50%; margin-left: 5%; }
   #hero h1 { font-size: 120%; }
   #hero a.button { font-size: 100%; }

}
/*
@media only screen and (max-width: 970px){
   body { font-size: 15px; }
   header { height: auto; margin: 0 auto; }
   header .wrap { width: 100%; }
   #logo { position: relative; top: 20px; left: initial; height: 70px; float: none; margin-bottom: 1em; display: block; }
   #logo img { height: 70px; position: relative; left: initial; }
   nav#main { height: auto; float: none; display: block; margin-bottom: 1em; }

   h1 { font-size: 300%; }
   h2 { font-size: 200%; }
   h3 { font-size: 180%; }
   h4 {  font-size: 120%; }

   figure.photo.section-front, figure.photo.section-front .mask { margin-top: 0; text-align: center; height: 450px; }
   #id { padding: 0 .25em; height: auto; }
   #id h1, figure.photo.section-front .overlay { text-align: center; }
   #id { margin-top: 0; font-size: 32px; padding: .25em; height: auto; }
   #id h1, figure.photo.section-front .overlay h1 { text-align: center; width: 100%;}
   
   figure.photo.section-front .text { width: 90%; margin: 0 5%; font-size: 80%;  bottom: 20px; }

   .slide, .mask { height: 620px; }
   #hero .text { width: 60%; margin: 0 20%; bottom: 20px;}
   #hero h1 { font-size: 140%; }
   #hero a.button { font-size: 120%; }
   #hero .control { bottom: 80px; font-size: 40px; }
   #hero .control.next { right: 12%; }
   #hero .control.back { left: 10%; }
   #tagline { font-size: 120%; }
   
   .icons.circle { font-size: 30px; height: 30px; width: 30px; line-height: 30px; padding: 10px; }
   
   article.promo a h2 { font-size: 90%; }
   
   section#promos h1 { font-size: 160%; } 
   #interior.media #content .left, #interior.coalition #content .left { width: 70%; font-size: 120%; } 
   #interior.media #content .right, #interior.coalition #content .right {  width: 25%; font-size: 80%; }
}


@media only screen and (max-width: 800px){
   figure.photo.section-front, figure.photo.section-front .mask { height: 350px; }
   body#home #content .left, body#home #content .middle, body#home #content .right { text-align: left; float: none; width: 100%; margin-right: 0; } 
   .slide, .mask { height: 550px; }
   #hero .text { width: 60%; margin: 0 20%; bottom: 20px;}
   #hero h1 { font-size: 130%; }
   #hero a.button { font-size: 110%; }
   #hero .control { bottom: 60px; font-size: 40px; }
   #hero .control.next { right: 12%; }
   #hero .control.back { left: 10%; }
   
   section#promos h1 { font-size: 150%; }
   #interior.media #content .left, #interior.coalition #content .left { float:none;width: 100%; font-size: 120%; } 
   #interior.media #content .right, #interior.coalition #content .right {  float:none; width: 100%; font-size: 100%; }
}

@media only screen and (max-width: 680px){ 
   nav ul#menu li a { height: 16px; padding: 12px 15px; font-size: 16px; line-height: 16px; letter-spacing: 1px; }
   figure.photo.section-front, figure.photo.section-front .mask { height: 300px; }
   table, thead, tbody, th, td, tr { display: block; }
   .slide, .mask { height: 450px; }
   #hero .text { width: 70%; margin: 0 15%; bottom: 20px;}
   #hero h1 { font-size: 120%; }
   #hero a.button { font-size: 100%; }
   #hero .control { bottom: 0; font-size: 40px; }
   #hero .control.next { right: 7%; }
   #hero .control.back { left: 5%; }
   section#promos { width: 96%; padding: 2%; }
   article.promo { width: 30%; padding: 1%; }
   #triangle-down { border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 26px solid white; top: 0;}
   #triangle-down:after { border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 23px solid #00142a; left: -18px; top: -36px; }
   #tagline { font-size: 120%; padding-top: 0; }
   
   section.text { float: none; width: 100%; }
   section.form { float: none;     width: 100% !important; padding: 0 !important; background: none !important; }
}

@media only screen and (max-width: 560px){
   #logo { top: 10px; height: 50px;  margin-bottom: .2em; }
   #logo img { height: 50px;  }
   nav#main { margin-bottom: .5em; }
   nav ul#menu li a { height: 14px; padding: 8px 10px; font-size: 14px; line-height: 14px; letter-spacing: 0px; }
   .slide, .mask { height: 400px; }
   figure.photo.section-front, figure.photo.section-front .mask { height: 240px; }
   figure.photo.section-front .text { width: 90%; margin: 0 5%; font-size: 60%;  bottom: 10px; }
   article.action_item h1 { font-size: 150%; }
   
   section#promos h1 { font-size: 110%; }
   #interior.media #content .left, #interior.coalition #content .left  { font-size: 100%; } 
   #interior.media #content .right, #interior.coalition #content .right { font-size: 100%; }
   
   article.action_item .right { width: 99%; padding: 0; border: 0; }
}

@media only screen and (max-width: 480px){
   nav ul#menu li a { height: 14px; padding: 8px 6px; font-size: 14px; line-height: 14px; letter-spacing: 0px; }
   figure.photo.section-front, figure.photo.section-front .mask { height: 200px; }
   #id, #id h1, figure.photo.section-front .overlay h1   { font-size: 22px;}   
   .slide, .mask { height: 350px; }
   #hero .text { width: 80%; margin: 0 10%; bottom: 20px;}
   #hero h1 { font-size: 110%; }
   #hero a.button { font-size: 100%; }
   #hero .control { bottom: 0; font-size: 40px; }
   #hero .control.next { right: 2%; }
   #hero .control.back { left: 0%; }
   #tagline { font-size: 100%; padding-top: 0; }
}
*/