/***************************************
 Base Styles 
 ***************************************/

  /* Clear Elements */

    .group:before, .group:after {content: ""; display: table;} 
    .group:after {clear: both;}
    .group {zoom: 1;}


    /* Set up REM style */

  /*  html { font-size: 62.5%; } 
    body { font-size: 14px; font-size: 1.4rem; background: #fff;} 
    h1   { font-size: 24px; font-size: 2.4rem; } */


    /* Older browsers */
    html { font-size: 12px; background: #ffffff; scroll-behavior: smooth;}

      @media screen and (min-width: 320px){
      html { font-size: calc( 12px + (16 - 12) * (100vw - 320px) / (1200 - 320) ); }
  }

      @media screen and (min-width: 800px){
        html { font-size: 16px; }
  }

    /* Border Box */

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

.inner-position {display: table-cell; vertical-align: middle;}

/***************************************
 Fonts 
 ***************************************/

  /* 

    font-family: 'Karla', sans-serif;

    font-family: 'Playfair Display', serif;

light = 300
reg = 400
med = 500
semi-bold = 600
bold = 700
extra-bold = 700
blck = 900

  */



    h1 {font-family: 'Playfair Display', serif; font-weight: 400; font-style: normal; font-size: 60px; font-size: 3.75em; line-height: 1.2; margin: 0px; color: #2f4756; margin-bottom: 15px;}
    h2 {font-family: 'Playfair Display', serif; font-weight: 400; font-style: normal; font-size: 45px; font-size: 2.8125em; line-height: 1.2; margin: 0px;  color: #2f4756; margin-bottom: 15px;}
    h3 {font-family: 'Playfair Display', serif; font-weight: 400; font-style: normal; font-size: 20px; font-size: 1.25em; line-height: 1.2; margin: 0px; color: #2f4756; margin-bottom: 15px;}
    h4 {font-family: 'Playfair Display', serif; font-weight: 400; font-style: normal; font-size: 18px; font-size: 1.125em; line-height: 1.2; margin: 0px;  color: #2f4756; margin-bottom: 15px;}
    h5 {font-family: 'Playfair Display', serif; font-weight: 400; font-style: normal; font-size: 16px; font-size: 1.0em; line-height: 1.2; margin: 0px; color: #2f4756; margin-bottom: 15px;}
    h6 {font-family: 'Playfair Display', serif; font-weight: 400; font-style: normal; font-size: 14px; font-size: 0.875em; line-height: 1.2; margin: 0px; color: #2f4756; margin-bottom: 15px;}

    p {color: #2f4756; font-family: 'Karla', sans-serif;  font-size: 16px; font-size: 1em; line-height: 1.5;font-weight: 400; font-style: normal; margin-top: 0px; margin-bottom: 15px;}
    a {color: #2f4756; font-family: 'Karla', sans-serif; text-decoration: none; font-style: normal; }
    ul li, ol li, li {color: #2f4756; font-family: 'Karla', sans-serif; font-style: normal; }
    em {color: #2f4756; font-family: 'Karla', sans-serif; font-style: italic; }



/***************************************
Buttons 
***************************************/

.menu-btn {text-align:  center; display: inline-block; font-family: 'Karla', sans-serif;  font-weight: 600; font-style: normal; font-size: 16px; font-size: 1em; transition: all 0.5s ease 0s; padding: 10px 25px 13px 25px; text-decoration: none; color: #fff; position: relative;background: #996888;}
.menu-btn:hover {color: #fff; background: #845469;}
.menu-btn:after {content:"»"; display:  inline-block; margin-left:  10px; }


/*************************************** 
Animations
***************************************/


/*************************************** 
Header Bar 
***************************************/


/*************************************** 
Navigation 
***************************************/


/*************************************** 
Home  Page
***************************************/

.main-banner-wrapper {height:  90vh; min-height: 500px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4f0e8+66,ffffff+100&1+66,0+100 */
background: -moz-linear-gradient(top,  rgba(244,240,232,1) 66%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(244,240,232,1) 66%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(244,240,232,1) 66%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f0e8', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
 position:  relative;}
.main-banner-text {width:  100%; position:  absolute; top:  50%; transform: translateY(-50%);}
.main-banner-text-inner {text-align:  center;}
.main-banner-text-inner img {width: 375px; margin-bottom:  30px;}
.main-banner-text-inner a {display:  inline-block; margin-right:  5px;}
.main-banner-text-inner a img {width:  20px; vertical-align:  middle; margin-right:  5px; margin-bottom:  0px;}

.palms-banner {width:  100%; padding-top:  40%; position:  absolute; left: 50%; top:  -15%; transform: translateX(-50%); background:url('../img/palms.svg'); background-position:  center top; background-repeat:  no-repeat;}


.heading-wrapper {margin-bottom:  55px;}
.heading-wrapper h2 {font-size:  60px; font-size: 3.75em;}

.treatments-wrapper {margin-bottom:  55px;}
.treatments-box {padding:  30px; border-radius:  30px; }
.treatments-box.dark-grey h3 {color: #fff; font-size: 48px; font-size: 3em;}
.treatments-box.dark-grey h4 {color: #fff; font-size: 48px; font-size: 3em;}
.treatments-box.dark-grey p {color: #fff; }
.dark-grey {background: url('../img/leaf-bg.png') #5c686e; background-size: cover; background-position: top right;}

.treatments-box.light-grey h3 {color: #2f4756; font-size: 48px; font-size: 3em;}
.treatments-box.light-grey h4 {color: #2f4756; font-size: 48px; font-size: 3em;}
.light-grey {background: url('../img/leaf-2-bg.png') #f4f0e8; background-size: cover; background-position: top right;}

.contact-info a {display:  block; margin-bottom:  10px;}
.contact-info a img {width:  20px; vertical-align:  middle; margin-right:  5px;}

.footer {padding-top: 35px; background: #5c686e;}
.footer-top {display:  flex; align-items:  center; padding-bottom: 35px; border-bottom:  1px solid #fff;}
.footer-logo img {width:  150px;}
.footer-link {text-align:  right; }
.footer-link a {color: #fff;}
.footer-link a img {width:  20px; vertical-align:  middle; margin-right:  5px; margin-bottom:  0px;}

.footer-bottom {padding: 20px 20px;}
.footer-bottom p {text-align:  center; color: #fff; margin-bottom:  0px;}


/***************************************
Inner Pages
***************************************/



/*************************************** 
Blog
***************************************/

/***************************************
Footer
***************************************/




/***************************************
Form
***************************************/


/*************************************** 
Ecommerce - General  
***************************************/


/***************************************
Ecommerce - Listings 
***************************************/


/***************************************
Ecommerce - Item 
***************************************/


/***************************************
Ecommerce - Basket 
***************************************/


/***************************************
Ecommerce - Checkout 
***************************************/


/***************************************
Custom Modules
***************************************/


/***************************************
Custom Database
***************************************/



/***************************************
Media Queries
***************************************/



@media all and (max-width: 1024px) and (min-width: 0px) {

.palms-banner {top:  0%;}
}

@media all and (max-width: 650px) and (min-width: 0px) {


.main-banner-text-inner img {width:  275px;}
.main-banner-text-inner h1 {font-size:  45px; font-size: 2.8125em;}
.heading-wrapper h2 {font-size:  45px; font-size: 2.8125em; }
.treatments-box {margin-bottom:  20px;}

.contact-info {margin-bottom:  25px;}

.footer-top {flex-direction:  column;}
.footer-logo {margin-bottom:  25px;}
}

@media all and (max-width: 500px) and (min-width: 0px) {

.main-banner-text-inner a {display:  block; margin-bottom:  15px;}

}