/* 
 Site Manager Version: 14.2.0
 Date Created: February 2026
 Account: burns-karen
 Written by: Ricky Rivas
 Sesame Communications - All rights reserved. C2026
 Any reproduction or intentional misuse is strictly prohibited
*/
/* ===============================================
              options
 =============================================== */
/* ===============================================
                    colors
 =============================================== */
/* ===============================================
					fonts
=============================================== */
/* ==================================================================
Basic Stylings
These will affect every size of the site.
================================================================== */
html {
	scroll-behavior: smooth;
}
/* ===============================================
	body 
=============================================== */
body,
input,
select,
textarea {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
form button,
button {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
svg {
	display: inline-block;
}
body {
	color: #fff;
	background: #000b11;
	position: relative;
	overflow: hidden;
}
@media only screen and (min-width: 1300px) {
	body {
		font-size: 20px;
	}
}
/* ===============================================
	links 
=============================================== */
a {
	text-decoration: none;
}
#content a {
	color: #49b0e7;
	text-decoration: underline;
	transition: color 0.33s ease-in-out;
}
#content a:focus,
#content a:hover {
	text-decoration: none;
	color: #bce8ff;
}
/* ===============================================
	h family || hfam 
=============================================== */
h1,
h2:not(.topic),
h3:not(.topic),
h4,
h5,
h6 {
	line-height: 1;
	text-align: left;
	color: #fff;
	text-rendering: auto;
	margin: 0 0 1.44em;
	text-transform: uppercase;
	font-weight: 400;
}
.sub h1 {
	font-size: 10vw;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.51470588em;
	color: #4cb1e5;
}
@media only screen and (min-width: 480px) {
	.sub h1 {
		font-size: 3.4em;
	}
}
.home h1 {
	margin: 0 0 0.75em;
	font-weight: 700;
	color: #4cb1e5;
	font-size: min(2.45em, 8vw);
}
.home h1 .trait {
	display: block;
}
.home h1 .trait.top {
	line-height: 1;
	font-size: 0.55102041em;
	color: #032737;
	font-weight: 400;
}
h2:not(.topic) {
	font-size: 1.31578947em;
}
h3:not(.topic) {
	font-size: 1.21052632em;
}
h4 {
	font-size: 1.10526316em;
}
h5 {
	font-size: 1.05263158em;
}
h6 {
	font-size: 1em;
}
/* ===============================================
	containers
=============================================== */
.container {
	max-width: 64.5em;
}
@media only screen and (min-width: 1300px) {
	.container {
		width: 90%;
	}
}
/* ===============================================
	list styles - global overrides
=============================================== */
.what-sets-us-apart #content ol,
.meet-the-team #content ol,
.our-office #content ol,
.office-tour #content ol,
body[class*='-after'] #content ol {
	margin: 0;
}
#content ul li {
	list-style: disc outside;
}
/* ==================================================================
	masthead
=================================================================== */
#masthead {
	width: 100%;
	min-height: 44px;
	padding: 0;
	background-color: #00141e;
	position: relative;
	z-index: 3000;
}
@media only screen and (max-width: 1299px) {
	#masthead {
		height: 98px;
	}
}
@media only screen and (min-width: 1300px) {
	#masthead {
		font-size: inherit;
		font-size: min(1.5vw, 1em);
		height: 6.45em;
		position: fixed;
		top: 0;
		left: 0;
	}
}
#masthead .container {
	max-width: none;
	width: calc(100% - 3em);
}
@media only screen and (max-width: 1299px) {
	#masthead .container {
		width: 100%;
	}
}
/* ===============================================
TRIGGER/NAVICON
=============================================== */
#trigger {
	line-height: 44px;
	color: #49b0e7;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background: none;
	box-shadow: none;
	border: none;
	-webkit-display: none;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 600;
	transition: color 0.33s ease-in-out;
	cursor: pointer;
}
#trigger:focus-visible {
	color: #bce8ff;
}
@media only screen and (min-width: 1300px) {
	#trigger {
		display: none;
	}
}
#trigger::before {
	content: '';
	display: block;
	width: 67px;
	height: 67px;
	border: 1px solid #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	transition: transform 0.33s ease-in-out;
}
.open #trigger::before {
	transform: translate(-50%, -50%) rotate(90deg);
}
.open #trigger .navicon span:nth-child(1) {
	transform: translate(0, 14.5px) scaleX(0) rotate(0deg);
}
.open #trigger .navicon span:nth-child(4) {
	transform: translate(0, -14.5px) scaleX(0) rotate(0deg);
}
.open #trigger .navicon span:nth-child(2) {
	transform: translate(0, 0) scaleX(1) rotate(45deg);
}
.open #trigger .navicon span:nth-child(3) {
	transform: translate(0, 0) scaleX(1) rotate(-45deg);
}
#trigger .navicon {
	width: 38px;
	height: 29px;
	display: inline-block;
	position: relative;
}
#trigger .navicon span {
	width: 100%;
	height: 4px;
	margin: auto;
	background: currentcolor;
	display: block;
	position: absolute;
	left: 0;
	opacity: 1;
	transform: translate(0, 0) scaleX(1) rotate(0deg);
	transition: transform 0.3s ease;
}
#trigger .navicon span:nth-child(1) {
	top: 0;
}
#trigger .navicon span:nth-child(2),
#trigger .navicon span:nth-child(3) {
	top: 0;
	bottom: 0;
}
#trigger .navicon span:nth-child(4) {
	bottom: 0;
}
/* ==================================================================
	main-nav
=================================================================== */
#main-nav {
	font-size: 20px;
	text-align: center;
	width: 95px;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	clear: both;
}
@media only screen and (min-width: 1300px) {
	#main-nav {
		font-size: inherit;
		width: 100%;
		height: auto;
		margin-top: 0em;
		background: none;
		box-shadow: none;
		top: auto;
		bottom: 0;
		z-index: 2900;
	}
}
@media only screen and (max-width: 1299px) {
	#main-nav.open .collapsible {
		transition-duration: 0.33s;
		transition-timing-function: ease;
		transform: translate(0, 0);
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
	}
}
@media only screen and (max-width: 1299px) {
	#main-nav .collapsible {
		width: 100vw;
		max-width: 320px;
		position: absolute;
		top: 100%;
		right: 0;
		transition-property: transform, opacity, visibility;
		transition-duration: 0.09s;
		transition-timing-function: linear;
		transform: translate(100%, 0);
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
	}
}
@media only screen and (min-width: 1300px) {
	#main-nav .collapsible {
		margin: 0 auto;
		position: relative;
	}
}
#main-nav .container {
	height: 100%;
	padding: 0;
}
@media only screen and (min-width: 1300px) {
	#main-nav .container {
		text-align: right;
		max-width: right;
	}
}
#main-nav .mod {
	position: relative;
	display: block;
	padding: 1em 1em;
	background-color: #001f2f;
}
@media only screen and (max-width: 1299px) {
	#main-nav .mod {
		display: none;
	}
}
@media only screen and (max-width: 665px) {
	#main-nav .mod {
		display: flex;
		flex-direction: column;
		gap: 0.5em;
		padding: 0.5em 0 30px;
	}
	#main-nav .mod .utilitynav {
		width: 210px;
		margin: 0 auto;
		gap: 15px 10px;
	}
}
@media only screen and (min-width: 666px) and (max-width: 1023px) {
	#main-nav .mod {
		display: block;
	}
	#main-nav .mod .utilitynav {
		display: none;
	}
}
@media only screen and (min-width: 1300px) {
	#main-nav .mod {
		display: inline-block;
		vertical-align: bottom;
		background: none;
		border-left: 1px solid #a8a7aa;
		padding: 1.25em 0em 1.1em 2.2em;
		margin-bottom: 1.15em;
		margin-left: 1.8em;
	}
}
/* ===============================================
TOP LEVEL ITEMS || top ul
=============================================== */
#main-nav ul {
	margin: 0;
	padding: 60px 0 40px;
	background-color: #00141e;
	position: relative;
	z-index: 550;
	height: auto;
}
@media only screen and (max-width: 1299px) {
	#main-nav ul {
		display: flex;
		flex-direction: column;
	}
}
@media only screen and (min-width: 1300px) {
	#main-nav ul {
		height: 4.15em;
		width: auto;
		margin: 0;
		padding: 0;
		background: none;
		display: inline-block;
		vertical-align: bottom;
		position: static;
		float: none;
	}
}
#main-nav ul li {
	clear: both;
	cursor: pointer;
}
@media only screen and (min-width: 1300px) {
	#main-nav ul li {
		margin: 0 0.9875em 0 0;
		background: none;
		vertical-align: top;
		clear: none;
	}
	#main-nav ul li.home {
		display: none;
	}
	#main-nav ul li a:focus-visible + ul,
	#main-nav ul li ul:focus-within,
	#main-nav ul li:hover > ul {
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		pointer-events: auto;
	}
	#main-nav ul li.contact,
	#main-nav ul li.contact-us {
		margin-right: 0;
		padding-right: 0;
	}
	#main-nav ul li.contact:focus-visible > ul,
	#main-nav ul li.contact-us:focus-visible > ul,
	#main-nav ul li.contact:focus-within > ul,
	#main-nav ul li.contact-us:focus-within > ul,
	#main-nav ul li.contact.clicked > ul,
	#main-nav ul li.contact-us.clicked > ul,
	#main-nav ul li.contact.active > ul,
	#main-nav ul li.contact-us.active > ul,
	#main-nav ul li.contact:hover ul,
	#main-nav ul li.contact-us:hover ul {
		margin: 0;
	}
	#main-nav ul li.contact ul li a,
	#main-nav ul li.contact-us ul li a {
		text-align: center;
		float: right;
	}
}
#main-nav ul li a[id] {
	line-height: 50px;
	font-size: 15px;
	text-transform: uppercase;
	color: #fff;
	height: 50px;
	margin: 0;
	transition: color 0.33s ease;
	pointer-events: none;
}
@media only screen and (min-width: 1300px) {
	#main-nav ul li a[id] {
		line-height: 2.66666667;
		font-size: clamp(12px, 0.75em, 15px);
		text-align: center;
		height: 100%;
		z-index: 3000;
		pointer-events: auto;
	}
}
#main-nav ul li a[id]:after {
	content: '';
	width: 100%;
	height: 1.66666667em;
	background: url(../images/active.svg) center / auto 100% no-repeat;
	display: block;
	position: absolute;
	left: 0;
	transition:
		transform 0.33s ease-in-out,
		opacity 0.33s ease-in-out;
	transform: translate(0, 0) scaleX(0);
	opacity: 0;
}
@media only screen and (max-width: 1299px) {
	#main-nav ul li a[id]:after {
		top: -1em;
	}
}
@media only screen and (min-width: 1300px) {
	#main-nav ul li a[id]:after {
		top: -1.35em;
		filter: brightness(0) invert(1);
		-webkit-filter: brightness(0) invert(1);
	}
}
#main-nav ul li a[id].home {
	pointer-events: auto;
}
#main-nav ul li:focus-within > a[id],
#main-nav ul li.clicked > a[id],
#main-nav ul li.active > a[id],
#main-nav ul li:hover > a[id] {
	text-decoration: none;
	transition-duration: 0.15s;
}
#main-nav ul li:focus-within > a[id]:after,
#main-nav ul li.clicked > a[id]:after,
#main-nav ul li.active > a[id]:after,
#main-nav ul li:hover > a[id]:after {
	transition-duration: 0.15s;
	transform: translate(0, 0) scaleX(1);
	opacity: 1;
}
/* ===============================================
Flyout || ul ul
=============================================== */
#main-nav ul ul {
	width: 100%;
	padding: 0;
	background: none;
	border: none;
	float: left;
	transition: visibility 0.33s ease-in-out;
}
@media only screen and (min-width: 1300px) {
	#main-nav ul ul {
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 2.2em 0 2em;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		clip: rect(0 0 0 0);
		pointer-events: none;
		z-index: 2800;
		background: #00131e;
	}
}
#main-nav ul ul li {
	height: 0;
	background: none;
	opacity: 0;
	overflow: hidden;
	transition-duration: 0.33s;
}
#main-nav ul ul li:focus-within {
	overflow: visible;
}
@media only screen and (min-width: 1300px) {
	#main-nav ul ul li {
		height: 1.45em;
		margin: 0 0 0.3em;
		padding: 0;
		opacity: 1;
	}
}
#main-nav ul ul li a {
	line-height: 44px;
	font-size: clamp(12px, 0.75em, 15px);
	color: #fff;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: top;
	position: relative;
	font-weight: 700;
	text-transform: uppercase;
	transition:
		color 0.33s ease-in-out,
		background-color 0.33s ease-in-out;
}
@media only screen and (min-width: 1300px) {
	#main-nav ul ul li a {
		line-height: 1.93333333;
		text-align: center;
		white-space: nowrap;
		height: 1.93333333em;
		padding: 0 3em;
		float: left;
	}
}
#main-nav ul ul li a:focus-visible,
#main-nav ul ul li a:hover,
#main-nav ul ul li a.active {
	text-decoration: none;
	color: #fff;
	margin-bottom: 0;
	background: #49b0e7;
	border: none;
}
/* ===============================================
TERTIARY || if ul ul ul exists
=============================================== */
/* ===============================================
Flyout animation
=============================================== */
@media only screen and (max-width: 1299px) {
	#main-nav.open ul ul {
		visibility: hidden;
	}
	#main-nav.open ul .clicked ul {
		padding: 0 0 1em;
		visibility: visible;
	}
	#main-nav.open ul .clicked ul li {
		height: 44px;
		opacity: 1;
	}
}
/* socialmedia */
#masthead .socialmedia {
	line-height: 0;
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-flex;
	justify-content: center;
	position: relative;
	pointer-events: auto;
}
@media only screen and (min-width: 1300px) {
	#masthead .socialmedia {
		position: absolute;
		top: -1.2em;
		right: -0.2em;
	}
}
#masthead .socialmedia a {
	line-height: 44px;
	font-size: 11px;
	color: #fff;
	width: 44px;
	height: 44px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	transition:
		opacity 0.33s ease-in-out,
		color 0.33s ease-in-out,
		transform 0.33s ease-in-out;
}
@media only screen and (max-width: 1299px) {
	#masthead .socialmedia a {
		font-size: 25px;
	}
}
@media only screen and (min-width: 1300px) {
	#masthead .socialmedia a {
		width: 2.18181818em;
	}
}
#masthead .socialmedia a:focus-visible {
	opacity: 0.5;
	outline: auto;
}
#masthead .socialmedia a:focus:active {
	outline: transparent;
}
#masthead .socialmedia a:hover,
#masthead .socialmedia a:focus {
	color: #49b0e7;
	transform: scale(1.2);
}
#masthead .socialmedia a .icon {
	position: relative;
}
/* ===============================================
	FULLMOB RULES
=============================================== */
/* ==================================================================
	header
=================================================================== */
#hd {
	text-align: center;
	color: #49b0e7;
	height: 100%;
	padding: 0;
	position: relative;
	pointer-events: none;
}
@media only screen and (min-width: 666px) {
	#hd {
		text-align: right;
	}
}
@media only screen and (min-width: 1300px) {
	#hd {
		z-index: 3000;
	}
}
#hd .container {
	height: 100%;
	pointer-events: none;
}
#hd .mod {
	justify-content: center;
	z-index: 420;
}
@media only screen and (max-width: 665px) {
	#hd .mod {
		display: none;
	}
}
@media only screen and (min-width: 666px) and (max-width: 1023px) {
	#hd .mod .socialmedia {
		display: none;
	}
}
@media only screen and (min-width: 666px) and (max-width: 1299px) {
	#hd .mod {
		display: flex;
		align-items: center;
		gap: 12px;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		right: 95px;
	}
}
@media only screen and (min-width: 1300px) {
	#hd .mod {
		display: none;
	}
}
/* ===============================================
	logo
=============================================== */
#logo {
	line-height: 0;
	width: 15.25em;
	margin: 0 auto 0 1em;
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	pointer-events: auto;
	font-size: 0.7em;
}
@media only screen and (min-width: 666px) {
	#logo {
		font-size: 0.85em;
	}
}
@media only screen and (min-width: 768px) {
	#logo {
		margin-left: 1.5em;
	}
}
@media only screen and (min-width: 1300px) {
	#logo {
		margin: 0;
		font-size: inherit;
	}
}
#logo a {
	display: inline-block;
	vertical-align: top;
	transition: opacity 0.33s ease-in-out;
}
@media only screen and (max-width: 1023px) {
	#logo a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}
#logo a:focus-visible {
	opacity: 0.51;
}
#logo svg {
	width: 15.25em;
	height: 3.55em;
}
@media only screen and (min-width: 1370px) {
	#logo svg {
		width: 17em;
		height: auto;
	}
}
/* ===============================================
	utility-nav
=============================================== */
.utilitynav {
	line-height: 0;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
	z-index: 400;
	pointer-events: auto;
}
.utilitynav ul {
	display: contents;
}
.utilitynav ul li {
	display: contents;
}
.utilitynav ul li:nth-child(n + 2) {
	margin: 0 0 0 0.5em;
}
.utilitynav a {
	font-size: clamp(12px, 0.6em, 12px);
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	padding: 0 0.83333333em;
	background: none;
	display: inline-block;
	vertical-align: top;
	transition:
		color 0.33s ease-in-out,
		background-color 0.33s ease-in-out;
	position: relative;
	z-index: 1;
	border: 1px solid #fff;
	overflow: hidden;
}
@media only screen and (max-width: 1299px) {
	.utilitynav a {
		line-height: 44px;
	}
}
@media only screen and (min-width: 1300px) {
	.utilitynav a {
		line-height: 2.91666667;
	}
}
.utilitynav a::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #49b0e7;
	z-index: -1;
	transform: translateY(-100%);
	transition: transform 0.33s ease-in-out;
}
.utilitynav a:focus,
.utilitynav a:hover {
	color: #000;
}
.utilitynav a:focus::before,
.utilitynav a:hover::before {
	transform: translateY(0%);
}
/* ===============================================
	socialmedia
=============================================== */
/* ==================================================================
	slideshow
=================================================================== */
#slideshow {
	text-align: center;
	min-height: 33.33333333vw;
	background: #000;
	position: relative;
	z-index: 400;
}
@media only screen and (max-width: 857px) {
	#slideshow {
		min-height: 300px;
	}
}
@media only screen and (min-width: 858px) and (max-width: 1299px) {
	#slideshow {
		width: 100%;
		margin-top: 0;
		top: 0;
	}
}
@media only screen and (min-width: 1300px) and (max-width: 1999px) {
	#slideshow {
		height: 700px;
		min-height: 700px;
	}
}
#slideshow::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(19, 21, 22, 0.3);
	z-index: 400;
}
#slideshow #home-slideshow {
	width: 100%;
	margin: 0;
}
@media only screen and (max-width: 857px) {
	#slideshow #home-slideshow {
		width: 858px;
		margin: 0 calc(-429px + 50vw);
	}
}
@media only screen and (min-width: 1300px) and (max-width: 1999px) {
	#slideshow #home-slideshow {
		width: 2000px;
		margin: 0 calc(-1000px + 50vw);
		position: relative;
	}
}
@media only screen and (min-width: 666px) and (max-width: 767px) {
	#slideshow #home-slideshow {
		margin: 0 -20%;
		width: auto;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1299px) {
	#slideshow #home-slideshow {
		margin: 0 -40%;
		width: auto;
	}
}
#slideshow #home-slideshow .hpslide {
	width: 100%;
	max-width: none;
}
#slideshow .ssoverlay {
	width: 100%;
	padding: 0 3%;
	display: block;
	position: absolute;
	left: 0;
	transform: translate(0, -50%);
	z-index: 420;
}
@media only screen and (max-width: 1299px) {
	#slideshow .ssoverlay {
		top: 50%;
	}
}
@media only screen and (min-width: 1300px) {
	#slideshow .ssoverlay {
		top: calc(50% + 57px);
	}
}
#slideshow .ssoverlay .slogan {
	line-height: 1;
	font-size: min(36px, 5.25vw);
	color: currentcolor;
	margin: 0 auto 0em;
	display: block;
	font-weight: 300;
	text-transform: uppercase;
}
@media only screen and (max-width: 1023px) {
	#slideshow .ssoverlay .slogan {
		width: 18em;
	}
}
/* ==================================================================
	.spotlight
=================================================================== */
.spotlight {
	text-align: center;
	position: relative;
	z-index: 400;
}
.spotlight > div {
	position: relative;
}
/* ===============================================
	spot00 || COMMON SERVICES/CALLOUT-LIKE SECTION EXAMPLE
=============================================== */
.spot01 {
	text-align: center;
	color: #49b0e7;
	margin: 0;
	padding: 1.5em 0;
	position: relative;
	z-index: 410;
	border-top: 10px solid #fff;
	border-bottom: 10px solid #fff;
	background-color: #00141e;
	font-size: min(4.5vw, 20px);
}
@media only screen and (min-width: 768px) {
	.spot01 {
		padding: 5em 0;
	}
}
@media only screen and (min-width: 1024px) {
	.spot01 {
		font-size: inherit;
	}
}
.spot01 a {
	color: #4198c4;
	max-width: 18em;
	padding: 0;
	display: inline-block;
	vertical-align: top;
	position: relative;
	transition: color 0.33s ease-in-out;
}
@media only screen and (max-width: 1023px) {
	.spot01 a {
		width: 100%;
		margin: 1em auto;
		display: block;
	}
}
@media only screen and (min-width: 1024px) {
	.spot01 a {
		width: calc(33% - 2em);
		margin: 0 0.875em;
	}
}
.spot01 a .decoration {
	width: 100%;
	transition: transform 0.33s ease-in-out;
	position: relative;
	z-index: 1;
	margin-bottom: 0.5em;
	overflow: hidden;
}
.spot01 a .decoration::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #ffffff;
	transition:
		transform 0.33s ease-in-out,
		background-color 0.33s ease-in-out;
	transform: translate(0, 100%);
}
.spot01 a .decoration img {
	width: 100%;
	transition:
		filter 0.33s ease-in-out,
		-webkit-filter 0.33s ease-in-out;
}
.spot01 a h2.topic {
	line-height: 0.9;
	font-size: clamp(12px, 2em, 40px);
	text-transform: uppercase;
	color: currentcolor;
	width: 100%;
	display: block;
	background-color: #ffffff;
	font-weight: 300;
	padding: 0.65em 0;
	z-index: 1;
	position: relative;
	transition:
		background-color 0.33s ease-in-out,
		color 0.33s ease-in-out,
		transform 0.33s ease-in-out;
}
.spot01 a h2.topic .trait {
	font-weight: 700;
	display: block;
}
.spot01 a:focus .decoration::before,
.spot01 a:hover .decoration::before {
	background-color: rgba(3, 39, 55, 0.8);
	transform: translate(0%, 0%);
}
.spot01 a:focus .decoration img,
.spot01 a:hover .decoration img {
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}
.spot01 a:focus h2.topic,
.spot01 a:hover h2.topic {
	transform: translateY(-7.3em);
	background-color: rgba(0, 0, 0, 0);
	color: #fff;
	transition-duration: 0.16s, 0.33s, 0.33s;
}
/* ===============================================
	spot00 || COMMON GENERAL INFORMATION SPOTLIGHT SECTION REVERSE
=============================================== */
.spot02 {
	color: #999499;
	padding: 6em 0;
	position: relative;
	z-index: 410;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3.4em;
	background-color: #fff;
	background-size: 50.05em auto;
	background-position: center;
	border-bottom: 10px solid #fff;
	flex-direction: column;
}
@media only screen and (min-width: 768px) {
	.spot02 {
		padding: 7em 0;
	}
}
@media only screen and (min-width: 1024px) {
	.spot02 {
		font-size: min(1.45vw, 1em);
		flex-direction: row;
		padding: 7.5em 0 6.5em;
		background-position: calc(50% - 25em) 171%;
	}
}
.spot02::before {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	top: 3%;
	height: 94%;
	background-color: rgba(255, 255, 255, 0.9);
	z-index: -1;
}
@media only screen and (min-width: 666px) {
	.spot02::before {
		top: 7%;
		height: 86%;
	}
}
.spot02 .decorations {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: column;
	gap: 2em;
}
@media only screen and (min-width: 666px) {
	.spot02 .decorations {
		flex-direction: row;
	}
}
@media only screen and (min-width: 1024px) {
	.spot02 .decorations {
		display: contents;
		font-size: inherit;
		gap: 3em;
	}
}
.spot02 a {
	width: 90%;
	max-width: 14.85em;
	display: inline-block;
	vertical-align: middle;
	color: #3698dd;
	font-size: 20px;
}
@media only screen and (min-width: 1024px) {
	.spot02 a {
		font-size: inherit;
	}
}
.spot02 a:nth-child(1) {
	order: -1;
}
.spot02 a .decoration {
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: box-shadow 0.33s ease-in-out;
}
.spot02 a .decoration::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(3, 39, 55, 0.8);
	transition: transform 0.33s ease-in-out;
	transform: translate(0, 100%);
}
.spot02 a .decoration img {
	width: 100%;
	transition:
		filter 0.33s ease-in-out,
		-webkit-filter 0.33s ease-in-out;
}
.spot02 a h3.topic {
	line-height: 2.6;
	font-size: clamp(12px, 1.25em, 25px);
	color: currentColor;
	font-weight: 700;
	margin: 0;
	z-index: 1;
	position: relative;
	transition:
		color 0.33s ease-in-out,
		transform 0.33s ease-in-out;
}
.spot02 a:hover .decoration,
.spot02 a:focus .decoration {
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
}
.spot02 a:hover .decoration::before,
.spot02 a:focus .decoration::before {
	transform: translate(0, 0%);
}
.spot02 a:hover .decoration img,
.spot02 a:focus .decoration img {
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}
.spot02 a:hover h3.topic,
.spot02 a:focus h3.topic {
	color: #fff;
	transform: translate(0, -9em);
}
.spot02 .mod {
	width: 90%;
	max-width: 29.5em;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}
@media only screen and (min-width: 1300px) {
	.spot02 .mod {
		padding-bottom: 2.3em;
	}
}
.spot02 h2.topic {
	line-height: 1;
	font-size: clamp(12px, 1.85em, 37px);
	font-weight: 700;
	text-transform: uppercase;
	color: #1c5d86;
	margin: 0 0 1em;
}
.spot02 .info {
	line-height: 1.2;
	font-size: clamp(12px, 1.5em, 30px);
	margin: 0;
	font-weight: 300;
}
/* ===============================================
	spot00 || COMMON SERVICES/CALLOUT-LIKE SECTION EXAMPLE
=============================================== */
.spot03 {
	text-align: center;
	background: #49b0e7 center / cover no-repeat;
	color: #bce8ff;
	padding: 3em 0;
	margin: 0;
	position: relative;
	z-index: 410;
	display: flex;
	justify-content: center;
	align-items: center;
}
.spot03::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: -1;
}
@media only screen and (max-width: 767px) {
	.spot03 {
		flex-wrap: wrap;
		font-size: min(2.4vw, 1em);
	}
}
@media only screen and (min-width: 768px) {
	.spot03 {
		font-size: inherit;
		font-size: min(1vw, 1em);
		padding: 0;
	}
}
@media only screen and (min-width: 1300px) and (max-width: 1999px) {
	.spot03 {
		background-size: 100em auto;
	}
}
.spot03 a {
	color: #fff;
	width: calc(50% - 2em);
	padding: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1.5em;
	margin: 0;
	position: relative;
	transition: padding 0.33s ease-in-out;
	text-align: center;
	overflow: hidden;
	min-height: 20em;
}
@media only screen and (max-width: 767px) {
	.spot03 a {
		border-bottom: 1px solid #fff;
	}
	.spot03 a:nth-child(odd) {
		border-right: 1px solid #fff;
	}
	.spot03 a:nth-last-of-type(1),
	.spot03 a:nth-last-of-type(2) {
		border-bottom: 0;
	}
}
@media only screen and (min-width: 768px) {
	.spot03 a {
		min-height: 39.5em;
		padding: 0;
		width: 25%;
	}
	.spot03 a:not(:nth-last-of-type(1)) {
		border-right: 1px solid #fff;
	}
}
.spot03 a::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, 100%);
	transform-origin: top;
	transition: transform 0.33s ease-in-out;
	transform-origin: right;
	background-image: linear-gradient(0deg, #1c5d86 0%, rgba(28, 93, 134, 0) 70%);
}
.spot03 a h2.topic {
	font-size: clamp(12px, 2.15em, 43px);
	line-height: 1;
	font-weight: 300;
	text-transform: uppercase;
	color: currentcolor;
	width: 100%;
	display: block;
	position: relative;
	z-index: 1;
}
.spot03 a h2.topic b {
	display: block;
}
.spot03 a:hover::before {
	transform: translate(0, 0%);
}
.spot03 a:hover .icon,
.spot03 a:hover .spotbtn {
	opacity: 1;
}
/* ==================================================================
	subnav
=================================================================== */
#subnav {
	text-align: center;
	color: #fff;
	padding: 2.75em 0;
	position: relative;
	overflow: hidden;
	background: #fff url(../images/subnav.jpg) center / cover no-repeat;
}
@media only screen and (max-width: 1299px) {
	#subnav {
		display: none;
	}
}
@media only screen and (min-width: 1300px) {
	#subnav {
		padding-top: 24.6em;
	}
}
@media only screen and (min-width: 1300px) and (max-width: 1999px) {
	#subnav {
		background-size: auto;
		background-position: center top;
	}
}
#subnav::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
}
#subnav nav {
	position: relative;
	z-index: 1;
}
@media only screen and (max-width: 1299px) {
	#subnav nav {
		width: 100vw;
		display: none;
	}
}
#subnav p {
	font-size: clamp(12px, 0.75em, 15px);
	margin: 0 auto;
	padding: 0;
	font-weight: 700;
	text-transform: uppercase;
}
@media only screen and (max-width: 1299px) {
	#subnav p {
		line-height: 44px;
		white-space: nowrap;
		padding-right: 9%;
		scroll-snap-type: x;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	#subnav p::-webkit-scrollbar {
		display: none;
	}
}
@media only screen and (min-width: 1300px) {
	#subnav p {
		line-height: 1.66666667;
		width: 65%;
	}
}
#subnav a {
	color: #fff;
	margin: 0 0.8em;
	padding: 0 0.66666667em;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
@media only screen and (min-width: 1024px) {
	#subnav a {
		margin: 0;
	}
}
#subnav a:after {
	content: '';
	width: 100%;
	height: calc(100% + 3px);
	z-index: -1;
	background: #49b0e7;
	display: block;
	position: absolute;
	top: -1.5px;
	left: 0;
	transition: transform 0.33s ease-in-out;
	transform-origin: top;
	transform: translate(0, 0) scaleY(0);
}
#subnav a:focus,
#subnav a:hover,
#subnav a.active {
	text-decoration: none;
}
#subnav a:focus:after,
#subnav a:hover:after,
#subnav a.active:after {
	transform: translate(0, 0) scale(1);
}
#subnav .divider {
	margin: 0 0.1em;
	display: inline-block;
	vertical-align: top;
}
/* ==================================================================
	content
=================================================================== */
#bd {
	padding: 3em 0;
	position: relative;
	z-index: 400;
}
@media only screen and (min-width: 768px) {
	#bd {
		padding: 4.5em 0 2.5em;
	}
	#bd.sub {
		background-image: url(../images/watermark.svg);
		background-size: 30% auto;
		background-position: calc(100% - 1em) min(45vw, 30em);
		background-repeat: no-repeat;
	}
}
@media only screen and (min-width: 1300px) {
	#bd.sub {
		background-position: calc(50% + 43.8em) 22em;
		background-size: 43.8em auto;
	}
}
#bd .container {
	width: 90%;
	max-width: 65.9em;
}
#content {
	max-width: 800px;
	display: block;
}
@media only screen and (min-width: 768px) {
	#content {
		width: 60.69802731%;
		max-width: 40em;
		float: left;
	}
}
@media only screen and (min-width: 1300px) {
	#content {
		width: 60.69802731%;
	}
}
#content .content-text {
	line-height: 1.68421053;
}
@media only screen and (min-width: 666px) {
	#content .content-text {
		font-size: min(2.3vw, 19px);
	}
}
@media only screen and (min-width: 768px) and (max-width: 1299px) {
	#content .content-text {
		max-width: 70ch;
	}
}
@media only screen and (min-width: 1300px) {
	#content .content-text {
		font-size: 19px;
	}
}
/* ==================================================================
	.home content
=================================================================== */
.home #bd {
	padding: 3em 0;
	border-top: 3em solid #fff;
	border-bottom: 3em solid #fff;
	background: #000 center / cover no-repeat;
	overflow: hidden;
}
@media only screen and (min-width: 768px) {
	.home #bd {
		border-top: 5em solid #fff;
		border-bottom: 5.1em solid #fff;
		padding: 4em 0 5em;
	}
}
@media only screen and (max-width: 1023px) {
	.home #bd::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.9);
	}
}
@media only screen and (min-width: 1024px) {
	.home #bd {
		padding: 21.05em 0 2.5em;
	}
	.home #bd::after {
		content: '';
		display: block;
		width: 100%;
		height: calc(100% + 10px);
		position: absolute;
		top: -5px;
		left: 0;
		border-right: 7.15em solid #fff;
		border-left: 7.15em solid #fff;
		z-index: -1;
		pointer-events: none;
		transform: translate3d(0, 0, 0);
	}
}
@media only screen and (min-width: 1300px) {
}
.home #bd .container {
	width: 90%;
	max-width: 66em;
	/* @media only screen and (min-width: 768px) and (max-width: 1299px) { 
			max-width:70ch; 
		} */
}
@media only screen and (min-width: 1024px) {
	.home #bd .container {
		width: calc(100% - 25em);
	}
}
.home #bd #content {
	position: relative;
	z-index: 1;
}
@media only screen and (min-width: 768px) {
	.home #bd #content {
		width: 100%;
		max-width: 70ch;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
}
@media only screen and (min-width: 1024px) {
	.home #bd #content {
		max-width: 28em;
		margin-left: 0;
	}
	.home #bd #content::before {
		content: '';
		display: block;
		position: absolute;
		top: -3.9em;
		right: -9.75em;
		width: 100vw;
		height: calc(100% + 8em);
		background-color: rgba(255, 255, 255, 0.9);
		z-index: -1;
	}
}
.home #bd #content .content-text {
	line-height: 1.6875;
	color: #000;
}
@media only screen and (min-width: 666px) {
	.home #bd #content .content-text {
		font-size: min(2.3vw, 16px);
	}
}
@media only screen and (min-width: 1300px) {
}
.home #bd #content .content-text h2 {
	font-size: 1.375em;
	line-height: 1.22727273;
	margin-bottom: 0.6em;
	color: #4198c4;
}
.home #bd #content .content-text h3,
.home #bd #content .content-text h4 {
	color: #000;
}
.home #bd #content .content-text ol,
.home #bd #content .content-text ul {
	margin: 0 0 1.3em 2.5em;
}
.home #bd #content .content-text ol li,
.home #bd #content .content-text ul li {
	margin: 0 0 1.6em 0;
}
.home #bd #content .content-text ol li:nth-last-of-type(1),
.home #bd #content .content-text ul li:nth-last-of-type(1) {
	margin: 0;
}
.home #bd #content .content-text a:hover,
.home #bd #content .content-text a:focus {
	color: gray;
}
/* ==================================================================
	custom content
=================================================================== */
.mediaslider {
	text-align: center;
	max-width: calc(100% - 88px);
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.mediaslider button {
	background: none;
	border: none;
	-webkit-appearance: none;
	cursor: pointer;
	pointer-events: auto;
}
.mediaslider .cycle-slideshow {
	width: 100%;
	margin: 0.5em 0 1.5em;
	position: relative;
	pointer-events: none;
	z-index: 400;
}
.mediaslider .cycle-slideshow > button {
	font-size: 2.8em;
	color: #49b0e7;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	transition: opacity 0.35s ease;
	pointer-events: auto;
}
.mediaslider .cycle-slideshow > button.cycle-prev {
	text-align: left;
	left: auto;
	right: 100%;
}
.mediaslider .cycle-slideshow > button.cycle-next {
	text-align: right;
	direction: rtl;
	right: auto;
	left: 100%;
}
.mediaslider .cycle-slideshow > button:focus,
.mediaslider .cycle-slideshow > button:hover {
	opacity: 0.69;
}
.mediaslider .cycle-slideshow > button .icon {
	transform-origin: 50% 50%;
}
.mediaslider.ba .cycle-slideshow:before,
.mediaslider.ba.top .cycle-slideshow:before,
.mediaslider.ba .cycle-slideshow:after,
.mediaslider.ba.top .cycle-slideshow:after {
	width: 50%;
	padding: 0.66em 0;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0) 100%);
	display: block;
	position: absolute;
	top: 0;
	z-index: 420;
}
.mediaslider.ba .cycle-slideshow:before,
.mediaslider.ba.top .cycle-slideshow:before {
	content: 'Before';
	left: 0;
}
.mediaslider.ba .cycle-slideshow:after,
.mediaslider.ba.top .cycle-slideshow:after {
	content: 'After';
	right: 0;
}
.mediaslider.ba.bottom .cycle-slideshow:before,
.mediaslider.ba.bottom .cycle-slideshow:after {
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
	top: auto;
	bottom: 0;
}
.mediaslider.multi .cycle-slide {
	display: flex !important;
}
.mediaslider.multi .cycle-slide img {
	width: 50%;
}
.mediaslider .custompager {
	margin-bottom: 1.58em;
	display: block;
	position: relative;
}
.mediaslider .custompager > button {
	height: 44px;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
@media only screen and (max-width: 1299px) {
	.mediaslider .custompager > button {
		width: 44px;
	}
}
@media only screen and (min-width: 1300px) {
	.mediaslider .custompager > button {
		width: 1rem;
		margin: 0 6px;
		cursor: pointer;
	}
}
.mediaslider .custompager > button:before {
	content: '';
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: #49b0e7;
	margin: auto;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: background-color 0.33s ease-in-out;
}
.mediaslider .custompager > button:focus:before,
.mediaslider .custompager > button:hover:before,
.mediaslider .custompager > button.cycle-pager-active:before {
	background-color: #bce8ff;
}
.mediaslider .cycle-caption.large,
.mediaslider .cycle-caption {
	font-size: min(1rem, 1em);
	white-space: normal;
	padding: 0.66em;
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 420;
}
.mediaslider .cycle-caption.large:after,
.mediaslider .cycle-caption:after {
	content: '';
	width: auto;
	height: auto;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 100%);
	display: block;
	position: absolute;
	top: -1.68em;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.mediaslider .cycle-caption.large {
	position: relative;
}
.mediaslider .cycle-caption.large:after {
	background: #bce8ff;
	top: 0;
}
/* content centered for slideshow, video-centric, and/or full width content */
.before-and-after #content,
.office-tour #content,
.smile-gallery #content,
.invisalign-videos #content {
	text-align: center;
}
.before-and-after #content h1,
.office-tour #content h1,
.smile-gallery #content h1,
.invisalign-videos #content h1,
.before-and-after #content h2,
.office-tour #content h2,
.smile-gallery #content h2,
.invisalign-videos #content h2,
.before-and-after #content h3,
.office-tour #content h3,
.smile-gallery #content h3,
.invisalign-videos #content h3,
.before-and-after #content p,
.office-tour #content p,
.smile-gallery #content p,
.invisalign-videos #content p {
	text-align: center;
}
.before-and-after .img-left,
.office-tour .img-left,
.smile-gallery .img-left,
.invisalign-videos .img-left,
.before-and-after .img-right,
.office-tour .img-right,
.smile-gallery .img-right,
.invisalign-videos .img-right {
	margin: 0 auto;
	float: none;
}
/* blockquote styling */
#content blockquote {
	margin: 0 0 1.58em;
	padding: 0 0 0 1em;
	border-left: 0.33em solid #f0f0f0;
}
/* comment line below if patient-login is live and legit */
.financial-information #financial-online-services {
	display: none;
}
/* common treatments */
.before-after-image {
	width: 44%;
	display: inline-block;
	vertical-align: top;
}
.before-after-image img,
.before-after-image span {
	display: block;
}
@media only screen and (min-width: 768px) {
	.before-after-image img,
	.before-after-image span {
		width: 100%;
	}
}
@media only screen and (min-width: 768px) {
	.before-after-box,
	p.before-after-text {
		width: 49%;
		display: inline-block;
		vertical-align: top;
	}
}
/* common procedures */
@media only screen and (min-width: 1300px) {
	#content,
	#content h2[id],
	.common-procedures #content h2[id] {
		scroll-margin-top: 200px;
	}
}
/* preventive-care */
.preventive-care #content ul {
	display: inline-block;
}
/* reduces dimensions of coronavirus tab */
#coronavirus-update {
	font-size: 0.84em;
	padding: 0.5em 1.25em !important;
	left: 0.5em !important;
}
@media only screen and (min-width: 1300px) {
	#coronavirus-update {
		font-size: 1em;
	}
}
/* ==================================================================
	meet the team page classes for individual and full team images 
=================================================================== */
.staff {
	width: 45%;
	max-width: 10em;
	margin: 0 0 1em 1em;
	display: block;
	float: right;
}
.team {
	width: 100%;
	max-width: 1000px;
	margin: 2% auto;
	display: block;
}
/* ==================================================================
	sitemap
=================================================================== */
.sitemap #content .column > ul > li {
	margin-bottom: 1.45em;
}
.sitemap #content ul {
	list-style: none;
	margin-left: 0;
	margin-bottom: 0;
}
.sitemap #content ul a {
	line-height: 1.4;
	font-size: clamp(12px, 1.25em, 25px);
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition-duration: 0s;
}
.sitemap #content ul ul li a {
	line-height: 1.68421053;
	font-size: 1em;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	color: #fff;
	margin-left: 0;
}
.sitemap #content a:focus,
.sitemap #content a:hover {
	color: #bce8ff;
	text-decoration: none;
}
body.sitemap #bd ul li {
	list-style: none;
}
body.sitemap #bd ul ul li {
	list-style: none;
	margin-left: 0;
}
body.sitemap #content .width1 {
	width: 100%;
}
@media only screen and (min-width: 768px) {
	body.sitemap #content .width1 {
		width: 50%;
	}
	body.sitemap #content .width1:not(.first) {
		width: auto;
		max-width: 49%;
		float: right;
	}
}
/* global override */
/* ==================================================================
	sidebar
=================================================================== */
#sidebar {
	width: 100%;
	max-width: 20em;
	margin: 0 auto 6%;
	padding: 0;
	display: none;
	position: relative;
	z-index: 420;
}
@media only screen and (min-width: 768px) {
	#sidebar {
		width: 30.34901366%;
		margin: 0.5em -2px 1em 0;
		display: block;
		float: right;
		clear: right;
	}
}
/* ===============================================
	sitepics
=============================================== */
#hide-stock {
	position: relative;
}
.stock {
	width: 100%;
	position: relative;
}
/* ===============================================
	show doctor image on all devices
=============================================== */
/*.home,*/
/*body[class^='meet-the-'],*/
/*body[class^='meet-our-'],*/
.meet-the-doctor #sidebar,
body[class*='meet-dr-'] #sidebar,
body[class*='meet-doctor-'] #sidebar {
	display: block;
}
body[class~='blog'] #sidebar {
	display: block;
}
body[class~='blog'] #hide-stock {
	display: none;
}
/* END SIDEBAR */
/* ===============================================
	spot00 || COMMON TESTIMONIAL SLIDESHOW SECTION EXAMPLE
=============================================== */
.spot04 {
	font-size: min(4vw, 1em);
	padding: 3em 0 0;
	background-color: #4cb1e5;
	border-bottom: 98px solid #fff;
}
@media only screen and (min-width: 666px) {
	.spot04 {
		padding: 5em 0 0;
	}
}
@media only screen and (min-width: 1024px) {
	.spot04 {
		padding: 7.9em 0 6.8em;
		font-size: min(1.3vw, 1em);
		border-bottom-width: 126px;
	}
}
.spot04 .container {
	max-width: 66.25em;
	position: static;
	width: 90%;
}
@media only screen and (min-width: 1024px) {
	.spot04 .container {
		text-align: right;
	}
}
.spot04 .decoration {
	width: 100%;
	display: block;
	max-width: 38.75em;
	position: relative;
	margin: 3em auto 0;
}
@media only screen and (min-width: 666px) {
	.spot04 .decoration {
		margin-top: 6em;
	}
}
@media only screen and (min-width: 1024px) {
	.spot04 .decoration {
		position: absolute !important;
		bottom: 0;
		right: calc(50% + 8em);
		margin: 0;
	}
}
.spot04 .cycle-slideshow:not(.decoration) {
	color: #fff;
	width: 100%;
	max-width: 41.3em;
	margin: 0 auto;
	display: block;
}
@media only screen and (min-width: 1024px) {
	.spot04 .cycle-slideshow:not(.decoration) {
		margin-right: 0;
	}
}
.spot04 .cycle-slideshow:not(.decoration) .cycle-slide {
	width: 100%;
	margin: 0;
	display: block;
	transition: color 0.33s ease-in-out;
}
.spot04 .cycle-slideshow:not(.decoration) .cycle-slide figure {
	margin: 0;
}
.spot04 .testimony {
	line-height: 1.04918033;
	margin: 0 auto 0.13114754em;
	display: block;
	font-size: 2.5em;
}
@media only screen and (min-width: 666px) {
	.spot04 .testimony {
		font-size: clamp(12px, 3.05em, 51px);
	}
}
.spot04 .testimony::before {
	content: '';
	font-size: 0.49180328em;
	width: 2.25em;
	height: 1.9em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='38' fill='none' viewBox='0 0 45 38'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m37.727 33.581-.227 4.425c-3.398-7.073-13.4-20.073-13.4-27.871C24.1 4.537 29.477 0 34.1 0c6.423 0 10 4.537 10 10.135 0 8.25-5.932 14.821-6.373 23.446Zm-25 0-.227 4.425L.328 12.669A10.226 10.226 0 0 1 0 10.135C0 4.537 4.477 0 9.1 0c6.423 0 10 4.537 10 10.135 0 8.25-5.932 14.82-6.373 23.446Z' clip-rule='evenodd'/%3E%3C/svg%3E%0A")
		center / cover no-repeat;
	position: relative;
	display: block;
	margin: 0 auto 0.5em;
}
@media only screen and (min-width: 1024px) {
	.spot04 .testimony::before {
		font-size: 0.32786885em;
		display: inline-block;
		vertical-align: top;
		margin: 0.2em 0 0;
		right: 0.15em;
	}
}
.spot04 .testifier {
	line-height: 1.53571429;
	font-size: clamp(12px, 1.4em, 28px);
	text-transform: uppercase;
	font-weight: 700;
	display: block;
	letter-spacing: 0.01em;
}
.spot04 .spotbtns {
	display: flex;
	justify-content: center;
	gap: 4px;
	position: absolute;
	bottom: -72px;
	left: 50%;
	width: 90%;
	max-width: 66.25em;
	transform: translate(-50%, 0);
	text-align: right;
}
@media only screen and (min-width: 1024px) {
	.spot04 .spotbtns {
		justify-content: flex-end;
		bottom: -75px;
	}
}
.spot04 .socialmedia {
	line-height: 0;
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline-flex;
	justify-content: center;
	gap: 4px;
}
.spot04 .socialmedia a {
	font-size: 25px;
	color: #000;
	min-width: 24px;
	min-height: 24px;
	display: inline-block;
	vertical-align: top;
	position: relative;
	transition:
		transform 0.33s ease-in-out,
		color 0.33s ease-in-out;
	line-height: 48px;
	width: 46px;
	height: 46px;
	background-color: #49b0e7;
	z-index: 1;
	overflow: hidden;
	display: none;
}
.spot04 .socialmedia a.facebook,
.spot04 .socialmedia a.google {
	display: inline-block;
}
.spot04 .socialmedia a .fa-facebook-f::before {
	content: '\f09a';
}
.spot04 .socialmedia a::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: -1;
	transform: translateY(-100%);
	transition: transform 0.33s ease-in-out;
}
.spot04 .socialmedia a:hover,
.spot04 .socialmedia a:focus {
	color: #fff;
}
.spot04 .socialmedia a:hover::before,
.spot04 .socialmedia a:focus::before {
	transform: translateY(0%);
}
.spot04 .socialmedia a .icon {
	position: relative;
}
.spot04 .spotbtn {
	font-size: clamp(12px, 0.6em, 12px);
	text-align: center;
	text-transform: uppercase;
	color: #01131b;
	width: 10.83333333em;
	display: inline-block;
	vertical-align: top;
	position: relative;
	z-index: 420;
	transition:
		transform 0.33s ease-in-out,
		color 0.33s ease-in-out,
		box-shadow 0.33s ease-in-out;
	overflow: hidden;
	font-weight: 700;
	background-color: #49b0e7;
}
@media only screen and (max-width: 1299px) {
	.spot04 .spotbtn {
		line-height: 46px;
		min-width: 46px;
	}
}
@media only screen and (min-width: 1300px) {
	.spot04 .spotbtn {
		line-height: 3.83333333;
	}
}
.spot04 .spotbtn::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: -1;
	transform: translateY(-100%);
	transition: transform 0.33s ease-in-out;
}
.spot04 .spotbtn:hover,
.spot04 .spotbtn:focus {
	color: #fff;
}
.spot04 .spotbtn:hover::before,
.spot04 .spotbtn:focus::before {
	transform: translateY(0%);
}
/* ==================================================================
	#ft
=================================================================== */
#ft {
	text-align: center;
	color: #fff;
	width: 100%;
	padding: 0;
	background: #00141e;
	display: inline-block;
	vertical-align: top;
	position: relative;
	z-index: 420;
}
#ft a {
	color: #fff;
	transition: color 0.33s ease-in-out;
}
#ft a:focus,
#ft a:hover {
	color: #6eabcb;
}
/* ===============================================
		locations
=============================================== */
#location {
	width: 100%;
	padding: 3em 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
@media only screen and (min-width: 768px) {
	#location {
		background-image: url(../images/footer/pattern.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 50% 23em;
	}
}
@media only screen and (min-width: 1024px) {
	#location {
		font-size: min(1.45vw, 1em);
		padding: 0em;
		flex-direction: row;
		align-items: stretch;
		min-height: 30.55em;
		background-size: auto 100%;
		background-position: calc(50% + 25.1em) 0%;
	}
}
@media only screen and (min-width: 2000px) {
	#location {
		background-position: 100% 50%;
		background-size: 50% auto;
	}
}
#location .mod {
	text-align: center;
	width: 90%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
@media only screen and (max-width: 767px) {
	#location .mod.last {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
	#location .mod.first {
		margin-bottom: 6em;
	}
}
@media only screen and (min-width: 1024px) {
	#location .mod {
		max-width: none;
	}
	#location .mod.first {
		margin-bottom: 0;
	}
	#location .mod.first .wrap {
		display: block;
		width: 100%;
		max-width: 31.3em;
	}
	#location .mod.first .wrap .logo {
		margin-left: 0;
	}
	#location .mod .innermod {
		width: 100%;
		max-width: 22.25em;
		margin-left: auto;
		text-align: left;
	}
}
#location .mod .map {
	display: block;
	width: 24em;
	font-size: min(20px, 10vw);
}
@media only screen and (min-width: 1024px) {
	#location .mod .map {
		font-size: inherit;
	}
}
#location .logo {
	line-height: 0;
	text-align: center;
	max-width: 28.3em;
	width: 100%;
	margin: 0 auto 1.6em;
	display: block;
}
#location .logo:focus {
	opacity: 0.51;
}
#location .logo svg {
	width: 100%;
	height: auto;
}
#location .phone {
	font-size: clamp(12px, 0.95em, 19px);
	display: block;
	font-weight: 700;
	margin-bottom: 0.8em;
}
@media only screen and (max-width: 767px) {
	#location .phone {
		line-height: 44px;
	}
}
@media only screen and (min-width: 768px) {
	#location .phone {
		line-height: 1.05263158;
	}
}
#location .address {
	font-size: clamp(12px, 0.8em, 16px);
	margin: 0 auto 1em;
	display: block;
}
@media only screen and (max-width: 1023px) {
	#location .address {
		line-height: 22px;
	}
}
@media only screen and (min-width: 1024px) {
	#location .address {
		line-height: 1.25;
		display: inline-block;
		vertical-align: top;
	}
}
#location .address .marker {
	line-height: 1;
	font-size: 3.875em;
	color: #49b0e7;
	width: 0.75em;
	position: absolute;
	left: 50%;
	z-index: 400;
	transition: transform 0.33s ease-in-out;
	transform-origin: center bottom;
	bottom: 3.8em;
	margin-left: -0.5em;
}
@media only screen and (max-width: 767px) {
	#location .address .marker {
		display: none;
	}
}
@media only screen and (min-width: 768px) {
	#location .address .marker {
		display: block;
	}
}
@media only screen and (min-width: 1024px) {
	#location .address .marker {
		font-size: 2.625em;
		margin-left: 0;
		top: 6.5952381em;
		bottom: auto;
		left: calc(75% - 0.55em);
	}
}
#location .address .marker:before {
	color: currentcolor;
}
#location .address .marker:after {
	content: '';
	width: 1.10606061em;
	height: 1.01515152em;
	background: url(../images/footer/shadowalt.svg) no-repeat center center;
	bottom: -0.15em;
	left: 0.2em;
	z-index: -1;
	background-size: cover;
	position: absolute;
	pointer-events: none;
}
#location .address:focus .marker,
#location .address:hover .marker {
	transform: translate(0, 0) scale(2);
}
#location .officehours {
	line-height: 0;
	margin: 0 auto 1em;
	display: block;
}
@media only screen and (min-width: 1024px) {
	#location .officehours {
		display: inline-block;
		vertical-align: top;
		float: right;
	}
}
#location .officehours .days,
#location .officehours .hours {
	line-height: 1.125;
	font-size: clamp(12px, 0.8em, 16px);
	display: block;
}
#location .spotbtn {
	font-size: clamp(12px, 0.65em, 13px);
	text-align: center;
	text-transform: uppercase;
	color: #01131b;
	width: 17.30769231em;
	display: inline-block;
	vertical-align: top;
	position: relative;
	z-index: 420;
	transition:
		transform 0.33s ease-in-out,
		color 0.33s ease-in-out,
		box-shadow 0.33s ease-in-out;
	overflow: hidden;
	font-weight: 700;
	background-color: #49b0e7;
}
@media only screen and (min-width: 1024px) {
	#location .spotbtn {
		margin-top: 1em;
	}
}
@media only screen and (max-width: 1299px) {
	#location .spotbtn {
		line-height: 46px;
		min-width: 46px;
	}
}
@media only screen and (min-width: 1300px) {
	#location .spotbtn {
		line-height: 3.15384615;
	}
}
#location .spotbtn::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: -1;
	transform: translateY(-100%);
	transition: transform 0.33s ease-in-out;
}
#location .spotbtn:hover,
#location .spotbtn:focus {
	color: #fff;
}
#location .spotbtn:hover::before,
#location .spotbtn:focus::before {
	transform: translateY(0%);
}
/* ==================================================================
		#links
=================================================================== */
#links {
	text-align: center;
	color: #000;
	margin: 0;
	background-color: #fff;
	position: relative;
	z-index: 420;
}
@media only screen and (max-width: 1299px) {
	#links {
		padding: 2em 0;
	}
}
@media only screen and (min-width: 1300px) {
	#links {
		height: 4.25em;
		padding: 1.025em 0 0;
	}
}
#links .util {
	font-size: clamp(12px, 0.6em, 12px);
}
@media only screen and (min-width: 480px) {
	#links .util {
		width: auto;
		margin: 0;
		display: inline-block;
		vertical-align: top;
	}
}
@media only screen and (max-width: 1299px) {
	#links .util {
		line-height: 44px;
	}
}
@media only screen and (min-width: 1300px) {
	#links .util {
		line-height: 3.66666667;
	}
}
#links .util a {
	color: #000;
	transition: color 0.33s ease-in-out;
	font-weight: 500;
	display: inline-block;
	position: relative;
}
@media only screen and (max-width: 479px) {
	#links .util a {
		display: block;
	}
}
#links .util a::after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	position: absolute;
	bottom: 0.5em;
	left: 0;
	transition: transform 0.33s ease-in-out;
	transform: scaleX(0);
}
#links .util a:focus::after,
#links .util a:hover::after {
	transform: scaleX(1);
}
#links .util .divider {
	margin: 0 0.4em;
	display: inline-block;
}
@media only screen and (max-width: 479px) {
	#links .util .divider {
		display: none;
	}
}
/* ===============================================
		sesame link
=============================================== */
a#sesame-link .sesameicon {
	width: 1.33333333em;
	height: 1.16666667em;
	margin-right: 0.58333333em;
	display: inline-block;
	vertical-align: middle;
}
a#sesame-link .sesameicon path {
	transition: fill 0.33s ease-in-out;
}
a#sesame-link .sesameicon path.top {
	fill: #d6e03d;
}
a#sesame-link .sesameicon path.bottom {
	fill: #00a5e3;
}
a#sesame-link:focus .sesameicon path,
a#sesame-link:hover .sesameicon path {
	fill: currentcolor;
}
/* ===============================================
	backToTop
=============================================== */
#btt {
	text-align: center;
	width: 100%;
	margin: 1em 0 0;
	display: block;
	position: relative;
}
@media only screen and (min-width: 480px) {
	#btt {
		margin: 0;
		width: auto;
		display: inline-block;
		vertical-align: top;
		margin-left: 0.9em;
	}
}
a#backtotop {
	font-size: clamp(12px, 1em, 20px);
	color: #a8a7aa;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: top;
	transition: color 0.33s ease-in-out;
}
@media only screen and (max-width: 1299px) {
	a#backtotop {
		height: 44px;
		width: 44px;
	}
}
@media only screen and (min-width: 1300px) {
	a#backtotop {
		height: 2.2em;
		width: 1.3em;
	}
}
a#backtotop svg {
	width: 100%;
	height: auto;
}
a#backtotop svg .bg {
	transform-origin: 50% 50%;
	transition:
		transform 0.33s ease-in-out,
		color 0.33s ease-in-out;
	color: #49b0e7;
}
a#backtotop:focus,
a#backtotop:hover {
	color: #000;
}
a#backtotop:focus .bg,
a#backtotop:hover .bg {
	transform: translate(0, 95%);
}
/*superlative*/
/************************************************************************************************************************************************/
/* hr element - div.hr */
hr,
.types-of-braces #content div.clear {
	font-size: inherit;
	width: 100%;
	margin: 1.58em 0;
	height: 1px;
	background: #757474;
	border: none;
	display: block;
}
.brushing-and-flossing .content-text hr {
	float: left;
}
/* ===============================================
	Form Buttons
=============================================== */
form button {
	letter-spacing: normal;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #01131b;
	height: 44px;
	padding: 0 1.5em;
	overflow: hidden;
	position: relative;
	z-index: 1;
	background-color: #49b0e7;
	border: none;
	border-radius: 0px;
	transition:
		color 0.33s ease-in-out,
		background-color 0.33s ease-in-out,
		border-color 0.33s ease-in-out;
}
form button::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #00141e;
	z-index: -1;
	transform: translateY(-100%);
	transition: transform 0.33s ease-in-out;
}
form button:hover,
form button:focus {
	color: #fff;
}
form button:hover::before,
form button:focus::before {
	transform: translateY(0%);
}
form p {
	height: auto;
}
/* ===============================================
	skip link styles
=============================================== */
.skiplink {
	line-height: 2;
	font-size: 12px;
	color: #fff;
	padding: 0.5em 1em;
	background-color: #bce8ff;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 6px;
	z-index: 3333;
	transition: transform 0.33s ease-in-out;
	transform: translate(0, -100%);
}
.skiplink:focus {
	transform: translate(0, 0);
}
.skiplink:focus .cta {
	transform: translate(0, 0);
}
.skiplink:focus .icon {
	transform: translate(0, 0);
}
.skiplink.alt .icon .trait {
	display: none;
}
.skiplink .cta {
	display: block;
	transition: transform 0.33s ease-in-out 0.33s;
	transform: translate(0, -44px);
}
.skiplink .icon {
	width: 1.1em;
	height: 1.1em;
	margin: 0 auto;
	display: block;
	transition: transform 0.33s ease-in-out 0.165s;
	transform: translate(0, -44px);
}
/* ===============================================
	chat widget resize for mobile use comfort
=============================================== */
#bc-chat-container {
	font-size: 0.8em !important;
}
.bc-minimize-state {
	width: 11.8em !important;
	height: 7.7em !important;
}
/* ===============================================
	blog sidebar sharethiswidget styles
=============================================== */
#blog_search label,
p.share-text {
	margin-bottom: 10px;
}
/* ===============================================
	recaptcha
=============================================== */
.grecaptcha-badge {
	visibility: hidden;
	z-index: -1;
}
.grecaptcha-alt {
	line-height: 1.3;
	font-size: 12px;
	font-style: italic;
	text-align: inherit;
	text-wrap: balance;
	color: #ccc;
}
/* ===============================================
	generic button for quick use by PM/PAs
=============================================== */
a.intbtn,
#content a.intbtn {
	line-height: 44px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	width: auto;
	text-decoration: none;
	padding: 0 1.5em;
	background-color: #49b0e7;
	display: inline-block;
	vertical-align: top;
	position: relative;
	transition: background-color 0.33s ease-in-out;
}
a.intbtn:focus,
#content a.intbtn:focus,
a.intbtn:hover,
#content a.intbtn:hover {
	background-color: #bce8ff;
}
/* ===============================================
	.screenreader 
	a11y support for descriptive text on vaguely worded buttons
	https://gomakethings.com/hidden-content-for-better-a11y/#hidden-labels
=============================================== */
.screenreader {
	white-space: nowrap;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
/************************************************************************************************************************************************/
/* end superlatives */
/* ===============================================
Tablet || Supports 768px and up
=============================================== */
@media only screen and (min-width: 768px) {
	/* ===============================================
	blanket content sidebar hide
=============================================== */
	.sitemap #bd.sub:after,
	.layout-full-width #bd.sub:after {
		content: none;
	}
	.sitemap #bd.sub,
	.layout-full-width #bd.sub {
		background-image: none;
	}
	.sitemap #content,
	.layout-full-width #content {
		width: 70%;
		/* count out 90-100 characters per line to determine width */
		max-width: none;
		margin-right: auto;
		margin-left: auto;
		float: none;
	}
	.sitemap #sidebar,
	.layout-full-width #sidebar {
		display: none;
	}
	/* ===============================================
	custom content
=============================================== */
	.speed-system img[alt='Speed Braces'] {
		display: block;
	}
	/* ===============================================
	PAGE SPECIFIC
=============================================== */
	.which-is-right-for-me #content p {
		display: inline-block;
		float: left;
	}
	.which-is-right-for-me #content a[href^='/sesame_media/docs/'] {
		text-align: center;
		width: 100%;
		display: block;
		clear: both;
	}
	.which-is-right-for-me #content a[href^='/sesame_media/docs/'] img {
		display: inline-block;
	}
	.in-ovation-testimonials .embed-container {
		margin-right: auto;
		margin-left: auto;
		display: block;
	}
	[class^='inovation-chart-'] {
		max-width: 50%;
		display: inline-block;
	}
	.in-ovation-before-after #content p {
		text-align: center;
		margin-bottom: 0;
	}
	.in-ovation-before-after .content-text h3 {
		text-align: center;
	}
	.in-ovation-before-after .content-text .img-left,
	.in-ovation-before-after .content-text .border {
		max-width: 44%;
		margin: 2%;
		display: inline-block;
		float: none;
	}
	.in-ovation-videos .content-text h2 {
		text-align: center;
	}
	.in-ovation-videos .content-text .embed-container {
		margin-right: auto;
		margin-left: auto;
		display: block;
	}
	body[class*='in-ovation'] .img-right {
		max-width: 40%;
	}
	/*END*/
}
/* ===============================================
	embed-container enhanced support
=============================================== */
@supports (aspect-ratio: 16 / 9) and (object-fit: cover) {
	@media only screen and (max-width: 1299px) {
		.embed-container,
		.embed-container.ratio16x9 {
			max-width: min(42.10526316em, 90%);
		}
	}
	@media only screen and (min-width: 1300px) {
		.embed-container,
		.embed-container.ratio16x9 {
			max-width: min(42.10526316em, 1200px);
		}
	}
}