/* Treatment Page Styles */
.border-top { border-top: 1px solid rgba(0,0,0,0.1); }

/* HERO
######################################################### */
.hero { position: relative; }
.hero .layout { z-index: 10; }
.hero .content { width: 64%; padding: 1rem 0 3rem; }
.hero h1 { font-size: 2.5rem; }
.hero .tagline { width: 80%; transform: rotate(-4deg); max-width: 28rem; }
.hero .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hero .img .hero-img {
	position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center center;
}
@media only screen and (max-width: 599px) {
	/*.hero { display: flex; flex-direction: column-reverse; }
	.hero .img { position: relative; width: 100%; padding-bottom: 33.33%; }
	.hero .img .hero-img {
		position: absolute; left: 0; top: 0; width: 100%; height: 100%;
		object-fit: cover; object-position: right center;
	}*/
	.hero .content { width: 66.66%; padding: 1rem 0 1rem; }
	.hero h1 { font-size: 1.8rem; margin-bottom: 0; }
	.hero p { display: none; }
}

@media only screen and (min-width: 600px) {
	/*.hero .layout { z-index: 10; }
	.hero .content { width: 64%; padding: 1rem 0 3rem; }
	.hero h1 { font-size: 2.5rem; }
	.hero .tagline { width: 80%; transform: rotate(-4deg); max-width: 28rem; }
	.hero .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
	.hero .img .hero-img {
		position: absolute; z-index: 5; left: 0; top: 0; width: 100%; height: 100%;
		object-fit: cover; object-position: center center;
	}*/
}

@media only screen and (min-width: 600px) and (max-width: 899px) {
	.hero h1 { font-size: 2rem; }
}

@media only screen and (min-width: 1100px) {
	.hero .content { padding: 2rem 0 4rem; }
	.hero h1 { font-size: 3rem; }
}

/* LAYOUT
######################################################### */
@media only screen and (min-width: 1024px) {
	.content-body { display: flex; }
	.content-body .info { width: 70%; }
	.content-body .call-to-action { width: 30%; }
}

@media only screen and (max-width: 599px) {
	.testimonials-treatment { margin-top: 0.5rem; margin-bottom: 0.5rem; }
}

/* MAIN INFO
######################################################### */
.video { margin-bottom: 2rem; }
.video > * { width: 100%; }

@media only screen and (min-width: 600px) {
	.video {
		position: relative; z-index: 100; padding: 1rem; margin-bottom: 3rem;
		background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	}
}

@media only screen and (min-width: 600px) and (max-width: 1023px) {
	.video { margin-top: -4rem; }
}

@media only screen and (min-width: 1024px) {
	.video { margin-top: -6rem; }
}

/* ANTI AGING FOR LIFE PLAN
######################################################### */
.section-anti-aging-for-life .step { display: flex; margin-bottom: 1rem; }
.section-anti-aging-for-life .step .col-number {
	position: relative; text-align: center; color: #b36038; font-weight: 500;
	width: 7rem; flex-grow: 0; flex-shrink: 0; background-color: #fadbc7;
}

.section-anti-aging-for-life .step .col-number > div {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.section-anti-aging-for-life .step .col-number span {
	font-size: 3rem; line-height: 1em; display: block;
}
.section-anti-aging-for-life .step .col-description { flex-grow: 1; flex-shrink: 1; padding: 1.5rem 2rem; }

/* FAQs
######################################################### */
.section-faqs { border-top: 1px solid rgba(0,0,0,0.1); }
.section-faqs h4 { color: #00aa98; }

/* TESTIMONIALS
######################################################### */
.testimonials-treatment img { width: 100%; opacity: 0.3; }
.testimonials-treatment .left-quote { position: absolute; top: 2rem; left: 1rem; width: 2.5rem; }
.testimonials-treatment .right-quote { position: absolute; bottom: 2rem; right: 1rem; width: 2.5rem; transform: rotate(180deg); }

@media only screen and (max-width: 999px) {
.testimonials-treatment { padding: 0 2rem; }
}

@media only screen and (max-width: 799px) {
.testimonials-treatment .layout-3-col > * { width: 100%; }
}

@media only screen and (max-width: 599px) {
.testimonials-treatment { padding: 0 1.5rem; }
.testimonials-treatment .left-quote { top: 1rem; left: 0.5rem; width: 2rem; }
.testimonials-treatment .right-quote { bottom: 1rem; right: 0.5rem; width: 2rem; }

}

/* CALL TO ACTION
######################################################### */
.call-to-action .container { padding: 2.5rem 1.5rem; text-align: center; }
.call-to-action .main-text { font-size: 2.5rem; line-height: 1.1em; }
.call-to-action .hurry { opacity: 0.8; }
.call-to-action .tagline { width: 90%; max-width: 30rem; }

@media only screen and (max-width: 1023px) {
	.mobile-book-now {
		position: fixed; bottom: 0; left: 0; width: 100%; padding: 1.5rem;
		text-align: center; transition: transform 300ms ease;
	}
	.mobile-book-now.hide { transform: translateY(100%); }
}

@media only screen and (min-width: 1024px) {
	.call-to-action .container { position: absolute; right: 0; width: 100%; }
	.call-to-action .container.fixed { position: fixed; top: 9.1rem; width: inherit; }
	.call-to-action .container.top { top: 0; }
	.call-to-action .container.bottom { bottom: 0; }
	.call-to-action .tagline {
		position: absolute; bottom: 0; left: 6%; width: 90%;
		transform: translateY(-30%) rotate(-3deg);
	}
	.mobile-book-now { display: none; }
}

@media only screen and (min-width: 1024px) and (max-width: 1299px) {
	.call-to-action .container { padding: 2rem 1.5rem 10%; }
	.call-to-action .main-text { font-size: 2.2rem; }
}

/* SPECIFIC TREATMENTS
######################################################### */
.page-id-82 .hero .content { width: 60%; }
/* Ultherapy */
.page-id-79 .hero .content { width: 55%; }