/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 16px;
    line-height: 1.4;
	margin:0;
	padding:0;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 2px;
    border: 0;
    border-top: 2px dotted #EFE2E3;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles - base/mobile first
   ========================================================================== */
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

@font-face {
    font-family: 'JennaSueRegular';
    src: url('../fonts/JennaSue-webfont.eot');
    src: url('../fonts/JennaSue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/JennaSue-webfont.woff') format('woff'),
         url('../fonts/JennaSue-webfont.ttf') format('truetype'),
         url('../fonts/JennaSue-webfont.svg#JennaSueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'indulgeicons';
  src: url("/fonts/icons/font/indulgeicons.eot?54450746");
  src: url("/fonts/icons/font/indulgeicons.eot?54450746#iefix") format('embedded-opentype')
  , url("/fonts/icons/font/indulgeicons.woff?54450746") format('woff')
  , url("/fonts/icons/font/indulgeicons.ttf?54450746") format('truetype')
  , url("/fonts/icons/font/indulgeicons.svg?54450746#indulgeicons") format('svg');
  font-weight: normal;
  font-style: normal;
}




[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: 'indulgeicons';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
/* opacity .8 */
/* fix buttons height, for twitter bootstrap */
  line-height: 1em;
/* Animation center compensation - magrins should be symmetric */
/* remove if not needed */
  margin-left: 0.2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-phone:before { content: '\e802'; }
.icon-star:before { content: '\e031'; } /* '?' */
.icon-indent-right:before { content: '\e08a'; } /* '?' */
.icon-indent-left:before { content: '\e08b'; } /* '?' */
.icon-facebook:before { content: '\e800'; } /* '?' */
.icon-heart-circled:before { content: '\e0b0'; } /* '?' */
.icon-heart:before { content: '\e0b1'; } /* '?' */
.icon-align-justify:before { content: '\e0d8'; } /* '?' */
.icon-heart-empty:before { content: '\e0e1'; } /* '?' */
.icon-mail:before { content: '\e801'; } /* '?' */
.icon-garden:before { content: '\e81a'; } /* '?' */
   
body {
	background: #fff;	
	font-family: Helvetica,Arial,sans-serif;
	font-size:0.9em;
}
.intro {
	font-size:1.2em;	
	color:#B86770;
}

	p.intro {
	

	}

#contact-details {
	float: right;
}


#site-container {
	min-width: 360px;
	max-width:980px;
	margin:10px auto 40px;
	/* box-shadow: 0 0 11px 1px #ab9898; */
	box-shadow: 0 0 21px 4px rgba(100,0,0,0.1);
	background: #fff;
	position: relative;
	padding:20px;
	z-index: 100;
	overflow: hidden;
}

#menutrigger {
	position: absolute;
	right:0;
	top:0;
	display: inline-block;
	padding:1em;
	z-index: 1001;
	color: #B86770;
	font-size:1.2em;
}

header {
	height:115px;
	background: #fff;
	/*position: relative;*/
	border-bottom: 1px solid #EFE2E3;
	width:100%;
}

footer {
	font-size:100%;
	color:#dbdbdb;
	text-align: center;
	padding:0;
	margin:2em 0;
	
}
#right-links {
	float: none;
	position: absolute;
	right:0;
	bottom:0;
	color: #8a8787;
	width:100%;
	margin:1em 0 0;
	height:60px;
	border-top:1px solid #F6F1F1;
	border-bottom:1px solid #F6F1F1;
	
}
#right-links ul {
	list-style: none;
	font-size:1.1em;
	margin:0.3em 0 0 0;
	padding:0;
}
#right-links li {
	float: left;
	width:33%;
	margin:0;
	padding:0;
	text-align: center;
	color: #B86770;
	
}
#right-links li span {
	display: block;
}

#right-links a {
	color: #B86770
}

#nav {
	display: none;	
	z-index: 1000;
}

#nav:target {
	display: block;
	width:100%;
	background: #000;	
	position: absolute;
	top:0;
	left:0;	
	font-size: 1.5em;
	font-family: Helvetica;
	z-index: 1001;
	opacity: 0.8;	
}

#nav:target ul {
	margin:0;
	padding:0;
}

#nav:target li {
	display: block;
	border-bottom: 1px solid #ccc;	
}

#nav:target li a {
	color: #fff;
	position: relative;
	z-index: 1;
	height: 2.5em;
	line-height: 2.5em;
	display: block;
	text-indent: 0.2em;
	font-size:1.1em;
	
}
#nav #back {
	display: none;
}
#nav:target #back  {
  /* establish a positioning context for the closer */
  position: relative;
  border-bottom: 0;
  display: block;
}
#back a {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    bottom: -101em;
    display: block !important;
    height: auto !important;
    left: 0;
    line-height: 1;
    position: absolute !important;
    right: 0;
    text-indent: -999em;
    top: -101em;
    z-index: 0 !important;
}

#nav:target ul li ul {
	display: none;
}

#content {
	padding:20px 10px;
	margin-bottom: 3em;
}

a {
	text-decoration: none
}

h1 {
	color: #b86770;
	font-family: 'JennaSueRegular',"Helvetica","Arial",'sans-serif';
	font-size: 3.5em;
	line-height: 0.5;
	margin:0;
	padding:0;
	font-weight: 300;
}
h1 span {
	color:#ccc;
	font-size:0.3em;
	text-align: right;
}
h3 {
	font-family: "Helvetica","Arial",'sans-serif';
}
h5 {
	color: #ccc;
	font-style: italic;
}
#content .grey {
	color:#8a8787;
}
#content .pink {
	color: #B86770;	
}

.tbmargin {
	margin:2em 0;
}
.bmargin {
	margin:0 0 0.5em;
}

.center {
	text-align: center
}
.grid-2,.grid-3 {
	margin-bottom: 1em;
}
.grid-2.mobile {
	float: left;
	width:49.5%;
}

.popup-gallery .grid-4 {
	margin-right:5%;
}
.popup-gallery a {
	display: block;
	height: auto;
}


#logo {
	display:block;float:left;width:153px
}

#heading {
	color: #B86770;
    font-family: 'JennaSueRegular',"Helvetica","Arial",'sans-serif';
    font-size: 2.5em;
    font-weight: 300;
    left: 2.2em;
    line-height: 0.8em;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.1em;
}
#subheading {
	position: absolute;
	top:0.8em;
	left:4.4em;
	font-size:1.8em;
}

h2 {
	color:#4d0b31;
	margin:0.5em 0;
	font-weight: 300;
	font-family: 'JennaSueRegular',"Helvetica","Arial",'sans-serif';
	font-size:3em;
	line-height: 1em;
}

#banners {

	margin:0 auto 20px;
	box-shadow: 0 2px 3px 1px #999;
}
img {
	max-width: 100%;
}

form label {
	float: left;
	width:35%;
	padding:0.5em 0;
}
form .inp {
	float: left;
	width:60%;
	border:1px solid #dbdbdb;
	padding:0.5em;
	font-size:110%;
}
form label, form .inp {
	margin:0 0 1em;
}

.btn {
	display: inline-block;
	border:0;
	background: #B86770;
	color: #fff;
	padding:0.5em;
	border-radius: 0.2em 0.2em;
	box-shadow: 1px 1px 2px 2px #ccc;
}

#mapframe {
	width:330px;
	height:330px;
}

/* ==========================================================================
   Treatments
   ========================================================================== */

.backtolist {
	display: block;
	color: #8a8787;
	font-size:1.2em;
	text-align: center;
	margin:1em 0;
}

.treatment h3 {
	width:100%;
	display: block;
	color: #4D0B31;
	border-bottom: 1px dotted #4D0B31;
	font-weight: 300;
	font-style: italic;
	clear: both;
	margin:1.5em 0;
}
.treatment h5 {
	font-style: normal;
	font-family: Arial;
	font-weight: 300;
	color:#8a8787;
	width:100%;
	margin: 0;
	font-size:1em;
	
}
.treatment h3 span, .treatment h5 span {
	float: right;
	display: inline-block;
	margin:0 0.5em;
	font-style:normal
}
.treatment h3 span:first-child {
	color: #8a8787;
}

.treatment h3 span:last-child {
	color: #B86770;
}
.treatment ul {
	list-style: none;
	padding:0;
	margin:0;
}
.treatment p {
	font-size: 1.1em;
	color: #B86770;
}
.treatment ul:before {
	
}
.treatment ul li {
	float: left;
	display: inline-block;
	margin:0 0.2em;
	text-transform: lowercase;
}
.treatment ul li:first-child {
	margin:0;
}
.treatment ul li:first-child:before {
	content: '{';
}
.treatment ul li:after {
	content: ',';
}
.treatment ul li:last-child:after {
	content : '}';
}

.section {
	display: block;
}



/*show section if targeted or old ie*/
/*.lt-ie9 .section, .section:target, #viewallcontainer .section {
	display: block;
}*/

.section h2 {
	background: url(/images/section-divider.png) no-repeat left;
	height: 44px;
	padding-left:67px;
	padding-top:0.3em;
	color: #B86770;
	font-size:3.5em;
	line-height: 0.5em;
}

#treatment-welcome a {
	display: block;
	padding:1em;
	font-size:1.2em;
	border-bottom:1px solid #dbdbdb;
	color:#8a8787;
	width:100%;
	
}

#treatment-welcome a:active {
	color: red;
}

#treatment-welcome a:first-child {
	border-top:1px solid #dbdbdb;
}


/*testimonials*/

.testimonial {
	margin:1em 0;
	padding:10px 20px 20px 0;
}
.testimonial q {
	font-style: italic;
	font-size:1.2em;
}
.testimonial p {
	margin:0.5em 0 0;
	padding:0;
	font-size:1.1em;
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

#nav .subnav-container {
	display: none;
}

/* ==========================================================================
   Tablet styles.   
   ========================================================================== */
@media screen and (min-width:33em) and (max-width: 64em) {
/* Styles */
	#content {
		font-size:1.3em;
	}
	#nav ul li {
		/*width:22.5%;		*/
		text-align: center;
	}

	#nav ul li:hover .subnav-container {
		display: none;
	}
	.mobonly {
		display: none;
	}
}

/* ==========================================================================
Desktop Styles
   ========================================================================== */

@media only screen and (min-width: 34em) {
	body {
		font-size:0.75em;		
	}
	#heading {
		left:2em;
	}
	#subheading {
		
		font-size:3.5em;
	}
	footer {
		display: block;
	}
		.mobonly {
		display: none;
	}


#left-stuff {
	float: left;
	width:60%;
}
	

	.floatleft {
		float: left;	
	}
	.floatright {
		float: right;
	}
	
	.grid-2 {
		width:49.5%;
		float: left;

	}
	.grid-3 {
		width:33.3%;
		float: left;
	}
	.grid-4 {
		width:25%;
		float: left;
	}
	
	.pad {
		padding:2em;
	}
	
	header {
		border:0;
	}	
	#menutrigger {
		display: none;
	}
	#nav  {
		display: block;
		border:1px solid #EFE2E3;
		border-left:0;
		border-right:0;	
		margin:0;
		padding:0;
		min-height: 32px;
	}
	
	#nav ul {
		list-style: none;
		float: left;
		width:100%;
		position: relative;
		margin:0;
		padding:0;
	}
	
	#nav ul li {
		float: left;
		width: 14.28%;
		height: 32px;
		position: relative;
	/*	margin-left:1px;	
		margin-right: 10px;*/
		text-align: center;
		border-left:1px solid #fff;
		border-right:1px solid #fff;		
	}
	
	
	#nav ul li a {
		text-transform: capitalize;		
		font-size:1.2em;
		font-family: georgia,arial,sans-serif;
		display: block;
		height:32px;
		line-height: 2.1em;
		color:#4d0b31;
	}
	

		
		
	.panel-left,.panel-right {
		float: left;
		width:50%;
		
	}
	.panel-left {
		
		
		border-right: 2px dotted #EFE2E3;
	}
	.panel-right {
		width:49%;
		
	}	
	#heading {
		font-size:5em;
	}
	#subheading {
		left:5em;
	}
	#mapframe {
		width:425px;
		height:350px;
	}
}

@media only screen and (min-width: 64em) {

	#right-links {
		border:0;
	}

	
header {
	position: relative;
}
#right-links {
	float: left;
	width:40%;
	display: block;
	position: relative;
	top: 40px;
	border:0;
}

#right-links ul {
	
	list-style: none;
	font-size: 1.3em;
	
}
#right-links ul li {

	color: #B86770;
	
	float: left;
	/*padding-left:20px;*/
	margin-bottom: 0.2em;
}

#right-links ul li a {
	color: #B86770;
	
}
	
	#nav ul li:hover {
		
		border-bottom: 0;
		border-top:0;
	
	}
	#nav ul li.parent:hover {
		/*width:16.4555555%;*/
		border-left:1px solid #EFE2E3;
		border-right:1px solid #EFE2E3;
		
	}
	#nav ul li:hover a {
		
		background: -webkit-linear-gradient(#EFE2E3 0%, #ffffff 100%);
		background: -moz-linear-gradient(#EFE2E3 0%, #ffffff 100%);
		background: -ms-linear-gradient(#EFE2E3 0%, #ffffff 100%);
		background: -o-linear-gradient(#EFE2E3 0%, #ffffff 100%);
		background: linear-gradient(#EFE2E3 0%, #ffffff 100%);
	
	}
	#nav ul li.parent:hover .mask {
		background: #fff;
		position: relative;
		height:1px;
		width:100%;
		z-index: 2000;
	}
	
	#nav ul li .subnav-container {
		display: none;
	}
	
	#nav ul li:hover .subnav-container {
		position: absolute;
		border:1px solid #EFE2E3;		
		border-radius: 5px 5px;
		border-top-left-radius: 0;
		width:19em;
		display: block;
		top:32px;
		background: #fff;
		left:-1px;
		z-index: 1000;
	}
	#nav .subnav-container ul {
		margin: 0.5em;
	}
	#nav .subnav-container ul li {
		float: none;
		height: auto;
		margin:0.1em 2em;
		width:100%;
		background: none;
		border: 0;
	}
	#nav .subnav-container ul li:hover {
		border:0;
	}
	#nav .subnav-container ul li a {
		background: none;	
		padding:0;	
		text-align: left;
		font-size: 130%;
	}
	#treatment-welcome {
		display: block;
	}
/*	#treatment-welcome:target {
		display: block;
	}
*/	#treatment-welcome a {
		
		font-size:1em;
		border:0;
		margin:0;
		padding:0;
	}

#right-links li {

	width:28%;

	
}


.popup-gallery a {
	display: block;
	height: 250px;
}

	
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}



/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }



    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}