/***** Reset *****/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,img,input,textarea,select,p,blockquote,th,td {margin:0px; padding:0px; color:#666}
table {border-collapse:collapse; border-spacing:0}
fieldset,img {border:0}
address,caption,cite,code,dfn,th,var {font-style:normal; font-weight:normal}
ol,ul {list-style:none}
caption,th {text-align:left} q:before,q:after {content:''}
abbr,acronym {border:0}

strong {
    color: #000;
}



/***** General Formatting *****/
html {background: #c3d0d9 url('../i/flower.jpg') no-repeat center 0 scroll}
body {font-size:62.5%; margin-top:9em}

h2,h3,h4,h5 {font-family:proxima-nova, helvetica, sans-serif; font-weight:700}
p,li,a,label,button,input {font-family:proxima-nova, helvetica, sans-serif; font-weight:600}

h1 {font-size:1.6em; display:block; font-family:Georgia, serif; font-weight:normal; font-style:italic; text-align:center; margin-bottom:1em; color:#4f4f4f}
h2 {font-size:1.8em; font-weight:normal}
h3 {font-size:1.4em; text-transform:uppercase; letter-spacing:3px; text-align:center; margin:1em 0}
h4 {font-size:1.0em; text-transform:uppercase; letter-spacing:2px; text-align:center; color:#666; margin:0.5em 0}
h5 {font-size:1.4em}
p, label {font-size:1.4em; color:#666; line-height:1.4em}

a {text-decoration:none; color:#666/*7e8a93*/}

.underline {height:1px; background-color:#ccc; border:0}
.footnote {font-size:1.2em}

label {display:inline-block; padding-bottom:0.25em}
input.numberinput {display:block; text-align:center; background-color:#fff; border:1px solid #ccc; padding:0.3em}
/*input {display:block; border:1px solid #ccc; padding:0.3em; width:100%}*/
textarea {border:1px solid #ccc; width:100%; height:6em; padding:0.5em}
button {border:none}
/*button {border:none; background-color:#666; padding:1em 2em; text-transform:uppercase; color:#fff}*/

.clear {clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}



/***** Page Structure *****/
.container {width:960px; margin:0 auto}
.header {margin-left:150px; position:relative}
.pageblurb {margin-left:150px; background-color:#c7d5e0; padding:1em 0; position:relative; zoom:1}
.content {margin-left:150px; position:relative}   /* Wrapper for the main content of the page */
.maincontent {background-color:#fff; padding:1%; width:98%; float:right}

.sidebar {
    width:125px;
    margin-right:15px;
    float:left;
    padding: 5px;
    -moz-transition: 150ms background;
    -webkit-transition: 150ms background;
    transition: 150ms background;
}
.sidebar:hover {
    background: #c3d0d9;
    background: rgba(255, 255, 255, 0.5);
}
.sidebar a {

}
.footer {margin:0 0 10em 150px; padding:3em 0}

.homeheader {margin-left:0; width:100%}  /* Centre header on sidebar-less homepage */

.backgroundimage {position:absolute; top:0; left:0 z-index:-100}


/***** Header *****/
.header h1 {margin: 0 0 28px; font-family: "proxima-nova", helvetica, sans-serif; font-weight: 600 !important; font-style: normal; -webkit-font-smoothing: antialiased; font-size: 2.4em; letter-spacing: 4px; text-transform: uppercase;}
.header h2 {font-size: 1.6em; display: block; font-family: Georgia, serif; font-weight: normal; font-style: italic; text-align: center; margin-bottom: 1em; color: #4f4f4f;}

/***** Top Navigation Menu *****/
#topnav {width:100%; text-align:center; margin-bottom:5em; position:relative}


#topnav li {display:inline-block; zoom:1; *display:inline; text-transform:uppercase; font-weight:bold; letter-spacing:3px; font-size:1.4em; padding:0; margin-top:1em}

#topnav a {padding:0.4em 1em; text-decoration:none; color:#4f4f4f;
-webkit-transition-property:background,color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:ease;
-moz-transition-property:background,color; -moz-transition-duration:0.3s; -moz-transition-timing-function:ease;
transition-property:background,color; transition-duration:0.3s; transition-timing-function:ease}

#topnav a:link {}
#topnav a:hover {background-color:#7e8a93; color:#fff}
#topnav a:visited {}
#topnav a:active {}

#topnav a.activepage {background-color:#7e8a93; color:#fff}




/***** Page blurb and introductory text *****/
.pageblurb {}
.pageblurb p {margin-bottom:0.5em}
.pageblurb .pageblurbheading {float:left; display:block; width:16%; padding:0 2%; margin-top:1em}
.pageblurb .pageblurbnav {position:absolute; bottom:1.5em; left:0; width:16%; padding:0 2%;}

a.directionaldown {float:left; display:block; width:50px; height:50px; background:url(../i/directionaldown.png) no-repeat; background-position:0px 0px; margin-right:9%}
a.directionaldown:link {}
a.directionaldown:hover {background-position:-50px 0px}
a.directionaldown:visited {}
a.directionaldown:active {}

a.directionalup {float:left; display:block; width:50px; height:50px; background:url(../i/directionalup.png) no-repeat; background-position:0px 0px; margin-right:9%}
a.directionalup:link {}
a.directionalup:hover {background-position:-50px 0px}
a.directionalup:visited {}
a.directionalup:active {}

a.directionalleft {float:right; display:block; width:50px; height:50px; background:url(../i/directionalleft.png) no-repeat; background-position:0px 0px; margin-right:9%}
a.directionalleft:link {}
a.directionalleft:hover {background-position:-50px 0px}
a.directionalleft:visited {}
a.directionalleft:active {}

.pageblurb .pageblurbcol1, .pageblurb .pageblurbcol2 {float:left; width:34%; padding:0 2%; margin-top:1em}



/***** Left Sidebar *****/
.sidebar hr {float:left; border:none; background-color:#666; height:3px; margin:2em 0; width:100%}
.sidebar hr:first-child {margin-top:0}
.sidebar h5 {margin:1em 0; font-size:1.6em}
.sidebar p {margin-bottom:1em}

/* Navigation menu above static appointment and certificate text */
.treatmentnav li {text-align:right; margin:1em 0}
.treatmentnav a {display:inline-block; font-size:1.4em; color:#7e8a93}
.treatmentnav a:link {}
.treatmentnav a:hover {}
.treatmentnav a:visited {}
.treatmentnav a:active {}

/* Static appointment and certificate text */
.appointment {float:left; width:100%; padding-bottom:3em}
.sidebar .giftcertificate {float:left; width:100%; padding-bottom:3em}

/* Facebook button */
.fbbutton {margin:0; font-family:proxima-nova, sans-serif; font-weight:600; font-size:1em}
.fbbutton img {float:left; margin-right:0.5em; height:2.4em}



/***** About *****/
#imgtreatment {width:100%}

.featurecell {position:relative; top:-3em; display:block; float:left; width:24%; margin:0 1%; background-color:#fff; padding:1% 1% 1% 1%}
.featurecell:first-child {margin-left:5%}
.featurecell p {font-size:1.2em; margin-bottom:1em}
.featurecell p a {
    color: #6e7780;
}
.featurecell h5 {
    color: #6e7780;
    margin-bottom: 1em;
}
.featurecell ul {list-style:disc; padding-left:1.5em}
.featurecell ul li {font-size:1.3em; line-height:1.5em}

.aboutsection {
    margin: 0 40px 40px;
    border-top: 1px solid #ccc;
}
.aboutsection h2 {
    font-size: 48px;
    text-transform: uppercase;
    color: #6e7780;
    padding: 10px 0;
    margin: 0 0 10px;
}
.aboutsection p {
    font-size: 1.2em;
    width: 380px;
    margin: 0 0 10px;
}
.aboutwrap {
    position: relative;
    min-height: 100px;
}

/***** Treatments *****/
.treatment h2 {font-size:6em; font-weight:700; text-transform:uppercase; letter-spacing:5px; text-align:center; margin-top:0.5em; color: #4c4c4c;
}
.treatment p {display:block; width:60%}

.sectiondivider {border:none; background-color:#666; height:3px; width:60%; margin:2em auto}
.subtitle {text-transform:uppercase; letter-spacing:2px; text-align:center; margin-bottom:1em}
.treatmentinfo {padding:5px 1%; margin-top:1em; overflow:hidden}
.treatmenttitle {display:block; width:90%; /*padding-bottom:0.5em;*/ margin-bottom:0em; font-size: 1.6em;
}
span.dottedhr {float:left; height:0; width:77%; margin:0.2em 1% 0 0; border-bottom:2px dotted #ccc}

p.treatmentlength, p.treatmentcost {width:7%; margin-left:1%; float:left; font-style:italic; font-family: Georgia, serif; font-weight:normal; margin-top: -5px;
}
p.treatmentdescription {width:60%; margin:0 40% 0.25em 0; float:left}
.treatmentinfo ul {width:100%; margin:1 0 0.5 0; }
.treatmentinfo ul a {font-size:1.3em}
.treatmentinfo ul li {
    float:right;
    display: none;
    margin-bottom: 5px;
}
.treatmentinfo ul li {
    border-right: 2px solid #7e8a93;
    padding-right: 1em;
    margin-right: 1em;
}
.treatmentinfo ul li:first-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}
.treatmentinfo ul li.moredetail {
    float:left;
    border-right: none;
    display: block;
}

.currentspecials {color:#ff5f46}
.special h5 {color:#ff5f46}

.activetreatmentinfo {background-color:#e9f0f6}

.special span.dottedhr {width:65%; margin-right:0}
.special span.solidorangehr {float:left; height:0; width:12%; margin:0.2em 1% 0em 0; border-bottom:8px solid #ff5f46}




/***** Treatment Detail *****/
.submenu {width:100%; display:block; overflow:hidden; margin:2em 0 4em 0}
.treatmentdetail .treatmentcost, .treatmentdetail .treatmentlength, .treatmentdetail .treatmentenquire {font-size:1.8em; font-style:normal}
.treatmentcost, .treatmentlength {float:left; margin-right:1em}
.treatmentenquire {float:right}

.treatmentdetail {padding:5% 10%; width:80%}
.treatmentdetail h2 {font-size:3em}
.treatmentdetail h5 {}
.sectionbreak {border:none; border-bottom:2px dotted #ccc; height:0px; margin-bottom:2em; width:100%}

.treatmentdetail .sectiondivider {width:80%}

.treatmentdetail p {margin-bottom:2em}
.treatmentdetailcol1 {width:55%; padding-right:5%; float:left}
.treatmentdetailcol2 {width:40%; float:left}
.treatmentdetail img {float:right; width:94%; padding:3%; margin:0; background-color:#f0f3f7}

.treatmentfaq h3 {text-transform:none; font-size:2.4em; letter-spacing:0; text-align:left; font-weight:normal}

.treatmentfaq {}
.treatmentfaq ul {list-style:disc}
.treatmentfaq ul li {margin:2em 0}
.treatmentfaq ul li div {margin:1em 0 0 4em; display:none}

.treatmentfaq a {font-size:1.4em; padding-bottom:2em; color:#666/*#7e8a93*/}




/***** Gift Certificate *****/
/*.giftcertificate {padding:5% 15%; width:70%}
.giftcertificate p {margin:0}
.giftcertificate hr.underline {margin-bottom:1em}
.giftcertificate hr.sectiondivider {width:100%}
.giftcertificate .footnote {margin-top:4em} */
.shopinputshort {display:inline-block; width:26%; margin:1em 9% 2em 0; position:relative}
.shopinputlong {display:inline-block; width:61.5%; margin:0 1% 3em 0}
.certificatedataentry {display:inline-block; margin:0 1% 0 0; position:relative}
.certificatedataentry label {display:block}

#certificatetotal {display:inline; margin-right:15%; position:relative}
.certificatecheckout {position:relative; margin:0}
h3.stepnumber {position:absolute; font-size:2.4em; display:block; width:1.5em; text-align:center; height:1.5em; margin:0; line-height:1.5em; left:-80px; border:3px solid #666; -webkit-border-radius:2em}



/***** Shop *****/
.shop {}
.shop .pageblurbcol1 {width:52%; padding:0 2% 0 3%}
.shop .pageblurbcol1 p {font-size:1.6em}
.shop .pageblurbcol2 {width:38%; padding:0 2% 0 3%}
.shop .pageblurbcol2 p {font-size:1.2em}
.shop .checkoutcell {
    margin-top: 1em;
}
.shop h1 {font-family:proxima-nova, sans-serif; font-weight:700; font-style:normal; font-size:2em; text-transform:uppercase; letter-spacing:3px; margin-top:2em}

.shop .subtitle {}
.shop .sectiondivider {width:60%}

.productgroup {
    margin-bottom: 60px;
}
.shopproduct {float:left; z-index:10; width:20%; height:40em; padding:0% 3% 0% 1.9%; margin: 2% 0 0 0; position:relative; background: url('../i/shopborder.png') no-repeat right top;
}
.shopproduct.omega {
    background: none;
}
.shopproduct img {width:60%; padding:0 20%; margin:0}

.shopproduct h2 {font-size:1.6em; margin:1em 0 0.75em 0; text-align:left; text-transform:none; letter-spacing:0}
.shopproduct p {font-size:1.2em}
.shopproduct .description {
    color #9f9f9f;
}

/* Formatting for products on special */
.specialproduct hr {zoom:1; width:50%; height:0.75em; border:0; background-color:#ff5f46; text-align:left; margin:0}
.specialproduct h2 {margin-top:0.55em}
.specialproduct h2 span {text-transform:uppercase; color:#ff5f46; font-weight:700}
.specialproduct .oldprice {text-decoration:line-through}
.specialproduct .price {color:#ff5f46}

.shopproduct a.shopproductreadmore {display:block; font-size:1.2em; margin:0.75em 0 1em 0; color:#444}
.shopproduct p.price {float:left}
.shopproduct a.addtocart {display:block; float:right; font-size:1.2em; line-height:1.4em}

.shopcertificate {height:15em}
.shopcertificate a.addtocart {float:left}

/* Cart Item counter and checkout link */
.checkoutfootercell {float:right; margin:6em 0 10em 0}
.checkoutfootercell a {display:block; font-size:1.3em; text-align:right; margin-bottom:0.5em}
.checkoutfootercell a.cartitems {padding:1.25em 1.5em; background-color:#7e8a93; color:#fff}



/***** Shop Detail *****/
.shopdetail {position:relative}

/* Main product text */
.productdetailwrapper {width:45%; margin-left:5%; display:inline-block; zoom:1; *display:inline; vertical-align:bottom}
.productdetailwrapper h2 {font-size:2em; width:80%; margin:1em 0 0.75em 0; text-align:left; text-transform:none; letter-spacing:0; color:#333}
.productdetailwrapper .productdetail {width:80%}
.productdetailwrapper hr {border:0; width:20%; height:2px; background-color:#999; margin:2em 0 3em 0}

/* Product Benefits and Recommendation lists */
.productinfocol1 {float:left; width:52%; margin-right:8%}
.productinfocol2 {float:left; width:40%}
.productinfocol1 p, .productinfocol2 p {font-size:1.3em}

/* Product quantity and purchasing links */
.productdetailwrapper .price {display:inline-block; width:100%; margin-top:1em}
.productdetailwrapper .qtyinput {display:inline; width:5em; padding:0.5em 0; margin:1.5em 2% 1em 0}
.productdetailwrapper .shopdetailqty {display:inline; text-transform:uppercase; margin:0 5% 0 2%}
.productdetailwrapper .shopdetailaddtocart {font-size:1.4em; text-transform:uppercase; color:#666; background-color:#fff; margin:0 5% 0 2%; cursor:pointer}

.consultreminder {margin:2em 0 0 5%; width:40%; font-size:1.3em}


/* Product image and arrow to next image*/
.productdetailimg {display:inline-block; zoom:1; *display:inline; width:20%; vertical-align:bottom}
.productdetailnext {display:inline-block; zoom:1; *display:inline; width:20%; margin-left:5%; vertical-align:bottom}
.productdetailimg img {width:100%}
.productdetailnext img {width:100%; margin-bottom:6em}

/* Cart Item counter and checkout link */
.checkoutcell {position:absolute; top:0; right:0; display:block; margin:6em 0 10em 0}
.checkoutcell a {display:block; font-size:1.3em; text-align:right; margin-bottom:0.5em}
.checkoutcell a.cartitems {padding:1.25em 1.5em; background-color:#7e8a93; color:#fff}
.checkoutcell a.checkout {margin:1em 1.5em 0 0}

/* Related product links at page bottom */
.related {margin-top:5em}
.shopdetail .shopproduct {height:35em}
.addtocart {float:right; padding:0; line-height:1.4em; font-size:1.2em; color:#666; background-color:#fff; margin:0 5% 0 2%; cursor:pointer}


/***** Footer *****/
.footer hr {border:none; border-bottom:2px dotted #999; height:0px; margin:4em 0 1em 0}
.footer ul li {float:left; text-transform:uppercase; letter-spacing:2px; color:#666; margin-right:2em}
.footer ul li.fbbutton {float:right; text-transform:none; letter-spacing:0; font-size:1.2em; margin:0}
.footer h4 > a:after, .footer h4 > span:after {display: inline-block; content: '|'; margin: 0 0 0 5px;}
.footer h4 > a:last-child:after, .footer h4 > span:last-child:after {display: none;}

.fbbutton img {float:left; margin-right:0.5em; height:2.4em}

.homefooter {margin-left:0; width:100%}














/***** MEDIA QUERIES *****/

/* Desktop screens */
@media screen and (min-width:810px) and (max-width:980px) {
.container {width:98%}
}



/* From tablets in portrait and below */
@media screen and (max-width:809px) {
html {background: #c3d0d9}
.container {width:100%}
.header, .pageblurb, .sidebar, .maincontent, .footer {width:98%; margin:0 1%}
.maincontent {padding:1em 0; float:none}
.content {margin-left:0}
.wrapper {position:relative}

body {margin-top:4em}

/* Linearise sidebar navigation links and insert into document flow */
.treatmentnav {width:98%; margin:0 1%; padding:0; background-color:#333; line-height:3em; text-align:center; position:absolute; left:0; top:0}
.treatmentnav li {display:inline; text-align:center; margin:1em 2em}
.treatmentnav a {font-size:1.4em; color:#7e8a93}
.treatmentnav br {display:none}

.treatment h2 {padding-top:0.8em}

/* Sidebar */
.treatmentdetailsidebar .treatmentnav {display:none}
.sidebar {margin-top:3em; padding-bottom:2em; border-bottom:2px dotted #999}
.sidebar hr {display:none}
.sidebar .fbbutton {display:none}
.sidebar .appointment {width:44%; padding:0 5% 0 1%; padding-bottom:1em}
.sidebar .giftcertificate {width:44%; padding:0 1% 0 5%; padding-bottom:1em}


/* Treatment Details */
.treatmentdetail {width:94%; padding:2em 2%}
.treatmentdetailcol1 {width:100%; padding-right:0; float:none}
.treatmentdetailcol2 {width:100%; float:none}
.treatmentdetail p {width:100%}
.treatmentdetail img {float:none; padding:1.5%; width:97%}
.treatmentfaq ul {margin-left:1.5em}
.treatmentfaq ul li div {margin-right:3%}


/* About */
.about {padding:1%; width:96%}


/* Shop */
.shop {padding:4em 0 1em 0}


/* Shop Details */
.shopdetail {padding-top:7em}
.checkoutcell {top:5em}
}



@media screen and (max-width:680px) {
.treatmentnav a {font-size:1.3em}
}



/* For smartphone in landscape and below */
@media screen and (min-width:320px) and (max-width:619px) {
#topnav {margin-bottom:2em}
#topnav li {/*width:30%*/ font-size:1.2em}

/* Linearise page elements */
.sidebar .appointment, .sidebar .giftcertificate {width:98%; padding:0 1%; padding-bottom:1em}

.features {padding-bottom:1em}
.featurecell {float:left; width:46%; top:0; margin-bottom:1em}
.featurecell:first-child {margin-left:1%}
.featurecell p {margin:1em 0 0.25em 0}

.treatment h2 {padding-top:0; margin-top:0.2em; font-size: 4.5em;}

.treatmentnav {display:none}
.pageblurb p {margin-bottom:1em}
.pageblurb .pageblurbcol1, .pageblurb .pageblurbcol2, .pageblurb .pageblurbheading {width:96%}
.pageblurbnav {display:none}


/* Shop */
.shop {padding-top:1em}
.shopproduct {width:26%; padding:0% 4% 0% 2.9%;}


/* Shop Details */
.productdetailimg {display:block; margin:0 auto; width:20%}
.productdetailnext {display:none}
.checkoutcell {margin-top:0; top:0}
.productdetailwrapper {width:90%; margin-left:5%;}
.productinfocol1 {float:none; width:100%; /*margin-right:8%*/}
.productinfocol2 {float:none; width:100%; margin-top:2em}
.productdetailwrapper .productdetail {width:100%}
.consultreminder {width:90%}
}



/* For smartphones in portrait */
@media screen and (max-width:479px) {
.submenu h2 {font-size:2.2em}

/*#topnav li.navshop {display:none}*/
#topnav li {font-size:1.2em; margin-bottom:0.5em}

/* Linearise About feature cells */
.featurecell {width:96%}

li.purchasegift, li.makebooking {visibility:none}

.treatmentinfo hr {width:90%}
.treatmentinfo ul {}
.treatmenttitle {margin-bottom:0}
p.treatmentdescription {width:100%; margin-right:0%}
p.treatmentcost, p.treatmentlength {margin-bottom:0.75em; width:15%}



.special hr {width:74%}
.special hr.hrhighlight {width:20%}


/* Shop */
.shop {padding-top:0.1em}
.shopproduct {width:39%; padding:0% 6% 0% 4.9%;}

.productdetailimg {display:block; margin:0 auto; width:30%}

.footer ul {display:none}

}


.clearfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0}.clearfix{display:inline-block}* html .clearfix{height:1%}.clearfix{display:block}

.clear {
    clear: both;
}