/* General Element Styling */
@font-face{
	font-family: CormorantGaramond-Regular;
	src: url('../bundles/beasolutionsgracehealthandbeauty/font/CormorantGaramond-Regular.ttf') format('truetype');
}

@font-face{
	font-family: CormorantGaramond-Light;
	src: url('../bundles/beasolutionsgracehealthandbeauty/font/CormorantGaramond-Light.ttf') format('truetype');
}

@font-face{
	font-family: CormorantGaramond-SemiBold;
	src: url('../bundles/beasolutionsgracehealthandbeauty/font/CormorantGaramond-SemiBold.ttf') format('truetype');
}

body {
    font-size: 18px;
	font-family: CormorantGaramond-Regular, serif;
	line-height: 1.4em;
}

#home h1, #homeSlideshow h1 {
	font-family: CormorantGaramond-Light, serif;
	font-size: 2.25em;
	line-height: 1.125em;
	margin: 0.4687em 0 0.9375em;
	color: rgb(4, 102, 97);
	text-transform: uppercase;
}

h1 {
	font-family: CormorantGaramond-Light, serif;
	font-size: 2em;
	line-height: 1.125em;
	margin: 0.4687em 0 0.9375em;
	color: rgb(4, 102, 97);
	text-transform: uppercase;
}

h2 {
	font-size: 1.75em;
	line-height: 1.125em;
	margin: 0.3571em 0 0.7142em;
	color: rgb(204, 102, 0);
	text-transform: uppercase;
}

h3 {
	font-size: 1.5em;
	line-height: 1.125em;
	margin: 0.4166em 0 0.8333em;
	color: rgb(4, 102, 97);
	text-transform: uppercase;
}

h4 {
	font-size: 1.375em;
	line-height: 1.125em;
	margin: 0.2272em 0 0.4545em;
	color: rgb(204, 102, 0);
	text-transform: uppercase;
}

h5 {
	font-size: 1.25em;
	line-height: 1.125em;
	margin: 0.25em 0 0.5em;
	color: rgb(4, 102, 97);
	text-transform: uppercase;
}

h6 {
	font-size: 1.125em;
	line-height: 1.125em;
	margin: 0.2777em 0 0.5555em;
	color: rgb(204, 102, 0);
	text-transform: uppercase;
}

p {
	margin: 0 0 1.25em;
}

ol, ul {
	margin: 0 0 1.25em;
    padding-left: 1.25em;
}

ol li, ul li {
	margin: 0 0 0.3125em;
}

ol li:last-child, ul li:last-child {
	margin: 0;
}

ol {
    list-style: numeric outside;
}

ul {
    list-style: disc outside;
}

header ul, nav ul, footer ul, #flash {
	list-style: none;
    margin: 0;
    padding: 0;
}

a {
	color: rgb(4, 102, 97);
	text-decoration: none;
}

a:hover, .active a {
	color: rgb(204, 102, 0);
}

.active a {
	font-family: CormorantGaramond-SemiBold, serif;
	font-weight: 600;
}

blockquote {
	padding: 1.25em 0;
}

cite {
	width: 100%;
	display: block;
	font-size: 0.9em;
	margin-top: 0.3472em;
	text-align: right;
}

strong, b {
	font-family: CormorantGaramond-SemiBold, serif;
	font-weight: 600;
}

i, em {
	font-style: italic;
}

sup {
    font-size: 0.6em;
    position: relative;
    top: -0.5208em;
}

sub {
    font-size: 0.6em;
    position: relative;
    bottom: -0.5208em;
}

small {
	font-size: 0.7em;
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

img:hover, a:hover {
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-ms-transform: scale(1.02);
	-o-transform: scale(1.02);
	transform: scale(1.02);
}

.slideshow img:hover {
	-webkit-transform: unset;
	-moz-transform: unset;
	-ms-transform: unset;
	-o-transform: unset;
	transform: unset;
}

table {
	width: 100%;
	margin: 0 0 1.25em;
}

thead th {
	font-weight: 600;
	min-width: 100px;
	padding: 0.166em 0.277em;
	color: rgb(255, 255, 255);
	background-color: rgb(4, 102, 97);
	border-right: 1px solid rgb(255, 255, 255);
}

tbody td {
	min-width: 100px;
	padding: 0.166em 0.277em;
	border-right: 1px dashed rgb(204, 102, 0);
	border-bottom: 1px dashed rgb(204, 102, 0);
}

tbody td:last-child {
	border-right: 0;
}

tbody tr:last-child td {
	border-bottom: 0;
}

input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
	font-family: CormorantGaramond-Regular, serif;
	font-size: 1em;
	width: 100%;
	min-width: 60px;
	max-width: 100%;
	max-width: calc(100% - 0.555em);
	padding: 0.166em 0.277em;
	margin: 0 0 1.25em;
	border: 0;
	box-shadow: 0px 0px 4px rgb(4, 102, 97);
}

input[type="radio"], input[type="checkbox"] {
	padding: 0.166em 0.277em;
}

input[type="checkbox"] {
	max-width: 30px;
}

input[type="radio"] {
	min-width: 16px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgb(4, 102, 97);
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	margin-right: 6px;
	position: relative;
	top: 1px;
}

input[type="radio"]:checked {
	border: 5px solid rgb(243, 115, 39);
	padding: 0!important;
}

input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
	box-shadow: 0px 0px 4px rgb(204, 102, 0);
}

button, .button {
	font-family: CormorantGaramond-Regular, serif;
	font-size: 1em;
	min-width: 60px;
	margin: 0 0 1.25em;
	padding: 0.166em 0.277em;
	border: none;
	background-color: rgb(204, 102, 0);
	color: rgb(255, 255, 255);
}

button:hover, .button:hover {
	background-color: rgb(4, 102, 97);
}

#flash {
	width: 100%;
	position: static;
	top: 0;
	left: 0;
}

#flash li {
	width: 80%;
	padding: 10px 10%;
	color: rgb(255, 255, 255);
	z-index: 100;
}

#flash li h3 {
	color: rgb(255, 255, 255);
}

#flash li.success {
	background-color: rgba(24, 173, 31, 0.8);
}

#flash li.error {
	background-color: rgba(220, 0, 0, 0.8);
}

/* Shared styling */
/* Flexed elements */
header, #headerRight, #headerSM ul, #websiteNav ul, .rowFlex, footer, .contact {
	display: inline-block;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

header, #headerSM ul, #websiteNav ul, .rowFlex, footer, .contact {
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}

#headerRight {
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

header, .rowFlex, .contact {
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

#headerRight, #websiteNav ul, #headerSM ul, footer {
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

/* .class {
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
} */

header, #headerRight, #headerSM ul, .rowFlex, footer, .contact {
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
}

/* .class {
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

.class {
	-webkit-justify-content: space-around;
	-moz-justify-content: space-around;
	-ms-justify-content: space-around;
	justify-content: space-around;
} */

#websiteNav ul {
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	-ms-justify-content: flex-end;
	justify-content: flex-end;
}

/* Aligning content */
/* .class {
	-webkit-align-content: flex-start;
	-moz-align-content: flex-start;
	-ms-align-content: flex-start;
	align-content: flex-start;
}

.class {
	-webkit-align-content: center;
	-moz-align-content: center;
	-ms-align-content: center;
	align-content: center;
}

.class {
	-webkit-align-content: flex-end;
	-moz-align-content: flex-end;
	-ms-align-content: flex-end;
	align-content: flex-end;
}

/* Aligning self */
/*.class {
	-webkit-align-self: flex-start;
	-moz-align-self: flex-start;
	-ms-align-self: flex-start;
	align-self: flex-start;
}

.class {
	-webkit-align-self: center;
	-moz-align-self: center;
	-ms-align-self: center;
	align-self: center;
} */

#headerSM {
	-webkit-align-self: flex-end;
	-moz-align-self: flex-end;
	-ms-align-self: flex-end;
	align-self: flex-end;
}

/* Transitioning effects */
header + .slideshow, header + main, header + .content {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}

header {
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -ms-transition-property: top;
    -o-transition-property: top;
    transition-property: top;
}

header.sticky, header.sticky + .slideshow, header.sticky + main, header.sticky + .content {
    -webkit-transition-duration: 600ms;
    -moz-transition-duration: 600ms;
    -ms-transition-duration: 600ms;
    -o-transition-duration: 600ms;
    transition-duration: 600ms;
}

header, header + .slideshow, header + main, header + .content {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

header, header + .slideshow, header + main, header + .content {
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

/* Shared classes */
.hidden {
	display: none;
}

.half {
	width: 48%;
}

.quarter {
	width: 23%;
}

/* Page styling */
header, .content, footer {
	width: 85%;
	padding: 1.25em 7.5%;
}

.slideshow {
	width: 85%;
	padding: 0 7.5%;
}

header {
	padding: 1.25em 7.5% 0.625em;
	z-index: 10;
	position: absolute;
	top: 0;
	background-color: rgba(255, 255, 255, 1);
}

header.sticky {
	height: 90px;
	position: fixed;
	top: -100%;
	left: 0;
	background-color: rgba(255, 255, 255, 0.9);
}

header.sticky.stickySlide {
	top: 0;
}

header + .slideshow, header + main, header + .content {
	position: relative;
}

header, .slideshow {
	box-shadow: 0 2px 4px rgb(204, 102, 0);
}

.logo {
	max-width: 25%;
	max-height: 100%;
}

#headerRight {
	width: 60%;
}

#headerSM {
	width: 150px;
}

#headerSM .priceList {
	width: 70px;
	position: relative;
	display: inline-block;
	margin: 2px 0 35px 0;
}

#headerSM img {
	max-width: 30px;
}

#websiteNav {
	position: relative;
	bottom: 10px;
}

#websiteNav .priceList {
	display: none;
}

#websiteNav ul li {
	margin: 0 0 0 5%;
}

footer {
	color: rgb(255, 255, 255);
	background-color: rgb(4, 102, 97);
}

footer .half:last-child {
	text-align: right;
}

footer p {
	margin: 0 0 0.3125em;
}

footer a {
	color: rgb(255, 255, 255);
	text-decoration: underline;
}

footer a:hover {
	color: rgb(255, 255, 255);
	font-weight: 600;
}

/* Homepage styling */
.slideshow {
	position: relative;
	background-color: rgb(250, 250, 250);
}

.slides, .slide, .slide img {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100%;
	max-height: 100%;
}

.slideshow .overlay {
	width: 37.5%;
	position: absolute;
	top: 10%;
	left: 2.5%;
}

.services h3 {
	text-transform: uppercase;
	text-align: center;
}

/* Contact Form styling */
#contactForm {
	width: 60%;
	margin: 0 20%;
}

#contactMap {
	width: 100%;
	height: 300px;
}

.contact div {
	width: 48%;
}

.message {
	width: 100%;
}

@media (width <= 500px) {
    .captcha {
        transform: scale(0.5);
        transform-origin: 0.0;
    }
}