:root {
	font-size: 100%;
	line-height: 1.2;
	--phone-safe: env(safe-area-inset-top) env(safe-area-inset-right)
		env(safe-area-inset-bottom) env(safe-area-inset-left);
	--phone-safe-top: env(safe-area-inset-top);
	--phone-safe-right: env(safe-area-inset-right);
	--phone-safe-bottom: env(safe-area-inset-bottom);
	--phone-safe-left: env(safe-area-inset-left);
}
:root * {
	box-sizing: border-box;
}
body {
	margin: 0;
}
img {
	width: auto;
}
main {
	/* min-height: calc(100vh - 400px); */
}

/* Basic typographic styles */
h1 {
	font-size: 2.4rem;
	font-weight: 500;
}
h2 {
	font-size: 1.6rem;
	font-weight: 300;
}
h3 {
	font-size: 1.2rem;
	font-weight: 600;
}
h4 {
	font-size: 1rem;
	font-weight: 700;
}
h5 {
	font-size: 0.875rem;
	font-weight: 700;
}
h6 {
	font-size: 0.75rem;
	font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1em auto;
}
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {
	margin-top: 2em;
}
p {
	font-size: 1rem;
	line-height: 1.7;
	margin: 1em auto;
}
blockquote {
	font-size: 1rem;
	line-height: 1.7;
	margin: 1.5em 2em;
}
ul,
ol {
	font-size: 1rem;
	line-height: 1.7;
	margin: 1em auto;
	padding-left: 1.5em;
}
p:first-child {
	margin-top: 0;
}
a {
	text-decoration: underline;
}
a[href^="tel:"] {
	font-variant-numeric: lining-nums tabular-nums;
}
small {
	font-style: italic;
}

.button,
button,
input[type="submit"] {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	font-size: 1em;
	color: var(--secondary);
	border-color: var(--secondary);
	text-decoration: none;
	background: #fff;
	border-style: solid;
	border-width: var(--button-border-width);
	padding: 1rem;
	cursor: pointer;
	border-radius: var(--button-radius);
	transition: background-color ease-in-out 60ms, color ease-in-out 60ms;
}
.button:hover,
.button:active,
button:hover,
button:active,
input[type="submit"]:hover,
input[type="submit"]:active {
	background-color: var(--secondary);
	color: #fff;
}
.button.secondary,
button.secondary,
input[type="submit"] {
	color: #fff;
	background-color: var(--primary);
	border-color: var(--primary);
	border-bottom-color: var(--alternate);
}
.button.secondary:hover,
.button.secondary:active,
button.secondary:hover,
button.secondary:active,
input[type="submit"]:hover,
input[type="submit"]:active {
	background-color: var(--alternate);
	border-color: var(--alternate);
}
.button.alt,
button.alt {
	background-color: #fff;
	color: var(--primary);
	border-width: 0 0 5px;
	border-color: #fff;
	border-bottom-color: var(--primary);
}
.button.alt:hover,
.button.alt:active,
button.alt:hover,
button.alt:active {
	background: var(--alternate);
	border-color: var(--alternate);
	color: #fff;
}
svg.icon {
	fill: currentColor;
	width: 2em;
	height: 2em;
}
svg.filters {
	height: 0;
	width: 0;
}
svg filter feFlood {
	flood-color: var(--headerTXT);
}
button svg.icon {
	display: inline-block;
	vertical-align: middle;
	/* font-size: 1rem; */
	width: 1em;
	height: 1em;
	margin: 0 10px;
	transform: translate(0, -3px) scale(1.4);
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Layout */
main > section {
	/* padding: 2em 0; */
}
.page-header,
.page-footer,
main > article,
main > div,
main > section {
	padding-right: var(--phone-safe-right);
	padding-left: var(--phone-safe-left);
}
main > article,
main > div,
main > section {
	padding: 2em 0;
}
main > article:first-child,
main > div:first-child,
main > section:first-child {
	padding: 0;
}
/* main > section:first-of-type {
  padding-top: 0;
} */
/* body>header::before, body>footer::before, main::before, body > section::before,
body>header::after, body>footer::after, main::after, body > section::after {
  display: table;
  content: "";
  clear: both;
} */
.page-header > .content,
.page-footer > .content,
article > .content,
section > .content,
main > div > .content,
main > aside > .content,
.page-header .content,
.page-footer .content,
.content.fw .inner {
	padding: 0 1rem;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.content.fw {
	/* Override for full-width content */
	padding: 0;
	max-width: none;
}
@supports (display: grid) {
	body {
		min-height: 100vh;
		display: grid;
		grid-template: [header-start] auto [header-end] 1fr [footer-start] auto [footer-end] / 1fr;
	}
}

/* Section breaks */
.promo .content::after,
.articles article::after,
.separator::after,
.page-footer .hours::after,
.badge-invisalign .content::after,
.badge-invisalign .content::before,
.form-appointment h2::after {
	content: "";
	display: block;
	clear: both;
	position: relative;
	top: 1em;
	margin: 0 auto;
	background: linear-gradient(
		to right,
		transparent,
		var(--secondary),
		transparent
	);
	opacity: 0.6;
	height: 0.025em;
	min-height: 1px;
	width: 100%;
}
.badge-invisalign .content::before {
	top: -1em;
}

/* Sections */

/* Page Header */
.page-header {
	min-height: 80px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.23);
	z-index: 1;
	display: flex;
	position: relative;
}
.page-header .content {
	display: flex;
	width: 100%;
	align-items: center;
	position: static;
	vertical-align: middle;
	min-height: 80px; /* To satisfy IE11 with Flexbox */
}
.page-header .logo {
	display: block;
	/* max-height: 40px; */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.page-header .logo img {
	display: block;
	max-height: 50px;
	max-width: 220px;
}
@media only screen and (min-width: 480px) {
	.page-header .logo img {
		max-width: 260px;
	}
}
.page-header a {
	font-size: 0.875rem;
	font-weight: 400;
	text-decoration: none;
}
.page-header a:hover {
	text-decoration: underline;
}
.page-header nav {
	display: flex;
	flex-wrap: wrap-reverse;
	width: 100%;
	align-items: center;
}
.page-header nav > * {
	display: inline-flex;
}
.page-header nav .utility {
	margin-left: auto;
}
.page-header nav .primary {
	/* display: none; */
}
@media only screen and (max-width: 839px) {
	.page-header nav .primary {
		position: absolute;
		left: 0;
		top: 80px;
		width: 100%;
		background: #fff;
		max-height: 0;
		display: block;
		padding: 0;
		height: auto;
		overflow: hidden;
		transition: max-height 250ms ease-in-out;
	}
	.page-header nav .primary.active {
		/* height: auto; */
		max-height: 10rem;
	}
	.page-header nav .primary li {
		display: block;
		font-size: 1.2rem;
		line-height: 3.5;
		/* border-bottom: 1px solid var(--xlight); */
	}
	.page-header nav .primary li:not(:last-child) {
		border-bottom: 1px solid var(--light);
	}
	/* .page-header nav .primary li:first-child {
    margin-top: 1rem;
  }
  .page-header nav .primary li:last-child {
    margin-bottom: 1rem;
  } */
	.page-header nav .primary a {
		color: var(--primary);
		display: block;
		padding: 0 1em;
		text-decoration: none;
		color: var(--secondary);
	}
	.page-header nav .primary a:hover {
		background: var(--xlight);
	}
}
.page-header nav .utility li {
	margin-left: 0.25em;
}
.page-header nav .utility .label {
	display: none;
}
.page-header nav .icon {
	height: 2rem;
	max-width: 1.5rem;
}
.page-header nav .menu-toggle .icon {
	width: 1.8rem;
	height: 1.8rem;
}
@media only screen and (min-width: 840px) {
	.page-header {
		display: flex;
	}
	.page-header .logo {
		position: static;
		top: auto;
		left: auto;
		transform: none;
	}
	.page-header nav .menu-toggle {
		display: none;
	}
	.page-header nav .primary {
		display: flex;
	}
	.page-header nav .primary li {
		margin: 0 0 0 1em;
		white-space: nowrap;
	}
	.page-header nav .primarey a {
	}
	.page-header ul a {
		display: inline-flex;
		align-items: center;
	}
	.page-header nav .utility .label {
		display: inline-block;
		margin-right: 0.5em;
		line-height: 1.3;
	}
}
/* @media only screen and (min-width: 1700px) {
  .page-header .logo {
    position: absolute;
    left: 1rem; top: 50%;
    transform: translate(0, -50%);
  }
} */

/* Page Footer */
.page-footer {
}
.page-footer section {
	margin: 2rem 0 0;
}
.page-footer h4 {
	margin: 0 0 0.5em;
}
.page-footer .location .tel {
	margin: 1em 0 0;
}
.page-footer .location a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.3em;
	font-variant-numeric: lining-nums tabular-nums;
}
.page-footer .location .practice {
}
.page-footer .location .practice > div:not(:first-child) {
	margin-top: 1em;
}
.page-footer .footer-pc-text {
	font-style: italic;
}
.page-footer .hours {
	/* display: table; */
}
.page-footer .hours .day {
	display: table-row;
	height: 1.5em;
	padding: 0 0.3em;
}
.page-footer .hours .day span,
.page-footer .hours .day time {
	display: table-cell;
	vertical-align: middle;
	font-variant-numeric: lining-nums tabular-nums;
}
.page-footer .hours .label {
	padding-right: 0.5em;
	font-weight: 600;
}
.page-footer .social-icons {
	list-style: none;
	margin: 0;
	padding: 0;
}
.page-footer .social-icons li {
	display: inline-block;
	margin-right: 0.5em;
}
.page-footer .social-icons li:last-child {
	margin-right: 0;
}
.page-footer .content {
	display: grid;
	grid-template-areas:
		"hours"
		"location"
		"contact"
		"social"
		"accessibility";
	grid-gap: 1em;
	overflow: hidden;
}
.page-footer .location {
	grid-area: location;
}
.page-footer .contact-info {
	grid-area: contact;
}
.page-footer .hours {
	grid-area: hours;
}
.page-footer .hours::after {
	display: none;
}
.page-footer .social {
	grid-area: social;
}
.page-footer .accessibility {
	grid-area: accessibility;
}
@media only screen and (min-width: 600px) {
	.page-footer .content {
		grid-template-columns: 2fr 1fr;
		grid-template-areas:
			"hours          hours"
			"location       social"
			"contact 				contact"
			"accessibility  accessibility";
	}
	.page-footer .hours {
		/* margin-bottom: 2em; */
	}
	.page-footer .hours::after {
		display: block;
		margin: 1em auto;
		top: 1em;
	}
	.page-footer .hours .days {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		height: auto;
		justify-content: space-around;
	}
	.page-footer .hours .day,
	.page-footer .hours .day .time {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.page-footer .hours .day {
		padding: 1em 5px;
		min-width: 70px;
		height: auto;
	}
	.page-footer .hours .day.current {
		background: #fff;
	}
	.page-footer .hours .day .label {
		padding: 0;
		margin: 0 auto 1em;
	}
	.page-footer .hours .day span {
	}
	.page-footer .hours .day .sep {
		visibility: hidden;
		height: 1px;
	}
}
@media only screen and (min-width: 800px) {
	.page-footer .hours .day {
		padding: 1em 10px;
		min-width: 80px;
	}
}
@media only screen and (min-width: 1000px) {
	.page-footer .content {
		grid-template-columns: 4fr 5fr 2fr;
		grid-template-areas:
			"hours hours hours"
			"location contact social"
			"accessibility accessibility .";
	}
	.page-footer .hours .day {
		padding: 1em;
		min-width: 100px;
	}
}

/* Book appintment/Aside */
main > aside {
}
aside.book-appointment .content {
	text-align: center;
}
aside.book-appointment .message {
	display: inline-block;
	text-align: left;
}
aside.book-appointment .message h1,
aside.book-appointment .message h2 {
	font-size: 1.5rem;
	font-weight: 200;
	margin: 1em auto;
	color: #fff;
}
aside.book-appointment .message span {
	display: block;
	font-size: 1.4em;
	font-weight: 400;
}
aside.book-appointment .action {
	padding: 1.2em 0;
}
@media only screen and (min-width: 800px) {
	aside.book-appointment .content {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
}
h1 + aside.cta {
	margin-top: -2em;
}
aside.cta {
	padding: 0 0 3em;
	color: var(--lighter);
}
article aside.cta::after {
	top: 1em;
}

/* Page Content */
.page-content {
}
/* Welcome */
.welcome {
	position: relative;
	padding: 0;
}
.welcome-alpha .content.fw .inner {
	padding-top: 2em;
	padding-bottom: 1em;
}
.welcome-beta .content.fw .inner,
.welcome-charlie .content.fw .inner {
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.welcome-charlie .content.fw {
	background: var(--secondary)
		url(https://res.cloudinary.com/heartland-dental/image/upload/v1539630403/_common/design/quantum-foam.png)
		no-repeat center top;
	position: relative;
	top: -80px;
	padding-top: 80px;
	margin-bottom: -80px;
}
.page-home.charlie .page-header {
	background: transparent;
}
.page-home.charlie .page-header a {
	color: #fff;
}
.welcome-beta + .promo {
	position: relative;
	top: -100px;
	padding: 0;
	margin-bottom: -100px !important;
}
.welcome-beta + .promo .content {
	background: #fff;
}
.page-home.beta .page-header,
.page-home.charlie .page-header {
	box-shadow: none;
}
.page-home.beta .page-header {
	background: transparent;
	color: var(--secondary);
}
.page-home.beta .page-header ul a,
.page-home.beta .page-header svg.icon {
	color: var(--secondary);
}
.page-home.beta .page-header svg filter feFlood {
	flood-color: var(--secondary);
}
.page-home.beta .page-header .logo img {
	filter: url(#color-overlay);
}
@media only screen and (min-width: 800px) {
	.welcome-beta .content.fw .inner,
	.welcome-charlie .content.fw .inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		min-height: 460px;
	}
}
.welcome img.hero {
	width: 100%;
	display: block;
	max-height: 400px;
	min-height: 200px;
	object-fit: cover;
	object-position: left 30%;
	margin: 0;
}
.welcome-alpha .message {
	font-size: 2rem;
	text-align: center;
}
.welcome.left .message {
	left: 10%;
}

.welcome-alpha h1 {
	display: inline-block;
	text-align: left;
	font-size: 1.6rem;
	font-weight: 400;
	margin: 0;
}
.welcome-alpha h1 span {
	font-size: 2em;
	display: block;
	font-weight: 600;
}
.welcome-beta h1,
.welcome-charlie h1 {
	color: var(--secondary);
	font-size: 1.3rem;
}
.welcome-charlie h1 {
	color: #fff;
}
.welcome-beta h1 span,
.welcome-charlie h1 span {
	font-size: 1.8em;
	display: block;
	font-weight: 600;
}
.welcome-beta .copy,
.welcome-charlie .copy {
	max-width: 600px;
}
.welcome-beta .copy blockquote,
.welcome-charlie .copy blockquote {
	margin: 2em 0;
	font-size: 1rem;
	line-height: 1.8;
}
.welcome-beta .copy blockquote p,
.welcome-charlie .copy blockquote p {
	font-style: italic;
	color: var(--medium);
	font-size: 1.1rem;
	line-height: 2;
	margin-bottom: 0;
}
.welcome-charlie .copy blockquote,
.welcome-charlie .copy blockquote p,
.welcome-charlie .copy blockquote a,
.welcome-charlie .make-appointment {
	color: #fff;
}
.welcome-charlie .make-appointment .button {
	background: transparent;
	border-color: #fff;
	color: #fff;
}
.welcome-charlie .make-appointment .button.secondary {
	background-color: #fff;
	color: var(--secondary);
	border-color: #fff;
}
.welcome .make-appointment .button:hover,
.welcome .make-appointment .button:active {
	color: #fff;
	background-color: var(--alternate);
	border-color: var(--alternate);
}
.welcome-charlie .star-rating a {
	color: #fff;
}
@media only screen and (min-width: 800px) {
	.welcome-beta .copy,
	.welcome-charlie .copy {
		max-width: 400px;
	}
	.welcome-beta h1 span,
	.welcome-charlie h1 span {
		font-size: 2em;
	}
}
@media only screen and (min-width: 1200px) {
	.welcome-beta .copy,
	.welcome-charlie .copy {
		max-width: 600px;
	}
	.welcome-beta h1 span,
	.welcome-charlie h1 span {
		font-size: 3em;
	}
}

.welcome .make-appointment {
	text-align: center;
}
.welcome .make-appointment > * {
	display: block;
	vertical-align: middle;
	margin: 1rem auto;
}
.welcome .make-appointment span {
	font-size: 0.9em;
}
.welcome .make-appointment .button {
	width: 280px;
	line-height: 1.2rem;
}
.welcome .make-appointment .button .label {
	display: block;
	font-size: 0.6em;
	line-height: 1;
	font-weight: 200;
	margin: 0 0 0.5em;
}
.welcome .make-appointment .button .number {
}
.welcome .make-appointment .button[href^="tel:"] {
	font-size: 1.6em;
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
}

.welcome .star-rating {
	text-align: center;
	font-size: 0.9rem;
	margin: 2em auto 0;
}
.welcome .star-rating span {
	display: block;
}
.star-rating .rating-value,
.star-rating .comments {
	text-decoration: none;
}
.star-rating a {
	text-decoration: none;
	color: var(--normal);
}
.star-rating a:hover .rating-value,
.star-rating a:hover .comments {
	text-decoration: underline;
}

.star-rating .stars {
	display: block;
	position: relative;
	margin: 0.5rem auto;
	width: 155px;
	height: 29px;
	background-image: url(img/stars.png);
	background-size: 31px 58px;
	background-repeat: repeat-x;
	background-position: 0 100%;
	width: 155px;
	height: 29px;
}
.star-rating .stars span {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background-image: url(img/stars.png);
	background-size: 31px 58px;
	background-repeat: repeat-x;
	background-position: 0 0;
}

/* CSS fallback for more precise JavaScript implementation */
.star-rating .stars[data-rating^="0.5"] span {
	width: 10%;
}
.star-rating .stars[data-rating^="1"] span {
	width: 20%;
}
.star-rating .stars[data-rating^="1.5"] span {
	width: 30%;
}
.star-rating .stars[data-rating^="2"] span {
	width: 40%;
}
.star-rating .stars[data-rating^="2.5"] span {
	width: 50%;
}
.star-rating .stars[data-rating^="3"] span {
	width: 60%;
}
.star-rating .stars[data-rating^="3.5"] span {
	width: 70%;
}
.star-rating .stars[data-rating^="4"] span {
	width: 80%;
}
.star-rating .stars[data-rating^="4.5"] span {
	width: 90%;
}
.star-rating .stars[data-rating^="5"] span {
	width: 100%;
}

@media only screen and (min-width: 960px) {
	.welcome-alpha .content.fw .inner {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		margin: 0 auto;
		height: 100%;
		display: flex;
		/* padding-left: 55%; */
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-top: 0;
		padding-bottom: 0;
	}
	.welcome-alpha .message,
	.welcome-alpha .action {
		margin-left: 60%;
	}
	.welcome img.hero {
		max-height: 500px;
	}
	.welcome-alpha img.hero {
		min-height: 400px;
		max-height: 600px;
	}
}
@media only screen and (min-width: 1000px) {
	.welcome-alpha .message,
	.welcome-alpha .action {
		margin-left: 55%;
	}
	.welcome .action {
		width: 100%;
		max-width: 360px;
	}
	.welcome .make-appointment .button {
		width: 100%;
	}
}
@media only screen and (min-width: 1200px) {
	.welcome-alpha .message,
	.welcome-alpha .action {
		margin-left: 60%;
	}
}

@media only screen and (min-width: 1000px) and (min-height: 1000px) {
	.welcome img.hero {
		max-height: 800px;
	}
}
@media only screen and (min-width: 1400px) {
}
@media only screen and (min-width: 2000px) and (min-height: 1400px) {
	.welcome-alpha img.hero {
		max-height: 1000px;
	}
}
@media only screen and (min-width: 2500px) and (min-height: 1600px) {
	.welcome-alpha img.hero {
		max-height: 1200px;
	}
}

/* Promo spots */
.promo {
	display: block;
	margin-bottom: 4em;
	text-align: center;
	margin: 1em;
	color: var(--lighter);
}
.promo .content {
	padding: 2em 0;
}
.promo header {
	display: block;
	color: var(--emphasis);
}
.promo header span {
	display: none;
}
.promo header h1 {
	font-size: 1.75em;
	font-weight: 800;
	margin: 0;
}
.promo h2 {
	font-size: 1.75em;
	font-weight: 200;
	margin: 0;
	color: var(--emphasis);
}
.promo p {
	font-size: 1.1rem;
}
.promo p:first-of-type {
	margin-top: 0;
}
.promo .price {
	font-weight: 600;
	color: var(--emphasis);
}
.promo .cta {
	color: var(--emphasis);
}
@media only screen and (min-width: 1000px) {
	.promo header h1,
	.promo header h2,
	.promo header span {
		display: inline;
		font-size: 2.4em;
	}
}

/* Mission Statement */
.mission-statement .content {
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.mission-statement p {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	margin: 2rem auto;
}
@media only screen and (min-width: 960px) {
	.mission-statement p {
		font-size: 4rem;
	}
}

/* Image Carousel */
.slider {
	position: relative;
}
.carousel {
	margin: 0 -0.5rem;
}
.carousel-cell {
	width: 50%;
	padding: 0 0.5rem;
	counter-increment: carousel-cell;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}
.carousel-cell a {
	display: block;
	text-align: center;
	color: inherit;
	text-decoration: none;
}
.carousel-cell a .caption {
	margin-top: 0.8rem;
}
.carousel-cell a:hover .caption {
	text-decoration: underline;
}
.carousel-cell .image {
	margin: 0.5em 0;
}
.gallery img {
	width: 280px;
}
.gallery.team img {
	border-radius: 100%;
}

@media only screen and (min-width: 1000px) {
	.carousel-cell {
		width: calc(100% / 3);
	}
}

/* Services Menu */
.services-menu {
	position: relative;
}
.services-menu::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 20%;
	width: 100%;
	background-color: var(--secondary);
	background-image: url(/images/wave-bg-8@low.png);
	background-size: cover;
	background-repeat: none;
	height: 33vw; /* Based on the aspect ratio of the image */
	z-index: -1;
}
@media only screen and (min-width: 1000px) {
	.services-menu::before {
		top: 100px;
		background-image: url(/images/wave-bg-8.png);
	}
}

.services-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.services-menu ul a {
	text-decoration: none;
}
.services-menu ul a:hover {
	text-decoration: underline;
}
.services-menu h2,
.services-menu h3 {
	font-size: 1rem;
	line-height: 2rem;
	font-weight: 800;
	margin: 2rem 0 0;
}
/* .services-menu h3 a {
  color: var(--secondary);
} */
.services-menu ul.menu > li {
	display: inline-block;
	width: 100%;
}
.services-menu ul.menu ul li {
	margin: 0;
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 2rem;
	text-indent: -1em;
	margin-left: 1em;
}
.services-menu li a {
}

@media only screen and (min-width: 600px) {
	.services-menu ul.menu {
		columns: 2 auto;
		column-gap: 2em;
	}
}
@media only screen and (min-width: 860px) {
	.services-menu ul.menu {
		columns: 3 auto;
	}
}
@media only screen and (min-width: 1000px) {
	.services-menu ul.menu {
		columns: 4 auto;
	}
}

/* About Section */
.copy-about {
}
.copy-about .content {
}
.copy-about .inside {
	padding-top: 2em;
}

.copy-about .copy :first-child {
	margin-top: 0;
}

.copy-about .collage {
	display: flex;
	flex-wrap: wrap;
}
.copy-about .collage .img {
	width: calc(50% - 10px);
}
.copy-about .collage img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	margin: 0 5px 10px;
}
@media only screen and (min-width: 720px) {
	.copy-about .collage {
		display: flex;
	}
	.copy-about .collage .img {
		width: calc(25% - 10px);
	}
	.copy-about .collage img {
		margin: 0 5px;
	}
}
@media only screen and (min-width: 1000px) {
	.copy-about .inside {
		display: flex;
		align-items: top;
	}
	.copy-about.gallery .copy {
		width: 60%;
		margin-right: 1em;
	}
	.copy-about.gallery .collage {
		width: 40%;
		height: 100%;
		flex-direction: column;
	}
	.copy-about.gallery .collage .img {
		width: 100%;
		height: 25%;
		margin: 0 0 5px;
	}
}

@supports (display: grid) {
	.copy-about.gallery .inside {
		display: grid;
		grid-gap: 2em;
		grid-template: 1 / 1;
	}
	.copy-about.gallery .copy {
		width: auto;
		margin: 0;
	}
	.copy-about.gallery .collage {
		height: 300px;
		width: auto;
		display: grid;
		grid-gap: 5px;
		grid-template: 1fr 1fr / 1fr 1fr;
	}
	.copy-about.gallery .collage .img {
		width: auto;
		height: auto;
		margin: 0;
		position: relative;
	}
	.copy-about.gallery .collage img {
		object-fit: cover;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	@media only screen and (min-width: 720px) {
		.copy-about.gallery .collage {
			grid-template: 1fr / 1fr 1fr 1fr 1fr;
		}
	}
	@media only screen and (min-width: 1000px) {
		.copy-about.gallery .inside {
			grid-template: 1fr / 6fr 4fr;
		}
		.copy-about.gallery .collage {
			grid-template-rows: 2fr 1fr 2fr;
			grid-template-columns: 3fr 2fr;
			height: auto;
			max-height: 100%;
		}
		.copy-about.gallery .collage .img:nth-child(1) {
			grid-column: 1 / 3;
			grid-row: 1;
		}
		.copy-about.gallery .collage .img:nth-child(2) {
			grid-column: 1 / 2;
			grid-row: 2;
		}
		.copy-about.gallery .collage .img:nth-child(3) {
			grid-column: 2 / 3;
			grid-row: 2;
		}
		.copy-about.gallery .collage .img:nth-child(4) {
			grid-column: 1 / 3;
			grid-row: 3;
		}
	}
}

/* Article Pages */
.content-nav {
	background: var(--accent);
	/* position: -webkit-sticky;
  position: sticky;
  top: 0px; */
	z-index: 1;
}
.content-nav ul {
	margin: 0 auto;
	padding: 1em 0;
	max-width: 800px;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.content-nav li {
	padding: 0 1em;
	line-height: 2;
}
@media only screen and (min-width: 640px) {
	.content-nav ul {
		justify-content: space-around;
	}
	.content-nav li {
		padding: 0 0.5em;
	}
}

.content-nav li.current {
	font-weight: bold;
}
.content-nav a {
	color: var(--normal);
	text-decoration: none;
}
.content-nav a:hover {
	text-decoration: underline;
}
.articles {
	position: relative;
	margin: 0 auto;
	max-width: 650px;
}
/* .articles .content {
  max-width: 650px;
} */
.articles article {
	margin: 0 auto 7em;
}
.articles .nav {
	margin-top: 3em;
}
.articles .nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.articles .nav li {
	font-size: 0.875rem;
	line-height: 2.2;
	text-indent: -1em;
	margin-left: 1em;
}
.articles .nav li a:not(:hover) {
	text-decoration: none;
}
@media only screen and (min-width: 480px) {
	.articles .nav ul {
		column-count: 2;
		column-gap: 1em;
	}
}
@media only screen and (min-width: 1200px) {
	.articles {
		max-width: 800px;
	}
	.articles.has-nav {
		max-width: 1200px;
	}
	.articles.has-nav article {
		margin-left: calc(240px + 2em);
		margin-right: 6em;
	}
	.articles.has-nav article article {
		margin-left: 0;
		margin-right: 0;
	}
	.articles .nav {
		position: absolute;
		left: 1em;
		top: 2em;
		max-width: 240px;
	}
	.articles .nav ul {
		column-count: 1;
	}
}

/* Doctor's Chair */
article .chair {
	padding: 2rem;
	background: var(--accent);
	border-bottom: 4px solid var(--primary);
}
@media only screen and (min-width: 1200px) {
	article .chair img {
		float: left;
	}
	article .chair .copy {
		margin-left: calc(160px + 2em);
		margin-bottom: 2rem;
	}
}
article .chair h2 {
	margin-top: 0;
	font-weight: 700;
	font-size: 1.2rem;
}
article .chair img {
	border-radius: 100em;
	max-width: 160px;
	margin: 0 0 2rem;
}
article .chair .buttons {
	clear: both;
	align-self: stretch;
	text-align: right;
}

.image {
	margin: 0.5em 2em 1em;
}
.image img {
	width: 100%;
	max-width: 250px;
}
.image.center {
	text-align: center;
}
.image.left {
	text-align: left;
}
.image.right {
	text-align: right;
}
.image.center img,
.image.left img,
.image.right img,
.image.center a,
.image.left a,
.image.right a {
	display: inline-block;
}
.image.clear {
	clear: both;
}
.image.float {
	text-align: center;
}
@media only screen and (min-width: 480px) {
	.image.float img {
		display: inline;
	}
	.image.float.right {
		float: right;
		margin-right: 0;
	}
	.image.float.left {
		float: left;
		margin-left: 0;
	}
}

/* Forms - OAR */
.form {
}
.page-oar .form {
	max-width: 800px;
	margin: 0 auto;
}
.page-oar .form-appointment {
	max-width: 600px;
}
.page-oar .hide,
.form form .hide {
	display: none;
}
.form-content section {
	margin: 3em auto 6em;
}
.form-appointment h2 {
	margin: 2rem auto 3rem;
}
.form-appointment h2::after {
	top: 0.6em;
}
.form-appointment h2 + * {
	padding-top: 1rem;
}
.form-appointment .form-status {
	margin: 2rem auto 6rem;
	text-align: center;
}
.form .group {
	margin: 1rem 0 3rem;
	padding: 0;
}
.form .subgroup .group {
	margin-bottom: 0;
}
.form .group .subgroup {
	max-height: 0;
	overflow-y: hidden;
	transition: max-height 500ms ease-in-out;
}
.form .group .subgroup.show {
	max-height: 900px;
}
.form .group .subgroup.emergency {
	padding: 0 0 0 1rem;
}

@media only screen and (min-width: 640px) {
	.form .group .subgroup.emergency {
		padding: 0 1rem 0 3rem;
	}
}
.form .field,
.form .field-combo,
.form label {
	margin: 0 0 1.5rem;
	/* padding: 0 5px; */
	position: relative;
}
.form .field-combo .field,
.form .field-combo label {
	display: inline-block;
	padding: 0 5px;
}
.form .field-combo > .field,
.form .field-combo > label {
	margin: 0 3rem 0 0;
}
.form .field-combo .field label {
	margin: 0;
}

.form label input[type="radio"],
.form label input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
	left: 5px;
	bottom: 5px;
	position: absolute;
}
.form label input ~ .control {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}
.form .field-text,
.form .field-textsubmit,
.form .field-radiotext {
	padding: 1rem 5px 0;
}
.form .field-textsubmit {
	display: flex;
}
.form .field-textsubmit button {
	margin-left: 1rem;
	padding-left: 2rem;
	padding-right: 2rem;
}
.form .field-text input,
.form .field-textsubmit input[type="text"] {
	background: #fafafa;
	border: none;
	border-bottom: 2px solid #9e9e9e;
	width: 100%;
	padding: 0.6em 1em;
	font-size: 1rem;
	color: #000;
}
.form .field-textsubmit input[type="text"] {
	max-width: 50%;
	min-width: 180px;
}
.form .field input::placeholder {
	color: var(--light);
}
.form .field-text label,
.form .field-textsubmit label {
	position: absolute;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0;
	top: 0;
}
.form .field-text.empty label,
.form .field-radiotext.empty label {
	font-size: 1rem;
	padding: 0.6rem 1em;
}

.form .field input[type="radio"] ~ label,
.form .field input[type="checkbox"] ~ label {
	padding-left: 1.8rem;
	text-indent: -1.8rem;
}
.form label input[type="radio"] ~ .control,
.form label input[type="checkbox"] ~ .control {
	font-size: 1rem;
	border-radius: 100%;
	width: 1.2em;
	height: 1.2em;
	display: inline-block;
	vertical-align: middle;
	background: #fff;
	border: 0.3em solid #fff;
	box-shadow: 0 0 0 0.15em currentColor;
	margin: 0.5em 0.7em 0.5em 0;
	transition: background-color ease-in-out 100ms;
	cursor: pointer;
}

.form label input[type="radio"] ~ .text,
.form label input[type="checkbox"] ~ .text {
	cursor: pointer;
}
.form label input[type="radio"]:checked ~ .control,
.form label input[type="checkbox"]:checked ~ .control {
	background: currentColor;
}
.form label input[type="checkbox"] ~ .control {
	border-radius: 1px;
}

.form .field.field-pain {
	margin-bottom: 0;
}
.form .pain_scale {
	padding: 6px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
.form .pain_scale label {
	margin: 0 0 2rem;
	padding: 0 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 20%;
}
.form .pain_scale label input[type="radio"] ~ .control {
	margin: 0 0 10px;
}
@media only screen and (min-width: 480px) {
	.form .pain_scale label {
		width: auto;
	}
}
@media only screen and (min-width: 640px) {
	.form .pain_scale {
		flex-direction: row;
	}
	.form .pain_scale label {
		flex-direction: column;
	}
}
.form .painscale {
	display: grid;
	position: relative;
	grid-template-rows: repeat(6, 1fr);
	grid-gap: 10px;
}
.form .painscale .bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 77px;
	z-index: 1;
	width: 8px;
	border-radius: 4px;
	background: #55b205;
	background: -moz-linear-gradient(
		top,
		#55b205 0%,
		#c0e809 20%,
		#fdc609 40%,
		#e57e08 60%,
		#d23807 80%,
		#c20015 100%
	);
	background: -webkit-linear-gradient(
		top,
		#55b205 0%,
		#c0e809 20%,
		#fdc609 40%,
		#e57e08 60%,
		#d23807 80%,
		#c20015 100%
	);
	background: linear-gradient(
		to bottom,
		#55b205 0%,
		#c0e809 20%,
		#fdc609 40%,
		#e57e08 60%,
		#d23807 80%,
		#c20015 100%
	);
}
.form .painscale label {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	z-index: 2;
	margin-bottom: 0;
	cursor: pointer;
}

.form .painscale label .symbol {
	width: 60px;
	margin-right: 10px;
}
.form .painscale label .control .text {
	font-size: 0.8rem;
}
@media only screen and (min-width: 480px) {
	.form .painscale label .control .text {
		font-size: 0.9rem;
	}
}
.form .painscale label input[type="radio"] ~ .control {
	font-size: 1rem;
	content: "";
	border-radius: 100%;
	width: 1.4em;
	height: 1.4em;
	display: inline-block;
	vertical-align: middle;
	background: #fff;
	border: 0.3em solid #fff;
	box-shadow: 0 0 0 0.15em currentColor;
	margin: 0 10px 0 0;
	transition: background-color ease-in-out 100ms;
}
.form .painscale label .text {
	color: var(--normal);
}
@media only screen and (min-width: 640px) {
	.form .painscale {
		display: grid;
		position: relative;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: none;
		grid-gap: 10px;
	}
	.form .painscale .bar {
		left: 0;
		right: 0;
		top: 81px;
		height: 8px;
		width: 100%;
		background: -moz-linear-gradient(
			left,
			#55b205 0%,
			#c0e809 20%,
			#fdc609 40%,
			#e57e08 60%,
			#d23807 80%,
			#c20015 100%
		);
		background: -webkit-linear-gradient(
			left,
			#55b205 0%,
			#c0e809 20%,
			#fdc609 40%,
			#e57e08 60%,
			#d23807 80%,
			#c20015 100%
		);
		background: linear-gradient(
			to right,
			#55b205 0%,
			#c0e809 20%,
			#fdc609 40%,
			#e57e08 60%,
			#d23807 80%,
			#c20015 100%
		);
	}
	.form .painscale label {
		flex-direction: column;
	}

	.form .painscale label .symbol {
		width: 60px;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.form .painscale label .control {
		margin-right: 0;
	}
	.form .painscale label input[type="radio"] ~ .control {
		margin: 0 0 10px;
	}
	.form .painscale label .text {
		font-size: 0.7rem;
		text-align: center;
	}
}
.form .painscale .field:nth-child(1) .symbol {
	width: 100%;
	height: auto;
}
.form .painscale .field:nth-child(2) .symbol {
	width: 100%;
	height: auto;
}
.form .painscale .field:nth-child(3) .symbol {
	width: 100%;
	height: auto;
}
.form .painscale .field:nth-child(4) .symbol {
	width: 100%;
	height: auto;
}
.form .painscale .field:nth-child(5) .symbol {
	width: 100%;
	height: auto;
}
.form .painscale .field:nth-child(6) .symbol {
	width: 100%;
	height: auto;
}

.form .painscale label:nth-child(1) {
	color: #55b205;
}
.form .painscale label:nth-child(2) {
	color: #c0e809;
}
.form .painscale label:nth-child(3) {
	color: #fdc609;
}
.form .painscale label:nth-child(4) {
	color: #e57e08;
}
.form .painscale label:nth-child(5) {
	color: #d23807;
}
.form .painscale label:nth-child(6) {
	color: #c20015;
}

.form .painscale label:nth-child(1) input:checked ~ .control {
	background-color: #55b205;
}
.form .painscale label:nth-child(2) input:checked ~ .control {
	background-color: #c0e809;
}
.form .painscale label:nth-child(3) input:checked ~ .control {
	background-color: #fdc609;
}
.form .painscale label:nth-child(4) input:checked ~ .control {
	background-color: #e57e08;
}
.form .painscale label:nth-child(5) input:checked ~ .control {
	background-color: #d23807;
}
.form .painscale label:nth-child(6) input:checked ~ .control {
	background-color: #c20015;
}

.form .painscale .symbol circle {
	fill: #fff;
}
.form .painscale .symbol path {
	fill: currentColor;
}
.form .painscale input:checked ~ .symbol circle {
	fill: currentColor;
}
.form .painscale input:checked ~ .symbol path {
	fill: #fff;
}

.form label input[type="radio"]:focus ~ .control,
.form label input[type="checkbox"]:focus ~ .control {
	color: #288cc6;
	/* background-color: #288cc6; */
}
.form button:focus,
.form input[type="submit"]:focus {
	border-bottom-color: #288cc6;
}
.form label input[type="radio"]:checked:focus ~ .control,
.form label input[type="checkbox"]:checked:focus ~ .control {
	color: #1b9f79;
	background-color: #1b9f79;
}
.form .field-text input:focus,
.form .field-textsubmit input[type="text"]:focus {
	border-bottom-color: #288cc6;
}
form.submitted label input[type="radio"]:invalid ~ .control,
form.submitted label input[type="checkbox"]:invalid ~ .control {
	color: #ef4a25;
}

form.submitted .field-text input:invalid,
form.submitted .field-textsubmit input[type="text"]:invalid {
	border-bottom-color: #4d4543;
}
form:invalid input[type="submit"],
form input[type="submit"]:disabled {
	background-color: var(--medium);
	border-color: var(--dark);
	opacity: 0.3;
	transition: all ease-in-out 100ms;
	cursor: not-allowed;
}
:not(output):-moz-ui-invalid:-moz-focusring {
	box-shadow: none;
}
:not(output):-moz-ui-invalid {
	box-shadow: none;
}

.form .field-grid {
	display: grid;
	grid-template: repeat(3, 1fr) / 2fr repeat(5, 1fr);
	margin: 0 0 2rem;
}
.form .field-grid .field {
	margin-bottom: 0;
	padding: 0.5rem 0.1rem;
}
.form .field-grid .label-days {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column: 2 / -1;
	grid-row: 1;
	align-content: end;
	justify-items: center;
}
.form .field-grid .label-time {
	display: grid;
	grid-template: repeat(2, 1fr) / 2fr;
	grid-row: 2 / -1;
	grid-column: 1;
	align-content: end;
	justify-items: end;
}
.form .field-grid .input-days {
	display: grid;
	grid-template: 1fr / repeat(5, 1fr);
	grid-column: 2 / -1;
	align-content: center;
	justify-items: center;
}
.form .field-grid abbr {
	text-decoration: none;
}
.form .field-grid .input-days.morning {
	grid-row: 2;
}
.form .field-grid .input-days.afternoon {
	grid-row: 3;
}
.form .field-grid label .text {
	display: none;
}
.form .field-grid label input[type="checkbox"] ~ .control {
	margin-right: 0;
}
.page-oar .form .field-submit {
	display: flex;
	justify-content: end;
}
.page-oar .form .field-submit input[type="submit"] {
	padding: 1em 3em;
}
.form-confirm .appt-details {
	text-align: center;
	margin: 4rem auto;
}
.form-confirm .appt-details .message {
	font-size: 1rem;
	text-align: center;
}
.form-confirm .appt-details .message span {
	font-size: 2em;
	display: inline-block;
	vertical-align: middle;
	padding: 0 0.5rem;
}
.form-confirm .appt-details .buttons {
	text-align: center;
}
.form-confirm .calendars {
	margin: 4rem auto;
}
.form-confirm .calendars .links {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
.form-confirm .calendars a {
	display: inline-block;
	margin: 0 2rem;
	width: 100px;
	padding-top: 100px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	text-decoration: none;
	color: var(--normal);
}
.form-confirm .icon-google {
	background-image: url(/images/cal-google.png);
}
.form-confirm .icon-ical {
	background-image: url(/images/cal-ical.png);
}
.form-confirm .icon-outlook {
	background-image: url(/images/cal-outlook.png);
}
.form-confirm .icon-yahoo {
	background-image: url(/images/cal-yahoo.png);
}
.page-oar .submitted .form-content {
	display: none;
}

.page-404 {
	background-color: var(--primary);
	color: #fff;
}
.error404 {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
}
.error404 .logo {
	display: block;
	margin: 3em auto;
	text-align: center;
	max-width: 100%;
}
.error404 .logo img {
	width: auto;
	max-width: 300px;
}
.error404 .message {
	width: 100%;
	margin: 3em auto;
	padding: 0 2em;
}
.error404 .message p {
	font-size: 1.2em;
}
.error404 .message a {
	color: var(--alternate);
}

.welcome.landing h1 {
	font-size: 1.2em;
	font-weight: 600;
}
.welcome.landing h1 sup {
	font-size: 0.5em;
	position: relative;
	top: -0.3em;
	left: -0.2em;
	margin-right: -0.3em;
}
.welcome.overlay .action {
	background: var(--secondary);
}
.welcome.landing .action p {
	font-size: 1.2em;
}
.page-content .promo-invisalignweek .button {
	font-size: 1.4rem;
}
.page-content .promo-invisalignweek .button span {
	display: block;
	text-align: left;
}
.page-content .promo-invisalignweek .button .label {
	font-size: 0.6em;
	font-weight: 200;
	margin: -0.2em auto 0.2em;
}
.page-content .promo-invisalignweek .button .number {
}
.page-content .promo-invisalignweek .welcome .make-appointment .button {
	display: inline-block;
}

.promo-form {
	background: var(--secondary);
	color: #fff;
}
.promo-form .content {
	padding: 3em 0;
}
.promo-form .content .text {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1em;
	color: #fff;
	text-align: center;
}
.promo-form .content .text h2 {
	color: #fff;
	font-weight: 600;
	font-size: 1.8rem;
}
.promo-form iframe {
	border: none;
	width: 100%;
	height: 25em;
}

/* Styles for inside iframe */
.form-promo-csl {
	color: #fff;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 1em;
}
.form-promo-csl .field {
	margin: 1em auto 0;
}
.form-promo-csl .field label {
	font-size: 0.8em;
	line-height: 1.5;
}
.form-promo-csl .field input[type="text"],
.form-promo-csl .field input[type="tel"],
.form-promo-csl .field input[type="email"] {
	width: 100%;
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.4rem;
}
.form-promo-csl .field.name {
}
.form-promo-csl .field.phone {
}
.form-promo-csl .field.email {
}
.form-promo-csl .field.submit {
	text-align: right;
	margin-top: 2em;
}
.form-promo-csl .field.submit button {
	font-size: 1.3rem;
	padding: 0 2em;
}
@media only screen and (min-width: 960px) {
	.promo-form iframe {
		height: 13em;
	}
	.form-promo-csl {
		max-width: 1200px;
		padding: 0;
	}
	.form-promo-csl .field {
		float: left;
		width: calc(100% / 3);
		padding: 0 1em;
	}
	.form-promo-csl .field.submit {
		width: 100%;
		float: none;
		clear: both;
		padding-top: 2em;
	}
}
.alert-success {
	max-width: 600px;
	margin: 1em auto 0;
	background: #fff;
	padding: 2em;
	color: #333;
}

/* Styles for promo short form */
.form-promo,
.form-overlay {
	color: #fff;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 1em;
}
.form-overlay {
	padding: 1em 3em;
}
.form-overlay h1,
.form-overlay h2 {
	color: #fff;
	text-align: center;
	font-weight: 600;
	font-size: 1.2rem;
	margin: 0 auto 0.5em;
}
.form-promo .field,
.form-overlay .field {
	margin: 1em auto 0;
}
.form-promo .field label,
.form-overlay .field label {
	font-size: 0.8em;
	line-height: 1.5;
}
.form-promo .field input[type="text"],
.form-promo .field input[type="tel"],
.form-promo .field input[type="email"],
.form-overlay .field input[type="text"],
.form-overlay .field input[type="tel"],
.form-overlay .field input[type="email"] {
	width: 100%;
	font-size: 1rem;
	line-height: 1.2;
	padding: 0.4rem;
}
.form-promo .field.name {
}
.form-promo .field.phone {
}
.form-promo .field.email {
}
.form-promo .field.submit,
.form-overlay .field.submit {
	text-align: right;
	margin-top: 2em;
}
.form-promo .field.submit button,
.form-overlay .field.submit button {
	font-size: 1.3rem;
	padding-left: 2em;
	padding-right: 2em;
}
.form-overlay .field.submit button {
	font-size: 0.9rem;
	text-transform: uppercase;
	width: 100%;
}
.form-overlay.submitted {
	position: relative;
}
.form-overlay .field,
.form-overlay h2 {
	transition: opacity ease-in-out 200ms;
}
.form-overlay.submitted .field,
.form-overlay.submitted h2 {
	opacity: 0;
}
.form-overlay .form-status {
	opacity: 0;
	transition: opacity ease-in-out 200ms;
}
.form-overlay.submitted .form-status {
	opacity: 1;
	position: absolute;
	top: 40%;
	left: 3em;
	right: 3em;
	text-align: center;
	line-height: 1.8;
}
@media only screen and (min-width: 960px) {
	.form-promo {
		max-width: 1200px;
		padding: 1em 0;
	}
	.form-promo .field {
		float: left;
		width: calc(100% / 3);
		padding: 0 1em;
	}
	.form-promo .field.submit {
		width: 100%;
		float: none;
		clear: both;
		padding-top: 2em;
	}
}
.alert-success {
	max-width: 600px;
	margin: 1em auto 0;
	background: #fff;
	padding: 2em;
	color: #333;
}

.promo-moreinfo .content {
	background: var(--primary)
		url(https://res.cloudinary.com/heartland-dental/image/upload/v1/_common/promo/invisalign-icon.png)
		no-repeat center 4em;
	min-height: 100px;
	margin: 3em auto;
	padding: 12em 2em 6em;
	color: #fff;
	max-width: calc(1200px - 2em);
}
.promo-moreinfo h2,
.promo-localinfo h2,
.promo-faq h2 {
	font-size: 1.8rem;
	font-weight: 600;
	text-align: center;
	margin: 0 auto 2em;
}
.promo-moreinfo h2,
.promo-faq h2 {
	color: #fff;
}
.promo-moreinfo p,
.promo-localinfo p {
	font-size: 1.2rem;
	line-height: 1.6;
}
.promo-moreinfo .action,
.promo-localinfo .action {
	text-align: center;
	margin: 3em auto 0;
}
.promo-moreinfo .action .button,
.promo-localinfo .action .button {
	padding-left: 2em;
	padding-right: 2em;
}

.promo-localinfo .content {
	min-height: 100px;
	background: url(https://res.cloudinary.com/heartland-dental/image/upload/v1/_common/promo/invisalign-pin.png)
		no-repeat center 4em / 100px;
	padding: 12em 2em 6em;
}
.promo-photos .content {
	padding: 3em 0.5em;
}
.promo-photos img {
	display: block;
	margin: 0 0.5em 1em;
	width: calc(100% - 1em);
}
@media only screen and (min-width: 600px) {
	.promo-photos .content {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}
	.promo-photos img {
		align-self: center;
		width: 50%;
		margin: 0 0.5em;
	}
}
.promo-faq .content {
	background: var(--secondary);
	color: #fff;
	min-height: 100px;
	max-width: calc(1200px - 2em);
	padding: 6em 2em;
}
.promo-faq dl {
	display: block;
	list-style: none;
	margin: 2em auto;
	padding: 0;
}
.promo-faq dt {
	font-size: 1.5rem;
	margin: 1em auto 0;
	font-weight: 600;
}
.promo-faq dd {
	font-size: 1rem;
	font-weight: 200;
	line-height: 1.6;
	padding: 0;
	margin: 0.5em auto 0;
}
.promo-faq .provider-logo {
	padding: 3em 0 0;
}
.promo-faq .provider-logo img {
	display: block;
	margin: 0 auto;
	width: 80%;
	max-width: 300px;
}
.promo-invisalignweek .promo-legal .content {
	padding: 3em 1em;
}
.promo-legal small {
	font-style: italic;
	font-size: 0.8em;
}
.promo-list .content {
	padding-top: 3em;
	padding-bottom: 3em;
	max-width: 800px;
}
.promo-list .content > p {
	clear: both;
}
.promo-list .content ul {
	margin-top: 3em;
}

/* Promo Teeth Tomorrow */
.teethtomorrow .content,
.teethtomorrow .content.fw .inner {
	max-width: 960px;
}
.teethtomorrow .content.fw {
	max-width: none;
}
.teethtomorrow-content {
	padding: 0 0 6rem;
}
.teethtomorrow sup {
	font-size: 0.6em;
}
.teethtomorrow-content header {
	padding: 1em 2em;
}
.teethtomorrow-content header h1 {
	text-align: center;
	font-weight: 600;
	/* font-size: 1.5rem; */
	text-transform: uppercase;
}
.teethtomorrow-content .intro {
	position: relative;
}
.teethtomorrow-content .intro .content {
	padding: 0 1em;
}
@media only screen and (min-width: 960px) {
	.teethtomorrow-content .intro .content {
		position: absolute;
		top: 0;
		bottom: 0;
	}
	.teethtomorrow-content .intro img {
		display: block;
		width: 100%;
		min-height: 520px;
		object-fit: cover;
		object-position: right top;
	}
	.teethtomorrow-content .intro .inner {
		display: grid;
		align-content: center;
		height: 100%;
	}
	.teethtomorrow-content .intro .copy {
		float: left;
		width: 60%;
		max-width: 640px;
		height: 100%;
	}
	.teethtomorrow-content .intro h2 {
		margin: 0.5em auto;
	}
}
.teethtomorrow .downloads {
	background: var(--secondary);
	color: #fff;
	padding: 2em 0;
}
.teethtomorrow .downloads p {
	font-size: 1.2rem;
	text-align: center;
}
@media only screen and (min-width: 600px) {
	.teethtomorrow .doc-icons {
		display: flex;
		margin: 4rem auto 2rem;
	}
}
.teethtomorrow .doc-icons a {
	text-align: center;
	line-height: 2;
}
.teethtomorrow .doc-icons figure {
	text-align: center;
}
.teethtomorrow .doc-icons figure img {
	position: relative;
	max-width: 160px;
	transform: rotate(9deg);
	transition: transform 100ms ease-in-out;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
}
.teethtomorrow .doc-icons figcaption {
	margin: 2rem auto 0;
}
.teethtomorrow .downloads a {
	color: #fff;
	text-decoration: none;
}
.teethtomorrow .downloads a:hover figure img {
	transform: scale(1.06) rotate(6deg);
}
.teethtomorrow .downloads a:hover figcaption {
	text-decoration: underline;
}
.teethtomorrow dl {
	margin: 0;
	padding: 0;
}
.teethtomorrow dt {
	font-size: 1.5rem;
	margin: 2rem auto 0.4rem;
}
.teethtomorrow dd {
	padding: 0 0 0 2rem;
	margin: 0 0 0.5rem 0;
	font-size: 1.1rem;
	line-height: 1.7;
	position: relative;
}
.teethtomorrow dd svg {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 1.2rem;
	height: 1.2rem;
}

/* SVG Graphic bullet lists */
.list-icons ul {
	padding: 0 2em;
	margin: 2em auto;
}
.list-icons li {
	list-style: none;
	margin: 1em auto 4em;
	position: relative;
	clear: both;
}
.bullet-graphic {
	position: relative;
	display: block;
	margin: 0 auto 1em;
	width: 120px;
	height: 120px;
}
.bullet-graphic svg {
	fill: var(--secondary);
	width: 90%;
	height: 90%;
}

.bullet-graphic::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 300px;
	position: absolute;
	background: var(--secondary);
	opacity: 0.1;
	z-index: -1;
	top: -1.5em;
	left: -1.5em;
}
@media only screen and (min-width: 600px) {
	.list-icons li {
		padding-left: calc(120px + 2em);
		min-height: calc(120px + 1em);
		/* overflow: hidden; */
	}
	.bullet-graphic {
		position: absolute;
		left: 0;
		margin: 1em 2em 3em 0;
	}
	.list-icons li p {
		/* float: left; */
	}
}

/* Meet the Doctor */
.meet-doctor .doctor {
	display: flex;
	flex-direction: column;
	max-width: 400px;
	margin: 0 auto;
}
.meet-doctor .doctor .copy {
	text-align: center;
}
.meet-doctor .doctor img {
	width: 100%;
	max-width: 300px;
	border-radius: 100%;
	margin: 0 auto;
}
@media only screen and (min-width: 600px) {
	.meet-doctor.single .doctor {
		display: grid;
		grid-template: 1fr / 1fr 3fr;
		grid-gap: 2em;
		max-width: none;
		margin: 0;
	}
	.meet-doctor.single .doctor .copy {
		text-align: left;
	}
	.meet-doctor.single .doctor .copy .more {
		display: table;
	}
	.meet-doctor.multiple .inner {
		display: grid;
		grid-template: 1fr / repeat(auto-fill, minmax(280px, 1fr));
		grid-gap: 2em 3em;
	}
}

/* Google Map widgets */
.google-blocks {
}
.google-blocks .content {
}
.google-blocks section {
	width: 100%;
	flex-grow: 1;
}
.google-blocks .widget,
.google-blocks iframe {
	width: 100%;
	height: 300px;
}
.google-blocks iframe {
	border: 0;
}
@media only screen and (min-width: 500px) {
	.google-blocks .widget {
		height: 420px;
	}
}
@media only screen and (min-width: 750px) {
	.google-blocks .inside {
		display: flex;
		flex-basis: row;
		justify-content: space-between;
	}
	.google-blocks section:first-child:not(:only-child) {
		padding-right: 0.5rem;
	}
	.google-blocks section:last-child:not(:only-child) {
		padding-left: 0.5rem;
	}

	.google-blocks .widget,
	.google-blocks iframe {
		height: 420px;
	}
}

/* Featured Service Tiles */
.feature-tiles {
}
.feature-tiles section {
	width: 100%;
	margin: 0 auto 4rem;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	color: #fff;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	background: var(--secondary)
		linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}
.feature-tiles section .img {
	width: 103px;
	height: 103px;
	border-radius: 60px;
	background: #fff;
	margin: 1rem auto;
	position: relative;
}
.feature-tiles .img svg {
	fill: var(--primary);
	width: 80%;
	height: 80%;
	margin: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.feature-tiles section h2 {
	color: #fff;
	font-weight: 400;
	text-align: center;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.feature-tiles section p {
	color: #fff;
	margin: 1rem 1.5rem 4rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.feature-tiles section .button {
	position: relative;
	top: 1.5rem;
	margin-top: auto;
	align-self: center;
}
@media only screen and (min-width: 750px) {
	.feature-tiles .inside {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.feature-tiles section {
		margin: 0;
		max-width: 340px;
		width: calc((100% / 3) - 0.5rem);
	}
}

/* Invisalign Badge */
.badge-invisalign {
}
.badge-invisalign a {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	max-width: 800px;
	margin: 0 auto;
	text-decoration: none;
	color: var(--normal);
}
.badge-invisalign img {
	max-height: 65px;
	margin: 0.5em auto;
}
.badge-invisalign a span {
	text-align: center;
	font-size: 1.5rem;
	max-width: 450px;
	margin: 0.5em auto;
}
@media only screen and (min-width: 800px) {
	.badge-invisalign .inside {
		flex-wrap: nowrap;
	}
}

/*  Google Map page styles */

main > .map-container {
	padding: 0;
}
.map-container .map {
	height: calc(100vh - 200px);
	min-height: 400px;
	width: 100%;
}

/* Color Scheme temp values (TODO: Move these to their appropriate locations) */

body {
	background: var(--pagebg);
	color: var(--normal);
	font: 400 1rem/1.2 Montserrat, Helvetica, Arial, sans-serif;
}
h1,
h2 {
	color: var(--emphasis);
}
h3,
h4,
h5,
h6 {
	color: var(--normal);
}
footer h3,
footer h4 {
	color: var(--normal);
}
a {
	color: var(--links);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none;
}
.page-header {
	background: var(--headerBG);
	color: var(--headerTXT);
}
main > aside.book-appointment {
	background: var(--secondary);
	color: #fff;
}
.page-header a {
	color: var(--headerTXT);
}
.page-footer {
	background: var(--accent);
}