.direct-order-search {
  height       : 48px !important;
  border-color : #dfdfdf !important;
  transition   : border-color 0.1s ease-out !important;
  font-family  : "Proxima Nova", sans-serif !important;
  color        : #454545 !important;
  padding      : 12px 16px !important;
  font-size    : 16px !important;
  margin-bottom: 4.8rem;
}

.direct-order-title {
  font-family: 'Trade Gothic Condensed', 'Proxima Nova', sans-serif;
  font-weight: 700;
  text-align : center;
  font-size  : 3.6rem;
}

div.static-page-container h1.direct-order-title {
  margin-top: 4.8rem;
}

.direct-product {
    /* display      : flex;
     flex-direction: column;
     align-items  : flex-start; */
    display: grid;
    grid-template-columns: 75% auto;
    grid-template-areas:
    "professional addToBag"
    "schools ."
    "paulMitchell ."
    "teaTree ."
    "marulaOil ."
    "neuro ."
    "proTools ."
    "awg ."
    "mitch ."
    "mvrck ."
    "jpPet ."
;
}

.direct-product:first-child {
  border-top: 0.1rem solid #e8e8e8;
}

.direct-product-title-link {
  text-decoration: none !important;
}

.direct-product-title {
  font-family   : 'Proxima Nova', sans-serif;
  font-size     : 16px;
  text-transform: none;
  margin-top    : 0;
  margin-bottom : 1.2rem;
}

.direct-product-input-error-state {
  border-color: red !important;
}

.direct-product-error-message {
  margin: 1.2rem 0;
  color : red;
}

.direct-product-link {
  /* flex-basis   : 25%;
    display       : flex;
    width         : 100%;
    flex-direction: column;
    align-items   : center;
    margin-right  : 2.4rem; */
}

.direct-product-image-link {
  flex-basis: 25%;
}

.direct-product-heading {
  font-family   : 'Trade Gothic', 'Proxima Nova', sans-serif;
  font-size     : 12px;
  text-transform: none;
  margin        : 1rem 0;
}

.direct-product-main-content {
  flex-basis    : 50%;
  margin-right  : 2.4rem;
  padding-bottom: 1rem;
}

.direct-product-submit-content {
  flex-basis     : 25%;
  display        : flex;
  justify-content: flex-end;
  align-items    : flex-start;
  padding-bottom : 1rem;
}

.direct-product-button {
  margin-left: auto;
  padding    : 0.8rem 1.6rem;
}

.direct-product-image {
  max-height: 15rem;
}


@media only screen and (max-width: 1040px) {
  .direct-order.static-page-container {
    padding: 0 2rem;
  }
}

@media only screen and (max-width: 767px) {
  .direct-product {
      grid-template-columns: 100%;
      grid-template-areas:
      "professional"
      "schools"
      "paulMitchell"
      "teaTree"
      "marulaOil"
      "neuro"
      "proTools"
      "awg"
      "mitch"
      "mvrck"
      "jpPet"
      "addToBag"
  ;
  }

  .direct-product-image-link{
    flex-basis: 50%;
  }

  .direct-product-image-link img{
    display: block;
    margin: 0 auto;
  }

  .direct-product-main-content,
  .direct-product-submit-content{
    padding-bottom: 0;
  }

  .direct-product-main-content {
    flex-basis  : 50%;
    margin-right: 0;
    margin-bottom: 1.5rem;
  }

  .direct-product-submit-content {
    flex-basis: 100%;
  }

  .direct-product-button {
    flex-basis: 50% !important;
    padding: 16px 26px !important;
  }

  .direct-product-title{
    font-size: 14px;
  }
  form.direct-product button.submit-direct-order {
    display: none;
    max-width: none !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0;
    left: 0;
    z-index: 10 !important;
  }
}