/******************************************************************
Site Name: Chiltern Holistic Therapy
Author: Jamtastic Design | www.jamtasticdesign.co.uk

Stylesheet: Main Stylesheet
*****************************************************************/

/*********************
 GENERAL STYLES
*********************/
html,
body {
  /* height: 100%; */

}
body {
  font-family: 'Merriweather', serif;
  font-weight:100;
  font-size: 100%;
  line-height: 1.5;
  color: #565656;
}

.hide-on-mobile {
  display:none;
}

/********************
 WRAPPERS
********************/
.middle {
  width:100%;
  background-image:url('/wp-content/uploads/2013/09/stripe.png');
  border-top:30px solid #8bc75a;
  margin-bottom:30px;
  position:relative;
  text-align:center;
  margin-top:-10px;
}

.middle.contact-us, .middle.blog {
  border-top:3px solid #fff;
  padding-top:20px;
  overflow:hidden;
  padding-bottom:100px;
}

.middle .wrap {
  position:relative;
}

.middle .wrap.reflexology {
  padding-bottom:100px;
}

 .bottom-arrow {
  height:50px;
  width:100px;
  border-radius: 90px 90px 0 0;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 90px 90px 0 0;
  background-color:#8bc75a;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  z-index:1;
}

.bottom-triangle {
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  margin:auto;
  z-index:2;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: #6f2b57 transparent transparent transparent;
}

 .top-arrow {
  height:50px;
  width:100px;
  border-radius: 90px 90px 0 0;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 90px 90px 0 0;
  background-color:#8bc75a;
  position:absolute;
  top:-100px;
  left:0;
  right:0;
  margin:auto;
  z-index:1;
}

.top-triangle {
  position:absolute;
  top:-75px;
  left:0;
  right:0;
  margin:auto;
  z-index:2;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: #cf499a transparent transparent transparent;
}

.middle img {
  height:auto;
  max-width:90%;
  margin:15px 0px;
  z-index:11;
}

.middle .flower {
  background:url('/wp-content/uploads/2013/09/Chiltern-Holistic-Therapy-Banner-Logo1.png');
  right:0;
  top:300px;
  height:400px;
  width:213px;
  position:absolute;

  opacity:0.4;
}

.middle .fht-logo {
  position:absolute;
  left:0;
  bottom:15px;
}

.top .full-width {
  max-width:100%;
  height:auto;
}

.top .wrap {
  position:relative;
  height:auto;
  overflow:hidden;
  padding-bottom:100px;
}

.top .wrap h1 {
  color:#fff;
  font-weight:100;
  margin-bottom:15px;
  margin-top:15px;
  font-family: 'Ovo', serif;
}

.top .wrap p {
  color:#fff;
  font-size:17px;
  line-height:200%;
  font-weight:100;
  margin:0;
  margin-bottom:25px;
}

.top .wrap .logo img {
  margin-top:30px;
    max-width:100%;
  height:auto;
}

/********************
 TOP HEADER IMAGES
********************/

.top.homepage {
  position:relative;
  background-image:url('/wp-content/uploads/2013/09/top-image-dark.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.top.reflexology {
  position:relative;
  background-image:url('/wp-content/uploads/2013/09/reflexology-bg.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.top.indian {
  position:relative;
  background-image:url('http://chilternholistictherapy.co.uk/wp-content/uploads/2016/07/dreamstime_xl_20352019.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.top.hopi {
  position:relative;
  background-image:url('/wp-content/uploads/2013/09/indian-head.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.top.prices {
  position:relative;
  background-image:url('/wp-content/uploads/2013/09/prices-bg.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

.top.testimonials {
  position:relative;
  background-image:url('/wp-content/uploads/2013/09/testimonials-bg.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}

/********************
 CONTACT PAGE/CONTACT FOOTER
********************/

.contact-button {
  border:1px solid #fff;
  padding:8px 16px;
  border-radius:10px;
  background:none;
  color:#fff!important;
  text-transform:uppercase;
  font-weight:100;
  text-decoration:none;
  font-size:14px;
  margin-top:10px;
  font-family:'open sans';
}

.contact-button.green {
  background-color:#8bc75a;
  color:#fff!important;
}

.contact-button:hover {
  text-decoration:underline;
  color:#fff;
}

.contact-details {
  display:block;
}

.contact-details p {
   text-align:center!important;
}

.middle.contact-us .logo {
  display:block;
}

.contact-page-form {
  padding-left:0px;
}

.wrap.contact-us .ninecol {
  padding-left:0px;
}

.contact-page-form .tencol {
  padding-top:5px;
}

.contact-page-form hr {
  background-color:#aaa;
  max-width:750px;
  height:1px;
  border:0;
  margin-left:0;
  clear:both;
}

.contact-page-form label {
  padding-bottom:20px;
  padding-top:5px;
  text-align:center;
  position: relative;
  top:2px;
  color:#fff;
  font-family: 'Open Sans';

}

.contact-page-form input, .contact-page-form textarea {
  float:left;
  border:0;
  border-radius:8px;
  padding:7px;
  width:100%;
}

.contact-page-form input[type="submit"] {
  padding-right:20px;
  width:100px;
  background-color:#8bc75a;
  color:#fff;
  text-transform:uppercase;
  float:right;
  position:absolute;
  right:-35px;
  margin-top:15px;
  font-size:14px;
  text-align:center;
}


.sevencol.submit {
  position:relative;
  clear:both;
}

.sevencol.submit:after {

    content:'';
    display:block;
    position:absolute;
    top:22px;
    right:-30px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #ffffff;
}

.bottomflower {
  position:absolute;
  bottom:-3px;
  right:0;
  opacity:0.3;
}

.bottomflower img {
  margin:0;

}

/*********************
 BLOG
*********************/

.middle.blog {
  text-align:left;
}

.middle.blog h1 {
  color:#fff;
  font-family: 'Ovo', serif;
  font-size:30px;
}

.middle.blog p.byline {
  font-size:14px;
  margin-top:-10px;
}

.middle.blog .entry-content {
  margin-top:-20px;
}

.middle.blog a {
  color:#8bc75a;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
}

.middle.blog a:hover {
  color:#fff;
}



/*********************
03. LAYOUT & GRID STYLES
*********************/
.wrap {
  width: 96%;
  margin: 0 auto;
}
/*********************
04. LINK STYLES
*********************/
a,
a:visited {
  color: #f01d4f;
}

a:hover,
a:visited:hover,
a:focus,
a:visited:focus {
  color: #d10e3c;
}

a:link,
a:visited:link {

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}
/******************************************************************
  TYPOGRAPHY
******************************************************************/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  font-family:'open sans';
  text-rendering: optimizelegibility;
  font-weight: 400;
 
}
h1 a,
.h1 a,
h2 a,
.h2 a,
h3 a,
.h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a {
  text-decoration: none;
}
h1,
.h1 {
  font-size: 2.5em;
  line-height: 1.333em;
}
h2,
.h2 {
  font-size: 1.75em;
  line-height: 1.4em;
  margin-bottom: 0.375em;
}
h3,
.h3 {
  font-size: 1.125em;
}
h4,
.h4 {
  font-size: 1.1em;
  font-weight: 700;
}
h5,
.h5 {
  font-size: 0.846em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.middle .wrap h2 {
  color:#fff;
  font-weight:100;
  letter-spacing:2px;
  font-size:24px;
  margin:35px 0px 25px 0px;
  line-height:150%;
  
}

.middle .wrap h3 {
  color:#fff;
  font-weight:100;
  font-size:20px;
  line-height:220%;
}

.middle .wrap h3 span {
  color:#8bc75a;
  font-size:22px;
  font-weight:500;
}

.middle .wrap.contact-us p {
  text-align:left;
}

.green {
  color:#8bc75a!important;
}

h2.green {
  margin-bottom:0!important;
}

.special-offer {
  color:#f5e505!important;
}

.middle p {
  font-size:16px;
  font-weight:300;
  color:#fff;
  line-height:200%;
  letter-spacing:1px;
}

.middle strong {
  color:#8bc75a;
  font-size:22px;
  font-weight:100;
}

.middle a.email {
  color:#8bc75a;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
}

.middle a.email:hover {
  color:#fff;
}
/*********************
  HEADER SYTLES
*********************/

header.header {
  background-color:#8bc75a;
}

/*********************
  NAVIGATION 
*********************/

nav.Contact, nav.blog {
  padding-bottom:7px;
}

.dropdownMenu .dropdownButton {
  width:100%;
  max-width:959px;
  margin:0 auto;
  display:block;
  height:30px;
  font-size:12px;
  text-transform:uppercase;
  font-weight:100;
  color:#fff;
  font-family: 'Open Sans';
  margin-bottom:2px;
  line-height:28px;
  text-align:right;
  margin-top:2px;
}

.dropdownButton span {
  margin-right:10px;
  font-size:16px;
  display:block;
  position:relative;
  text-align:right;
  padding-right:20px;
  line-height:30px;
}

.dropdownButton span:after {
  content:'';
  background-color:#fff;
  height:12px;
  width:12px;
  position:absolute;
  top:8px;
  right:0px;
  
}
.nav {
  display:none;
  border-bottom: 0;


}
.nav li {

border:1px solid #fff;
margin-bottom:2px;
border-radius:3px;
}
.nav li a {
  font-family:'open sans';
  display: block;
  text-decoration: none;
  padding: 5px 10px;
  color:#fff;
  text-transform:uppercase;
  text-align:center;
  font-size:14px;

}
.nav li ul.sub-menu li a,
.nav li ul.children li a {
  padding-left: 30px;
}

.nav li.current_page_item a {
  font-weight:500;
}

/*********************
  POSTS & CONTENT STYLES
*********************/
#content {
 margin-top:3px;
}

.byline {
  color: #999;
}
/* entry content */
.entry-content {


}
.entry-content dd {
  margin-left: 0;
  font-size: 0.9em;
  color: #787878;
  margin-bottom: 1.5em;
}
.entry-content img {
  margin: 0 0 1.5em 0;
  max-width: 100%;
  height: auto;
}
.entry-content video,
.entry-content object {
  max-width: 100%;
  height: auto;
}
.entry-content pre {
  background: #eee;
  border: 1px solid #cecece;
  padding: 10px;
}
/* end .entry-content */
.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px;
  /* images inside wp-caption */

}
.wp-caption img {
  max-width: 100%;
  margin-bottom: 0;
  width: 100%;
}
.wp-caption p.wp-caption-text {
  font-size: 0.85em;
  margin: 4px 0 7px;
  text-align: center;
}

/******************************************************************
  PAGE NAVI STYLES
******************************************************************/
.page-navigation,
.wp-prev-next {
  margin: 1.1em 0 2.2em;
}
.bones_page_navi {


}
.bones_page_navi li {
  float: left;
  margin-left: 10px;
}
.bones_page_navi li a {
  padding: 3px 6px;
  display: block;
  text-decoration: none;
  position: relative;
}
.bones_page_navi li a:hover,
.bones_page_navi li a:focus {
  color: #f01d4f;
  text-decoration: underline;
}
.bones_page_navi li.bpn-current {
  padding: 3px 6px;
  border-bottom: 2px solid #f01d4f;
  position: relative;
}
.bones_page_navi li.bpn-current a {
  /* hovering on current page link */

}
.bones_page_navi li.bpn-prev-link,
.bones_page_navi li.bpn-next-link {
  font-weight: 700;
}
.bones_page_navi li.bpn-prev-link a,
.bones_page_navi li.bpn-next-link a {
  padding: 0;
}
.bones_page_navi li.bpn-prev-link a:hover,
.bones_page_navi li.bpn-next-link a:hover,
.bones_page_navi li.bpn-first-page-link a:hover,
.bones_page_navi li.bpn-last-page-link a:hover {
  background: none;
}
/* end .bones_page_navi */
/* fallback previous & next links */
.wp-prev-next .prev-link {
  float: left;
}
.wp-prev-next .next-link {
  float: right;
}
/* end .wp-prev-next */

/*********************
  FOOTER STYLES
*********************/
.footer {
  clear: both;
  background-image:url('/wp-content/uploads/2013/09/footer-background5.png');
  height:223px;
  position:relative;
  text-align: center;
}

.footer.contact-us {
  background-image:url('/wp-content/uploads/2013/09/contact-grass1.png')!important;
  margin-top:-90px;
}


#inner-footer {
  position:relative;
}

#inner-footer .copyright {
  position:relative;
  left:0;
  top:175px;
  font-family:'open sans';
}

#inner-footer .copyright a {
  color:#fff;
  text-decoration:none;
  font-size:16px;
  font-weight:100;
}

#inner-footer .copyright a:hover {
  text-decoration:underline;
}

#inner-footer .facebook {
  position: relative;
  right:0;
  top:110px;
}

#inner-footer .facebook:before {
  content:'';
  background-image:url('/wp-content/uploads/2013/09/fbook-logo.png');
  height:43px;
  width:43px;
  position:absolute;
  right:0;
  left:0;
  margin:auto;
  top:-45px;
  display:block;
}

#inner-footer .facebook a {
  text-transform:uppercase;
  font-size:16px;
  color:#fff;
  text-decoration:none;
  font-weight:100;
  font-family: 'open sans';
}

#inner-footer .facebook a:hover {
  text-decoration:underline;
}

.footer-contact .wrap {
  position:relative;
  text-align:center;
  top:40px;
}

.meeting-text {
  position:absolute;
  right:0;
  top:-30px;
}

.footer-contact .contact-form {
  display:inline-block;
  position:relative;
  top:-30px;
}

.footer-contact .contact-form p {
  font-size:16px;
  font-weight:300;
  color:#6d6e71;
  text-transform:uppercase;
  font-family:'open sans';
}

.footer-contact .contact-form input[type="text"] {
  font-size:12px;
  font-weight:300;
  color:#6d6e71;
  line-height: normal;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  padding:8px;
  width:180px;
  border:2px solid #ccc;
  text-align:center;
  text-transform:uppercase;
  height:38px;
}

.footer-contact .contact-form button {
  border:0;
  height:38px;
  line-height: normal
  padding:8px 5px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  position: relative;
  left:-10px;
  top:0px;
  font-size:14px;
  background: rgb(139,199,90); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(139,199,90,1) 0%, rgba(139,199,90,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139,199,90,1)), color-stop(100%,rgba(139,199,90,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(139,199,90,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(139,199,90,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(139,199,90,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(139,199,90,1) 0%,rgba(139,199,90,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bc75a', endColorstr='#8bc75a',GradientType=0 ); /* IE6-9 */
  color:#fff;
  text-transform:uppercase;
  font-weight:100;
  -webkit-transition:background 0.2s ease;
  -moz-transtion: all 0.2s ease;
}

.footer-contact .contact-form button:hover {
  background: rgb(139,199,90); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(139,199,90,1) 0%, rgba(116,198,49,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139,199,90,1)), color-stop(100%,rgba(116,198,49,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bc75a', endColorstr='#74c631',GradientType=0 ); /* IE6-9 */
  cursor:pointer;
}

.footer.contact-us {
  text-align:center;
}

div.warning-message, div.success-message {

  background: rgb(139,199,90); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(139,199,90,1) 0%, rgba(116,198,49,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139,199,90,1)), color-stop(100%,rgba(116,198,49,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(139,199,90,1) 0%,rgba(116,198,49,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8bc75a', endColorstr='#74c631',GradientType=0 ); /* IE6-9 */
  position:relative;
  border-radius:8px;
  padding:8px 5px;
  max-width:370px;
  margin-bottom:8px;
  -webkit-box-shadow: 0px 3px 3px rgba(50, 50, 50, 0.2);
  -moz-box-shadow:    0px 3px 3px rgba(50, 50, 50, 0.2);
  box-shadow:         0px 3px 3px rgba(50, 50, 50, 0.2);
  text-transform:uppercase;
}

div.warning-message img {
  position:absolute;
  left:5px;
  top:6px;
  height:25px;
  width:25px;
}

div.warning-message p, div.success-message p {

  font-size:14px!important;
  color:#fff!important;
  margin:0!important;
}

div.success-message {
    margin:0 auto;
    position:relative;
    top:-40px;
}
 
/********************************************************************
TABLET & SMALLER LAPTOPS
********************************************************************/

@media only screen and (min-width: 768px) {

  /*********************
   GRID
  *********************/

  .onecol {
    width: 5.801104972%;
  }

  .twocol {
    width: 14.364640883%;
  }

  .threecol {
    width: 22.928176794%;
  }

  .fourcol {
    width: 31.491712705%;
  }

  .fivecol {
    width: 40.055248616%;
  }

  .sixcol {
    width: 48.618784527%;
  }

  .sevencol {
    width: 57.182320438000005%;
  }

  .eightcol {
    width: 65.74585634900001%;
  }

  .ninecol {
    width: 74.30939226%;
  }

  .tencol {
    width: 82.87292817100001%;
  }

  .elevencol {
    width: 91.436464082%;
  }

  .twelvecol {
    width: 99.999999993%;
  }

  .onecol,
  .twocol,
  .threecol,
  .fourcol,
  .fivecol,
  .sixcol,
  .sevencol,
  .eightcol,
  .ninecol,
  .tencol,
  .elevencol,
  .twelvecol {
    position: relative;
    float: left;
    margin-left: 2.762430939%;
  }
  .first {
    margin-left: 0;
  }
  .last {
    float: right;
  }

  /*********************
  GENERAL STYLES
  *********************/

  .hide-on-mobile {
    display:none;
  }

  #inner-footer .copyright {
    position:absolute;
    left:0;
    top:110px;
  }

  #inner-footer .facebook {
    position: absolute;
    right:0;
    top:110px;
  }

  #inner-footer .facebook:before {
   left:-50px;
   margin:none;
    right:auto;
    top:-10px;
  }

  .footer-contact .contact-form input[type="text"] {
    width:350px;
  }

.contact-page-form label {
  padding-bottom:20px;
  padding-top:5px;
  float:left;
  position: relative;
  top:2px;
  color:#fff;
}

.contact-page-form input, .contact-page-form textarea {

  width:400px;
}

.contact-page-form {
  padding-left:50px;
}

.wrap.contact-us .ninecol {
  padding-left:50px;
}

.footer-contact .contact-form input[type="text"] {
  font-size:12px;
  width:325px;

}

.middle.contact-us .logo {
  position:absolute;
  top:-180px;
  left:0;
}

.contact-details {
  position:absolute;
  top:-120px;
  right:0;

}

.contact-details p {
   text-align:right!important;
}

.middle.contact-us {
  padding-top:190px;
  margin-bottom:0;
}

/*********************
LAYOUT & GRID STYLES
*********************/
.wrap {
  max-width: 960px;
}

/*********************
 NAVIGATION STYLES
 *********************/

.dropdownMenu .dropdownButton {
  display:none;
}
.dropdownButton span {
  display:none;
}

  .nav {
    display:block;
    border: 0;
    margin:35px 0px 20px 0px;
  }

  .nav * {
    margin:0;
    padding:0;
  }

  .nav ul {
    float:right;
  }

  .nav li {
    float: left;
    position: relative;
    margin-bottom:0;
    margin:-1px 10px;
        border:0;
        margin-bottom:12px;
  }

  .nav li a {
    border-bottom: 0;
    font-size:12px;
    font-weight:100;
    position:relative;
    letter-spacing:1px;
    color:#fff;
    padding:0;
    margin-bottom:-3px;


  }

 .nav li a:after {
    content: '|';
    color:#fff;
    font-size:16px;
    font-weight:100;
    position:absolute;
    margin-left:6px;
    top:-5px;
  }

  .nav li:last-child a:after {
    content:none;
  }

  .nav li a:hover,
  .nav li a:focus {
    color:#fff;
    text-decoration:underline;
  }

  .nav li.current_page_item a {
    font-weight:500;
    color:#fff;
  }

  .nav li.current_page_item a:hover {
    text-decoration:none!important;
  }

}

/********************************************************************
DESKTOP
********************************************************************/
@media only screen and (min-width: 1030px) {

  .hide-on-mobile {
    display:block;
  }

  .nav li {
    margin-bottom:0;
  }

}

}