@media only screen and (max-width: 1180px){
   .wrap { width: 100%; }
   
   #hero { height: 580px; }
   .slide { height: 540px; }
   #hero .text { width: 80%; padding: 3%; top: -90px; }
   #hero h1 { font-size: 24px; }
   .caption { font-size: 12px;}
   
   .content { position: relative; width: auto; padding: 1em; margin: 20px auto;}
   .content .left { float: left; width: auto; margin-right: 290px; margin-bottom: 2em; }
   .content .center { float: none; width: 250px; margin-left: 0; position: absolute; top: 1em; right: 1em; }
   .content .right { float: none; clear:both; width: auto; background: #f1f1f1; }
   
   #signup { width: 100%; padding: 20px 0; }
   #signup h2 { float: none; }
   #signup form { float: none; margin: 0 auto; display: inline-block;}
}

@media only screen and (max-width: 860px){
   header { padding: 20px 0 40px 0; }
   span.return { position: relative; top: auto; right: auto; display: block; }
   #hero { height: 400px; }
   .slide { height: 380px; }

}

@media only screen and (max-width: 820px){
   .content .left { float: none; width: auto; margin-right: 0;  }
   .content .center { width: 250px; margin-left: 0; position: relative; top: 2em; left: 0; right: auto; float: left; }
   .content .right { float: right; width: 55%; top: 2em; margin-left: 0; clear: none; position: relative; }

}

@media only screen and (max-width: 660px){ 
   #hero .text { top: -110px; }
   .caption { font-size: 10px; line-height: 1.2; margin-bottom: 2em; }
   
   .content .left { float: none; width: 100%; clear: both; }
   .content .center { float: none; width: 100%; margin: 1em auto; clear: both; }
   .content .right { float: none; width: 100%; clear: both; }
   
   article img, article object, article embed, article iframe { max-width: 100% !important; height: auto !important;}
   p img, p object, p embed, p iframe { max-width: 100% !important; height: auto !important;}

   form input.email { width: 150px; }
   form input.zip { width: 70px; }
   #signup form { display: inline-block;}
}

@media only screen and (max-width: 420px){
   header { padding: 15px 0 35px 0;height: 35px;background-color: rgba(255, 255, 255, .6);}
   header #logo { max-width: 300px; }
   .caption { width: 100%; }
   
   #interior .content { margin-top: 75px; }
   #interior .content img, #interior .content object, #interior .content embed, #interior .content iframe { width: 100% !important; height: auto !important;}

   #hero { height: 320px; }
   .slide { height: 300px; }
   #hero .text { width: 90%; padding: 3%; top: -70px; }
   #hero h1 { font-size: 18px; }
   #hero .text .button, button { font-size: 16px; font-weight: 800; }
   
   form li { float: none; width: 100%; }
   form input.email { width: 200px; }
   form input.zip { width: 200px; }
}