html, body, form { width: 100%; height: 100%; margin: 0; padding: 0; }
body { background: #fff url('background.png'); font-family: 'Work Sans', Helvetica, Tahoma, serif; color: #111; min-width: 300px; }

.clear { clear: both; float: none; }
.button { line-height: 20px; font-size: 16px; color: #fff; padding: 6px 20px; min-width: 100px; border-radius: 5px; border: 1px solid #1E3F6F; box-shadow: 2px 2px 10px #999; cursor: pointer;
background: #1E3F6F; }
    .button.highlight-button { }
.error { color: red; }
    .error.non-error { color: #111; }
p { font-size: 14px; line-height: 21px; }
a, *[onclick] { cursor: pointer; }
a, .fake-link { color: #1E3F6F; text-decoration: none; }
    a:hover, .fake-link:hover { color: #FF0000; }
h1 { margin: 0; color: #1E3F6F; }
h2, .fake-h2 { font-size: 20px; margin: 0; color: #FF0000; }
input, textarea, select { font-family: 'Work Sans', Helvetica, Tahoma, serif; }

.main-container { width: 100%; height: 100%; }
    .inner-container { display: block; max-width: 900px; margin: 0 auto; padding: 10px 20px; height: 100%; box-sizing: border-box; }
        .inner-container .logo-container { width: 100%; height: 50%; }
            .inner-container .logo-container .logo-image { background: url('logo-image.png') no-repeat center center; background-size: contain; display: inline-block; width: 100%; height: 100%; }
        .inner-container .text-container { width: 100%; height: 50%; }
            .inner-container .button-container { width: 100%; height: 40px; margin: 50px 0 0; }
                .inner-container .button-container .button-group { /* width: 50%; */ width: 100%; box-sizing: border-box; padding: 3px 10px 50px; float: left; text-align: center; }
            .inner-container .text-wrapper { }
                .inner-container .text-wrapper p { }

.modal-popup { position: fixed; top: 0; left: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%; z-index: 999; }
    .modal-popup.modal-hidden { display: none; }
    .modal-popup.modal-display { display: block; }
    .modal-popup .modal-inner { display: block; background: #fff; border: 1px solid #1E3F6F; border-radius: 10px; box-shadow: 0 0 20px #000; width: 95%; height: 520px; 
                                max-height: calc(100% - 30px); max-width: 600px; margin: 10% auto 0; position: relative; z-index: 1000; }
        .modal-popup .modal-inner .modal-banner { background: #1E3F6F; width: 100%; height: 42px; position: absolute; }
            .modal-popup .modal-inner .modal-banner .banner-left { color: #fff; padding: 8px 0 0 15px; font-size: 18px; width: 90%; }
            .modal-popup .modal-inner .modal-banner .banner-close { width: 28px; height: 28px; border-radius: 30px; background: #fff; border: 3px solid #ccc; float: right; position: absolute;
                                                                    top: -10px; right: -10px; z-index: 1001; }
                .modal-popup .modal-inner .modal-banner .banner-close .close-button { display: inline-block; width: 20px; height: 20px; margin: 4px 0 0 4px; background: url('close.png') no-repeat top left; background-size: contain; }
        .modal-popup .modal-inner .modal-innards { padding: 10px; box-sizing: border-box; margin: 42px 0 0 0; }
            .modal-popup .modal-inner .modal-innards .modal-form { width: 100%; }
                .modal-popup .modal-inner .modal-innards .modal-form .form-rows { width: 100%; }
                    .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row { width: 100%; }
                    .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row.error-row { color: red; }
                        .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-left { width: 25%; float: left; text-align: right; padding: 0 5px 0 0; 
                                                                                                               box-sizing: border-box; line-height: 40px; }
                        .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-right { width: 75%; float: left; text-align: left; padding: 6px 20px 6px 5px;
                                                                                                               box-sizing: border-box; }
                        .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-right input,
                        .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-right select,
                        .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-right textarea { width: 100%; box-sizing: border-box; padding: 2px 5px; 
                                                                                                                         border-radius: 3px; border: 1px solid #ccc; height: 28px; }
                        .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-right textarea { height: auto; padding: 5px; }
                        
                    .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row.error-row input,
                    .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row.error-row select,
                    .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row.error-row textarea { border: 1px solid red; }
                .modal-popup .modal-inner .modal-innards .modal-form .modal-button { width: 100%; margin: 10px 0; text-align: center; height: 30px; }
                    .modal-popup .modal-inner .modal-innards .modal-form .modal-button .button { }
                .modal-popup .modal-inner .modal-innards .modal-form .modal-response { height: auto; padding: 0 15px 10px; font-size: 13px; }
                    .modal-popup .modal-inner .modal-innards .modal-form .modal-response .error { display: inline-block; text-align: center; width: 100%; }

@media only screen and (max-width: 600px) {
    .inner-container .logo-container { max-height: 350px; height: 25%; }
    .inner-container .text-container { height: auto; }
}

@media only screen and (max-width: 480px) {
    body { min-width: 320px; }
    .modal-popup .modal-inner .modal-innards .modal-form {
        font-size: 12px;
    }
    .button { font-size: 13px; }
    .modal-popup .modal-inner { width: 92%; height: 90%; max-height: calc(100% - 50px); max-width: 600px; margin: 25px auto 0; }
    .modal-popup .modal-inner .modal-banner .banner-left { padding: 10px 0 0 15px; font-size: 16px; }
    .modal-popup .modal-inner .modal-banner .close-button { transform: scale(.8); }
    .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-left { width: 30%; }
    .modal-popup .modal-inner .modal-innards .modal-form .form-rows .form-row .form-right { width: 70%; padding: 6px 10px 6px 5px; }
}