/* Page font and background color */
html, body {
	font-size: 16px;
	font-family: 'Comfortaa', sans-serif;
	color: #000000;
	line-height: 1.6;
	margin: 0 0 0 0; /* top right bottom left */
	padding: 0 0 0 0; /* top right bottom left */
	background-color: #ffffff;
}
/* This makes sure that the padding and border are included in the total width and height of the HTML elements */
* {box-sizing: border-box;}
/* Section link anchors */
section-anchor {
	display: block;
	width: 100%;
	height: 116px; /* based on height of navigation bar minus one pixel */
	height: 57px;
}
@media only screen and (min-width: 1200px) {
	section-anchor:first-of-type {height: 116px;}
}
/* =========== Landing ===================================================== */
/* Landing background image */
landing-row {
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0 0 35px 0;
	/* background image styling */
	background-color: #bfdfff;
	background-color: #bfdfff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-image: linear-gradient(to top, rgba(255,255,255, 0.2), rgba(255,255,255,0.2)), url("../image/bamboo-short-crop.png");
}
/* Landing blur */
landing-blur {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	flex: 100%;
	margin: 0;
	height: 100%;
	background-color: rgba(255,255,255, 0.4);
	backdrop-filter: blur(10px);
}
/* Landing text partition */
landing-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	flex: 40%;
	padding: 35px 70px 35px 35px;
	border-right: 3px solid #ffffff;
	background-color: rgba(255,255,255, 0.4);
	backdrop-filter: blur(5px);
}
/* Landing header 1 */
h1	{
	display: block;
	font-size: 175%;
	font-size: 200%;
	color: #0059b3;
	text-align: right;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 1px;
	margin: 30px 0 20px 0; /* top right bottom left */
	text-shadow: 1px 2px 2px #ffffff;
}
/* Landing paragraph */
landing-row p {
	font-size: 80%;
	line-height: 1.6;
	margin: 0.5em 0 0.5em 0;
	text-align: justify;
}
/* Landing note */
landing-note {
	display: block;
	color: #0059b3;
	font-size: 60%;
	font-weight: bold;
	text-align: right;
	text-transform: lowercase;
	line-height: 2;
	letter-spacing: 2px;
}
/* Landing profile partition */
landing-profile {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	align-self: stretch;
	flex: 60%;
	padding: 20px;
	padding: 35px;
	margin: 0;
	backdrop-filter: blur(5px);
	/* background image styling */
	background-color: rgba(255,255,255, 0.4);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
	background-image: url("../image/wave-breaking-color.png");
}
/* Profile Image Styling */
profile-image {
	display: flex;
	width: 200px;
	width: 100%;
	min-width: 100px;
	max-width: 250px;
	height: auto;
	aspect-ratio: 2/3;
	margin: 0;
	margin-left: -70px;
	padding: 0;
	border: 3px solid #ffffff;
	border-radius: 5px;
	background-image: url("../image/jen-speri-profile.png");
	background-color: #ffffff; /* if no image */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: scroll;
	box-shadow: 0 2px 6px 0 #000000; /* h-offset v-offset blur spread color */
}
/* Profile content partition direction and order for smaller screens */
@media (max-width: 700px) {
	/* Container flow direction for smaller screens */
	landing-blur {flex-direction: column;}
	landing-text, landing-profile {flex: 100%; border: none;}
	landing-text {border-bottom: 3px solid #ffffff;}
	profile-image {margin: 20px;}
}
/* =========== Services ===================================================== */
/* Services content background */
service-background {
	display: block;
	width: 100%;
	background-color: #ffffff;
}
/* Services content containers */
service-container{
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	align-content: space-evenly;
	gap: 35px;
	padding: 35px;
	margin: 0 auto 0 auto;
}
/* Service array containers */
service-array {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
/* Service array item */
service-array-item {
	display: block;
	float: left;
	align-self: stretch;
	width: 100%;
	padding: 35px;
}
@media only screen and (min-width: 600px) {
	service-array-item {width: 50%;}
}
@media only screen and (min-width: 800px) {
	service-array-item {width: 33.33%;}
}
@media only screen and (min-width: 1200px) {
	service-array-item {width: 16.66%;}
}
service-array-item img {
	border-radius: 5px; 
	box-shadow: 0 2px 6px 0 #000000;
	margin-top: 10px;
}
/* Service images container */
service-image {
	background-color: #bfdfff;
	display: flex;
	width: 100%;
	max-width: 250px;
	margin: 0 auto 0 auto;
	aspect-ratio: 2/3;
	border-radius: 5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 2px 6px 0 #000000; /* h-offset v-offset blur spread color */
}
/* Service header 2 */
service-background h2	{
	display: block;
	font-size: 120%;
	color: #000000;
	color: #0059b3;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 1px;
	margin: 30px 0 20px 0; /* top right bottom left */
}
/* Service paragraph */
service-background p {
	color: #000000;
	font-size: 80%;
	line-height: 1.6;
	margin: 0.5em 0 1.5em 0;
	text-align: justify;
}
/* Schedule list */
service-background ul {
	display: block;
	font-size: 80%;
	list-style-type: circle;
	list-style-position: inside;
	margin: 1em 0 1em 0;
	padding: 0 0 0 0;
}
/* Schedule list item */
service-background li {display: list-item;}
/* Service images */
.service-1 {background-image: url("../image/jen-pt.png");}
.service-2 {background-image: url("../image/jen-dryneedle.png");}
.service-3 {background-image: url("../image/jen-cupping.png");}
.service-4 {background-image: url("../image/jen-mld.png");}
.service-5 {background-image: url("../image/jen-supplements.png");}
.service-6 {background-image: url("../image/jen-tree.png");}
/* =========== Schedule ===================================================== */
/* Schedule and contact row */
scheduling-row {
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0 0 10px 0;
	background-color: #bfdfff;
	/* background image styling */
	background-color: #bfdfff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-image: linear-gradient(to top, rgba(255,255,255, 0.2), rgba(255,255,255,0.2)), url("../image/bamboo-short-crop.png");
}
/* Schedule header 2 */
scheduling-row h2	{
	display: block;
	font-size: 120%;
	color: #0059b3;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.2;
	letter-spacing: 1px;
	margin: 30px 0 20px 0;
}
/* Schedule paragraph */
scheduling-row p {font-size: 80%;}
/* Schedule list */
scheduling-row ul {
	display: block;
	font-size: 80%;
	list-style-type: circle;
	list-style-position: inside;
	margin: 1em 0 1em 0;
	padding: 0 0 0 0;
}
/* Schedule list item */
scheduling-row li {display: list-item;}
/* Schedule button */
.scheduling-button {
	display: block;
	width: min(100%, 500px);
	background-color: #0059b3;
	font-size: 140%;
	color: #ffffff;
	font-family: 'Comfortaa', sans-serif;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	border: none;
	border-radius: 5px;
	margin: 25px auto 0 auto;
	box-shadow: 0 2px 6px 0 #000000; /* h-offset v-offset blur spread color */
}
a.scheduling-button span {font-size: 70%; font-weight: bold;}
a.scheduling-button:link {color: #ffffff; text-decoration: none;}
a.scheduling-button:visited {color: #ffffff; text-decoration: none;}
a.scheduling-button:hover {color: #ffffff; text-decoration: none; background-color: #000000;}
a.scheduling-button:active {color: #ffffff; text-decoration: none; background-color: #000000;}
/* Schedule and contact background container */
scheduling-background {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	flex: 100%;
	margin: 0;
	height: 100%;
	background-color: rgba(255,255,255, 0.4);
	backdrop-filter: blur(10px);
}
/* Schedule and contact containers */
scheduling-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	float: left;
	justify-content: center;
	align-items: center;
	align-content: space-evenly;
	gap: 35px;
	padding: 35px;
	margin: 0;
}
scheduling-container:nth-child(even) {padding: 0 35px 35px 35px;}
/* Schedule partition */
scheduling-treatment {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	align-self: stretch;
	flex: 50%;
	border-radius: 5px;
	background-color: rgba(255,255,255, 0.4);
	backdrop-filter: blur(5px);
}
/* Schedule partition */
scheduling-treatment-description {
	display: flex;
	flex-direction: column;
	padding: 35px;
	align-self: stretch;
}
/* Schedule orientation for smaller screens */
@media (max-width: 700px) {
	scheduling-container {flex-direction: column;}
	scheduling-treatment {flex: 100%;}
}
/* Scheduling links special decoration animation */
a.schedule-link-decoration {position: relative; color: #000000; text-decoration: none;}
a.schedule-link-decoration:hover {color: #0059b3;}
a.schedule-link-decoration::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	background-color: #0059b3;
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: top left; /* delete this property to expand from default center */
}
a.schedule-link-decoration:hover::before {transform: scaleX(1);}
/* Venmo image */
venmo-logo {
	display: block;
	width: 100%;
	max-width: 220px;
	aspect-ratio: 3/1;
	margin: 0;
	margin: 0 auto 0 auto;
	padding: 0;
	background-image: url("../image/venmo-banner-blue.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
venmo-logo:hover {
	filter: brightness(0.5) saturate(0%);
}
/* =========== Testimonial ===================================================== */
/* Testimonial content background */
testimonial-background {
	display: block;
	width: 100%;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
}
testimonial-title h2 {
	display: block;
	font-size: 120%;
	color: #0059b3;
	text-align: left;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.2;
	letter-spacing: 1px;
	margin: 35px 35px 35px 70px;
}
/* Testimonial content containers */
testimonial-container{
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	align-content: space-evenly;
	gap: 35px;
	padding: 35px;
	margin: 0 auto 0 auto;
}
/* Testimonial content partition direction and order for smaller screens */
@media (max-width: 700px) {
	/* Testimonial flow direction for smaller screens */
	testimonial-container {
		flex-direction: column;
	}
}
/* Testimonial content containers */
testimonial-50100-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}
/* Testimonial image container */
testimonial-50100 {
	display: block;
	float: left;
	align-self: stretch;
	width: 100%;
}
@media only screen and (min-width: 700px) {
	testimonial-50100-container {
		flex-direction: row; 
		gap: 35px;
	}
	testimonial-50100 {width: 50%;}
}
/* Testimonial header */
testimonial-50100 h2 {
	display: block;
	font-size: 120%;
	color: #0059b3;
	text-align: right;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 1px;
	margin: 30px 0 20px 0;
}
/* Testimonial paragraph */
testimonial-50100 p {
	color: #000000;
	font-size: 80%;
	line-height: 1.6;
	margin: 0.5em 0 1.5em 0;
	text-align: left;
}
/* client name */
testimonial-client {
	display: block;
	color: #0059b3;
}
/* Testimonial Collapsible Button Toggles  */
/* button status row */
.collapsible {
	background-color: #777777;
	background-color: #000000;
	background-color: #0059b3;
	color: #ffffff;
	cursor: pointer;
	padding: 15px 35px 15px 35px;
	margin: 0;
	width: 100%;
	border: none;
	border-radius: 5px;
	text-align: left;
	outline: none;
	font-size: 15px;
	box-shadow: 0 -24px 16px 0 #ffffff, 0 2px 6px 0 #000000;
}
/* hover background */
.active, .collapsible:hover {
	background-color: #555555;
	background-color: #0059b3;
	background-color: #000000;
}
/* special character toggle plus */
.collapsible:after {
	content: '\002B';
	color: #ffffff;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}
/* special character toggle minus */
.active:after {
	content: "\2212";
}
/* expandable comment */
comment-expandable {
	display: block;
	padding: 10px 35px 35px 35px;
	max-height: 50px;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
}
/* gradient over comment preview */
comment-cover {
	display: block;
	width: 100%;
	padding: 35px;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 20%, rgba(255,255,255,1));
	position: sticky;
	bottom: 0px;
}
/* Hide */
.hide {display: none;}
/* =========== Footer ===================================================== */
/* Footer content background */
footer-background {
	display: block;
	width: 100%;
	background-color: #000000;
	padding: 0 0 0 0;
}
/* Footer partition container */
footer-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-content: space-evenly;
	gap: 35px;
	padding: 35px 35px 45px 35px;
	margin: 0 auto 0 auto;
}
/* Footer content partition */
footer-partition {
	display: flex;
	width: 33.33%;
	justify-content: center; 
	align-items: center;
	align-self: stretch;
}
/* Footer last partition */
footer-partition:nth-last-of-type(1) {align-items: flex-end;}
footer-content {display: block;}
/* Footer content partition direction for smaller screens */
@media (max-width: 720px) {
	/* Footer flow direction for smaller screens */
	footer-container {flex-direction: column;}
	footer-partition {width: 100%; justify-content: flex-start;}
}
/* Footer content paragraph */
footer-background p {
	color: #ffffff;
	font-size: 80%;
}
/* Footer special decoration animation */
a.foot-link-decoration {position: relative; color: #ffffff; text-decoration: none;}
a.foot-link-decoration:hover {color: #ffffff;}
a.foot-link-decoration::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: top left; /* delete this property to expand from default center */
}
a.foot-link-decoration:hover::before {transform: scaleX(1);}
/* =========== Icons ===================================================== */
/* Icon Images */
.handheart {background-image: url("../image/jensperi-icon-handheart.png");}
.services {background-image: url("../image/jensperi-icon-services.png");}
.schedule {background-image: url("../image/jensperi-icon-schedule.png");}
.payment {background-image: url("../image/jensperi-icon-payment.png");}
.testimonial {background-image: url("../image/jensperi-icon-testimonial.png");}
.web {background-image: url("../image/jensperi-icon-web.png");}
.map {background-image: url("../image/jensperi-icon-map.png");}
.phone {background-image: url("../image/jensperi-icon-phone.png");}
.email {background-image: url("../image/jensperi-icon-email.png");}
/* Icon background image container */
icon-set {
	display: block;
	float: right;
	width: 20px;
	aspect-ratio: 5/4;
	margin: 0 0 0 12px;
	padding: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
/* Icon Navigation coloring images */
navigation-barwidth :where(icon-set) {
	float: left; 
	margin: 0 10px 0 0;
	width: 20px;
	position: relative;
	bottom: 3px;
	/* change black to blue #0059b3 */
	filter: invert(23%) sepia(61%) saturate(2857%) hue-rotate(197deg) brightness(89%) contrast(102%);
}
/* Icon Footer coloring images */
footer-partition :where(icon-set) {
	float: left; 
	margin: 0 8px 0 0;
	position: relative;
	top: 1px;
	/* change black to white. filter help https://codepen.io/sosuke/pen/Pjoqqp */
	filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(12deg) brightness(106%) contrast(101%);
	/* or this... filter:invert(1); */
}
/* =========== Navigation ===================================================== */
/* Navigation special decoration animation */
a.navdecoration {position: relative; color: #0059b3; text-decoration: none;}
a.navdecoration:hover {color: #000000; background: rgba(255, 255, 255, 1);}
a.navdecoration::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #0059b3;
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: top left; /* delete this property to expand from default center */
}
a.navdecoration:hover::before {transform: scaleX(1);}
/* Navigation Bar Responsive Styling */
navigation-bartop {
	position: fixed;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background: rgba(255, 255, 255, 0.9);
}
/* Navigation bar width and maximum width */
navigation-barwidth {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 auto 0 auto;
}
/* Navigation bar text overflow */
navigation-barlinks {
	overflow: hidden;
}
/* Navigation text color and position */
navigation-barlinks a {
	float: left;
	display: block;
	color: #0059b3;
	text-align: center;
	text-decoration: none;
}
/* Navigation hover background color and text decoration */
navigation-barlinks a:hover {
	color: #0059b3;
	text-decoration: none;
}
/* Navigation font properties, text-size, color */
a.navigation-text {
	margin: 0 0 0 0;
	padding: 23px 16px 21px 16px;
	font-family: 'Comfortaa', sans-serif;
	line-height: 1.0;
	text-align: center;
	letter-spacing: 2px;
	text-decoration: none;
	color: #0059b3;
	font-size: 13px;
	font-weight: normal;
}
/* Navigation menu-bars size and color */
a.navigation-menu {
	margin: 0 0 0 0;
	padding: 20px 16px 20px 16px;
	line-height: 1.0;
	text-align: center;
	text-decoration: none;
	color: #0059b3;
	font-size: 16px;
}
/* Navigation menu-bars special-character size and scale */
a.navigation-menu-character {
	font-weight: bold;
	transform: scale(1.2, 1); /* stretches the character width */
}
/* Navigation links and menu-bar */
navigation-barlinks .navigation-menu {display: none;}
/* Navigation responsive for screen size */
@media screen and (max-width: 1400px) {
	navigation-barlinks a {display: none;}
	navigation-barlinks a.navigation-menu {
		float: right;
		display: block;
	}
	navigation-barlinks.responsive {position: relative;}
	navigation-barlinks.responsive .navigation-menu {
		position: absolute;
		right: 0;
		top: 0;
	}
	navigation-barlinks.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}