@media only screen and (max-width: 1360px){
   .intro-text { width: 100%; }
   .intro-text .wrap { width: 1140px; padding-left: 0; background: none; }
   footer .wrap { width: 96%; }
}

@media only screen and (max-width: 1200px){
   .wrap { width: 100%; }
   .masonry-wrap {  width: 100%; }
   #alert #close { right: 2%; }
   #alert #message { padding: 0 2%; }
   footer nav { width:52%; margin: 0 0 0 2%; }
   footer nav ul#menu { position: relative; margin: 0; }
   footer nav ul#menu li a { font-size: 16px; }
   footer #vote-button { width: 20%; margin-left: 2%; }
   footer #buttons { width: 20%; margin: 0 2%; }
   footer #buttons a { width: 90%; padding: 6% 5% !important; }
   footer #buttons a.contribute { padding: 6% 5% !important; }
}

@media only screen and (max-width: 1140px){
   header { width: 100%; height: 100px; }
   header #logo { margin-left: 1em; }
   #utility-nav { display: none; }
   ul#social { display: none; }
      
   nav { clear: both; position: initial; margin-bottom: -45px; }   
   nav ul#menu { position: absolute; top: 0px; right: 0px; margin: 16px; }
   nav ul#menu li { display: none; }
   nav ul#menu li#top-menu { display: block !important; }
   nav ul#menu li#top-menu #top-dropdown li { display: block !important; }
   
   #body { width: auto; }
   #content { width: 60%; margin: 2%; float: left;}
   body.simple #content { width: auto; }
   #options { width: 30%; float: right; margin: 2% 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 .wrap:after { margin-left: 1em; }
   #id h1 { margin-left: 0.5em; }
   
   a.button.intro { text-align: center; margin: 300px 15% 0; z-index: 1; font-size: 18px;  width: 70%; }

   #hero, #hero .slide, #hero .mask { height: 350px; }
   #hero .slide { top: 0; background-size: 100%; background-position: top center; }
   #hero .text { width: 90%; margin: 5%; bottom: 35px; }
   #hero a h1 { font-size: 24px; top: initial; } 
   #hero p { font-size: 15px; line-height: 18px; margin: .5em 0; }
   ul.rotator { top: -45px; }
   
   #below { margin-top: 0px; position: relative; z-index: 1;}
   
   #feed { margin: 2em 0 1em 0; }
   .title.cf {  width: 100%; padding: 0; }
   .title ul {  }

   .intro-text.our-party span, .intro-text.vote span, .intro-text.our-california span, .intro-text.take-action span, .intro-text.chinese span, .intro-text.espanol span { width: auto; }
   article.county {  width: 48%;}
   
   .photo.folder { float: none; max-width: 100%; margin: 1% 0; height: auto; }
   .photo.folder img { max-width: 100%; height: auto; }
   
   #our-ca { margin: 1em 0 0 0; }
   #our-ca, #our-ca .slide, #our-ca .mask { height: 300px; }
   #our-ca .slide { top: 0; background-size: cover; }
   #our-ca .text { width: 90%; margin: 5%; bottom: 35px; }
   #our-ca a h1 { font-size: 20px; top: initial; } 
   #our-ca .text h1 { font-size: 30px; margin: 0; } 
   #our-ca p { font-size: 15px; line-height: 18px; }

   .intro-text .wrap { width: 100%;}
   .intro-text span { margin-left: 1em; }
   
   #alert { max-height: initial; }
   
   object, embed, iframe { width: 100% !important;  }
   .video-container {  position:relative; padding-bottom:56.25%; padding-top:30px; margin-bottom: 1em; height:0; overflow:hidden; }
   .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

   form.mobilecommons { width: 100%; }

}

@media only screen and (max-width: 1000px){
   div.dnc2016 table td { font-size: 15px; }
   div.dnc2016 table td p { margin-bottom: 5px; }  
   body.pledge div.wrap, body.election div.wrap { width: 94%; }
   #splash #action-bar.pledge { top: initial; }
   a.button.skip.pledge { top: initial; margin: 1em auto; width: 88%; text-align: center; }
   #splash.pledge footer, #splash.election footer { top: initial; }

}

@media only screen and (max-width: 890px){
   #splash header #logo { margin: 0; padding-top: 13px; }
   #splash section#main { height: 340px; background-size: cover;  }
   #splash.pledge section#main, #splash.election section#main { height:500px; }
   #splash div.wrap { width: 100%; }
   #splash h1 { font-size: 44px; color: #fff; top: 245px; }
   #splash #action-bar { top: 250px;  margin: 0 2%; width: 90%; }
   #splash #action-bar.pledge { margin: 0 auto; width: 88%; }
   #splash #action-bar .promo { margin: 0 1%; text-align: center; width: 48%; float: left; }
   #splash #action-bar.pledge .promo { width: 94%; padding: 3%; }
   #splash #action-bar .promo .icons.circle { float: none; margin: .5em auto; }
   #splash #action-bar .promo h1 { font-size: 24px; }
   #splash #action-bar.pledge .promo h1 { display: inline-block; }
   #splash form#join, #splash form#contribute { margin-left: 0; }
   a.button.skip { top: 165px; position: relative; z-index: 10; margin: 0 2%; display: block; padding: 1em 0; }
   #splash footer { position: relative; top: 165px; }
   a.button.skip.pledge { width: 94%;}
   a.button.election { font-size: 130%; top: 400px; }

   #body { width: auto; padding: 0; }
   .intro-text span { width: 80% !important; }

   #action-bar { padding: 3%; width: 94%; margin-top: 0; }
   #action-bar .promo { float: none; width: auto; margin: 0 0 1em 0; display: inline-block; }
   
   #section-intro { height: 340px; }
   #section-intro .intro-text .wrap { height: 340px; }
   a.button.intro { margin: 240px 10% 0; width: 80%; }
   .intro-text.sub span h1 { font-size: 36px; }
   .quote { font-size: 20px; line-height: 1.2; text-align: left; }
   
   iframe.primary-iframe { scrolling: yes; }
   iframe.primary-iframe html div { width: 100% !important; }
   iframe.primary-iframe html div form div.regForm_outer div { float: none !important; clear: both !important; }
   
   section.act section.text { float: left; width: 45%; }
   section.act section.form { float: right; width: 50%; }
   
   div.dnc2016 table td { font-size: 14px; }

   footer nav { width:72%; margin: 0 0 0 2%; }
   footer nav ul#menu li a { font-size: 18px; }
   footer #buttons { clear: both; width: 100%; margin: 1em 0; }
   footer #buttons a { display: inline-block; width: 16%; padding: 8px 10px 12px 10px !important; margin: 0; font-size: 12px; vertical-align: sub; }
   footer #buttons a.contribute { display: inline-block; padding: 6px 10px 14px 10px !important; }
   footer #buttons .icons { vertical-align: inherit; }
   footer #paidfor { display: block; margin: 0 2%; line-height: 1; }
   footer #copyright span, footer #paidfor span { display: block; margin: 0.5em 0; }
   
}


@media only screen and (max-width: 750px){ 
   header { height: 80px; }
   header #logo { height: 50px; margin-left: 2%; }
   
   #splash.pledge section#main, body.election section#main { background-image: none !important; height: auto !important; background-color: #15171b; }
   body.pledge section#main img#splash-image, body.election section#main img#splash-image { display: block; width: 100% !important; height: auto !important; }
   a.button.election { font-size: 120%; top: initial; margin: 1em 0; margin: 3%; display: block; }
   
   nav ul#menu li#top-menu  { height: 48px; }
   nav ul#menu li#top-menu > a { width: 48px; height: 48px; font-size: 38px; line-height: 48px; }
   nav ul#menu li#top-menu #top-dropdown { top: 48px; }
   
   #id { height: 50px;  }
   #id h1 { font-size: 24px; margin-left: 2%; }
   #id .wrap:after { margin-left: 2%; margin-top: -2px; }
   .intro-text span { width: auto !important; font-size: 15px; line-height: 20px; margin-left: 10px; }

   .masonry article { float: none; width: 94%; padding: 1% 3%; margin: 1% 0; border-bottom: 1px #ddd solid; text-align: center; }
   .masonry article:last-child { border: 0; }
   .masonry article h3 { font-size: 18px; line-height: 1.1; }
   .masonry article.facebook img { width: auto; border: 0; display: block; float: none; margin: 1% auto; }

   #content { width: auto; float: none;}
   #options { width: auto; float: none; clear: both; border-left: none; padding: 0; margin: 0; }
   #snav h2 span.large { font-size: 24px; display: initial; }
   #snav { width: 96%; padding: 2%; }
   #content img.story, img.wp-post-image  { max-width: 50% !important; }

   #section-intro { height: 300px; }
   #section-intro .intro-text .wrap { height: 300px; }
   a.button.intro { margin: 220px 5% 0; width: 90%; }
   .intro-text.sub span h1 { font-size: 32px; }

   footer { padding-top: 0; }
   footer .wrap { width: 100%; }
   footer nav { width:98%; margin: 1% 1% 5% 1%; }
   footer nav ul#menu { margin: 0; } 
   footer nav ul#menu li { width: 19%; margin-right: 1%; background: rgba(28,45,69,1); height: 38px; }
   footer nav ul#menu li div.vote-container { display: none; }
   footer nav ul#menu li.vote { display: block; }
   footer nav ul#menu li:last-child { width: 20%; margin-right: 0; }
   footer nav ul#menu li a { text-align: center; line-height: 38px; display: table; margin: 0 auto; width: 100%; font-size: 15px;}
   footer nav ul#menu li ol { display: none; }
   
   footer nav ul#menu li:hover ol { display: block; position: absolute; bottom: 38px; width: 250px; padding: .5em; margin: 0; background: rgba(28,45,69,1); z-index: 10000;}
   footer nav ul#menu li:nth-child(3):hover ol, footer nav ul#menu li:nth-child(4):hover ol, footer nav ul#menu li:nth-child(5):hover ol { right: 0; }
   footer nav ul#menu li:hover ol li { background: rgba(39,77,131,.4); }
   footer nav ul#menu li:hover ol li a { text-align: left; font-size: 14px; margin-bottom: 2px !important; padding: .5em; }
   footer nav ul#menu li:hover ol li:last-child { width: 100% !important; }
   footer nav ul#menu li ol li { margin-bottom: 2px; height: auto; line-height: 1; }
   footer nav ul#menu li ol li:before { content: "";}

   footer nav ul#menu li:nth-child(2) a span { display: none; }
   footer nav ul#menu li:nth-child(2) a:after { content:'Our CA'; }
   footer nav ul#menu li:hover li:nth-child(2) a:after { content:''; }
   footer nav ul#menu li:nth-child(2) li a:after { content:''; }
   footer nav ul#menu li:nth-child(4) a span { display: none; }
   footer nav ul#menu li:nth-child(4) a:after { content:'Action'; }
   footer nav ul#menu li:hover li:nth-child(4) a:after { content:''; }
   footer nav ul#menu li:nth-child(4) li a:after { content:''; }

   footer #vote-button { width: 50%; text-align: center; margin-left: 0; }
   
   footer #buttons { float: left; width: 50%; margin-left: 0; margin-top: 0; clear: none; }
   footer #buttons a { display: inline-block; width: 180px; height:15px; font: 400 15px/1 "Arvo", sans-serif; margin-bottom: 5px; padding: 8px 10px 12px 10px !important; }
   footer #buttons .icons { font-size: 19px; top: -2px; padding-right: 5px; vertical-align: bottom; }
   footer #buttons a.contribute { padding: 6px 10px 14px 10px !important; }
   footer #buttons .contribute .icons { font: 600 23px/1 "Raleway", Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif !important;  }
   footer #back-to-top { display: block; }
   footer #back-to-top a { padding: 1em 2em; background-color: #274d83; text-transform: uppercase; display: inline-block; }

   #alert { max-height: initial; }
   #alert .wrap { display: -webkit-box;  display: -moz-box;  display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; }
   #alert #close { position: relative; top: initial; right: initial; margin-top: 1em; -webkit-box-ordinal-group: 2;  -moz-box-ordinal-group: 2; box-ordinal-group: 2; }
   #alert #close a { color: #fff; padding: .25em 1em; font-size: 14px; background-color: #1d2939; }
   #alert #message {  -webkit-box-ordinal-group: 1;  -moz-box-ordinal-group: 1; box-ordinal-group: 1; }
   #alert img { float: none; margin: 0.5em auto;}
   #alert h1 { width: auto; text-align: center; float: none; font-size: 18px; margin: 0 .5em; }
   #alert a.button { float: none; margin: .5em; font-size: 14px; }
   form dd {     margin-left: .5em; }
   form dt { width: 30%; font-size: 80%; line-height: 1;}
}

@media only screen and (max-width: 600px){
   #splash header #logo img { width: 240px; }
   #splash section#main { height: 300px;  }
   #splash h1 { font-size: 34px; top: 245px; }
   #splash #action-bar { top: 250px; margin: 0; width: 94%; padding: 3%; }
   #splash #action-bar .promo { margin: 0; text-align: center; }
   #splash #action-bar .promo .icons.circle { float: none; margin: .5em auto; }
   #splash #action-bar.pledge .promo h1 { font-size: 20px; }
   #splash #action-bar .promo h1 { display: block; top: -5px; }
   #splash form#join, #splash form#contribute { display: none; }
   #splash #action-bar.pledge { width: 88%; top: initial; }
   #splash #action-bar.pledge .promo form#join, #splash #action-bar.pledge .promo form#contribute { display: block; }
   a.button.skip { top: 125px; margin: 0; }
      
   div.dnc2016 table td { font-size: 13px; line-height: 1.3; }
   
   body.events #sort { width: 94%; float: none;  padding: 3%;  margin-bottom: 1em; }
   body.events #list { width: 100%; float: none; }
   
   .modal_container { width: 90%; }
   button.my_popup_close.exit { font-size: 18px; }
}

@media only screen and (max-width: 500px){
   #snav li { background-color: rgba(255,255,255,.5); margin-bottom: 1%; padding: 1%; }
   header #logo, #id h1, #id .wrap:after { margin-left: 3%; }
   #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; }
   
   body#interior #social, body#interior #options .module { width: 90%; margin: 0 auto; padding: 5%; }
   body#interior #social { text-align: center; }
   
   #hero { height: 230px; }
   #hero .slide, #hero .mask { height: 230px; }
   #hero .slide { top: 0; }
   #hero .text { width: 90%; margin: 5%; bottom: 35px; }
   #hero a h1 { font-size: 24px; } 
   #hero p { font-size: 15px; line-height: 18px; }
   ul.rotator {  }
   
   #action-bar { padding: 3%; width: 94%; margin-top: 0; }
   #action-bar .promo { float: none; width: auto; margin: 0 0 1em 0; display: inline-block; }

   #section-intro { height: 200px; }
   #section-intro .intro-text .wrap { height: 200px; }
   a.button.intro { margin: 130px 5% 0; width: 90%; font-size: 15px; }
   .intro-text.sub span { bottom: 5px; }
   .intro-text.sub span h1 { font-size: 28px;  }
   .quote { font-size: 18px; }
   
   #leaders div.half { display: block; width: 100%; padding: 0; }
   #leaders p.quote { text-align: center; }
   article.official { text-align: left; padding: 3%; }
   article.official img.th { float: right; margin: 0 0 2% 2%; }
   ul#alpha-anchors { display: none; }
   article.county { display: block; width: 100%; }
   article.official.leaders.wide.first { width: 94%; }
   article.official.leaders { width: 94%; }
   
   #extra { padding: 0; background: none; margin: 0; top: 0; position: relative; }
   .spotlight { height: auto; }
   .spotlight img { float: none; width: 100%; }
   .spotlight .text { padding: 3%; }
   .issue a { width: 100%; }
   
   body#interior .title.cf, body#interior .title ul { display: block; }
   .title ul li { margin-left: 2px; }
   .title ul li a { font-size: 12px; }
   
   .take-action #extra { margin: 0; top: 0; }
   .take-action #take-action-bar .signup { float: none; width: 94%; height: auto;  padding: 3%; margin-right: 0; font-size: 15px; }
   .take-action #take-action-bar .signup form {  margin: 1em 0; }
   .take-action #take-action-bar .promo a { width: 94%; height: auto; padding: 3%; }
   .take-action #signup form#join { width: 94%; }
   #accomplishments { width: 94%; padding: 3%; }
   #accomplishments .slide { top: 0; width: 94%; padding: 3%; }
   a.large-button {  padding: 3%; width: 94%; margin: 0 auto; }
   
   section.content.act { display: -webkit-box;  display: -moz-box;  display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;}
   section.content.act h1 { text-align: center; }
   section.act section.text { float: none; width: 100%; -webkit-box-ordinal-group: 3;  -moz-box-ordinal-group: 3; box-ordinal-group: 3; text-align: center; }
   section.act section.form { float: none; width: 100%;-webkit-box-ordinal-group: 2;  -moz-box-ordinal-group: 2; box-ordinal-group: 2; margin-bottom: 1em; }
   #hub-form h2, #hub-form-response h2 { text-align: center; }
   
   div.dnc2016 table td { font-size: 16px; line-height: 1.3; }
   div.dnc2016 table td:first-child { clear: both; width: 50% !important; display: inline-block; }
   div.dnc2016 table td:nth-child(2), div.dnc2016 table td:nth-child(3) {  width: 100% !important; display: block; }
   div.dnc2016 table td:nth-child(3) { padding-top: 25px; }
   
   footer nav ul#menu li a { font-size: 13px; line-height: 3; }
   footer nav ul#menu li:nth-child(2) a span { display: none; }
   footer nav ul#menu li:nth-child(2) a:after { content:'Our CA'; }
   footer nav ul#menu li:hover li:nth-child(2) a:after { content:''; }
   footer nav ul#menu li:nth-child(2) li a:after { content:''; }
   footer #buttons a { width: 135px; }
   footer #vote-button a, footer #vote-button a img { width: 135px; }
   footer #buttons { width: 40%; }
   
}

@media only screen and (max-width: 400px){
   #section-intro { height: 140px; background-size: cover; }
   body.vote #section-intro { margin-bottom: 2em; }
   .intro-text { display: none; }
   a.button.intro { margin: 115px 2% 0; width: 96%; font-size: 15px; }
   #section-intro .intro-text .wrap { height: 140px; }
   .intro-text.sub span h1 { font-size: 20px; margin-bottom: 2px; }
   .quote { font-size: 18px; }
   footer nav ul#menu li:hover ol { width: 200px; }
}