Make Responsive PopUp Width Fixed

I need some help making a Responsive PopUp to have a Fixed Width Size. When the User Resize the Screen, or use Mobile, I want the PopUp to have a Default Width Size.

Demo: http://mitves.com/wordpress/demo/

The PopUp Width get mess up when I change Screen Resolution.
See this Image: http://i61.tinypic.com/2gtq554.png

I need the Popup Size Fixed, for Example: 55% Width.

This is the CSS code I have right now:

.modal-box {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px; }
@media (min-width: 50em) {
.modal-box { width: 10%;} }

.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }

.modal-box .modal-body { padding: 2em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
padding: 1em;
border-top: 1px solid #ddd;
background: rgba(0, 0, 0, 0.02);
text-align: right;
}

.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3) !important;
}

.modal-box a.close {
line-height: 1;
font-size: 1.5em;
position: absolute;
top: -0%;
right: 2%;
text-decoration: none;
color: #bbb;
}

<code>.modal-box a.close:hover {</code>
<code>color: #222;</code>
<code>-webkit-transition: color 1s ease;</code>
<code>-moz-transition: color 1s ease;</code>
<code>transition: color 1s ease;</code>
<code>}</code>

<code>.buttonFb {</code>
<code>background: none repeat scroll 0 0 rgb(73, 108, 180);</code>
<code>box-sizing: border-box;</code>
<code>border-radius:10px</code>
<code>color: #ffffff !important;</code>
<code>cursor: pointer;</code>
<code>display: block;</code>
<code>font-family: Lucida Grande;</code>
<code>font-size: 16px;</code>
<code>font-weight: 400;</code>
<code>padding: 18px 5px;</code>
<code>width: 100%;</code>
<code>font-size: 22px;</code>
<code>text-decoration:none !important;</code>
<code>text-align:center;</code>

}