/* -----------------------------------------------------
 * Layout settings
 * ----------------------------------------------------- */
/* -----------------------------------------------------
 * App-wide specs: colors, dimensions, etc.
 * Controller- and page-specific variables should be declared in
 * the controller-specific SASS stylesheet.
 * ----------------------------------------------------- */
/*
 * Utopia-specific SASS variables and mixins.
 */
/* Page layouts
 */
/* -----------------------------------------------------
 * Grids
 *
 * Programmatically generate the widths of elements that
 * belong in the grid.
 *
 * Usage:
 *
 * .container
 *   @include row
 *   .primary
 *     @include col(8)
 *     @include internal-margin
 *   .secondary
 *     @include col(4)
 *     @include last
 * .container
 *   @include row
 *   .tertiary
 *     @prepend(4)
 *     @include(4)
 *     @append(4)
 *
 * Inspired by:
 *   http://bjorkoy.com/2010/05/css-grids-with-sass/
 * ----------------------------------------------------- */
/* math magic */
/* create row div */
/* create a column div */
/* make an element span n columns */
/* the first and last columns in a row needs these */
/* prepend n blank columns */
/* append n blank columns */
/*
 * Book display styles.
 */
.blurb .stretch {
  clear: both;
  height: 1px;
  margin: 0;
  padding: 0;
}
.blurb .clear {
  clear: both;
}
.blurb span.accesskey {
  text-decoration: none;
}
.blurb .accessibility {
  position: absolute;
  top: -999em;
  left: -999em;
}

.clearfix:after,
.address-attributes:after {
  content: "";
  display: table;
  clear: both;
}

.cover-with-hinge {
  display: block;
  position: relative;
}
.cover-with-hinge:before {
  content: "";
  min-width: 10px;
  width: 7%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(12%, transparent), color-stop(29%, rgba(0, 0, 0, 0.45)), color-stop(45%, transparent), color-stop(70%, rgba(0, 0, 0, 0.25)), color-stop(85%, transparent), color-stop(100%, transparent));
  background-image: -webkit-linear-gradient(-360deg, rgba(0, 0, 0, 0.2), transparent 12%, rgba(0, 0, 0, 0.45) 29%, transparent 45%, rgba(0, 0, 0, 0.25) 70%, transparent 85%, transparent);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 12%, rgba(0, 0, 0, 0.45) 29%, transparent 45%, rgba(0, 0, 0, 0.25) 70%, transparent 85%, transparent);
}
.cover-with-hinge img {
  display: block;
}

.tbl-shipping-estimates {
  border-bottom: 2px solid black;
  margin: 10px 0;
  width: 100%;
}
.tbl-shipping-estimates th,
.tbl-shipping-estimates td {
  padding: 10px;
}
.tbl-shipping-estimates th:first-child,
.tbl-shipping-estimates td:first-child {
  padding-left: 0;
}
.tbl-shipping-estimates th:last-child,
.tbl-shipping-estimates td:last-child {
  padding-right: 0;
}
.tbl-shipping-estimates th {
  border-bottom: 2px solid black;
  padding-top: 0;
  text-transform: uppercase;
}
.tbl-shipping-estimates tbody tr {
  border-bottom: 1px solid #b8b7b7;
}
.tbl-shipping-estimates tbody tr:last-child {
  border-bottom-width: 0;
}
.tbl-shipping-estimates tbody tr td {
  border-left: 1px solid #b8b7b7;
}
.tbl-shipping-estimates tbody tr td:first-child {
  border-left-width: 0;
}

.address-attributes {
  list-style-type: none;
  margin: 0;
  border-top: 1px dotted black;
  padding: 10px 0 0 0;
}
.address-attributes .button {
  margin-top: 7px;
}
.address-attributes li {
  float: left;
  margin-left: 12px;
}
.address-attributes select, .address-attributes input {
  width: 85%;
}
.address-attributes input[type='text'] {
  text-align: left;
}

.textfield {
  -webkit-appearance: none;
}

.shipping-calculator-container {
  color: #555555;
}
.shipping-calculator-container .btn--mint-on-white--shipping {
  font-weight: 600;
  margin-top: 11px;
  padding: 10px 20px;
  text-transform: uppercase;
  width: 100%;
}

.module__header {
  font-weight: 600;
  margin-bottom: 15px;
}

.textfield, select, .select-box {
  background-color: whitesmoke;
  border-color: #e9e9e9;
  border-radius: 0;
  border-width: 1px;
}

.select-box {
  border-width: 1px;
  display: inline-block;
  width: 100%;
}

.select-box__select {
  cursor: pointer;
}

select, input[type='checkbox'] {
  cursor: pointer;
}

input[type='text'] {
  height: 40px;
  text-align: center;
  width: 100%;
}

input[type='checkbox'] {
  -webkit-appearance: none;
  background-color: whitesmoke;
  border: 1px solid #e9e9e9;
  display: inline-block;
  height: 20px;
  vertical-align: middle;
  width: 20px;
}

input[type='checkbox']:checked {
  -webkit-appearance: checkbox;
}

.grid--one {
  margin-top: 0;
}

.form-shipping-calculator {
  width: 100%;
}

.form-container .grid__column {
  margin-bottom: 0;
}

.shipping-calculator-header__h2 {
  letter-spacing: 5px;
  font-size: 26px;
  text-transform: uppercase;
  font: 400 22px/1.3 futura-pt, sans-serif;
}
@media (min-width: 640px) {
  .shipping-calculator-header__h2 {
    font-size: 30px;
  }
}
@media (min-width: 769px) {
  .shipping-calculator-header__h2 {
    font-size: 52px;
    letter-spacing: 4px;
  }
}

.form-row--error {
  display: none;
  color: #f73c51;
  font-size: 15px;
  margin: 0 auto;
  max-width: 900px;
  padding: 10px;
  text-align: center;
}

.address-attributes {
  border-top: none;
  margin: 30px auto;
  margin-top: 50px;
  margin-bottom: 0;
  padding: 10px;
  padding-bottom: 0;
  text-align: center;
  width: 100%;
}
.address-attributes .form-row {
  display: block;
  float: none;
  list-style: none;
  margin: 0;
  margin-top: 10px;
  max-width: 100%;
  text-align: left;
  vertical-align: top;
}
@media (min-width: 421px) {
  .address-attributes .form-row {
    max-width: 80%;
    margin: 0 auto;
  }
}
@media (min-width: 769px) {
  .address-attributes .form-row {
    display: inline-block;
    margin-right: 10px;
    margin-top: 0;
  }
  .address-attributes .form-row.form-row__quantity {
    max-width: 80px;
  }
  .address-attributes .form-row.form-row__submit {
    margin-right: 0;
    max-width: 145px;
  }
  .address-attributes .form-row.form-row__pobox {
    margin-top: 27px;
  }
}
.address-attributes .form-row.error .form-row__label {
  color: #f73c51;
}
.address-attributes .form-row.error .textfield {
  border-color: #f73c51;
}
.address-attributes .form-row__label {
  font-size: 14px;
}
.address-attributes .form-row__format {
  min-width: 175px;
}
.address-attributes .form-row__country {
  min-width: 215px;
}
.address-attributes .form-row__country .slicklabel {
  font-size: 14px;
}
.address-attributes .form-row__zip .slicklabel {
  font-size: 14px;
}
.address-attributes .form-row__pobox {
  margin-top: 15px;
}
.address-attributes .form-row__pobox .form-row__pobox--checkbox {
  margin-left: 0;
}
.address-attributes .form-row__submit {
  margin-top: 10px;
}

.btn--white-on-black {
  font-weight: 600;
  padding-bottom: 12px;
  padding-top: 12px;
}

.compare-table {
  padding: 30px 0 30px;
  margin-bottom: 0;
  margin-top: 0;
}

.compare-table:last-child {
  padding-top: 0;
}

.compare-table:first-child {
  padding-top: 30px;
}

.shipping-calculator-results {
  margin: 0 auto;
  max-width: 900px;
  padding: 10px;
  width: 100%;
}
@media (min-width: 621px) {
  .shipping-calculator-results {
    padding: 10px 30px;
  }
}

.shipping-calculator-header__sub {
  margin: 0 auto;
  margin-top: 10px;
  max-width: 500px;
  text-align: center;
}

.form-row__pobox--checkbox, .form-row__pobox--label {
  display: inline-block;
}

.tbl-shipping-estimates th, .tbl-shipping-estimates td {
  font-size: 12px;
  padding: 10px 1px;
}
@media (min-width: 421px) {
  .tbl-shipping-estimates th, .tbl-shipping-estimates td {
    font-size: 14px;
    padding: 10px;
  }
}
@media (min-width: 621px) {
  .tbl-shipping-estimates th, .tbl-shipping-estimates td {
    font-size: 1em;
    padding: 10px;
  }
}

.two-half-columns__col--left {
  margin-top: 0;
}

.faq-list .faq-answer {
  margin: 10px;
}

.grid__header {
  text-transform: none;
}

.faq--see-all {
  margin: 40px 10px;
  margin-bottom: 90px;
  text-transform: uppercase;
}

.recent-order {
  margin: 70px 0;
}

.how-it-works__header {
  margin-bottom: 30px;
}

.shipping-calculator-results__header {
  text-align: center;
}

.how-it-works-container {
  margin: 0 auto;
  max-width: 1120px;
}

.ship-method-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.shipping_calculator_results_container {
  margin-bottom: 70px;
  transition: transform 1s;
}

.shippingErrorMessage {
  color: #f73c51;
  font-size: 18px;
  margin: 0 auto;
  text-align: center;
}

.calculating-section {
  margin: 0 auto;
  position: relative;
  text-align: center;
  width: 100%;
}

.calculating-section__loading {
  background: url("https://assets.blurb.com/images/lightbox/loading.gif") center center no-repeat transparent;
  display: none;
  height: 40px;
  margin: 40px auto;
  width: 40px;
  transition: transform 1s;
}

.shipping-calculator-container .address-attributes {
  margin-top: 30px;
  @media(min-width: 781px) {
    margin-top: 50px;
}

}
.shipping-calculator-container .two-half-columns {
  margin: 20px 0;
  @media(min-width: 781px) {
    margin: 40px 0;
}

}
.shipping-calculator-container .shipping_calculator_results_container {
  margin-bottom: 70px;
  @media(min-width: 781px) {
    margin-bottom: 90px;
}

}
.shipping-calculator-container .faq--see-all {
  margin-bottom: 70px;
  @media(min-width: 781px) {
    margin: 90px;
}

}

.compare-table__cell-answer {
  text-align: right;
}
@media (min-width: 46.875em) {
  .compare-table__cell-answer {
    text-align: center;
  }
}