:root {
	--font-primary: Verdana, Geneva, Arial, Helvetica, sans-serif;
	--color-text: #4b4b4b;
	--color-quote: #8C5A5A;
	--color-footer: #757575;
	--color-light-gray: #999999;
	--color-primary: #3333CC;
}

.menu>a:hover {
	/* color: var(--color-primary) !important; */
}

body {
	background-color: #fff;
	margin: 0;
	font-family: var(--font-primary);
}

html {
	scroll-behavior: smooth;
}

a:link,
a:visited,
a:active {
	color: var(--color-primary);
	outline: none;
	border: none;
	text-decoration: none;
}

:focus {
	-moz-outline-style: none;
}

a:hover {
	text-decoration: none;
}

a.footerCopyL,
a.footerCopyL:visited,
a.footerCopyL:active {
	font-size: 13px;
	color: var(--color-primary);
	text-decoration: none;
}

a.footerCopyL:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.bodyCopy {
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-text);
}

.quoteCopy {
	font-size: 18px;
	color: var(--color-quote);
	line-height: 1.5em;
	margin-top: 40px;
	margin-bottom: 50px;
	display: block;
	font-style: italic;
}

.quoteCopy p,
.quoteFooter p {
	margin-bottom: 0px;
}

.quoteFooter {
	font-size: 16px;
	color: var(--color-quote);
	line-height: 1.5em;
	margin-top: 50px;
	margin-bottom: 50px;
	display: block;
	font-style: italic;
}

.quote-author {
	/* width: 205px; */
	display: inline-block;
	vertical-align: top;
	font-size: 18px;
}

.quote-author em {
	font-size: 18px;
}

.quoteCopy a:link,
.quoteCopy a:visited,
.quoteCopy a:active {
	color: var(--color-quote);
}

.quoteCopy a:hover {
	color: #644040;
}

.footerCopy {
	font-size: 13px;
	color: var(--color-footer);
}

a.footerCopy,
a.footerCopy:visited,
a.footerCopy:active {
	font-size: 13px;
	color: #ffffff;
	text-decoration: none !important;
}

a.footerCopy:hover {
	color: #dddddd;
	text-decoration: underline;
}

.totop {
	background-color: #aaaaaa;
	padding: 5px 15px;
	border-radius: 10px;
}

.footerCopy.totop {
	font-size: 15px;
	margin-top: 60px;
	display: inline-block;
}

.linkSel {
	font-size: 11px;
	color: #666666;
}

.creditsCopy {
	font-size: 11px;
	color: var(--color-light-gray);
}

a.email {
	font-size: 13px;
	color: var(--color-primary);
	text-decoration: none;
}

a.email:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

a.email:active {
	color: Black;
	text-decoration: underline;
}

a.credits {
	font-size: 11px;
	color: var(--color-light-gray);
	text-decoration: none;
}

a.credits:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

a.credits:active {
	color: var(--color-primary);
	text-decoration: underline;
}

#mainNav {
	width: 200px;
	font-size: 14px;
	color: var(--color-primary);
	font-weight: bold;
}

#mainNav a:link,
#mainNav a:visited,
#mainNav a:active {
	text-decoration: none;
	color: var(--color-primary);
	display: block;
	line-height: 30px;

	/* MOD */
	padding-left: 24px;
}

#mainNav a:hover {
	color: #000000;
}

#selLink a:link,
#selLink a:visited,
#selLink a:active {
	color: var(--color-light-gray);
}

#selLink a:hover {
	color: var(--color-primary);
}

#subNav {
	width: 180px;
	font-size: 11px;
	color: var(--color-primary);
	font-weight: bold;
	padding-bottom: 6px;
}

#subNav a:link,
#subNav a:visited,
#subNav a:active {
	text-decoration: none;
	color: var(--color-primary);
	line-height: 24px;
	padding-left: 24px;
}

#subNav a:hover {
	color: #000000;
}

#subNavSel2 {
	width: 180px;
	font-size: 11px;
	color: var(--color-light-gray);
	padding-left: 24px;
	padding-bottom: 6px;
}

.sel-l {
	background-image: url(../images/nav-arrow.png);
	background-repeat: no-repeat;
	background-position: 0 6px;
	color: var(--color-light-gray);
	text-decoration: none;
	display: block;
	line-height: 35px;
	padding-left: 24px;
}

.sel {
	background-image: url(../images/nav-arrow-mobile.png);
	background-repeat: no-repeat;
	background-position: 0 3px;
	color: var(--color-light-gray);
	text-decoration: none;
	display: block;
	line-height: 35px;
	padding-left: 44px;
	height: 45px;
}

.selSub {
	background-image: url(../images/arrow_sel.gif);
	background-repeat: no-repeat;
	background-position: 0 3px;
	color: var(--color-light-gray);
	text-decoration: none;
	display: block;
	line-height: 24px;
}

#tellFriend a:link,
#tellFriend a:visited,
#tellFriend a:active {
	margin-top: 38px;
	font-size: 11px;
	text-decoration: none;
	color: var(--color-primary);
	line-height: 11px;
	padding-left: 24px;
	display: block;
}

#tellFriend a:hover {
	color: #000000;
}

/* MODS 07-2025 */
.intro-header {
	font-size: 32px;
	display: block;
	margin-bottom: 10px;
	font-weight: normal;
	color: #5d5d5d;
}

.contact-email {
	color: #666 !important;
}

.contact-email:hover {
	color: var(--color-primary) !important;
}

.email-inline {
	color: #333 !important;
	text-decoration: underline !important;
}

.email-inline:hover {
	color: var(--color-primary) !important;
}

.quoteHome {
	color: #bb7878;
}

.mobile-only {
	display: none;
}

.footerCopy.credits {
	margin-top: 20px;
	display: block;
}


body.about .footerCopy span {
	padding-left: 20px;
	display: inline-block;
}

.quote-author-about {
	line-height: 1.2;
}

.bodyCopy p {
	margin-top: 20px;
}

.menu .nav-item {
	font-weight: bold;
}

.sel-mobile-menu {
	color: #bfbcbc !important;
	pointer-events: none;
}

.menu .nav-item:not(.sel-mobile-menu) {
	color: #777;
}

.about-photo {
	margin-top: 0px;
	width: 70%;
}

.testimonial {
	color: #bb7878
}

.testimonial em,
.testimonial em a {
	color: #9b9393;
	text-align: left;
	display: inline-block;
	margin-right: 15px;
	font-weight: bold;
	margin-top: 10px;
}

.testimonial em a span {
	font-style: normal !important;
}

.sidebar {
	border-left: 1px solid #ccc;
	padding-left: 20px;
}

#banner {
	overflow: hidden;
	background-color: #666666;
	font-size: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	max-height: 170px;
}

.brand-left {
	width: 250px;
	text-align: left;
}

.brand-gap {
	width: 27px;
}

.brand-contact {
	width: 160px;
}

.brand-contact-inner {
	font-weight: normal;
	color: #333;
	padding-top: 7px;
}

.logo {
	margin-top: 5px;
	opacity: 0.8;
}

.branding-copy {
	font-size: 14px;
	margin-top: 5px;
	margin-bottom: 30px;
	letter-spacing: .5px;
	display: block;
	color: var(--color-footer);
}

.contact-text {
	font-size: 14px;
	color: #666;
}

.col-left {
	width: 470px;
	text-align: left;
}

.col-gap {
	width: 27px;
}

.col-mid {
	width: 782px;
}

.content-col {
	width: 372px;
}

.content-indent {
	width: 60px;
	display: inline-block;
	vertical-align: top;
}

.col-gap-30 {
	width: 40px;
}

.sidebar {
	/* MOD */
	width: 220px;
	margin-top: 10px;
	padding-bottom: 15px;
}

.top-row {
	display: flex;
	align-items: flex-start;
	margin-top: 12px;
	max-width: 627px;
	padding-left: 10px;
}

.gutter {
	width: 27px;
}

.contact-line {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.contact-left {
	font-size: 14px;
	letter-spacing: .5px;
}

.contact-right {
	color: #333;
	font-size: 13px;
}

.content-wrap {
	flex: 1;
}

.branding {
	width: 208px;
}

.branding img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 5px;
}

/* Responsive behavior */
@media (max-width: 700px) {

	/* Use flex ordering so branding (left) and sidebar (right) share the top row,
	   and main content flows below them regardless of DOM order. */
	.top-row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.gutter {
		display: none;
	}

	.branding {
		order: 1;
		flex: 0 0 208px;
		margin-right: 8px;
	}

	/* Force content to span full width below the header elements */
	.content-wrap {
		order: 3;
		flex: 1 1 100%;
		width: 100%;
		margin-top: 12px;
	}

	/* Keep other row behaviors stacked where applicable */

}


/* Responsive layout additions (except the #banner div) */

/* Make most images fluid but keep banner images at their fixed sizes */
img {
	max-width: 100%;
	height: auto;
}

#mobile-quote-txt,
#mobile-quote-img {
	display: none;
}

/* Core container widths — match original desktop layout but allow shrinking */
#branding,
#main {
	width: 1180px !important;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 10px;
	margin-left: 0;
}

#branding {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

#main {
	margin-top: 88px;
	display: flex;
}

#main-content {
	display: flex;
}

/* Column sizing: main content and sidebar */
#main-content>div:first-child {
	/* MOD */
	flex: 1 1 532px;
	min-width: 260px;
}

@media (max-width: 390px) {

	/* --- */
	header#banner {
		max-height: none !important;
		min-height: 245px !important;
	}

	.menu-icon {
		top: 290px !important;
		right: 0px;
	}

	.ios .menu-icon {
		top: 270px !important;
		right: 0px;
	}

	/* --- */
}


@media (max-width: 480px) {

	/* --- */
	header#banner {
		max-height: none !important;
		min-height: 245px !important;
	}

	.brand-left {
		margin-left: 12px;
	}

	.menu-icon {
		top: 290px !important;
		right: 0px;
	}

	.ios .menu-icon {
		top: 270px !important;
		right: 0px;
	}

	.ios .menu .nav-item {
		font-size: 14px !important;
		font-weight: 600;
	}

	.ios .quoteFooter.quoteHome {
		font-size: 17px !important;
	}

	.ios .quote-author-about span {
		font-weight: 500 !important;
	}

	.mobile-only {
		display: block;
	}


	/* --- */
}


/* Single breakpoint: styles for viewports <=600px */
@media (max-width: 600px) {

	/* --- */
	#branding {
		width: 100% !important;
		padding-left: 12px !important;
	}

	#main {
		box-sizing: border-box;
		width: 100% !important;
		padding-left: 12px !important;
	}

	#main-content {
		box-sizing: border-box;
		width: 99% !important;
		padding-left: 12px !important;
	}

	.col-left {
		display: none;
	}

	#main-content {
		flex-direction: column;
		gap: 8px;
		padding-right: 12px;
	}

	#main-content>div:first-child,
	#main-content>div:last-child {
		flex: 1 1 100% !important;
		min-width: 0;
		width: 100% !important;
	}

	#mainNav {
		width: 100% !important;
		margin-top: 12px;
		font-size: 17px;
	}

	.brand-right {
		display: none;
	}

	/* reduce spacing and type sizes for narrow viewports */
	.intro-header {
		font-size: 30px;
	}

	.bodyCopy {
		font-size: 19px !important;
		line-height: 1.4em;
	}

	.ios .bodyCopy {
		font-size: 16px !important;
		line-height: 1.4em;
	}

	.footerCopy {
		font-size: 14px;
		color: #757575;
	}

	/* Ensure sidebar appears above main content on small screens */
	.sidebar {
		order: -1;
		display: none;
	}

	.col-gap,
	.col-gap-30,
	.brand-gap {
		display: none;
	}

	.brand-left,
	.brand-right {
		width: 100% !important;
	}

	.brand-inner,
	.brand-contact {
		width: auto !important;
	}

	.quoteCopy {
		font-size: 19px !important;
	}

	.ios .quoteCopy {
		font-size: 16px !important;
		line-height: 1.4em;
	}

	.sel {
		margin-top: -10px;
	}

	.about-photo {
		width: 80%;
	}

	.footerCopy.totop {
    margin-top: 30px;
}

	/* --- */
}

/* On larger screens keep sidebar to the right of main content (>=601px) */
@media (min-width: 601px) {
	/* --- */

	#main-content {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.content-col {
		order: 0;
		flex: 1 1 372px;
		max-width: 600px;
	}

	.sidebar {
		order: 1;
		/* MOD  */
		flex: 0 0 220px;
	}

	.col-gap,
	.col-gap-30,
	.brand-gap {
		display: block;
	}

	/* --- */
}



@media (min-width: 601px) and (max-width: 850px) {

	/* --- */
	.col-left {
		width: 180px !important;
	}

	#main {
		margin-left: -10px;
	}

	.ios .bodyCopy {
		font-size: 18px !important;
		line-height: 1.4em;
	}

	.ios .quoteCopy {
		font-size: 18px !important;
		line-height: 1.5em;
	}

	/* --- */
}


@media (min-width: 601px) and (max-width: 631px) {

	/* --- */
	.col-gap-30 {
		width: 10px !important;
	}

	/* --- */
}

@media (min-width: 625px) and (max-width: 680px) {

	/* --- */
	.col-gap-30 {
		width: 10px !important;
	}

	.col-mid {
		width: 100% !important;
	}

	/* --- */
}


/* =============================================================== */

header2 {
	display: none;
	width: 100%;
}

header2 h1 {
	margin-left: 1rem;
}

header2 a {
	text-decoration: none;
}

/* "Hide" checkbox -- moves it off screen*/
#menu-btn {
	position: absolute;
	top: -100%;
	left: -100%;
}

/* Hide hamburger for bigger screens */
.menu-icon {
	visibility: hidden;
}

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 250px;
	margin-right: 2rem;
}

/* Set width for mobile/smaller screen size. */
/* I set it big here so I don't have to shrink the screen so much */
/* for testing purposes */
@media screen and (max-width: 600px) {

	/* --- */

	header2 {
		display: grid;
		grid-template-areas:
			"title   title   hamburger"
			"nav     nav     nav";
		justify-content: center;
		background-color: #EEEEEE;
	}

	h1 {
		grid-area: title;
	}

	.menu a {
		text-decoration: none;
		color: black;
	}

	.menu-btn {
		display: none;
	}

	.menu-icon {
		grid-area: hamburger;
		cursor: pointer;
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 30px 30px 30px 20px;
		position: absolute;
		top: 355px;
		right: 10px;
		user-select: none;
		visibility: visible;
	}

	.navicon {
		background: #333;
		display: block;
		height: 2px;
		width: 18px;
		position: relative;
	}

	.navicon:before {
		top: 5px;
	}

	.navicon:after {
		top: -5px;
	}

	.navicon:before,
	.navicon:after {
		background: #333;
		display: block;
		width: 100%;
		height: 100%;
		content: "";
		position: absolute;
		transition: all 0.2s ease-out;
	}

	.menu {
		grid-area: nav;
		max-width: unset;
		max-height: 0;
		transition: max-height 0.2s ease-out;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.menu a {
		padding: 8px;
		border-right: 1px solid #f4f4f4;
		background-color: #eee;
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: 400;
	}

	.ios .menu a {
		font-size: 16px !important;
	}

	.menu a:first-child {
		padding-top: 20px;
	}

	.menu a:last-child {
		padding-bottom: 20px;
	}

	.menu-btn:checked~.menu {
		max-height: 240px;
	}

	.menu-btn:checked~.menu-icon .navicon {
		background: transparent;
	}

	.menu-btn:checked~.menu-icon .navicon:before {
		transform: rotate(-45deg);
	}

	.menu-btn:checked~.menu-icon .navicon:after {
		transform: rotate(45deg);
	}

	.menu-btn:checked~.menu-icon .navicon:before,
	.menu-btn:checked~.menu-icon .navicon:after {
		top: 0;
	}

	/* --- */
}


.pulse-element {

	/* Apply the animation */
	animation-name: opacity-pulse;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	/* Makes it repeat forever */
	animation-timing-function: ease-in-out;
	/* Smooths the start and end */
}

@keyframes opacity-pulse {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.4;
		transform: scale(0.99);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}



#banner img:first-child {
	max-width: 736px;
}

@media (max-width: 736px) {

	/* --- */
	/* MOD  */
	#banner img:nth-of-type(2) {
		width: 100%;
		height: auto;
	}

	#mobile-quote-txt,
	#mobile-quote-img {
		display: block;
	}

	#main-quote-txt,
	#main-quote-img {
		display: none;
	}

	#banner img:last-child {
		max-width: 100%;
		height: auto;
		margin-top: 10px;
	}

	#banner {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		max-height: 100%;
	}

	#mobile-quote-txt {
		padding-right: 130px;
	}


	/* MOD HIDE/SHOW HAMBURGER */
	.navicon {
		display: none !important;
	}

	/* --- */
}

@media (max-width: 320px) and (orientation: landscape) {

	/* --- */
	.ios .content-col .bodyCopy {
		max-width: 172px !important;

	}

	/* --- */
}




/* MOD IPHONE 12+ */
@media only screen and (min-width: 615px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
	/* --- */

	.ios .content-col .bodyCopy {
		max-width: 350px !important;
	}

	/* --- */
}


@media (max-width: 480px) {

	/* --- */
	#main {
		margin-top: 30px;
	}

	.sidebar {
		margin-left: 100px;
		display: none;
	}

	.menu {
		display: flex !important;
	}

	.branding-copy {
		font-size: 16px;
	}

	.ios .branding-copy {
		font-size: 15px;
	}

	.quoteFooter {
		font-size: 19px;
	}

	.ios body.about .quoteFooter,
	.ios body.home .quoteFooter {
		font-size: 16px !important;
	}

	.menu-icon {
		top: 300px !important;
		right: 0px;
	}

	.ios #banner {
		max-height: none !important;
		height: 175px !important;
	}

	#banner {
		max-height: none !important;
		height: 275px
		 !important;
	}
	body.about .footerCopy span {
		padding-left: 0px;
		display: inline-block;
	}


	/* --- */
}


@media (min-width: 481px) and (max-width: 600px) {

	/* --- */

	#banner {
		max-height: none !important;
		height: 325px !important;
	}

	.menu-icon {
		top: 357px !important;
		right: 0px;
	}

		body.about .footerCopy span {
		padding-left: 0px;
		display: inline-block;
	}

	/* --- */
}


@media (min-width: 601px) and (max-width: 700px) {

	/* --- */

	#main-content {
		padding-left: 12px;
	}

	/* --- */
}


@media (min-width: 602px) {

	/* --- */
	.menu {
		display: none;
	}

	/* --- */
}


/* MOD HAMBURGER SIZING */
@media screen and (max-width: 600px) {
	/* --- */

	.navicon {
		margin-top: -15px;
		background: #6E54CE;
		display: block;
		height: 5px;
		width: 40px;
		position: relative;
	}

	.navicon:before,
	.navicon:after {
		background: #6E54CE;
		display: block;
		width: 40px;
		height: 5px;
		content: "";
		position: absolute;
		transition: all 0.2s ease-out;
	}

	.navicon:after {
		top: -10px;
	}

	.navicon:before {
		top: 10px;
	}

	#mobile-quote-txt {
		padding-right: 30px;
	}


	/* --- */
}


@media (min-width: 760px) and (max-width: 768px) {

	/* --- */
	.ios .branding-copy {
		font-size: 16px;
	}

		body.about .footerCopy span {
		padding-left: 0px;
		display: block;
	}

	/* --- */
}

/* MOD TAB S9 */
@media (min-width: 750px) and (max-width: 755px) {

	/* --- */

	.branding-copy {
		font-size: 15px;
	}

	.bodyCopy {
		font-size: 18px;
	}

	.quoteFooter {
		font-size: 18px;
	}


	/* --- */
}

/* MOD TAB S9 */
@media (min-width: 1020px) and (max-width: 1024px) and (orientation: landscape) {

	/* --- */
	.ios .branding-copy {
		font-size: 16px;
	}

	.ios .bodyCopy {
		font-size: 18px !important;
	}

	.ios .quoteFooter {
		font-size: 18px;
	}

	/* --- */
}


@media (min-width: 1200px) and (max-width: 1210px) and (orientation: landscape) {

	/* --- */

	.branding-copy {
		font-size: 15px;
	}

	.bodyCopy {
		font-size: 18px;
	}

	.quoteFooter {
		font-size: 18px;
	}


	/* --- */
}