Help Make Opt-In Boxes Responsive

On my blog i have custom-styled the opt-in boxes above and below each post:

http://bit.ly/1jO3Zeu

Here the CSS I'm using for the top opt-in:

/** Post CTA TOP CSS*/

#af-form-1361379307 { margin-top: 30px;
max-width: 930px;
width: 85%;
overflow: hidden;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; }

#af-form-1361379307 .af-body input.text {
border: 1px solid #619BD1;
margin-top: .65em; position:relative;
left:-130px; width: 190px;
height: 25px; -webkit-border-radius: 10px 10px 10px 10px;
border-radius: 4px 4px 4px 4px; }

#af-form-1361379307 .af-element { padding: 0px 0px 10px 0px;
width: 400px;
float: left; }

#af-form-1361379307 .af-clear { display:none; }

#af-form-1361379307 .buttonContainer {
margin-top:-42px !important;
float: right; margin-right:15px!important }

#af-form-1361379307 .buttonContainer input.submit {
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
max-width: 220px; }

AND HERE'S THE CSS for the Bottom CTA:

/** Post Bottom CTA */

#af-form-1688659877{ margin: 0 auto;
max-width: 574px;
overflow: hidden;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; }

#af-form-1688659877 .af-body input.text {
float: left;
width: 200px;
height: 25px; -webkit-border-radius: 10px 10px 10px 10px;
border-radius: 4px 4px 4px 4px; }

#af-form-1688659877 .buttonContainer { margin-top:-41px!important;
float: right; margin-right: 75px; }

#af-form-1688659877 .buttonContainer input.submit { -webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px; }

.after-post {
margin: 25px 0px 30px 0px;
background: #FFFFFF;}

WOULD REALLY appreciate some help making these two form display better on mobile.

Thanks so much!