@charset "utf-8";

/*
CSS Global styles


*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

/* Start off canvas menu required */
  /* Changed to work with ODH */
  .container,
  .content-wrap {
    overflow-x: hidden;
  }

/*
.container {
  background: #373a47;
}
*/

.menu-wrap a {
  color: #242424;
  font-weight: 700;
}

.menu-wrap a:hover,
.menu-wrap a:focus {
  color: #c94e50;
}
/*

.content-wrap {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
*/

.content {
  position: relative;
  background: #b4bad2;
}

.content::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  content: '';
  opacity: 0;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
  transition: opacity 0.4s, transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

/* Menu Button */
.menu-button {
  position: absolute;
  left: 0;
  z-index: 1000;
  margin: 1em;
  padding: 0;
  width: 1.8em;
  height: 1.5em;
  border: none;
  text-indent: 2.5em;
  font-size: 1em;
  color: transparent;
  background: transparent;
  outline: 0;
}

.menu-button::before {
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  bottom: 0.1em;
  left: 0.1em;
  background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
  content: '';
}

.menu-button:hover,
.menu-button:active,
.menu-button:focus {
  opacity: 0.6;
  cursor: pointer;
}

  @media all and (min-width: 890px) {
    .menu-button,
    .menu-button::before {
      display: none;
    }
  }

/* Close Button */
.close-button {
  width: 1em;
  height: 1em;
  position: absolute;
  right: 1em;
  top: 1em;
  overflow: hidden;
  text-indent: 1em;
  font-size: 0.75em;
  border: none;
  background: transparent;
  color: transparent;
}

.close-button::before,
.close-button::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  background: #242424;
}

.close-button::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close-button::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Menu */
.menu-wrap {
  position: absolute;
  z-index: 1001;
  width: 265px;
  height: 100%;
  background: #e3e3cc;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
  -webkit-transform: translate3d(-320px,0,0);
  transform: translate3d(-355px,0,0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.menu,
.icon-list {
  height: 100%;
overflow-y: hidden;
}

.icon-list {
  -webkit-transform: translate3d(-400px,0,0);
  transform: translate3d(-400px,0,0);
}

.icon-list a {
  display: block;
  padding: 0.8em;
  -webkit-transform: translate3d(-100px,0,0);
  transform: translate3d(-100px,0,0);
}

.icon-list,
.icon-list a,
.icon-list img {
  -webkit-transition: -webkit-transform 0s 0.4s;
  transition: transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.icon-list a:nth-child(2) {
  -webkit-transform: translate3d(-200px,0,0);
  transform: translate3d(-200px,0,0);
}

.icon-list a:nth-child(3) {
  -webkit-transform: translate3d(-300px,0,0);
  transform: translate3d(-300px,0,0);
}

.icon-list a:nth-child(4) {
  -webkit-transform: translate3d(-400px,0,0);
  transform: translate3d(-400px,0,0);
}

.icon-list a:nth-child(5) {
  -webkit-transform: translate3d(-500px,0,0);
  transform: translate3d(-500px,0,0);
}

.icon-list a:nth-child(6) {
  -webkit-transform: translate3d(-600px,0,0);
  transform: translate3d(-600px,0,0);
}

.icon-list img {
  -webkit-transform: translate3d(0,1000px,0);
  transform: translate3d(0,1000px,0);
}

.icon-list a span {
  margin-left: 10px;
  font-weight: 700;
}

/* Shown menu */
.show-menu .menu-wrap {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list,
.show-menu .icon-list a,
.show-menu .icon-list img {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu .icon-list a {
  -webkit-transition-duration: 0.9s;
  transition-duration: 0.9s;
}

.show-menu .content::before {
  opacity: 1;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}


/* End off canvas menu required */


body {
  margin: 0 auto;
  text-align: center;
  font-family: 'Open Sans', sans-serif, Arial;
  font-size: 100%;
  font-weight: 300;
  box-sizing: border-box;
}
#page-wrap1 {
  width: 100%;
/*  max-width: 1200px;*/
  margin: 0 auto;
}
#page-wrap2 {
  width: 100%;
/*  max-width: 1000px;*/
  margin: 0 auto;
}

header,
nav,
footer,
article,
section,
aside {
  display: block;
}

img,
a {
  border: 0;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}
h1 {
  letter-spacing: 0.1rem;
}
h2 {
  color: #48480c;
  font-size: 1.5rem;
  text-align: left;
}
h3 {
  font-size: 1rem;
  padding: 0.5rem 0 0;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  color: #000;
  font-weight: 400;
  border-bottom: 1px solid #fff;
  display: inline-block;
}

p,
li {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  margin: 0 auto;
  text-align: left;
}

.about h1,
.services-page h1,
.pricesPage h1,
.contactPage h1,
.gallery h1,
.faqPage h1,
.reviews-page h1,
.dog-walkers-code #main-content h1,
.dog-walkers-code #main-content h2,
.dog-walkers-code #main-content h3 {
  font-size: 1.5rem;
  padding: 0.5rem 0 0 1.2rem;
  margin: 0 auto;
  color: #48480c;
  font-weight: 700;
/*  display: inline-block;*/
  text-align: left;
    width: 98%;
    max-width: 1120px;
}
  .services-page h1 {
    padding: 2.5rem 0 0 1.2rem;
  }
  .faqPage h1 {
    padding: 1.5rem 0 1.2rem 0;
  }

  @media all and (min-width: 900px) {
    .about h1,
    .services-page h1,
    .pricesPage h1,
    .contactPage h1,
    .gallery h1,
    .faqPage h1,
    .reviews-page h1,
    .dog-walkers-code #main-content h1,
    .dog-walkers-code #main-content h2,
    .dog-walkers-code #main-content h3 {
      font-size: 2rem;
    }
  }

/* Start Header */
#site-header {
  margin-top: 0;
  background: #fff;
  clear: both;
/*  height: 100px;*/
  height: 206px;
  border-bottom: 1px solid rgba(133, 149, 107, 0.20);
}
  .homePage #site-header {
    border-bottom: 1px solid #fff;
  }

  @media all and (min-width: 860px) and (max-width: 1502px) {
    #site-header {
      height: 190px;
    }
  }
    @media all and (min-width: 1690px) {
      #site-header {
        height: 160px;
      }
    }

  div #site-heading a {
    margin: 1rem auto 2rem;
    font-size: 1.5rem;
    padding: 2rem 0 0;
    margin: 0 auto;
    text-align: left;
    color: #48480c;
    font-weight: 700;
    display: inline-block;
  }
    @media all and (min-width: 526px) {
      div #site-heading a {
        font-size: 2.5rem;
        padding: 1rem 0 0;
        z-index: 101;
        position: relative;
      }
    }

/* logo sizing */
#site-logo a img {
  margin: 0 auto;
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 300px;
}

@media all and (min-width: 400px) {
  #site-logo a img {
    max-width: 348px;
  }
}

#site-header .shared-navigation-contact {
  text-align: right;
  margin-right: 2em;
}

#site-header .shared-navigation-contact .contact-no {
  text-align: right;
}
  @media all and (min-width: 790px) {
    #site-header .shared-navigation-contact {
      display: flex;
      align-items: flex-start;
      z-index: 100;
    }
      #site-header .shared-navigation-contact .contact-no {
        flex-grow: 1;
        text-align: left;
        margin-left: 2em;
      }
  }
    @media all and (min-width: 1690px) {
      #site-header .shared-navigation-contact {
        margin-top: -2em;
      }
    }

  .contact-number {
    font-size: 1.2rem;
    font-weight: 700;
  }

#site-header .header-links {
  display: none;
}
  @media all and (min-width: 890px) {
    #site-header .shared-navigation-contact .header-links {
      display: block;
    }
  }


#site-header .shared-navigation-contact .header-links {
flex-grow: 3;
}

  /* HEader links not hidden behind burger menu */
  #site-header .header-links {
    text-align: right;
  }
    #site-header .header-links a {
      color: #242424;
      text-transform: uppercase;
      font-size: 0.9rem;
      font-weight: 400;
      margin: 0 1em;
      letter-spacing: 0.1rem;
    }
      #site-header .header-links a:last-child {
        margin-right: 2em;
      }

      /* Header, foooter and icon hover effects */
      #site-header .header-links a:hover,
      footer nav a:hover,
      a:hover h3,
      body.homePage #site-header .header-links .homeLink,
      body.about #site-header .header-links .aboutLink,
      body.pricesPage #site-header .header-links .tariffLink,
      body.services-page #site-header .header-links .servicesLink,
      body.reviews-page #site-header .header-links .reviewLink,
      body.gallery #site-header .header-links .galleryLink,
      body.contactPage #site-header .header-links .contactLink,
      .faqPage .panel a {
        color: #0f8400;
        border-bottom: 1px dashed #0f8400;
      }



footer {
  min-height: 180px;
  width: 100%;
  background-color: #c5c599;
  clear: both;
}
  footer nav {
    padding: 3em 0;
  }
    footer nav a,
    footer .footer-number {
      display: inline-block;
      font-size: 1rem;
      padding: 0.5rem 0.2rem;
      margin: 0 0.8em;
      text-align: center;
      text-decoration: none;
      color: #64644d;
      font-weight: 700;
      font-style: italic;
      border-bottom: 1px solid #C5C599;
      width: 98vw;
    }
      footer .footer-number {
        display: block;
      }
      footer .footer-number .contact-number {
        font-size: 0.9rem;
        padding: 0 1em;
      }

      @media all and (min-width: 560px) {
        footer nav a,
        footer .footer-number {
          width: inherit;
        }

      }

.copyright,
.copyright p {
  text-align: center;
}

.footer-social {
  display: block;
}
  .footer-social > span,
  .copyright p {
    font-family: 'Open Sans', sans-serif, Arial;
    font-size: 0.8rem;
    font-weight: 400;
    color: #64644d;
    padding-right: 0.2rem;
  }

    .fb-like {
      padding-top: 1em;
    }

  @media all and (min-width: 920px) {
      footer nav a,
      footer .footer-number {
        display: inline-block;
        padding: 0.5rem 0;
        margin: 0 1em 1em;
      }
        footer .footer-number .contact-number {
          font-size: 0.9rem;
          padding: 0 4em;
          border-right: 2px solid #64644d;
        }
  }

/* Services */
.services .servicesIcons {
  display: flex;
  flex-flow: wrap;
/*  display: block;*/
}
  .servicesIcons div {
    max-width: 127px;
    margin: 5vw auto;
  }
    .servicesIcons div img {
      width: 100%;
    }


/* One smart link */
.one-smart {
  font-size: 0.8em;
  color: #999;
  text-align: right;
}
  .one-smart a {
    color: #999;
    border-bottom: 1px solid #fff;
  }
    .one-smart a:hover {
      color: #0f8400;
      border-bottom: 1px dashed #0f8400;
    }


/* info block and circle setcions */
.pageInfoBlock img {
  width: 100%;
  max-width: 70vw;
  margin: 10vw 15vw;
}

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

.pageInfoBlock-copy p::first-letter,
.dog-walkers-code #main-content p::first-letter {
  font-weight: 700;
/*  font-style: italic;*/
  letter-spacing: 0.1rem;
  color: #b6b67c;
  font-size: 2rem;
}

.pageInfoBlock-copy p a,
.dog-walkers-code #main-content p a {
  color: #48480c;
  border-bottom: 1px dashed #48480c;
  font-weight: 700;
}

@media all and (min-width: 810px) {
  .pageInfoBlock {
    display: flex;
    align-items: center;
    width: 98%;
    max-width: 1120px;
    margin: 0 auto;
  }
/*
  .services-page .pageInfoBlock .pageInfoBlock-copy {
    max-width: 60%;
  }
*/
  .pageInfoBlock .pageInfoBlock-copy {
    max-width: 60%;
  }
    .pageInfoBlock--copy3 {
      display: block;
    }
      .pageInfoBlock:nth-child(even) .pageInfoBlock-copy {
        order: 1;
      }

      .pageInfoBlock:nth-child(even) img {
        order: 2;
      }
        .pageInfoBlock img {
          margin: 2rem auto;
        }
}

        /* IE 10 + fix for flexbox issue */
        @media screen and (-ms-high-contrast: active) and (min-width: 810px), (-ms-high-contrast: none) and (min-width: 810px) {
          .pageInfoBlock .pageInfoBlock-copy {
            width: 50%;
          }
        }

@media all and (min-width: 900px) {
  #main-content ul {
    margin-left: 2em;
  }
}
  @media all and (min-width: 900px) {
    .pageInfoBlock-copy p,
    .dog-walkers-code #main-content p {
      font-size: 1.5rem;
    }
    .services .pageInfoBlock p,
    .pageInfoBlock-copy ul li,
    #main-content ul li,
    .dog-walkers-code #main-content p {
      font-size: 1.3rem;
    }

    .pageInfoBlock--copy3 h2 {
      text-align: left;
      margin-left: 1rem;
    }
    .services,
    .pageInfoBlock--copyexpanded {
      width: 98%;
      max-width: 1120px;
      margin: 0 auto;
    }
  }


.pageInfoBlock-copy.pageInfoBlock--copyexpanded p {
  text-align: center;
  padding-bottom: 2vw;
}

/* info pages, terms etc */

.policies #main-content {
  max-width: 1200px;
  margin: 3rem auto 2rem;
  text-align: left;
}
.policies #main-content h1,
.policies #main-content h2,
.policies #main-content h3 {
  color: rgb(72, 72, 12);
  font-family: "Open Sans",sans-serif,Arial;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 2rem 0 0.5rem;
  text-align: left;
}

  .policies #main-content p,
  .policies #main-content ul li {
    font-family: "Open Sans",sans-serif,Arial;
    font-size: 1rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 1.5rem;
    text-align: left;
  }

  .policies #main-content ul {
    margin-left: 1rem;
  }
    .policies #main-content ul ul {
      margin-left: 0;
    }
    .policies #main-content ul li {
      padding: 0.5rem 1rem;
    }
  .policies #main-content a {
    color: #48480c;
    border-bottom: 1px dashed #48480c;
    font-weight: 700;
  }
    .policies #main-content .info-nav a {
      margin: 0 0.5em 1em;
      display: inline-block;
    }

  .policies #main-content .info-nav {
    margin: 2em auto;
    text-align: center;
  }

@media all and (max-width: 1200px ) {
   .policies #main-content {
    max-width: 96%;
    margin: 0 auto 2rem;
    text-align: left;
  }
}
@media all and (max-width: 600px ) {
  .policies #main-content h1,
  .policies #main-content h2,
  .policies #main-content h3 {
    color: rgb(72, 72, 12);
    font-family: "Open Sans",sans-serif,Arial;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 2rem 0 0.5rem;
    text-align: left;
  }

    .policies #main-content p,
    .policies #main-content ul li {
      font-family: "Open Sans",sans-serif,Arial;
      font-size: 0.8rem;
      font-weight: 300;
      margin: 0;
      padding: 0;
      line-height: 1.2rem;
      text-align: left;
    }

    .policies #main-content ul {
      margin-left: 0;
    }
      .policies #main-content ul ul {
        margin-left: 0.2rem;
      }
      .policies #main-content ul li {
        padding: 0.1rem 0.5rem;
      }
    .policies #main-content a {
      color: #48480c;
      border-bottom: 1px dashed #48480c;
      font-weight: 700;
    }
}

.fbIcon {
  width: 2em;
  height: 2em;
}

footer nav .footer-social a {
  margin: 0;
  padding: 0;
}
  footer nav .footer-social a:hover {
    border: 0;
    text-decoration: none;
  }