/* Layout: One Column
Theme: Basic Gray

Appearance.css contains the costmetic properties for your order 
form, such as fonts, colors, background images and borders.

NOTE: There are additional classes that are not listed here 
because they currently have no attributes. You can locate 
these by downloading and using Firebug.
===============================================================*/

/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
This is the correct location for import, remove import link in layout.css when ready
*/

body, td {
	font: 17px/28px  'Open Sans', Helvetica, Arial, sans-serif;
	color: #676767;
	}
	
img, img a {
    border: 0 none;
	}



/* PRODUCT GRID
===============================================================*/

.priceBold {
	/* Price subtotal on bottom right of product grid */
	font-weight: bold;
	}

.discountedPrice {
	text-decoration: line-through;
	}

.totalPrice {
	/* Subtotal label on bottom left of product grid */
	font-weight: bold;
	}

.optionChosen {
	font-style: italic;
	color: #676767;
	font-size: 17px;
	}

.updateCart {
	/* Link to update quantity */
	font-size: 10px;
	}

.promoField {
    /* Text fields for promo code */
	border: 1px solid #ddd;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    font-size: 13px;
	}



/* FORMS
===============================================================*/

.checkout, .checkoutShort, .checkoutShortest, .checkoutBottom, .checkoutTop, .qtyField, .optionsDrop  {
	/* Form fields used in checkout forms */
	border: 1px solid #ddd;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    font-size: 13px;
	color: #222;
	}

.checkoutLinks { width: auto!important; float: left!important; }

.checkoutDone, .checkoutTopDone, .checkoutBottomDone {
	/* Form fields used on confirmation page */
    font-size: 13px;
	color: #222;
	}

.billingTable, .orderSummary { width: 49%!important; }

.viewCart, .shippingTable, .billingTable, .paymentMethodTable, .shipMethodTable, .payplanTable, .orderSummary {
    border-collapse: collapse;
	}
	
.viewCart th, .viewCartShort th, .payPlan th, .summaryCart th, .shippingInfo th, .billingInfo th, .billingTable th, .shippingTable th, .paymentInfo th, .signinTable th, .paymentMethodTable th, .shipMethodTable th, .payplanTable th, .orderSummary th {
	background: #eee;
	
    }

.viewCart td, .viewCartShort td, .payPlan td, .summaryCart td, .shippingInfo td, .billingInfo td, .paymentInfo td, .orderSummary td {

	}

.subtotal {
	background-color: #f5f5f5;
	font-weight: bold;
	}

.cartDiscount {
    /* Discount text */
	color: #f00;
    }

.paymentDate, .paymentAmount, .financeDate, .financeAmount { /* Shown in payplan pay schedule box */
	font-size: 12px;
	}

.payplanSummaryHeader { /* Header for payplan pay schedule box */
	font-size: 12px;
	font-weight: bold;
	}



/* UPSELLS
===============================================================*/

#upsellContainer {
  	overflow: hidden;
	}

.upsell {
	background-color: #16b6e0;
	}

.upsellRegPrice {
	font-style: italic;
	}

.upsellPrice {
	color: #000;
	}
	
.upsell img {

	}

.upsell { float: none!important; width: 900px!important; margin: 0px auto!important; clear: both!important;  padding: 40px!important; font-size: 13px!important; line-height: 1.4!important; background: #16b6e0!important; color: #fff!important; border-radius: 15px!important; }

#pretext { background: #fff!important; color: #000!important; font-size: 17px!important; line-height: 1.4!important; text-align: center!important;   }

#footer { margin-bottom: 50px!important; }



/* TYPOGRAPHY
===============================================================*/

h1 {
    /* Used for product names */
	font-size: 16px; font-family: 'Roboto',serif!important;
	}

h2 {
    /* Used for upsell product names */
    font-size: 16px;font-family: 'Roboto',serif!important;
    }

h3 {
    /* Used for upsell headline */
    font-size: 15px;font-family: 'Roboto',serif!important;
	font-weight: normal;
    color: #555;
	text-transform: uppercase;	
	}



/* LINKS AND BUTTONS
===============================================================*/

a {
	color: #16b6e0;
	}

a:hover {
	color: #0093ba;
	}

.codeButton, .continueButton  {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	background: #16b6e0;

    }
	
.upsellButton  {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
	box-shadow: 0 1px 1px rgba(0,0,0,.1);

	background: #16b6e0;
    }

.codeButton:hover, .continueButton:hover, .upsellButton:hover {
	color: #fff;
    background: #0093ba;

	text-decoration: none;
	}

.codeButton:active, .continueButton:active, .upsellButton:active {
	position: relative; 
	top: 1px;
    }



/* MISC
===============================================================*/

.errorMessage {
	color: #dd4949;
	}



/* CUSOMISATION BY SEAN / BRISBANE AGENCY =============*/

#header { margin-top: 0!important; height: 50px!important; background-image: url(https://apaththatfits.com/wp-content/uploads/apaththatfits-logo.png)!important; background-position: top center!important; background-size: contain!important; width: 100%!important; background-repeat: no-repeat!important;  }

body { background: #efefef!important; }
#wrapper { width: 100%!important; max-width: 740px!important; background: #fff!important; border-radius: 1rem!important; margin: 40px auto!important; padding: 30px!important; margin-bottom: 80px!important;  }

#productInformation { margin-bottom: 0!important; }

.viewCart th, .viewCartShort th, .payPlan th, .summaryCart th, .shippingInfo th, .billingInfo th, .billingTable th, .shippingTable th, .paymentInfo th, .signinTable th, .paymentMethodTable th, .shipMethodTable th, .payplanTable th, .orderSummary th { background: transparent!important; color: #000!important; border-bottom: 2px solid #000!important; }

.productImage { height: 50px!important; width: 50px!important; border-radius: 0.5rem!important; object-fit: cover!important; }

.viewCart td, .shipMethodTable td, .paymentMethodTable td, .payplanTable td, .orderSummary td { padding: 10px 0px!important; vertical-align: middle!important; border-bottom: 1px solid #ccc!important; }
.viewCart th, .billingTable th, .shippingTable th, .shipMethodTable th, .paymentMethodTable th, .payplanTable th, .orderSummary th { padding: 10px 0px!important; font-size: 14px!important; line-height: 1.3!important; text-transform: uppercase!important;   }

h1 { margin: 0!important; color: #000!important; }
.price { display: auto!important; font-weight: 700!important; }

.subtotal { background: #fff!important; color: #000!important; }
.subtotal td { padding: 10px 0px!important; color: #000!important; }
.productDescription { margin: 0!important;  padding-right: 5%!important; font-size: 14px!important; line-height: 1.3!important; }

.billingTable, .orderSummary { width: 100%!important; float: none!important; margin: 15px 0px!important; padding: 0!important; height: auto!important;  }

td.rightAlignPrice, th.rightAlignPrice.priceCell { text-align: right!important; }

.codeButton, .continueButton { width: 50%!important; margin: 0px auto!important; padding: 18px 20px!important; font-size: 17px!important; line-height: 1!important; box-shadow: none!important; border-radius: 200px!important; text-shadow: none!important; font-weight: 700!important; display: block!important;transition: ease-in-out 0.1s!important; }

.continueButton { width: calc(95% - 30px)!important; border-radius: 0.6rem!important; margin: -15px auto!important;  }

.codeButton { background: #999!important; margin-top: 15px!important;  }
.codeButton:hover, .continueButton:hover { opacity: 0.75!important; transition: ease-in-out 0.1s!important; }

.checkoutLinks { width: 100%!important; }

.billingTable tbody tr { display: block; width: 100%;}
.billingTable tbody tr td { display: block;  width: 100%; }
td.rightAlignTop, td.rightAlign, td.rightAlignBottom { text-align: left!important; font-size: 12px!important; line-height: 1!important; margin: 0!important; padding: 0!important; width: 100%!important; }
.billingTable td, .shippingTable td { margin: 0!important; padding: 0!important; }

.checkoutTop, .checkoutTopDone, .checkout, .checkoutShort, .checkoutShortest, .checkoutBottom, .checkoutTop, .qtyField, .optionsDrop, select#Source, 
.promoField { width: calc(100% - 32px)!important; border: 2px solid #ddd!important; border-radius: 0.5rem!important; padding: 26px 12px 14px 12px!important; margin: 0!important; display: block!important;  }

select#Source { width: 100%!important; font-size: 15px!important;  }

h3.form-group { display: block!important; border-bottom: 2px solid #000!important; font-size: 14px!important; text-transform: uppercase; line-height: 1.3!important; font-weight: 700!important; font-family: 'roboto',sans-serif!important; margin-top: 50px!important;  }

.promoField { padding: 20px 12px!important; }

select#country { width: 99.5%!important; }

.paymentMethodTable .checkoutTop, .paymentMethodTable .checkoutTopDone, .paymentMethodTable .checkout, .paymentMethodTable .checkoutShort, .paymentMethodTable .checkoutBottom, .paymentMethodTable .checkoutTop, .paymentMethodTable .qtyField, .paymentMethodTable .optionsDrop
{ width: calc(100% - 16px)!important; }

div#ORDER_FORM_SUMMARY td { border-bottom: none!important; }


.billingTable { float: none!important; width: 100%!important; border-collapse: none!important; margin: 0!important; }

td.rightAlign, td.rightAlignTop, .paymentLabel, label.form-label { position: relative!important; top: 28px!important; left: 12px!important; text-align: left!important; font-size: 12px!important; line-height: 1!important;  }

label.form-label { left: 14px!important; top: 22px!important;  }

.paymentLabel  { top: 22px!important; }

.billingTable th { display: block!important; width: 100%!important; padding: 10px 0px!important; }
div#orderFormBillingEntry .inline-field-invalid { border: 2px solid #e34825!important; }

td.pay1 { width: 23.333%!important;  }
td.pay2 { width: 47.333%!important; padding-right: 1%!important;  }
td.pay3 { width: 33.333%!important; text-align: right!important;  }
td.pay4 { display: none!important; }



td.pay3 .checkoutShortest { width: calc(55% - 23px)!important; display: inline-block!important; margin: 0!important;  }

td.pay3 .paymentLabel { left: 38px!important; }

tr.cellLow { display: flex!important; }

.checkout, .checkoutShort, .checkoutShortest, .checkoutBottom, .checkoutTop, .qtyField, .optionsDrop { font-size: 15px!important; line-height: 1.3!important; }

select#expirationMonth { border-width: 2px 0px 2px 2px!important; border-radius: 0.5rem 0 0 0.5rem!important; }
select#expirationYear { border-width: 2px 2px 2px 0px!important; border-radius: 0 0.5rem 0.5rem 0!important; }

.paymentMethodTable { margin: 30px 0 0 0!important; }
.paymentMethodTable td { border: none!important; }
.paymentMethodTable tr.cellLow { border: none!important; background: #efefef!important; border-radius: 0.6rem 0.6rem 0 0!important; margin: 40px 0 0 0!important; padding: 5px 15px!important;  }
.paymentMethodTable tbody { }


.checkoutLinks { margin: 0!important; height: auto!important; padding-bottom: 40px!important; background: #efefef!important; border-radius: 0 0 0.6rem 0.6rem!important; }


.billingTable td, .shippingTable td { display: block!important; }
.shippingTable, .shipMethodTable { width: 100%!important; float: none!important; height: auto!important; margin-top: 50px!important; }


@media only screen and (max-width: 1000px) { 
  body { background: #fff!important; }
  
}

@media only screen and (max-width: 690px) { 
  body { background: #fff!important; }
  td.pay1 { width: 100%!important;  }
  td.pay2 { width: 100%!important; padding-right: 0%!important;  }
  td.pay3 { width: 100%!important; text-align: right!important;  }
  td.pay4 { display: none!important; }
  
}

table.billingTable.tabular.grid th:first-child { display: none!important; }