<script>

$( document ).ready(function() {

var w = window.innerWidth;
if (w < 630) {

$( '.builder_verify_button .btn-success ' ).remove();

$( '.next-btn' ).after( '<div id="builder_verify_button" class="builder_verify_button" style="display:none"><button type="button" class="btn btn-success" onclick="popup_confirm()">Finish</button></div>' );

$( '.steps_body' ).after('<div id="total_price" class="total_price">$0.00</div>');
}

var image_resize = $('.option_image_pane').width();
$('div#option_image').css('max-height', image_resize);

});
</script>

<style>

@media (max-width: 630px) {


.step_title {
font-size: 18px !important;
}

#option_image {
height: auto !important;
}

#step_container {
font-size: small !important;
}

.shappify_product_builder .total_price {
margin-top: 10px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 50px !important;
}

.verify_pane .total_price {
padding-top: 5px !important;
}

#navigation_buttons button {
padding: 10px 18px !important;
}

#builder_verify_button {
margin-top: 0px !important;
margin-left: 0px !important;
}

.option_image_pane {
height: auto !important;
min-height: 250px !important;
padding-bottom: 10px !important;
}

.shappify_product_builder .option_image_pane, .steps_body {
width: 100% !important;
}

.step_header {
width:100% !important;
}

.shappify_product_builder .option_image_pane {
border: 1px solid #ddd !important;
}

.shappify_product_builder {
width: 80% !important;
}

.option_value, .option_id {
width: 90% !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}

.option_value select {
width: 100% !important;
}

.choices {
width:100% !important;
margin:0px !important;
height: auto !important;
padding: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
font-size: 12px !important;
}

.choices.selected {
border-color: lightgrey !important;
border-left: 0px !important;
border-right: 0px !important;
background-color: #DDD !important;
}

.option_image {
width: 20% !important;
max-width: 325px !important;
}

.shappify_product_builder .choices img {
float: left !important;
margin: 0px !important;
width: 25% !important;
height: auto !important;
}

.steps_body, .option_choices {
padding: 0px !important;
margin:0px !important;
}

.step_details {
height: 350px !important;
}


.step_container {
text-align: center !important;
}

.steps_body {
height: 425px !important;;
}

.option_image_pane {
margin-top:30px !important;
}

.step_header {
display: none !important;
font-size: 20px !important;
padding: 0px !important;
}

.current {
display: block !important;
}

.shappify_product_builder .total_price {
font-size: 26px !important;
}
}

@media (max-width: 768px) {
.tooltip {
display: none !important;
}


.shappify_product_builder {
max-width: 1060px !important;
margin-left: auto !important;
margin-right: auto !important;
color:black !important;
}


.navigation_buttons {
display: block !important;
}

.shappify_product_builder .choices img {
margin: 5px 0px 5px 5px !important;
}

.description {
margin: 10px !important;
}

.shappify_product_builder .option_image .spritespin-stage {
margin-left: auto !important;
margin-right: auto !important;
position: inherit !important;
}

#builder_addtocart_button {
clear:both !important;
padding-top:5px !important;
}

div#add_qty {
padding-top: 5px !important;
}
input#qty {
margin-top: -5px !important;
}
}

.step_info_facebox {
width: auto !important;
}

#facebox {
top: 0 !important;
left: 0 !important;
width: 100% !important;\
}

.step_info_facebox .step_info_description {
width: auto !important;
}

#facebox .popup {
position: relative;
border: 15px solid rgba(0,0,0,0) !important;
-webkit-box-shadow: 0 0 0 !important;
-moz-box-shadow: 0 0 0 !important;
box-shadow: 0 0 0 !important;
}

div#image_preview img {
height: auto !important;
}

#facebox .content {
width: 100% !important;
box-sizing: border-box !important;
}

div#image_preview {
max-width: 325px !important;
margin-left: auto;
margin-right: auto;
}

.steps {
width: 84% !important;
margin-left: auto !important;
margin-right: auto !important;
}

</style>