@charset "utf-8";

/*
CSS Services specific styles


*/

.pricesPage--copy-block h3 {
  color: #48480c;
  font-size: 1.5rem;
  text-align: left;
  display: block;
  margin: 0 auto 0.1rem 1rem;
}
  .pricesPage--copy-block p {
    font-size: 1rem;
  }

/*
@media all and (min-width: 600px) {
  .pricesPage .pageInfoBlock img {
    width: 100%;
    max-width: 514px;
    margin: 5rem auto;
  }
}

*/

.pageInfoBlock-copy.pageInfoBlock--copymid p {
  text-align: left;
  padding-bottom: 1vw;
}

/* Price blocks */
.pagePriceBlock {
  width: 96vw;
  max-width: 450px;
  min-height: 35vw;
  margin: 2vw auto;
  display: flex;
  border: 1px solid #879b87;
  border-radius: 1em;
}
  /* fix card display on all screens 6th AUg */
  .pagePriceBlock .pageInfoBlock {
    width: 100%;
    display: flex;
  }

    .pagePriceBlock .iconArea {
      width: 20%;
      padding: 1%;
    }
      .pagePriceBlock .iconArea img {
        max-width: 127px;
        width: 100%;
        margin: 0;
        text-align: left;
        padding: 44% 0 0 5%;
      }

.pagePriceBlock .pagePriceBlock-copy-area {
  width: 74%;
  padding: 1% 1% 1% 3%;
}
  .pagePriceBlock .pagePriceBlock-copy-area h2 {
    font-size: 0.9rem;
    padding: 3% 0 0 0;
    margin 0.1rem;
  }
  .pagePriceBlock .pagePriceBlock-copy-area p {
    font-size: 0.75rem;
    padding: 2% 0 2% 0;
    display: flex;
    justify-content: space-between;
  }
  .pagePriceBlock .pagePriceBlock-copy-area .serviceItemPrice {
    padding-right: 3%;
  }


@media all and (min-width: 401px) {
  .pagePriceBlock {
    min-height: 9em;
    margin: 1em auto;
  }
    .pagePriceBlock .pagePriceBlock-copy-area h2 {
        font-size: 1rem;
        padding: 4% 0 0 0;
    }
      .pagePriceBlock .pagePriceBlock-copy-area p {
        font-size: 0.85rem;
        padding: 2% 0 2% 0;
      }

  .pagePriceBlock .iconArea img {
    padding: 1.8em 0 0 5%;
  }

}

  @media all and (min-width: 601px) {
      .pagePriceBlock .pagePriceBlock-copy-area h2 {
          font-size: 1.2rem;
          padding: 4% 0 0 0;
      }
        .pagePriceBlock .pagePriceBlock-copy-area p {
          font-size: 1rem;
          padding: 2% 0 2% 0;
        }

  }

  @media all and (min-width: 910px) {
    .pricesPage #main-content,
    .pricesPage--copy-block {
      max-width: 1000px;
      margin:  1em auto;
    }
      .pricesPage #main-content {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
      }
        .pagePriceBlock:nth-child(6) {
          margin-left: 1.5em;
        }
  }


/*


         <article class="pagePriceBlock block1">

            <div class="iconArea">
              <img class="services-icon" src="img/global/icons/group-walks.png" alt="Outdoor Hounds - Dog Group walks" />
            </div>

            <div class="pagePriceBlock-copy-area">
              <h2>Group Walks</h2>
              <div class="priceLine line1">
                <p><span class="serviceItem">1 Dog (week day)</span> <span class="serviceItemPrice">£9</span></p>
                <p><span class="serviceItem">Two dogs, same household</span> <span class="serviceItemPrice">£16</span></p>
              </div>
            </div>

          </article><!-- End price block 1 -->
*/