@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700,800,900");

*                               {padding: 0px; margin: 0px; }

body, div, button, input, select, a, h1, h2, h3
                                { margin: 0px; padding: 0px; }

body                            {   font-family: 'Montserrat', sans-serif; font-size: 14px; margin: 0px 0px; color: #4f88a1;}

.orange                         { color: #E67322;  }

div.container                   { position: relative;  margin: 0px auto; max-width: 1100px; width: 92%; }

header                          { background-color: #FFFFFF;  padding: 0px 0px; height: 60px; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 1000; }

h1                              { font-weight: normal; padding: 20px 0px; font-size: 300%; }
h2                              { font-weight: normal; padding: 20px 0px; font-size: 160%; }
p                               { font-weight: normal; padding: 0px 0px 20px 0px; line-height: 130%; }
#rebate-area                    { width: 100%; color: #4f88a1; padding: 10px 0px 60px 0px;  background-image: url("../asset/image/bg.jpg"); }

#product-image-banner                                       { width: 100%; padding: 60px 0px;background-color: #4f88a1; }
#product-image-banner div.container                         { max-width: 900px; position: relative; }
#product-image-banner div.container div#product-copy        { float: left; width: calc(100% / 3); text-align: center; }
#product-image-banner div.container div#product-img-2       { float: left; width: calc(100% / 3); }
#product-image-banner div.container div#product-img         { float: left; width: calc(100% / 3); }
#product-image-banner div.container div#product-copy h2                      { color: #ffffff; font-size: 300%; }
#product-image-banner div.container div#product-copy h3                      { color: #ffffff; font-size: 240%; }
#product-image-banner div.container div#product-copy h2 b                    { font-weight: 800; }

#rebate-form-container                  { float: left; width: 100%; transition-duration: 500ms; }
#rebate-form-container.pic-loaded       { float: left; width: calc(50% - 20px); margin-right: 20px; }
#rebate-image-container                 { float: left; width: 0px; display: block; opacity: 0; transition-duration: 1s;  }
#rebate-image-container.pic-loaded      { float: left; width: calc(50% - 20px); margin-left: 20px; }
#rebate-image-container #uploaded-image { border: 5px dashed #cccccc; margin: 0px auto; height: auto; width: calc(100% - 40px); }

@media screen and (max-width: 575px) {
    #rebate-form-container                  { float: none; width: 100%; transition-duration: 500ms; }
    #rebate-form-container.pic-loaded       { float: none; width: 100%; margin-right: 0px; }
    #rebate-image-container                 { float: none; width: 0px; display: block; opacity: 0; transition-duration: 1s; }
    #rebate-image-container.pic-loaded      { float: none; width: 100%; margin: 20px 0px 0px 0px; }
    #rebate-image-container #uploaded-image { border: 5px dashed #cccccc; margin: 0px auto; height: auto; width: 100%; }
    #product-image-banner div.container         { width: 85%; }
    #product-image-banner div.container div#product-copy h2        { font-size: 180%; }
    #product-image-banner div.container div#product-copy h3        { font-size: 160%; }
    #rebate-form-container      { float: left; width: 100%; }
    #rebate-image-container     { float: left; width: 0px; display: block; opacity: 0; }
}

@media screen and (max-width: 480px) {
    #product-image-banner div.container div#product-copy        { float: none; text-align: center; }
    #product-image-banner div.container div#product-img         { float: none; text-align: center; }

    #product-image-banner div.container div#product-copy        { float: none; width: calc(100%); text-align: center; }
    #product-image-banner div.container div#product-img-2       { float: none; width: calc(100%); text-align: center; }
    #product-image-banner div.container div#product-img         { float: none; width: calc(100%); text-align: center; }

    #product-image-banner div.container             { width: 85%; }
    #product-image-banner div.container div#product-copy h2          { font-size: 180%; padding: 10px 0px; }
    #product-image-banner div.container div#product-copy h2 br       { display: none; }
    #product-image-banner div.container div#product-copy h3          { font-size: 160%; padding: 10px 0px 40px 0px; }
    #rebate-form-container      { float: left; width: 100%; }
    #rebate-image-container     { float: left; width: 0px; display: block; opacity: 0; }
}

label.file-upload           { display: inline-block; padding: 12px 20px; text-align: center; border: 0px; background: #c42032; color: #eeeeee; border-radius: 4px; }
span.file-upload-buttons    { display: none; }

@media screen and (max-width: 575px) {
    div#login_inner_container   { width: calc(100% - 40px); padding: 20px;  margin: 0px;  }
    div#login-panel             { background: #1A1E24;  position: relative;  float: none;  height: 100%;  width: 90%; margin: 50px auto; }

    label.file-upload           { display: block; width: 100%; padding: 12px 0px; text-align: center; margin-bottom: 14px; }

}

#form                   { position: relative; text-align: left; width: calc(100% - 40px); padding: 40px 20px; background-color: rgba(255,255,255,0.7); border-radius: 10px; }
#form .active-submission-error
{ color: red; padding: 0px 0px 0px 0px; font-size: 80%; }
#form .input-area       { position: relative; }
#form .input_name       { padding-bottom: 5px; }
#form input[type='text'],
#form input[type='password'],
#form input[type='email'],
#form input[type='number'],
#form textarea
{ padding: 10px 10px; width: calc(100% - 22px); border: 1px solid #cccccc; border-radius: 4px; margin-bottom: 14px; }
#form label             {  }
#form select            { padding: 10px 10px; width: calc(100% - 22px); border: 1px solid #cccccc; border-radius: 4px; }
#form select.full       { width: calc(100% - 22px); }
#form button            { display: inline-block; padding: 12px 20px; text-align: center; border: 0px; background: #c42032; color: #eeeeee; border-radius: 4px; }
#form button:hover      { background: #3C4651; color: #ffffff; cursor: pointer; }
@media screen and (max-width: 480px) {
    #form button            { display: block; width: 100%; padding: 12px 0px; text-align: center; }
}

#form.rebate-form-area          { margin-bottom: 20px; }
#form.rebate-form-area input[name='city']               { float:left; width: 140px; }
#form.rebate-form-area select[name='state']             { float:left; margin-left: 20px; width: 180px; }
#form.rebate-form-area input[name='zip_code']           { float:left; margin-left: 20px; width: 100px; }
#form.rebate-form-area input[name='phone']               { float:left; margin-left: 20px; width: 140px; }
#form.rebate-form-area input[name='email']               { float:left; width: calc(100% - 205px); }
#form.rebate-form-area input[name='website']               { display: none; }
#form.rebate-form-area input[name='first_name']            { width: calc(35% - 27px); float:left;}
#form.rebate-form-area input[name='last_name']             { width: calc(65% - 27px); float:right; }

#form.rebate-form-area input.city               { float:left; width: 140px; }
#form.rebate-form-area select.state             { float:left; margin-left: 20px; width: 180px; }
#form.rebate-form-area input.zip_code           { float:left; margin-left: 20px; width: 100px; }
#form.rebate-form-area input.phone               { float:left; margin-left: 20px; width: 140px; }
#form.rebate-form-area input.email               { float:left; width: calc(100% - 205px); }
#form.rebate-form-area input.website               { display: none; }
#form.rebate-form-area input.first_name            { width: calc(35% - 27px); float:left;}
#form.rebate-form-area input.last_name             { width: calc(65% - 27px); float:right; }


@media screen and (max-width: 575px) {
    #form.rebate-form-area input[name='city']               { float:none; width: calc(100% - 22px); margin:0px 0px 14px 0px; }
    #form.rebate-form-area select[name='state']             { float:none; width: calc(100% - 22px); margin:0px 0px 14px 0px; }
    #form.rebate-form-area input[name='zip_code']           { float:none; width: calc(100% - 22px); margin:0px 0px 14px 0px; }
    #form.rebate-form-area input[name='phone']              { float:none; width: calc(100% - 22px); margin:0px 0px 14px 0px; }
    #form.rebate-form-area input[name='email']              { float:none; width: calc(100% - 22px); margin:0px 0px 14px 0px; }
    #form.rebate-form-area input[name='first_name']          { float:none; width: calc(100% - 22px); margin:0px 0px 14px 0px; }
    #form.rebate-form-area input[name='last_name']           { float:none; width: calc(100% - 22px); margin:0px 0px 14px 0px; }
}




#form div.required                       { font-size: 10px; }
#form input.error                       { border: 1px solid red; }
#form select.error                       { border: 1px solid red; }
#form textarea.error                       { border: 1px solid red; }

.clear { clear: both; }

#form.signup                                    { margin-bottom: 20px;}
#form.signup input                              { border: 1px solid #474b51;background: #1c2026; color: #ffffff;}
#form.signup input[name='firstname']            { width: calc(35% - 27px); float:left;}
#form.signup input[name='lastname']             { width: calc(65% - 27px); float:right; }
#form.signup input[name='email']                { width: calc(100% - 174px); float: left; }
#form.signup input[name='mobile']               { width: 120px; float: right; }
#form.signup input[name='password']             { width: calc(50% - 27px); float: left; }
#form.signup input[name='confirm_password']     { width: calc(50% - 27px); float: right; }
#form.signup button                             { display: block; width: 100%; padding: 12px 0px; text-align: center; }

#form.signin                                    { margin-bottom: 20px;}
#form.signin input                              { border: 1px solid #474b51;}
#form.signin input[name='email']                { width: calc(100% - 22px); }
#form.signin input[name='password']             { width: calc(100% - 22px); }
#form.signin button                             { display: block; width: 100%; padding: 12px 0px; text-align: center; }

#form.forgot-pass input                              { border: 1px solid #474b51;background: #1c2026; color: #ffffff;}
#form.forgot-pass input[name='email']                { width: calc(100% - 22px); }
#form.forgot-pass input[name='password']             { width: calc(100% - 22px); }
#form.forgot-pass input[name='confirm_password']             { width: calc(100% - 22px); }