123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>

        <div class="react-home react-checkout">
            <div class="react-input-box">

                <div class="container"><!-- step wizard -->
                    <div class="stepwizard col-md-offset-3 col-sm-offset-1 col-xs-offset-1">
                        <div class="step-row setup-panel" id="wizardControl">
                            <div class="step">
                                <a href="#step-1" type="button" class="btn btn-primary button-no-gradient btn-circle btn-step">1</a>
                                <p>Details</p>
                            </div>
                            <div class="step">
                                <a href="#step-2" type="button" class="btn btn-default button-no-gradient btn-circle" disabled="disabled">2</a>
                                <p>Summary</p>
                            </div>
                            <div class="step">
                                <a href="#step-3" type="button" class="btn btn-default button-no-gradient btn-circle" disabled="disabled">3</a>
                                <p>Approval</p>
                            </div>
                        </div>
                    </div>
                </div><!-- end step wizard -->

                <div class="container"><!-- row A-->

                    <form role="form" action="" method="post">

                        <div class="row setup-content well" id="step-1">

                            <div class="row">

                                <div class="col-md-3 text-center" id="building-details"><!-- details panel -->
                                    <div class="panel panel-info">
                                        <div class="panel-heading">Review Building Details</div>
                                            <div class="panel-body">
                                                <div class="table-responsive project-list">
                                                    <table class="table table-striped"><tbody  style="background:#fff!important;outline:none!important;border:none!important;"><tr style="background:#fff!important;outline:none!important;border:none!important;">
                                                        <td style="background:#fff!important;outline:none!important;border:none!important;">TOTAL</td>
                                                            <td style="background:#fff!important;outline:none!important;border:none!important;"><strong>$11,200.00</strong></td>
                                                    </tr>
                                                    <tr style="background:#fff!important;">
                                                        <td>DEPOSIT</td>
                                                            <td style="color:green!important;background:#fff!important;"><strong>$1,120.00</strong></td>
                                                    </tr></tbody></table>
                                                </div>
                                            </div>
                                                <ul class="list-group">
                                                    <li class="list-group-item list-group-item-info">
                                                        <div class="table-responsive"><table class="table"><thead><tr>
                                                            <td>width</td>
                                                            <td>length</td>
                                                            <td>height</td>
                                                        </tr></thead><tbody>
                                                        <tr>
                                                            <td>40'</td>
                                                            <td>40'</td>
                                                            <td>15'</td>
                                                        </tr></tbody></table></div>
                                                    </li>
                                                    <li class="list-group-item">Square footage <span class="badge">1600</span></li>
                                                    <li class="list-group-item">Pitch <span class="badge">1:12</span></li>
                                                    <li class="list-group-item">Walls <span class="badge user-color" id="color">COLOR$</span></li>
                                                    <li class="list-group-item">Trim <span class="badge user-color" id="color">COLOR$</span></li>
                                                    <li class="list-group-item">Roof <span class="badge user-color" id="color">COLOR$</span></li>
                                                </ul>
                                    </div>
                                </div><!-- end details panel -->

                                <div class="col-md-3 text-center"><!-- building standards panel -->
                                    <div class="panel panel-info">
                                        <div class="panel-heading">Building Standards</div>
                                        <div class="panel-body text-left">
                                          <ul>
                                            <li>Engineered structural blueprints</li>
                                            <li>Local structural buildings codes</li>
                                            <li>Bolt together construction</li>
                                            <li>Galvanized secondary</li>
                                            <li>Life time warranty onfasteners</li>
                                            <li>20 year panel paint warranty</li>
                                            <li>Dedicated project management</li>
                                        </ul>
                                        </div>
                                    </div>
                                </div><!-- end building standards panel -->

                                <div class="col-md-6"><!-- building details section -->

                                    <div class="col-md-12"><h4>Building Details</h4></div>

                                    <div class="col-md-6">
                                        <div class="section form-group">
                                            <label for="timeframe" class="field-label control-label">Business type *</label>
                                            <label class="field select">
                                               <select name="industry" tabindex="9" required="required">
                                                  <option value="" selected="selected">- select -</option>
                                                  <option value="Agricultural">Agricultural</option>
                                                  <option value="Aviation">Aviation</option>
                                                  <option value="Commercial">Commercial</option>
                                                  <option value="Equestrian">Equestrian</option>
                                                  <option value="Government/Military">Government/Military</option>
                                                  <option value="Industrial">Industrial</option>
                                                  <option value="Institutional/Church">Institutional/Church</option>
                                                  <option value="Manufacturing">Manufacturing</option>
                                                  <option value="Marina/Boat">Marina/Boat</option>
                                                  <option value="Mining">Mining</option>
                                                  <option value="Recreational">Recreational</option>
                                                  <option value="Residential">Residential</option>
                                                  <option value="Storage">Storage</option>
                                                  <option value="Workshop">Workshop</option>
                                                  <option value="Other">Other</option>
                                               </select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="section form-group">
                                            <label class="field-label control-label">Timeframe *</label>
                                            <label class="field select">
                                                <select name="LEADCF6" class="field-label control-label" required="required">
                                                    <option value="" selected="selected">- select -</option>
                                                    <option value="ASAP">ASAP</option>
                                                    <option value="1-3 Months">1-3 Months</option>
                                                    <option value="3-6 Months">3-6 Months</option>
                                                    <option value="6-12 Months">6-12 Months</option>
                                                    <option value="12+ Months">12+ Months</option>
                                                </select>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="section form-group">
                                            <label class="field-label control-label">Company</label>
                                            <input type="text" class="form-control" placeholder="Company" />
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="section form-group">
                                            <label class="field-label control-label">Zipcode *</label>
                                            <input min="5" type="text" class="form-control" placeholder="12345" required="required" />
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="section form-group">
                                            <label class="control-label">First Name *</label>
                                            <input type="text" class="form-control" placeholder="Enter First Name" required="required" />
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="section form-group">
                                            <label class="field-label control-label">Last Name *</label>
                                            <input type="text" class="form-control" placeholder="Enter Last Name" required="required" />
                                        </div>
                                    </div>

                                </div><!-- end building details section -->

                            </div>

                          <button class="pull-right btn nextBtn next" aria-label="Right Align" type="button">Next
                              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
                          <button class="pull-right btn save" type="button">Save</button>

                        </div><!-- end of step one -->

                        <div class="row setup-content well" id="step-2">

                          <div class="row">

                            <div class="col-md-3 text-center" id="building-details"><!-- details panel -->
                                <div class="panel panel-info">
                                    <div class="panel-heading">Review Building Details</div>
                                        <div class="panel-body">
                                            <div class="table-responsive project-list">
                                                <table class="table table-striped"><tbody  style="background:#fff!important;outline:none!important;border:none!important;"><tr style="background:#fff!important;outline:none!important;border:none!important;">
                                                    <td style="background:#fff!important;outline:none!important;border:none!important;">TOTAL</td>
                                                        <td style="background:#fff!important;outline:none!important;border:none!important;"><strong>$11,200.00</strong></td>
                                                </tr>
                                                <tr style="background:#fff!important;">
                                                    <td>DEPOSIT</td>
                                                        <td style="color:green!important;background:#fff!important;"><strong>$1,120.00</strong></td>
                                                </tr></tbody></table>
                                            </div>
                                        </div>
                                            <ul class="list-group">
                                                <li class="list-group-item list-group-item-info">
                                                    <div class="table-responsive"><table class="table"><thead><tr>
                                                        <td>width</td>
                                                        <td>length</td>
                                                        <td>height</td>
                                                    </tr></thead><tbody>
                                                    <tr>
                                                        <td>40'</td>
                                                        <td>40'</td>
                                                        <td>15'</td>
                                                    </tr></tbody></table></div>
                                                </li>
                                                <li class="list-group-item">Square footage <span class="badge">1600</span></li>
                                                <li class="list-group-item">Pitch <span class="badge">1:12</span></li>
                                                <li class="list-group-item">Walls <span class="badge user-color" id="color">COLOR$</span></li>
                                                <li class="list-group-item">Trim <span class="badge user-color" id="color">COLOR$</span></li>
                                                <li class="list-group-item">Roof <span class="badge user-color" id="color">COLOR$</span></li>
                                            </ul>
                                </div>
                            </div><!-- end details panel -->

                            <div class="col-md-3"><!-- options panel -->
                                <div class="panel panel-info" id="selected-options">
                                    <div class="panel-heading text-center">Selected Options</div>
                                    <div class="panel-body list">
                                        <div class="table-responsive project-list">
                                            <table class="table table-striped">
                                                <tbody>
                                                <tr>
                                                    <td><strong>Openings</strong><br/>
                                                        <small>1 Door</small><br/>
                                                        <small>1 Window</small>
                                                    </td>
                                                    <td>$30.00</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Lean-tos</strong><br/>
                                                        <small>40' X 15'</small><br/>
                                                        <small>20' X 15'</small>
                                                    </td>
                                                    <td>$0.00</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Gutters/Downspouts</strong>
                                                    </td>
                                                    <td>$0.00</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end options panel -->

                            <div class="col-md-6">

                              <div class="col-md-12"><h4>Your Information</h4></div>

                              <div class="col-md-6">
                                  <div class="section form-group">
                                      <label class="field-label control-label">Email *</label>
                                      <input type="email" class="form-control" placeholder="your@email.com" required="required" />
                                  </div>
                              </div>

                              <div class="col-md-6">
                                  <div class="section form-group">
                                      <label class="field-label control-label">Phone *</label>
                                      <input type="number" name="phone" class="form-control" placeholder="(•••) ••• ••••" required="required"  />
                                  </div>
                              </div>

                              <div class="col-md-12"><h4>Delivery Address</h4></div>

                              <div class="col-md-6">
                                  <div class="section form-group">
                                      <label class="field-label control-label">Street Address *</label>
                                      <input type="text" class="form-control" placeholder="Enter Street Address" required="required" />
                                  </div>
                              </div>

                              <div class="col-md-6">
                                  <div class="section form-group">
                                      <label class="field-label control-label">Suite</label>
                                      <input type="text" class="form-control" placeholder="Street Address Continued" />
                                  </div>
                              </div>

                              <div class="col-md-6">
                                  <div class="section form-group">
                                      <label class="field-label control-label">City *</label>
                                      <input type="text" class="form-control" placeholder="Enter City" required="required" />
                                  </div>
                              </div>

                              <div class="col-md-6">
                                  <div class="section form-group">
                                      <label class="field-label control-label">Country</label>
                                      <input type="text" class="form-control" placeholder="Enter Country" />
                                  </div>
                              </div>

                            </div>

                          </div>

                          <button class="pull-right btn nextBtn next" aria-label="Right Align" type="button">Next <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
                          <button class="pull-right btn save" type="button">Save</button>
                          <button class="pull-right btn save" type="button">Edit</button>
                          <button class="pull-right btn prevBtn prev" aria-label="Left Align" type="button">
                              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Previous</button>

                        </div><!-- end step 2 -->

                        <div class="row setup-content well" id="step-3">

                          <div class="row">

                              <div class="col-md-6">

                                  <div class="col-md-6 text-center" id="building-details"><!-- details panel -->
                                      <div class="panel panel-info">
                                          <div class="panel-heading">Review Building Details</div>
                                              <div class="panel-body">
                                                  <div class="table-responsive project-list">
                                                      <table class="table table-striped"><tbody  style="background:#fff!important;outline:none!important;border:none!important;"><tr style="background:#fff!important;outline:none!important;border:none!important;">
                                                          <td style="background:#fff!important;outline:none!important;border:none!important;">TOTAL</td>
                                                              <td style="background:#fff!important;outline:none!important;border:none!important;"><strong>$11,200.00</strong></td>
                                                      </tr>
                                                      <tr style="background:#fff!important;">
                                                          <td>DEPOSIT</td>
                                                              <td style="color:green!important;background:#fff!important;"><strong>$1,120.00</strong></td>
                                                      </tr></tbody></table>
                                                  </div>
                                              </div>
                                                  <ul class="list-group">
                                                      <li class="list-group-item list-group-item-info">
                                                          <div class="table-responsive"><table class="table"><thead><tr>
                                                              <td>width</td>
                                                              <td>length</td>
                                                              <td>height</td>
                                                          </tr></thead><tbody>
                                                          <tr>
                                                              <td>40'</td>
                                                              <td>40'</td>
                                                              <td>15'</td>
                                                          </tr></tbody></table></div>
                                                      </li>
                                                      <li class="list-group-item">Square footage <span class="badge">1600</span></li>
                                                      <li class="list-group-item">Pitch <span class="badge">1:12</span></li>
                                                      <li class="list-group-item">Walls <span class="badge user-color" id="color">COLOR$</span></li>
                                                      <li class="list-group-item">Trim <span class="badge user-color" id="color">COLOR$</span></li>
                                                      <li class="list-group-item">Roof <span class="badge user-color" id="color">COLOR$</span></li>
                                                  </ul>
                                      </div>
                                  </div><!-- end details panel -->

                                  <div class="col-md-6"><!-- options panel -->
                                      <div class="panel panel-info"  id="selected-options">
                                          <div class="panel-heading text-center">Selected Options</div>
                                          <div class="panel-body list">
                                              <div class="table-responsive project-list">
                                                  <table class="table table-striped">
                                                      <tbody>
                                                      <tr>
                                                          <td><strong>Openings</strong><br/>
                                                              <small>1 Door</small><br/>
                                                              <small>1 Window</small>
                                                          </td>
                                                          <td>$30.00</td>
                                                      </tr>
                                                      <tr>
                                                          <td><strong>Lean-tos</strong><br/>
                                                              <small>40' X 15'</small><br/>
                                                              <small>20' X 15'</small>
                                                          </td>
                                                          <td>$0.00</td>
                                                      </tr>
                                                      <tr>
                                                          <td><strong>Gutters/Downspouts</strong>
                                                          </td>
                                                          <td>$0.00</td>
                                                      </tr>
                                                      </tbody>
                                                  </table>
                                              </div>
                                          </div>
                                      </div>
                                    
                                      <div class="panel panel-info">
                                          <div class="panel-heading">Building Standards</div>
                                          <div class="panel-body text-left">
                                              <ul>
                                                 <li>Engineered structural blueprints</li>
                                                 <li>Local structural buildings codes</li>
                                                 <li>Bolt together construction</li>
                                                 <li>Galvanized secondary</li>
                                                 <li>Lifetime warranty onfasteners</li>
                                                 <li>20 year panel paint warranty</li>
                                                 <li>Dedicated project management</li>
                                              </ul>
                                          </div>
                                      </div>
                                    
                                  </div><!-- end options and standards panel -->
                              </div>

                              <div class="col-md-6">

                                  <div class="col-md-6"><!-- step 3, column 1 -->

                                      <h4>Review and Submit</h4>

                                      <p>
                                        <b>John Smith<br />
                                        XYZ, Inc.<br />
                                        123 Broward Blvd, Suite #101<br />
                                        Fort Lauderdale, FL 33301 USA<br />
                                        email@address.com<br />
                                        +1.954.333.4444</b>
                                      </p>

                                      <p>
                                        <b>Time frame</b>:  1-3 months<br />
                                        <b>Business type</b>:  Marina/Boat
                                      </p>

                                      <div>
                                        <input type="checkbox" checked>  Billing Address Same
                                      </div>

                                  </div><!-- end step 3, column 1 -->

                                  <div class="col-md-6"><!-- step 3, column 2 -->

                                      <h4>Payment Information</h4>

                                      <div class="section form-group">
                                          <label class="field-label control-label">Credit Card Number *</label>
                                          <input type="number" class="form-control" placeholder="•••• •••• •••• ••••" required="required" autofocus />
                                      </div>

                                      <div class="section form-group">
                                          <label class="field-label control-label">Expiration *</label>
                                          <input type="text" class="form-control" placeholder="01/16" required="required" />
                                      </div>

                                      <div class="section form-group">
                                          <label class="field-label control-label">CVC *</label>
                                          <input type="text" class="form-control" placeholder="123" required="required" />
                                      </div>

                                  </div><!-- end step 3, column 2 -->

                                  <div class="col-md-12"><h4>Billing Address</h4></div>

                                  <div class="col-md-6"><!-- column 1 -->

                                      <div class="section form-group">
                                          <label class="field-label control-label">Street Address *</label>
                                          <input type="text" class="form-control" placeholder="Enter Street Address" required="required" />
                                      </div>

                                      <div class="section form-group">
                                          <label class="field-label control-label">Suite</label>
                                          <input type="text" class="form-control" placeholder="Street Address Continued" />
                                      </div>

                                  </div>

                                  <div class="col-md-6"><!-- column 2 -->

                                      <div class="section form-group">
                                          <label class="field-label control-label">City *</label>
                                          <input type="text" class="form-control" placeholder="Enter City" required="required" />
                                      </div>

                                      <div class="section form-group">
                                          <label class="field-label control-label">Zipcode *</label>
                                          <input type="text" class="form-control" placeholder="12345" required="required" />
                                      </div>

                                  </div>

                                  <div class="col-md-12">
                                    <div class="panel panel-success">
                                      <div  id="no-obligation-panel" class="panel-body text-center">
                                        <i>No obligation cancellation policy!</i>  <span class="glyphicon glyphicon-hand-left"></span>
                                      </div>
                                    </div>
                                  </div>

                              </div>

                          </div>

                          <div class="row">

                            <div class="col-md-12"><!-- badges -->
                                <div class="safe-purchase">
                                    <ul>
                                        <li><img src="https://ec2-52-24-108-83.us-west-2.compute.amazonaws.com/images/accr-bus.png" /></li>
                                        <li><img src="https://ec2-52-24-108-83.us-west-2.compute.amazonaws.com/images/google.png" /></li>
                                        <li><img src="https://ec2-52-24-108-83.us-west-2.compute.amazonaws.com/images/approved.png" /></li>
                                    </ul>
                                </div>
                            </div><!-- badges -->

                          </div>

                          <button class="pull-right btn btn-submit next" type="submit">Process <span class="glyphicon glyphicon-ok"></span></button>
                          <button class="pull-right btn prevBtn prev" aria-label="Left Align" type="button">
                              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Previous</button>

                        </div><!-- end step 3 -->

                    </form>

                </div><!-- end row A -->

            </div><!-- end react-input-box -->

            <footer>
                <div class="react-footer-navigation clearfix">

                    <div class="col-md-3 col-sm-2 text-right col-xs-2">
                        <img src="https://ec2-52-24-108-83.us-west-2.compute.amazonaws.com/images/logo.png" alt="logo"/>
                    </div>

                    <div class="col-md-2 col-sm-5 col-xs-5">
                        <ul>
                            <li class="title">LEARN MORE</li>
                            <li><a href="http://alliedcares.com/" target="_blank">Allied Cares</a></li>
                        </ul>
                    </div>

                    <div class="col-md-2 col-md-offset-0 col-sm-5 col-sm-offset-2 col-xs-5 col-xs-offset-2">
                        <ul>
                            <li class="title">HELP</li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </div>

                    <div class="col-md-2 col-sm-5 col-xs-5">
                        <ul>
                            <li class="title">CONNECT</li>
                            <li><a href="http://www.alliedbuildings.com/contact-us/" target="_blank">Contact Us</a></li>
                        </ul>
                    </div>

                </div>

                <div class="text-center copyright clearfix">Copyright 2017 Allied Steel Buildings. All rights reserved.</div>

            </footer>

        </div><!-- end react-home & react-checkout -->
  </body>
            
          
!
            
              .react-home .react-input-box {
	background: linear-gradient(180deg,#3ba4ff,#66a5ff);
	padding: 50px;
	border-top: 2px solid #66a5ff;
	border-bottom: 2px solid #3ba4ff;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 2px 1px 2px #fff;
}
.step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.step p {
    margin-top: 10px;
		color:#fff;
}
.step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    font-style:
}
.step-row {
    display: table-row;
}
.step-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}
.stepwizard {
    display: table;
    width: 50%;
    position: relative;
}
@media only screen and (max-width: 991px) {
	.stepwizard {
		width: 80%;
	}
}
.well {
		width: 100% !important;
    padding: 20px!important;
    margin-bottom: 20px;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.15)!important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.btn-default {
    width: 30px !important;
    height: 30px !important;
    text-align: center !important;
    padding: 6px 0 !important;
    font-size: 12px !important;
    line-height: 1.428571429 !important;
    border-radius: 15px !important;
}
.btn-primary {
	background: #005fe6 !important;
	border: none !important;
}
.btn-submit {
	background: #40D66E !important;
  color: #fff !important;
}
.react-checkout .react-input-box textarea,
.react-checkout .react-input-box select,
.react-checkout .react-input-box input {
	padding-left: 0 20px;
	outline: 1px #2e2e2e !important;
	border: 1px solid #fff;
  background: #f5f5f5;
	position: relative;
	min-width: 200px;
	height: 48px;
	border-radius: 3px;
	transition: all .25s cubic-bezier(.645,.045,.355,1);
}
.react-checkout label {
	font-weight: 300;
	color: #666;
	letter-spacing: 1px;
  margin-top: 5px;
}

.da-slider{
	border-bottom: 0 !important;
}
/* building details on checkout */
.panel-info>.panel-heading {
    color: #333 !important;
    background-color: #d9edf7 !important;
    border-color: #f5f5f5 !important;
}
.panel-info {
    border-color: rgba(0,0,0,.15) !important;
}
.panel {
  border-radius: 2px !important;
}
.next, .save, .prev {
  margin: 10px 5px;
  background: rgba(217, 237, 247, 0.8);
  border: 1px solid rgba(0,0,0,.078) !important;
  color: #666;
  text-shadow: 2px 2px 1px rgba(150, 150, 150, 0.43);
}
#step-1 h4,
#step-2 h4,
#step-3 h4 {
  font-weight: 400 !important;
  text-transform: uppercase;
  color: #444 !important;
}
#step-1 h5,
#step-2 h5,
#step-3 h5 {
  font-weight: 400 !important;
  text-transform: uppercase;
  color: #444 !important;
}
th {
  text-align: center !important;
}
table {
  color:#333!important;
}
.has-error label {
  font-weight: 400!important;
}
.has-error input,
.has-error input[type='number'],
.has-error select {
  border: 1px solid #a94442!important;
  background: rgba(169, 68, 66, 0.18) !important;
}
.safe-purchase li {
  margin: 10px 20px;
  float: right;
  text-decoration: none;
  display: inline-block;
  list-style-type: none;
}
.safe-purchase img {
  width: 100px;
}
.safe-purchase li:first-child {
  margin-right: 5px !important;
}
#no-obligation-panel {
  background: rgba(214, 233, 198, 0.83);
}
#selected-options .panel-body {
  padding: 0;
}
#selected-options table {
  margin-bottom: 0;
}
body {
	background-color: #fff;
}

/* fluid container for slider */
.container-fluid {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* faux browser shell for slider imgs */
.browser-mockup {
  border-top: 2em solid rgba(230, 230, 230, 0.7);
  box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
  position: relative;
  border-radius: 3px 3px 0 0;
}
.browser-mockup:before {
  display: block;
  position: absolute;
  content: '';
  top: -1.25em;
  left: 1em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #f44;
  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}

.finished-model {
	box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
	position: relative;
	border-radius: 3px 3px 0 0;
}

/* slider styles */
.da-slider {
	width: 100%;
	height: 500px;
	position: relative;
	margin: 0;
	overflow: hidden;
	background: transparent url(../images/bg.png) repeat 0% 0%;
	border-top: 5px solid #3ba4ff;
	/*border-bottom: 1px solid #6863FF;*/
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
	-webkit-transition: background-position 1.4s ease-in-out 0.3s;
	-moz-transition: background-position 1.4s ease-in-out 0.3s;
	-o-transition: background-position 1.4s ease-in-out 0.3s;
	-ms-transition: background-position 1.4s ease-in-out 0.3s;
	transition: background-position 1.4s ease-in-out 0.3s;
}
.da-slide {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	text-align: left;
}
.da-slide-current {
	z-index: 1000;
}
.da-slide h2,
.da-slide p,
.da-slide .da-img {
	position: absolute;
	opacity: 0;
	left: 110%;
}
.da-slide h2 {
	color: #000;
	font-size: 66px;
	/*width: 50%;*/
	top: 140px;
	white-space: nowrap;
	z-index: 10;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	font-family: 'Economica', Arial, sans-serif;
	font-weight: 700;
}
.da-slide p {
	width: 25%;
	top: 230px;
	color: #444;
	font-size: 32px;
	line-height: 34px;
	/*height: 80px;*/
	overflow: hidden;
	font-style: normal;
	font-family: Arial, sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
}
.da-slide .da-img{
	text-align: center;
	width: 60%;
	top: 20px;
	/*height: 256px;*/
	/*line-height: 320px;*/
	left: 110%; /*60%*/
}
.da-slide .da-img img {
	width: 100%;
}
.da-slide .da-link{
	top: 270px; /*depends on p height*/
	border-radius: 30px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	border: 8px solid rgba(255,255,255,0.8);
	padding: 2px 20px 0px;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	background: rgba(255,255,255,0.2);
}
.da-slide .da-link:hover{
	background: rgba(255,255,255,0.5);
}
.da-dots{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: 10px;
	z-index: 2000;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-dots span{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: linear-gradient(90deg,#6863FF 0,#3ba4ff 100%);
	margin: 3px;
	cursor: pointer;
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.1) inset,
		1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-arrows span{
	position: absolute;
	top: 50%;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background: linear-gradient(90deg,#6863FF 0,#3ba4ff 100%);
	cursor: pointer;
	z-index: 2000;
	opacity: 0;
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.1) inset,
		1px 1px 1px rgba(255,255,255,0.1);
	-webkit-transition: opacity 0.4s ease-in-out 0.2s;
	-moz-transition: opacity 0.4s ease-in-out 0.2s;
	-o-transition: opacity 0.4s ease-in-out 0.2s;
	-ms-transition: opacity 0.4s ease-in-out 0.2s;
	transition: opacity 0.4s ease-in-out 0.2s;
}
.da-slider:hover .da-arrows span{
	opacity: 1;
}
.da-arrows span:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	background: transparent url(../images/arrows.png) no-repeat top left;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
	box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
	background-position: top right;
}
.da-arrows span.da-arrows-prev{
	left: 15px;
}
.da-arrows span.da-arrows-next{
	right: 15px;
}

.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
	left: 5%;
	opacity: 1;
}
.da-slide-current .da-img{
	left: 35%;
	opacity: 1;
}
/* Animation classes and animations */

/* Slide in from the right*/
.da-slide-fromright h2{
	-webkit-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in 0.8s both;
	animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
	-webkit-animation: fromRightAnim2 0.6s ease-in 0.8s both;
	-moz-animation: fromRightAnim2 0.6s ease-in 0.8s both;
	-o-animation: fromRightAnim2 0.6s ease-in 0.8s both;
	-ms-animation: fromRightAnim2 0.6s ease-in 0.8s both;
	animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
	-webkit-animation: fromRightAnim3 0.4s ease-in 1.2s both;
	-moz-animation: fromRightAnim3 0.4s ease-in 1.2s both;
	-o-animation: fromRightAnim3 0.4s ease-in 1.2s both;
	-ms-animation: fromRightAnim3 0.4s ease-in 1.2s both;
	animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim4 0.6s ease-in 0.8s both;
	-moz-animation: fromRightAnim4 0.6s ease-in 0.8s both;
	-o-animation: fromRightAnim4 0.6s ease-in 0.8s both;
	-ms-animation: fromRightAnim4 0.6s ease-in 0.8s both;
	animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@-moz-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@-o-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@-ms-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}
/* Slide in from the left*/
.da-slide-fromleft h2{
	-webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}
.da-slide-fromleft p{
	-webkit-animation: fromLeftAnim2 0.6s ease-in 0.6s both;
	-moz-animation: fromLeftAnim2 0.6s ease-in 0.6s both;
	-o-animation: fromLeftAnim2 0.6s ease-in 0.6s both;
	-ms-animation: fromLeftAnim2 0.6s ease-in 0.6s both;
	animation: fromLeftAnim2 0.6s ease-in 0.6s both;
}
.da-slide-fromleft .da-link{
	-webkit-animation: fromLeftAnim3 0.4s ease-in 1.2s both;
	-moz-animation: fromLeftAnim3 0.4s ease-in 1.2s both;
	-o-animation: fromLeftAnim3 0.4s ease-in 1.2s both;
	-ms-animation: fromLeftAnim3 0.4s ease-in 1.2s both;
	animation: fromLeftAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromleft .da-img{
	-webkit-animation: fromLeftAnim4 0.6s ease-in 0.6s both;
	-moz-animation: fromLeftAnim4 0.6s ease-in 0.6s both;
	-o-animation: fromLeftAnim4 0.6s ease-in 0.6s both;
	-ms-animation: fromLeftAnim4 0.6s ease-in 0.6s both;
	animation: fromLeftAnim4 0.6s ease-in 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}

@keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 5%; opacity: 0; }
	100%{ left: 5%; opacity: 1; }
}
@keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 35%; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
	-webkit-animation: toRightAnim1 0.6s ease-in 0.6s both;
	-moz-animation: toRightAnim1 0.6s ease-in 0.6s both;
	-o-animation: toRightAnim1 0.6s ease-in 0.6s both;
	-ms-animation: toRightAnim1 0.6s ease-in 0.6s both;
	animation: toRightAnim1 0.6s ease-in 0.6s both;
}
.da-slide-toright p{
	-webkit-animation: toRightAnim2 0.6s ease-in 0.3s both;
	-moz-animation: toRightAnim2 0.6s ease-in 0.3s both;
	-o-animation: toRightAnim2 0.6s ease-in 0.3s both;
	-ms-animation: toRightAnim2 0.6s ease-in 0.3s both;
	animation: toRightAnim2 0.6s ease-in 0.3s both;
}
.da-slide-toright .da-link{
	-webkit-animation: toRightAnim3 0.4s ease-in both;
	-moz-animation: toRightAnim3 0.4s ease-in both;
	-o-animation: toRightAnim3 0.4s ease-in both;
	-ms-animation: toRightAnim3 0.4s ease-in both;
	animation: toRightAnim3 0.4s ease-in both;
}
.da-slide-toright .da-img{
	-webkit-animation: toRightAnim4 0.6s ease-in both;
	-moz-animation: toRightAnim4 0.6s ease-in both;
	-o-animation: toRightAnim4 0.6s ease-in both;
	-ms-animation: toRightAnim4 0.6s ease-in both;
	animation: toRightAnim4 0.6s ease-in both;
}
@-webkit-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
	0%{ left: 35%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
	0%{ left: 35%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
	0%{ left: 35%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
	0%{ left: 35%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
	0%{ left: 5%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
	0%{ left: 35%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
	-webkit-animation: toLeftAnim1 0.6s ease-in both;
	-moz-animation: toLeftAnim1 0.6s ease-in both;
	-o-animation: toLeftAnim1 0.6s ease-in both;
	-ms-animation: toLeftAnim1 0.6s ease-in both;
	animation: toLeftAnim1 0.6s ease-in both;
}
.da-slide-toleft p{
	-webkit-animation: toLeftAnim2 0.6s ease-in 0.3s both;
	-moz-animation: toLeftAnim2 0.6s ease-in 0.3s both;
	-o-animation: toLeftAnim2 0.6s ease-in 0.3s both;
	-ms-animation: toLeftAnim2 0.6s ease-in 0.3s both;
	animation: toLeftAnim2 0.6s ease-in 0.3s both;
}
.da-slide-toleft .da-link{
	-webkit-animation: toLeftAnim3 0.4s ease-in both;
	-moz-animation: toLeftAnim3 0.4s ease-in both;
	-o-animation: toLeftAnim3 0.4s ease-in both;
	-ms-animation: toLeftAnim3 0.4s ease-in both;
	animation: toLeftAnim3 0.4s ease-in both;
}
.da-slide-toleft .da-img{
	-webkit-animation: toLeftAnim4 0.6s ease-in 0.6s both;
	-moz-animation: toLeftAnim4 0.6s ease-in 0.6s both;
	-o-animation: toLeftAnim4 0.6s ease-in 0.6s both;
	-ms-animation: toLeftAnim4 0.6s ease-in 0.6s both;
	animation: toLeftAnim4 0.6s ease-in 0.6s both;
}
@-webkit-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
	0%{ left: 35%;  opacity: 1; }
	40%{ left: 70%;  opacity: 1; }
	90%{ left: 0%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
	0%{ left: 35%;  opacity: 1; }
	40%{ left: 70%;  opacity: 1; }
	90%{ left: 0%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
	0%{ left: 35%;  opacity: 1; }
	40%{ left: 70%;  opacity: 1; }
	90%{ left: 0%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
	0%{ left: 35%;  opacity: 1; }
	40%{ left: 70%;  opacity: 1; }
	90%{ left: 0%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
	0%{ left: 5%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
	0%{ left: 5%;  opacity: 1; }
	99%{ left: 5%; opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
	0%{ left: 35%;  opacity: 1; }
	40%{ left: 70%;  opacity: 1; }
	90%{ left: 0%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
.react-home {
  .react-input-box{
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    min-height: 50vh;
    background: url(/images/bg.jpg) no-repeat 0 0;
    background-size: 100%;
    height: 626px;

    ::-webkit-input-placeholder { color: #000; }
    :-moz-placeholder { color: #000; }
    ::-moz-placeholder { color: #000; }
    :-ms-input-placeholder { color: #000; }

    .zipForm {
      display: block;
      flex-direction: column;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      text-align: center;
      position: relative;
      @media (max-width: 1280px) {
        padding: 0 0 5%;
      }

      @media(min-width: 320px) and (max-width: 1025px) {
        padding: 0 0 10%;
      }

      #zip {
        height: 55px;
        width: 530px;
        border: 0;
        padding: 0 20px;
      }
      h3 {
        @media (min-width: 768px) and (max-width: 1268px){
          font-size: 2em;
        }
        @media (min-width: 320px) and (max-width: 480px){
          font-size: 1.2em;
        }
      }
    }

    img {
      width: 80px;
      position: absolute;
      top: 69px;
      left: 145px;
    }

    h1, h3 {
      color: #fff;
      font-family: "HelveticaNeue-Medium", Arial, sans-serif;
    }

    h1 {
      font-family: "Avalon", Arial, sans-serif;
      font-size: 5.7em;
      margin-top: 238px;
      margin-bottom: 0;
    }

    h3 {
      font-size: 24px;
      line-height: 28px;
      margin-top: 6px;
      margin-bottom: 43px;
    }
  }

  @media (min-width: 320px) and (max-width: 1025px) {
    .react-input-box {
      height: 100%;
      min-height: initial;
    }

    h1 {
      margin-top: 0;
      font-size: 3em;
      padding: 55px 0 0;
    }
    .menuNavigationWrapper {
      width: 100%;
    }
  }

  @media (min-width: 501px) and (max-width: 1025px) {
    .react-input-box {
      background-size: cover;

      img {
        top: 30px;
        left: 30px;
        width: 55px;
      }

      h1 {
        font-family: Avalon,Arial,sans-serif;
        font-size: 2em;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
      }

      h3 {
        font-size: 3em;
        line-height: initial;
      }

      .zipForm {
        padding: 90px 0 10%;
      }

      .zipForm #zip {
        width: 55%;
        font-size: 0.8em;
        height: 56px;
      }

      .button-gradient {
        width: 35%;
        font-size: 1em;
        height: 55px;
      }
    }
    .react-options-box {
      margin-top: 20px;
    }
  }

  @media (min-width: 320px) and (max-width: 500px) {
    .react-input-box {
      background: url(/images/bg.jpg) no-repeat 0 0;
      background-size: cover;

      img {
        top: 30px;
        left: 30px;
        width: 55px;
      }

      h1 {
        font-family: Avalon,Arial,sans-serif;
        font-size: 2em;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
      }

      .zipForm {
        padding: 90px 0 10%;
      }

      .zipForm #zip {
        width: 65%;
        font-size: 0.8em;
        height: 54px;
      }

      .button-gradient {
        width: 35%;
        font-size: .7em;
        height: 54px;
        vertical-align: top;
      }
    }
    .react-options-box {
      margin-top: 20px;

      .quote button {
        width: 90%;
      }
    }
    .react-footer-navigation li.partners img {
      width: 100%;
    }
    .desktopHide {
      display: block;
    }
    .hide {
      display: none !important;
    }
  }
}

.react-home .react-input-box .zipForm {
    display: block;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    text-align: center;
    position: relative;
}

.button-no-gradient {
	width: 182px;
	color: #3b73ff;
	background: #ffffff;
	border: 1px solid #fff;
	display: inline-block;
    overflow: visible;
    margin: 0;
    padding: 0 32px;
    height: 48px;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    font: inherit;
    font-weight: 500;
    font-size: 16px;
    line-height: 48px;
    cursor: pointer;
    transition: all .25s cubic-bezier(.645,.045,.355,1);
    -webkit-appearance: none;
}

.button-no-gradient:hover {
    border-color: hsla(0,0%,100%,.9);
    background: hsla(0,0%,100%,.9);
    color: #005fe6;
}

.button-gradient {
	height: 55px;
	width: 182px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	background: #6863ff;
	background: -moz-linear-gradient(70deg,#6863FF 0,#3ba4ff 100%);
	background: -webkit-linear-gradient(70deg,#6863FF 0,#3ba4ff 100%);
	background: linear-gradient(70deg,#6863FF 0,#3ba4ff 100%);
	-webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.15);
	-moz-box-shadow: 0 0 4px 0 rgba(0,0,0,.15);
	box-shadow: 0 0 4px 0 rgba(0,0,0,.15);
	padding: 15px 25px;
	border-radius: 0;
	border: 0;
}

.quote {
	padding-top: 50px;
}

.react-home .react-options-box .quote p {
    color: #000;
    font-weight: 700;
    width: 67%;
    margin: 0 auto;
    font-size: 24px;
    line-height: 32px;
}

.react-home .react-options-box .quote p:nth-child(2) {
    color: #999;
    font-size: 34px;
    font-family: "Journal",Arial,sans-serif;
    margin: 15px auto 0;
    font-weight: 100;
}

.react-home .react-options-box .quote button {
    margin-top: 50px;
    margin-bottom: 100px;
    width: 292px;
    height: 55px;
}

.react-options-box {
	margin: 75px 0;
}

.react-home .copyright {
    font-size: 13px;
    margin: 1em 0 20px;
    display: block;
		color: #999;
		font-family: HelveticaNeue,Arial,sans-serif;
}

.react-footer-navigation
	ul {
		list-style: none !important;
	}

.react-footer-navigation li {
		padding: 5px 0;
		list-style: none;
	}

.react-footer-navigation li:first-child {
			padding: 0;
		}

.react-footer-navigation img {
			width: 20px;
			margin-right: 2px;
		}

.react-footer-navigation .partners img {
			width: initial;
		}

.react-footer-navigation .title {
		font-size: 15px;
		font-family: 'HelveticaNeue', Arial, sans-serif;
		line-height: 35px;
		color: #999;
	}
	.react-footer-navigation a {
		font-size: 15px;
		font-family: 'HelveticaNeue', Arial, sans-serif;
		color: #666;
		text-decoration: none;
		font-weight: 600;
		list-style: none;
	}
	.react-footer-navigation [alt="logo"] {
		width: 45px;
		margin: 10px 0 0;
	}
	.react-home footer {
	  width: 100%;
	  background: #f5f5f5;
	  border-top: 1px solid #ececec;
	  padding: 40px 0px 20px;
	  text-align: center;
	}

.react-home .react-input-box .zip-input input{
	padding: 0 20px;
	outline: 1px #2e2e2e !important;
	border: 1px solid #fff;
  background: rgba(0,0,0,.15);
  color: #fff !important;
	position: relative;
	min-width: 260px;
	height: 48px;
	border-radius: 3px;
	transition: all .25s cubic-bezier(.645,.045,.355,1);
}
::-webkit-input-placeholder {
   color: #f7f7f7;
	 opacity:.6;
}
:-moz-placeholder {
   color: #f7f7f7;
	 opacity:.6;
}
::-moz-placeholder {
   color: #f7f7f7;
	 opacity:.6;
}
:-ms-input-placeholder {
   color: #f7f7f7;
	 opacity:.6;
}

.react-home .react-input-box {
	background: linear-gradient(180deg,#3ba4ff,#66a5ff);
	padding: 70px;
	/*border-bottom: 2px solid #3ba4ff;*/
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 2px 1px 2px #fff;
}

.reasons {
	background-color: #ffffff !important;
}
#building-details .list-group-item {
  padding:5px 15px !important;
}
#building-details .panel-body {
  padding:5px 0 0 0 !important;
}
.user-color {
  background: green;
}
span#color.badge.user-color{
  border-radius: 0!important;
    width: 40%;
}
            
          
!
            
              $(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn'),
            allPrevBtn = $('.prevBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
                $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-primary').addClass('btn-default');
            $item.addClass('btn-primary');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='email'],input[type='number'],select"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for(var i=0; i<curInputs.length; i++){
            if (!curInputs[i].validity.valid){
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid)
            nextStepWizard.removeAttr('disabled').trigger('click');
    });

    allPrevBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

        $(".form-group").removeClass("has-error");
        prevStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-primary').trigger('click');
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console