@font-face {
    font-family: 'LB';
    src: url('../../font/lato-bold.eot');
    src: url('../../font/lato-bold.eot') format('embedded-opentype'),
         url('../../font/lato-bold.woff') format('woff'),
         url('../../font/lato-bold.ttf') format('truetype'),
         url('../../font/lato-bold.svg#LatoBold') format('svg');
}

@font-face {
    font-family: 'LR';
    src: url('../../font/lato-regular.eot');
    src: url('../../font/lato-regular.eot') format('embedded-opentype'),
         url('../../font/lato-regular.woff') format('woff'),
         url('../../font/lato-regular.ttf') format('truetype'),
         url('../../font/lato-regular.svg#LatoRegular') format('svg');
}

@font-face {
    font-family: 'SR';
    src: url('../../font/spinnaker-regular.eot');
    src: url('../../font/spinnaker-regular.eot') format('embedded-opentype'),
         url('../../font/spinnaker-regular.woff') format('woff'),
         url('../../font/spinnaker-regular.ttf') format('truetype'),
         url('../../font/spinnaker-regular.svg#SpinnakerRegular') format('svg');
}


@font-face {
	font-family: 'icomoon';
	src:url('../../font/icomoon.eot?a24o8r');
	src:url('../../font/icomoon.eot?#iefixa24o8r') format('embedded-opentype'),
		url('../../font/icomoon.woff?a24o8r') format('woff'),
		url('../../font/icomoon.ttf?a24o8r') format('truetype'),
		url('../../font/icomoon.svg?a24o8r#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

.icon-phone:before {content: "\e601";}
.icon-location:before {content: "\e602";}
.icon-clock:before {content: "\e603";}
.icon-arrow-right:before {content: "\e600";}

/* GLOBAL */
* {font-family: 'LR', Geneva, Verdana, sans-serif; font-size: 14px; color: #333; font-weight: 400;}
html {background: #000}
body {height: 100%; width: 100%; margin: 0 auto; padding: 0; position: relative;}
a, a:focus, a:visited {font: inherit; text-decoration: none; color:inherit;}
h2 {font-family: 'LB'; font-size: 32px; line-height: 1.2em; color: #b52399; margin-bottom: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em;}
h3 {font-family: 'LB'; font-size: 28px; line-height: 1.2em; color: #b52399; margin-bottom: 15px; font-weight: 400; text-transform: uppercase;text-transform: none; letter-spacing: 0.05em;}
h3 + h3 {margin-top: -15px;}
h4 {font-family: 'SR'; font-size: 16px; line-height: 1.4em; color: #fff; font-weight: 400;}
h5 {font-family: 'LR'; font-size: 12px; line-height: 1.2em; color: #818181; font-weight: 400;}
h6 {font-family: 'LR'; font-size: 14px; line-height: 1.2em; color: #c39; font-weight: 400; letter-spacing: 0.05em;}
p, li {font-family: 'LR'; font-size: 16px; color: #000; line-height: 1.4em; margin-bottom: 1.5em;}
li {margin-bottom: 0;}
span {font-family: inherit; font-size: inherit; color: inherit;}
strong {font-weight: 600;}
hr {display: block; height: 1px; line-height: 1px; border-top: 2px solid #d29f70; margin: 10px 0;}
blockquote * {padding:0 15px 0 20%; font-family: Georgia; font-size: 24px; line-height: 1.25em; color:#a67c52; font-style:italic; text-align: right; border-right: 2px solid #a67c52; margin-right: 10px;}
img {border:0; max-width: 100%; margin-bottom: 0px; line-height: 1em;}
.wrap {min-width: 320px; width: 100%; max-width: 1200px; margin: 0 auto; padding:0 15px;-webkit-box-sizing: border-box; box-sizing: border-box;-moz-box-sizing: border-box; position: relative; z-index: 200;}
.grid-item {float: left;}
.clear {clear: both;}
.clearfix:after {display: block; content: ""; clear: both;}
iframe {width: 100%; height: 100%;}
#toTop {width:42px;height:42px; background: #d51116; border-radius: 21px; -webkit-border-radius: 21px; -moz-border-radius: 21px; text-align:center;position:fixed;bottom:10px;right:15px;cursor:pointer;display:none; z-index:112; opacity: 0.6;}
#toTop span {font-size: 30px; color: #dadada; position: absolute; left: 6px; top: 5px;}


/* HEADER */
#header {width: 100%; position: fixed; background: rgba(0,0,0,0.5); z-index: 1000;}
#header:before {display: block; content: ""; width: 100%; height: 30px; background: #b52399;}
#header.is_stuck {background: rgba(0,0,0,0.9)}
#logo {margin: 10px 0 0px;}
#logo a {display: block; margin: 0; padding: 0; line-height: 1em;}
#v-address {font-family: 'SR'; font-size: 14px; line-height: 1.4em; color: #e6e6e6; text-align: right; position: absolute; top: -24px; right: 29px;}

/* NAV */
#nav {float: right; margin: 30px 0 30px;}
#nav ul {float: right;}
#nav li {display: inline-block; float: left; margin-left: 0px; padding: 0px; position: relative;}
#nav a {font-family: 'SR';display: block; padding: 5px 13px; font-size: 13px; line-height: 1em; color: #e6e6e6; border: 2px solid transparent; text-align: center; text-transform: uppercase;}
#nav li.last a {}
#nav a:hover {color: #b52399;}
#nav li.active a, #nav li.active a:hover {border: 2px solid #e738a0; color: #fff;}
.slicknav_menu {display: none;}

/* TITLE */
#title {display: block; width: 100%; height: 200px; padding-top: 175px;}
#title:before {display: block; content: ""; width: 100%; height: 697px; position: fixed; top: 0px; left: 0; background: url(../../images/bg-contact.jpg) top center no-repeat; z-index: 10}
#title h1 {display: block; font-family: 'LB'; font-size: 44px; line-height: 1em; color: #ee79d8; font-weight: 400; text-align: center; margin: 0px 0 15px; padding: 0 0 35px; background: url(../../images/flower-border.svg) center bottom no-repeat; position: relative; text-transform: uppercase; letter-spacing: 0.05em;}
#title h1:before, #title h1:after {display: block; content: ""; width: 20%; height: 1px; background: #a4800b; position: absolute; bottom: 10px;}
#title h1:before {left: 25%;}
#title h1:after {right: 25%;}
#title h4 {display: block; text-align: center;padding: 0 15%;}


/* HOME */
#feature {width: 100%; padding-top: 40px; min-height: 200px; background: #fff url(../../images/crossed-pattern.png);}
#feature li div {display: block; padding: 10px; margin-bottom: 50px; border: 1px solid #8e8e8e; position: relative; background: #fff;}
#feature h3 {display: block; padding: 10px 0px 10px; font-family: 'LR'; font-size: 20px; color: #000; text-transform: uppercase; text-align: center; position: relative; letter-spacing: 0.05em;}
#feature h3:after {display: block; content: ""; width:50%; height: 1px; background: #000; position: absolute; left: 25%; bottom: -5px; }
#feature h6 {display: block; padding: 0px 0px 0px; margin-bottom: -15px; text-align: center; }
#f-deal:after, #f-gift:after, #f-massage:after, #f-contact:after {display: block; content: ""; width: 70px; height: 40px; background: #fff; border: 1px solid #8e8e8e; position: relative; margin: 0px auto 0; top: 30px; }
#f-deal:after {background: #fff url(../../images/flower.svg) center center no-repeat;background-size: 80%; fill:#8e8e8e;}
#f-gift:after {background: #fff url(../../images/towel.svg) center center no-repeat;background-size: 80%;}
#f-massage:after {background: #fff url(../../images/aroma.svg) center center no-repeat;background-size: 80%;}
#f-contact:after {background: #fff url(../../images/stone.svg) center center no-repeat;background-size: 80%;}
#title.home {height: auto; padding: 55px 0 30px; background: #606;}
#title.home:before {display: none;}
#title.home h1 {display: block; font-family: 'LB'; font-size: 44px; line-height: 1em; color: #ee79d8; font-weight: 400; text-align: center; margin: 0px 0 38px; padding: 0 0 50px; background: url(../../images/flower-border.svg) center bottom no-repeat; position: relative; text-transform: uppercase; letter-spacing: 0.05em;}
#title.home h1:before, #title.home h1:after {display: block; content: ""; width: 20%; height: 1px; background: #a4800b; position: absolute; bottom: 10px;}
#title.home h1:before {left: 25%;}
#title.home h1:after {right: 25%;}
#title.home h4 {font-family: 'LR'; line-height: 1.8em;padding: 0 15%;display: block; text-align: justify;}


/* SERVICES */
.link-img {display: block; padding: 10px; border: 1px solid #8e8e8e; background: #fff;}
.sub-content {position: relative; padding-top: 15px; height: 120px; margin-bottom: 25px;}
.sub-content h3 {display: block; font-family: 'SR'; font-size: 18px; letter-spacing: 0.05em; color: #000; text-align: center; position: relative; text-transform: uppercase;}
.sub-content h3:after {display: block; content: ""; width: 8px; height: 8px; background:#a4800b; transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); position: absolute; left: 48.5%; bottom: -7px; }
.link-h3 {display: block; position: relative; padding-bottom: 15px;}
.link-h3:before, .link-h3:after {display: block; content: ""; width: 35%; height: 1px; background: #a4800b; position: absolute; bottom: -5px;}
.link-h3:before {left: 10%;}
.link-h3:after {right: 10%;}
.link-h3:hover {color: #a4800b;}
.paypal table {width: 100%;}
.paypal td {font-size: 14px; margin-bottom: 5px;}
.paypal input, .paypal input:focus, .paypal select, .paypal select:focus {font-size: 14px; width: 100%; border: 1px solid #ccc; padding: 2px; margin-bottom: 10px; box-sizing: border-box;-moz-box-sizing: border-box;}
.paypal option {padding: 0 3px;}
.paypal input[type=image] {width: auto; max-width: 100%; border: none; margin-top: 5px;}
.buttons {display: block; width: 100%; text-align: center; position: absolute; left: 0; bottom: 0px; padding: 10px 0 5px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.button, a.button:visited {display: inline-block; font-family: 'SR'; font-size: 14px; width: 98px; padding: 5px 0; margin: 0 5px 5px; color: #000; text-align: center; cursor: pointer; border: 2px solid #a4800b; text-transform: uppercase;}
.button:hover {background: #a4800b; color: #fff;}
.sub-content .paypal {display: block; padding:10px 20px; width: 100%; border: 1px solid #8e8e8e; border-top: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; background: #fff; position: absolute; left: 0; bottom: 0px; z-index: -200; opacity: 0;}
.paypal .close {font-size: 16px; line-height: 0.8em; color: #ccc; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; position: absolute; top: 5px; right: 10px; text-align: center; cursor:pointer;}


/* MAIN */
#content {width: 100%; background: #fff; padding: 50px 0; overflow: hidden; position: relative; z-index: 20;}
#main-img {margin-left: 4%; margin-bottom: 30px;}
#main-img > img {padding: 10px; border: 1px solid #8e8e8e; margin-bottom: 37px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
#massage-content li, #main-content li {padding-left: 35px; position: relative;}
#massage-content li:before, #main-content li:before {font-family: 'icomoon'; content: "\e600"; color:#b52399; position: absolute; top: 4px; left: 5px; }
.icon-arrow-right:before {content: "\e600";}
#paypal {width: 40%; padding: 0 0px 25px 30px; float: right;}
#sub-nav ul {padding: 5px 15px; border: 3px solid #a4800b;}
#sub-nav a {display: block; font-family: 'SR'; font-size: 14px; padding: 10px 0; border-bottom: 1px solid #a4800b; text-transform: uppercase; letter-spacing: 1px;}
#sub-nav li.last a {border: none;}

/* CONTACT */
#title.contact {height: auto;}
#contact-form {width: 100%; margin: 30px 0 30px -25px;}
#contact-form input, #contact-form input:focus, #contact-form textarea, #contact-form textarea:focus {width: 100%; padding: 10px 15px; font-family: 'SR'; font-size: 18px; color: #fff; border: 1px solid #fff;margin-bottom: 25px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} 
#contact-form input:focus, #contact-form textarea:focus {background: rgba(0,0,0,0.7)}
#cf-submit {display: block; width: 100%; text-align: center; margin-bottom: 70px;}
#contact-form #submit {display: inline-block; width: auto; padding: 15px 65px; font-size: 18px; clear: both; margin: 0 auto; color: #fff; text-transform: uppercase; position: relative; left: 10px; border: solid 1px #fff; letter-spacing: 0.05em;}

.placeholder {color: #fff;}
::-webkit-input-placeholder {color: #fff;}
:-moz-placeholder {color: #fff;}
::-moz-placeholder { color: #fff;}
:-ms-input-placeholder {color: #fff;}
#contact-content {display: block; float: none; margin: 0 auto;}
#contact-info {margin-left: -25px;}
#contact-info span  {display: block; font-size: 36px; color: #a4800b; text-align: center; margin-bottom: 25px;}
#contact-info p {display: block; padding-top: 25px; font-family: 'SR'; font-size: 16px; line-height: 1.5em; color: #fff; text-align: center; position: relative;}
#contact-info p:before {display: block; content: ""; width: 80%; height: 1px; background: #a4800b; position: absolute; top: 0; left: 10%;}
#contact-info p:after {display: block; content: ""; width: 100%; height: 15px; position: absolute; top: -7px; left: 0%; fill: #a4800; text-align: center; background: url(../../images/flower-gold.svg) top center no-repeat; background-size: 50px;}
#map {width: 100%; padding: 0 10px; margin-left: -10px; height: 400px; margin-bottom: 30px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

/* Footer */
#footer {background: #000; padding:10px 15px; text-align: center; clear: both; position: relative; z-index: 100;}
#footer h5 {display: inline-block;}
#footer #credit {padding-left: 10px; margin-left: 10px; border-left: 1px solid #818181;}

/*******************/
/******* RWB *******/
/*******************/

@media screen and (max-width: 1023px) {
#main-content, #main-img {margin-left: 0;}
#contact-content {width: 100%;}
#contact-form {width: 100%; margin: 30px 0 30px -15px;}
#contact-form #submit {left: 15px;}
#map {margin: 0 auto 30px;}
}
/* TABLET */
@media (min-width: 768px) and (max-width: 1023px) {
h2, h3 {font-size: 28px;}
p, li {font-size: 16px; line-height: 1.4em;}
#nav {float: right; margin: 17px 0 0px; max-width: 500px;}
#nav ul {display: block; text-align: right; left: 20px;}
#nav li {float: none;}
#v-address {right: 28px;}
#sub-nav.is_stuck {right: 15px;}
#feature {padding-top: 20px;}
#feature ul {margin-left: -15px}
#feature li {padding-left: 15px;}
#feature h3 {height: 40px}
#feature h6 {height: 70px;}

#title {height: 200px; padding-top: 140px;}
#title h1 {font-size: 38px; background-size: 66px;}
#title h1:before, #title h1:after {display: block; content: ""; width: 25%; height: 1px; background: #a4800b; position: absolute; bottom: 10px;}
#title h1:before {left: 20%;}
#title h1:after {right: 20%;}
#content {padding: 30px 0;}
#contact-form #submit {left: 0px;}
}

/* PHABLET */
@media screen and (max-width: 767px) {
h2, h3 {font-size: 26px;}
p, li {font-size: 14px;}
#nav {margin: 10px 0 10px; padding-left: 10px; left: 15px;}
#nav ul {display: block; width: 100%; text-align: right;}
#nav li {float: none;}
#nav a {padding: 4px; font-size: 12px;}
#v-address {font-size: 10px; top:-23px; right: 22px;}

#title {height: 180px; padding-top: 120px;}
#title h1 {font-size: 32px;}
#title h4 {padding: 0 5%; font-size: 14px;}

#feature li {width: 50%;}
#title.home h1 {font-size: 32px; background-size: 60px; padding-bottom: 30px; margin-bottom: 20px}
#title.home h4 {padding: 0; line-height: 1.4em;}

#content {padding: 20px 0;}

.button, a.button:visited {width: 65px; font-size: 10px;}
#massage-content li:before, #main-content li:before {top: 2px; left: 5px; }
#sub-nav.is_stuck {right: 15px;}

#footer {padding: 10px 15px;}
#footer h5 {display: block; font-size: 10px}
#footer #credit {padding-left: 0px; margin-left: 0px; border:none;}
}
/* PHONE HRZ */
@media screen and (max-width: 568px) {
#logo {width: 300px;}
#v-address {font-size: 9px; top:-21px; right: 15px;}

#title {height: auto; padding-top: 120px; padding-bottom: 30px;}

.button, a.button:visited {width: 88px; font-size: 12px;}
#main-content, #main-img, #sub-nav {width: 100%;}
#main-img img {margin-bottom: 20px;}
#main-content {margin-top: -30px;}
#map {height: 250px;}



/*
    Mobile Menu Core Style
*/
#nav, .main-nav {display:none;}	
.slicknav_menu {display:block; height: 20px; position: absolute; top: 99px; z-index: 10000; padding: 0;}
.slicknav_btn {position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; z-index: 10002;}
.slicknav_menu .slicknav_menutxt {display: block; line-height: 1.188em; float: left; }
.slicknav_menu .slicknav_icon {float: left; margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_no-text {margin: 0 }
.slicknav_menu .slicknav_icon-bar {display: block; width: 1.125em; height: 2px; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {margin-top: 3px}
.slicknav_nav {clear: both }
.slicknav_nav ul,.slicknav_nav li {display: block;}
.slicknav_nav .slicknav_arrow {font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item {display: block; cursor: pointer; }
.slicknav_nav a {display: block; color: #fff; font-size: 16px;}
.slicknav_nav .slicknav_item a {display: inline}
.slicknav_menu:before, .slicknav_menu:after {content: " "; display: table; }
.slicknav_menu:after {clear: both}
/* IE6/7 support */
.slicknav_menu { *zoom: 1; display: block; width: 100%; font-size:16px; line-height: 1em;}
/* Button */
.slicknav_btn {margin: -47px 15px 0px 15px; text-decoration:none; background-color: #a4800b; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; float:right;}
/* Button Text */
.slicknav_menu  .slicknav_menutxt {color: #FFF;	text-shadow: 0 1px 3px #000;}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {background-color: #f5f5f5;}
.slicknav_nav {display: block; width: 100%; padding: 10px 15px 15px; position: absolute; top: 0;background: rgba(0,0,0,0.9); z-index: 10001; box-sizing: border-box;-moz-box-sizing: border-box;}
.slicknav_nav, .slicknav_nav ul {list-style: none;overflow:hidden;}
.slicknav_nav a {display: block; padding: 10px 0; border-bottom: 1px solid #555;}
.slicknav_nav li.active a {color: #a4800b;}

}
/* PHONE VTC */
@media screen and (max-width: 479px) {
#header:before {height: 45px;}
#logo {width: 200px;}
#v-address {font-size: 11px; top: -38px; right: 0px; padding: 0 15px 0 10px;}
#v-address .tel {display: inline-block;}

#title h1 {font-size: 24px; background-size: 50px; padding-bottom: 25px; margin-bottom: 5px;}
#title h1:before, #title h1:after {bottom: 7px;}
#title h4 {padding: 0; font-size: 14px;}
#feature {padding-top: 20px;}
#feature li, #services li, #contact-form .field, #contact-info section {width: 100%;}
.sub-content {height: 100px;}
.link-h3 {display: block; position: relative; padding-bottom: 5px;}
#paypal {width: 100%;}
#contact-form #submit {left: 0;}
.slicknav_menu {top: 93px;}
.slicknav_btn {margin: -37px 15px 0px 15px;}
}