/********** ELHAM'S COTTAGE SPA **********/

/* #fdfbe3; /* cream */
/* #6c8438; /* green */
/* #78512e; /* brown */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	/*background: #f5f2d2;*/
	background: #fdfbe3; /* cream */
	color: #4A4931;
	color: #78512e; /* brown */
	font-family: "Gentium Plus", Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-size: 20px;
	text-align: center;
}
h1, h2, h3, h4, h5, h6, p {
	margin: 20px;
}
h2, h3, h4, h5, h6 {
	line-height: 125%;
}
p, li {
	font-size: 20px;
	line-height: 150%;
}
h1 {
	font-family: "Gentium Plus", Georgia, Times New Roman, Times, serif;
	font-size: 180%;
	font-weight: normal;
	color: #6C8438;
}
h1 i {
	font-size: 65%;
}
h2 {
	font-family: "Gentium Plus", Georgia, Times New Roman, Times, serif;
	font-size: 140%;
	font-weight: normal;
	color: #C57422;
}
h2.quote {
	font-size: 120%;
	font-style: italic;
	line-height: 150%;
}
h3 {
	margin-bottom: 5px;
	font-size: 115%;
}
h4 {
	margin-top: 5px;
	font-family: "Gentium Plus", Georgia, Times New Roman, Times, serif;
	font-size: 115%;
	font-weight: normal;
	line-height: 140%;
	color: #a17a57;
}
/*h4 {
	font-family: Georgia, Times New Roman, Times, serif;
	line-height: 140%;
}*/
small, .small {
	font-size: 75%;
}
b {
	/*color: #1D4868;*/
}
a {
	color: #9F3F2B; /* red*/
}
a:hover {
	color: #C6614C;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
div {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/*width: 100%;*/
}
hr {
	clear: both;
	margin: 20px;
	border: 0;
	border-bottom: 5px double #C57422;
}
hr.clear {
	clear: both;
	margin: 0;
	border: 0;
	padding: 0;
	background: 0;
}
.clear {
	clear: both;
}
.center {
	text-align: center;
}
img.center {
	display: block;
	margin: 0 auto;
}
form input[type=text], form input[type=tel], form input[type=email], form textarea {
	width: calc(100% - 5px);
	font-family: Arial;
	font-size: 100%;
}
textarea {
	min-height: 100px;
}
form select {
	font-family: Arial;
	font-size: 100%;
}
dl.clientinfo {
	margin: 15px;
}
dl.clientinfo dt, dl.clientinfo dd {
	margin: 0;
	padding: 5px;
	box-sizing: border-box;
}

/********** STRUCTURE **********/
.content {
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	max-width: 1200px;
	text-align: left;
}

/********** HEADER **********/
.header {
	padding: 1px 0;
	background: #ba5915; /* orange */
	color: #fdfbe3; /* cream */
}
.headerimage {
	margin: 0;
	padding-bottom: 50%;
	/*border-bottom: 2px solid #7F2918;*/
}
#page-home .headerimage {
	/*background: url(images/hdr-cottage.jpg) no-repeat center;
	background-size: cover;*/
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-cottage.jpg) no-repeat center;
	background-size: contain, cover;
}
#page-about .headerimage {
	/*background: url(images/hdr-about.jpg) no-repeat center;
	background-size: cover;*/
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-about.jpg) no-repeat center;
	background-size: contain, cover;
}
#page-reviews .headerimage {
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-glitterstars.jpg) no-repeat center;
	background-size: contain, cover;
}
#page-health .headerimage, #page-consentform .headerimage {
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-health.jpg) no-repeat top center;
	background-size: contain, cover;
}
#page-consentform .headerimage {
	padding-bottom: 20% !important;
}
#page-services .headerimage {
	/*background: url(images/hdr-services.jpg) no-repeat center;
	background-size: cover;*/
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-services.jpg) no-repeat center;
	background-size: contain, cover;
}
#page-packages .headerimage {
	/*background: url(images/hdr-packages.jpg) no-repeat center;
	background-size: cover;*/
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-packages.jpg) no-repeat center;
	background-size: contain, cover;
}
#page-contact .headerimage {
	/*background: url(images/hdr-contact.jpg) no-repeat center;
	background-size: cover;*/
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-contact.jpg) no-repeat center;
	background-size: contain, cover;
}
#page-microblading .headerimage {
	/*height: 420px;*/
	/*background: url(images/hdr-microblading.jpg) no-repeat center;
	background-size: cover;*/
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-microblading.jpg) no-repeat center;
	background-size: contain, cover;
}
#page-microneedling .headerimage {
	/*height: 420px;*/
	/*background: url(images/hdr-microneedling.jpg) no-repeat center;
	background-size: cover;*/
	background: url(images/bg-header.png) no-repeat top center, url(images/hdr-microneedling.jpg) no-repeat center;
	background-size: contain, cover;
}
.logo {
	/*padding: 1px 0 50px 0;*/
	/*background: url(images/bg-header.png) repeat-x left bottom;*/
	/*background: url(images/bg-header.png) no-repeat left bottom;
	background-size: cover;*/
	
	padding: 1px 0;
}
.logo a {
	display: block;
	/*margin: 0 auto;*/
	padding: 10px 20px 0 20px;
	width: 260px;
}
/*.navwrap {
	background: url(images/menubg.gif) repeat-x;
}*/
.nav {
	display: block;
	/*max-width: 1000px;*/
	/*margin: 0 auto;*/
	/*background: url(images/menubg.gif) repeat-x;*/
	/*text-align: center;*/
	font-family: "Gentium Plus", Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}
.nav ul, .nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav a {
	display: block;
	padding: 10px 20px;
	font-size: 110%;
	color: #e3e0ba; /* beige */
	text-decoration: none;
}
.nav a:hover {
	/*background: #7f2a18;*/
	color: #fdfbe3; /* cream */	
}
a.nav-booking {
	border: 2px solid #e3e0ba; /* beige */
	border-radius: 10px;
}
a.nav-booking:hover {
	border: 2px solid #fdfbe3; /* cream */
	border-radius: 10px;
}
.button {
	display: inline-block;
	margin: 10px auto;
	border: 0;
	border-radius: 10px;
	padding: 12px 16px;
	/*max-width: 120px;*/
	background: #6C8438;
	color: #fdfbe3; /* cream */
	font-size: 125%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.button:hover {
	background: #819e42;
	color: #fdfbe3; /* cream */
	cursor: pointer;
}
.button_outline {
	display: inline-block;
	margin: 10px auto;
	border-radius: 10px;
	padding: 6px 10px;
	border: 2px solid #6C8438;
	color: #6C8438;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.button_outline:hover {
	border: 2px solid #819e42;
	color: #819e42;
}

#body {
	box-sizing: border-box;
	padding-bottom: 50px;
	background: url(images/footer.gif) no-repeat bottom center;
	text-align: left;
}

.notice {
	margin: 20px;
	border-radius: 20px;
	padding: 1px 0;
	/*background: #9F3F2B; /* red */
	background: #6c8438; /* green */
	color: #fdfbe3; /* cream */
	font-size: 120%;
	text-align: center;
}
.notice p {
	margin: 10px;
}
.notice a {
	color: #fdfbe3; /* cream */
}

/********** SERVICES **********/

.services h2 {
	margin-bottom: 0;
}
.services h3 { /* treatment name */
	margin-bottom: 5px;
}
.services p { /* description */
	margin-top: 5px;
	margin-bottom: 5px;
}
.services h4 { /* price */
	margin-top: 5px;
}
.services i {
	font-family: "Gentium Plus", Georgia;
	font-size: 90%;
}
.newservice {
	color: #6c8438; /* GREEN */
}

/********** FEATURES / PACKAGES **********/

.featurebox {
	margin: 30px auto;
	border-radius: 10px;
	padding: 10px;
	max-width: 480px;
	background: rgba(108,132,56,0.2);
}
.featurebox h2, .featurebox h3, .featurebox h4, .featurebox p, .featurebox a {
	color: #6C8438;
}
.featurebox p {
	font-size: 110%;
}

div.feature {
	margin: 10px 20px 0 20px;
	border-radius: 20px;
	padding: 40px 0 20px 0;
	padding: 0;
	overflow: hidden;
}
div.feature div.content {
	margin: 0;
	padding: 40px 20px 20px 20px;
}
div.feature h2, div.feature h3, div.feature h4, div.feature p {
	margin: 20px auto;
	max-width: 800px;
}
div.feature h2, div.feature h3, div.feature h4, div.feature p, div.feature ul {
	color: #fdfbe3;
	text-shadow: 0 0 6px #333333;
}
div.feature h2 {
	font-family: 'Great Vibes', Georgia, serif;
	font-size: 400%;
	line-height: 70%;
}
div.feature h2 small {
	font-family: "Gentium Plus", Georgia, serif;
	font-weight: bold;
	font-size: 40%;
	text-transform: uppercase;
}
div.feature h3 {
	font-family: "Gentium Plus", Georgia, serif;
	font-weight: normal;
	font-size: 140%;
}
div.feature p, div.feature ul {
	margin: 10px auto;
	padding: 0;
	max-width: 800px;
	/*font-size: 115%;*/
}
div.feature li {
	margin-left: 20px;
	margin-right: 10px;
}
@media screen and (min-width: 640px) {
	div.feature ul {
		max-width: 600px;
		column-count: 2;
	}
}
div.feature a.button {
	border: 2px solid #fdfbe3;
	background: none;
	color: #fdfbe3;
	text-shadow: none;
}
div.feature a.button:hover {
	background: #fdfbe3;
	color: #6c8438; /* green */
}

div.valentines {
	background: #cc6666 url(images/bg-valentines.jpg) no-repeat center;
	background-size: cover;
}
div.valentines div.content {
	background: rgba(153,102,102,0.5);
}
div.valentines a.button:hover {
	color: #cc6666; /* rose */
}

div.mothersday {
	background: #78512e url(images/bg-mothersday.jpg) no-repeat center;
	background-size: cover;
}
div.mothersday div.content {
	background: rgba(120,81,46,0.5);
}
div.mothersday a.button:hover {
	color: #78512e; /* brown */
}

div.fathersday {
	background: #78512e url(images/bg-fathersday.jpg) no-repeat center;
	background-size: cover;
}
div.fathersday div.content {
	background: rgba(120,81,46,0.5);
}
div.fathersday h2 {
	font-family: "Gentium Plus", Georgia, serif;
	font-size: 300%;
	line-height: 80%;
	text-shadow: 0 0 10px #333333;
}
div.fathersday h2 small {
	font-size: 50%;
}
div.fathersday a.button:hover {
	color: #78512e; /* brown */
}

div.lavender {
	background: #614892 url(images/bg-lavender.jpg) no-repeat center;
	background-size: cover;
}
div.lavender a.button:hover {
	color: #614892; /* purple */
}

div.christmas {
	background: #6c8438 url(images/bg-christmas.jpg) no-repeat center left;
	background-size: cover;
}
div.christmas div.content {
	background: rgba(108,132,56,0);
}
div.christmas a.button:hover {
	color: #6c8438; /* green */
}

.maternity {
	border: 5px double #996699;
	padding: 0 200px 0 0;
	background: #fefdf1 url(images/bg-maternity.jpg) no-repeat bottom right;
}
.maternity h1 {
	color: #996699; /* purple */
}
.maternity h2 {
	color: #4A4931;
}
.embrace { color: #c57422; }
.exhale { color: #6c8438; }
.energize { color: #cc3333; }
.escape	{ color: #336699; }

/********** BOOKING **********/
.booking_intro {
	padding-bottom: 200px;
	background: url(images/olivebranch.jpg) no-repeat center bottom;
	background-size: 200px;
}
.booking_packages {
	margin: 20px;
	border-radius: 10px;
	padding: 5px;
	background: rgba(108,132,56,0.2);
}
.booking_packages h2, .booking_packages h4, .booking_packages a {
	color: #6C8438;
	text-decoration: none;
}
.ui-datepicker {
	background: #fdfbe3; /* cream */
	color: #78512e; /* brown */
}
.concern h2 {
	margin-bottom: 0;
}

.packages {
	padding: 15px 0;
}
.packages h2, .packages h3, .packages h4, .packages p {
	margin-top: 5px;
	margin-bottom: 5px;
}

/********** REVIEWS **********/
div.review {
	padding: 15px 0;
}
div.review p {
	margin-top: 5px;
	margin-bottom: 5px;
}
div.review p.quote_credit {
	font-size: 85%;
	text-align: center;
	text-transform: uppercase;
}

/********** FOOTER **********/
.footer {
	padding: 20px 0;
	border-top: 2px solid #fdfbe3; /* cream */
	background: #6C8438; /* green */
	color: #fdfbe3; /* cream */
	text-align: center;
}
.footer a {
	color: #fdfbe3; /* cream */
}
.footernav ul, .footernav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footernav li {
	display: inline-block;
}
.footernav li a {
	display: block;
	padding: 10px 20px;
	font-family: "Gentium Plus", Arial, sans-serif;
	font-weight: bold;
	font-size: 110%;
	text-transform: uppercase;
	color: #e3e0ba; /* beige */
	text-decoration: none;
}
.footernav li a:hover {
	color: #fdfbe3; /* cream */	
}
.feature_about {
	margin: 0 auto;
	border-top: 2px solid #e3e0ba;
	padding: 10px;
}
.partnerlogos {
	margin: 0 auto;
	border-top: 2px solid #e3e0ba;
	padding: 10px;
	text-align: center;
}
.partnerlogos div {
	display: inline-block;
	vertical-align: middle;
	padding: 10px 15px;
}
.footer .social {
	margin: 10px auto;
	width: auto;
}
.footer .social .icon {
	display: inline-block;
	padding: 5px 10px;
	width: 60px;
}
p.contactinfo {
	line-height: 175%;
	color: #fdfbe3; /* cream */
}
p.contactinfo b {
	font-family: "Gentium Plus", Georgia;
	font-weight: normal;
	font-size: 160%;
}
.social .icon a {
	opacity: 1;
}
.social .icon a:hover {
	opacity: 1;
}
.credit {
	font-size: 75%;
	text-transform: uppercase;
}
.credit, .credit a {
	color: #fdfbe3; /* cream */
	text-decoration: none;
}
.credit a:hover {
	color: #fdfbe3; /* cream */
	text-decoration: underline;
}

@media screen and (max-width: 749px) {
	.nav ul {
		display: none;
		/*border-bottom: 2px solid #7f2a18;*/
		/*background: #e3e0ba;*/
	}
	.nav:hover ul {
		display: block;
	}
	.nav a {
		font-size: 150%;
	}
	.maternity {
		padding: 0 0 500px 0;
		background: #fefdf1 url(images/bg-maternity.jpg) no-repeat bottom right;
	}
		
}

@media screen and (min-width: 600px) {
	dl.clientinfo dt, dl.clientinfo dd {
		float: left;
		width: 50%;
	}
	.colthird {
		float: left;
		width: 50%;
	}
	.colthird:nth-of-type(2n+1) {
		clear: left;
	}
	.colquarter {
		float: left;
		width: 50%;
	}
	.colquarter:nth-of-type(2n+1) {
		clear: left;
	}
	.booking_intro {
		padding: 0;
		background: url(images/olivebranch.jpg) no-repeat right;
		background-size: 200px;
	}
}

@media screen and (min-width: 750px) {
	.mobile {
		display: none;
	}
	.nav {
		padding-left: 10px;
		padding-right: 10px;
	}
	.nav li {
		/*float: left;
		width: 16.66%;*/
		display: inline-block;
	}
	.nav a {
		/*height: 60px;*/
		/*padding: 0;*/
		padding: 10px;
	}
	.main {
		float: left;
		width: 66.6%;
	}
	.sidebar {
		float: left;
		width: 33.3%;
	}
	/*#page-home .sidebar, #page-health .sidebar, #page-packages .sidebar {
		padding-top: 120px;
	}
	#page-about .sidebar {
		padding-top: 80px;
	}*/
	.colhalf {
		float: left;
		width: 50%;
	}
	/*.nav {
		height: 60px;
	}*/
	
	#page-home .nav-home,
	#page-about .nav-about,
	#page-services .nav-services,
	#page-packages .nav-packages,
	#page-location .nav-location,
	#page-reviews .nav-reviews,
	#page-contact .nav-booking,
	.nav a:hover {
		/*background: url(images/menubg-over.gif) no-repeat top center;*/
		color: #fdfbe3; /* cream */
	}
	
	.concern .concern_image {
		float: left;
		width: 33.33%;
	}
	.concern .concern_text {
		float: right;
		width: 66.66%;
	}
	.concern .concern_treat {
		float: left;
		width: 33.33%;
	}
}

@media screen and (min-width: 800px) {
	.headerimage {
		padding-bottom: 40%;
	}
	.booking_intro {
		background: url(images/olivebranch.jpg) no-repeat right;
		background-size: contain;
	}
}

@media screen and (min-width: 960px) {
	.logo {
		float: left;
	}
	.nav {
		float: right;
		padding-top: 30px;
	}
	.headerimage {
		padding-bottom: 30%;
	}
	.colthird {
		float: left;
		width: 33.3%;
	}
	.colthird:nth-of-type(2n+1) {
		clear: none;
	}
	.colthird:nth-of-type(3n+1) {
		clear: left;
	}
	.colquarter {
		float: left;
		width: 25%;
	}
	.colquarter:nth-of-type(2n+1) {
		clear: none;
	}
	.colquarter:nth-of-type(4n+1) {
		clear: left;
	}
	.concern .concern_image {
		float: left;
		width: 25%;
	}
	.concern .concern_text {
		float: left;
		width: 50%;
	}
	.concern .concern_treat {
		float: left;
		width: 25%;
	}
}