/* default settings (mobile-first) */
body {
	--glbl-max-width:100vw;
	--glbl-padding:1.5rem;
}
html {
/*	scrollbar-width:thin; */ /* prevent scrollbar left-content-shift issue */
}

/* ---------------------------------------------------------------------------
BEGIN grid definition styles
----------------------------------------------------------------------------*/
.grid-container {
	display:block;
	margin:auto;
	width:auto;
	max-width:var(--glbl-max-width);
	padding:0rem var(--glbl-padding) 0rem var(--glbl-padding);
}
.grid {
	display:inline-flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
	width:100%;
}
.grid > .cell {
	display:block;
	height:100%;
	width:100%;
}
.grid.grid-padding {
	margin:0rem calc(0rem - var(--glbl-padding)) calc(0rem - var(--glbl-padding)) 0rem;
	width:calc(100% + var(--glbl-padding));
}
.grid.grid-padding > .cell {
	padding:0rem var(--glbl-padding) var(--glbl-padding) 0rem;
}
.grid > .cell.small-1 {
	width:8.3333%;
}
.grid > .cell.small-2 {
	width:16.6666%;
}
.grid > .cell.small-3 {
	width:25%;
}
.grid > .cell.small-4 {
	width:33.3333%;
}
.grid > .cell.small-5 {
	width:41.6666%;
}
.grid > .cell.small-6 {
	width:50%;
}
.grid > .cell.small-7 {
	width:58.3333%;
}
.grid > .cell.small-8 {
	width:66.6666%;
}
.grid > .cell.small-9 {
	width:75%;
}
.grid > .cell.small-10 {
	width:83.3333%;
}
.grid > .cell.small-11 {
	width:91.6666%;
}
.grid > .cell.small-12 {
	width:100%;
}
/* ---------------------------------------------------------------------------
END grid definition styles
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN medium and large display adjustments (mobile is default)
----------------------------------------------------------------------------*/
@media all and (min-width:768px) { /* $screen-size-medium */
	/* desktop default settings, where different from mobile */
	body {
		--glbl-max-width:1200px;
	}
	
	.hidden-on-medium {
		display:none;
	}
	.grid > .cell.hidden-on-medium {
		display:none;
	}
	.shown-on-medium, .hidden.shown-on-medium {
		display:inline-block;
	}
	.grid > .cell.shown-on-medium,
	.grid > .cell.hidden.shown-on-medium {
		display:block;
	}
	
	/* ---------------------------------------------------------------------------
	BEGIN grid definition styles
	----------------------------------------------------------------------------*/
	.grid > .cell.medium-1 {
		width:8.3333%;
	}
	.grid > .cell.medium-2 {
		width:16.6666%;
	}
	.grid > .cell.medium-3 {
		width:25%;
	}
	.grid > .cell.medium-4 {
		width:33.3333%;
	}
	.grid > .cell.medium-5 {
		width:41.6666%;
	}
	.grid > .cell.medium-6 {
		width:50%;
	}
	.grid > .cell.medium-7 {
		width:58.3333%;
	}
	.grid > .cell.medium-8 {
		width:66.6666%;
	}
	.grid > .cell.medium-9 {
		width:75%;
	}
	.grid > .cell.medium-10 {
		width:83.3333%;
	}
	.grid > .cell.medium-11 {
		width:91.6666%;
	}
	.grid > .cell.medium-12 {
		width:100%;
	}
	.cell.halign-l {
		text-align:left;
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	.cell.halign-l > *:not(:last-child) {
		margin-right:var(--glbl-padding);
	}

	.cell.halign-r {
		text-align:right;
		display:flex;
		align-items:center;
		justify-content:flex-end;
	}
	.cell.halign-r > *:not(:first-child) {
		margin-left:var(--glbl-padding);
	}
	/* ---------------------------------------------------------------------------
	END grid definition styles
	----------------------------------------------------------------------------*/
}
/* ---------------------------------------------------------------------------
BEGIN default settings
NOTE: code which uses this stylesheet can override these settings later
----------------------------------------------------------------------------*/

body {
	--glbl-padding:1.5rem;
	--glbl-font-semibold:500;
	--glbl-font-bold:700;
	--glbl-font-vbold:900;
	--glbl-font-size-input:1rem; /* used for form inputs, textareas */
	--glbl-menu-arrow-height:0.75rem;
	--glbl-toggle-slider-height:16px;
	--glbl-hover-title-border-radius:0.5rem;
	--glbl-hover-title-vert-padding:0.75rem;
	--glbl-hover-title-horiz-padding:0.5rem;
	--glbl-hover-title-slidein-offset:15px;
	--glbl-transition-time:0.5s;
	--glbl-section-vert-padding:16px;
	
	--clr-body-bg:#eeeeee;
	--clr-body-font:#0a0a0a;
	--clr-link-font:var(--clr-body-font);
	--clr-link-font-hover:#2a2a7a;
	--clr-hdg-font:var(--clr-body-font);
	--clr-toggle-label-bg:rgba(0,0,0,0.25);
	--clr-toggle-label-switch-unchecked:rgba(16,16,190,0.5);
	--clr-toggle-label-switch-checked:rgba(16,16,190,1);
	--clr-hover-title-bg:#cecece;
	--clr-hover-title-shadow:#808080;
	--clr-hover-title-border:transparent;
	--clr-btn-font:#000000;
	--clr-btn-bg:#eeeeee;
	--clr-btn-border:var(--clr-toggle-label-switch-unchecked);
	--clr-btn-hover-font:#000000;
	--clr-btn-hover-bg:#ffffff;
	--clr-btn-hover-border:var(--clr-toggle-label-switch-checked);
	--clr-is-loading-flare:#ffffff;
	--clr-form-card-bg:#ffffff;
	--clr-banner-font:#000000;
	--clr-banner-bg:var(--clr-toggle-label-switch-unchecked);
	--clr-submenu-margin-bg:#aeaeae;
	--clr-dropdown-shadow:#808080;
	--clr-dropdown-bg:#efefef;
	--clr-dropdown-toggle-bg:var(--clr-dropdown-bg);
	--clr-dropdown-toggle-hover-bg:#cecece;
	--clr-dropdown-toggle-border:var(--clr-body-font);
	--clr-dropdown-link-bg:var(--clr-dropdown-toggle-bg);
	--clr-dropdown-link-hover-bg:var(--clr-dropdown-toggle-hover-bg);
	--clr-close-btn-font:black;
	--clr-close-btn-bg:rgba(159,95,95,1);
	--clr-close-btn-hover-bg:rgba(228,26,26,1);
	--clr-notify-stack-bg:white;
	--clr-notification-success-bg:rgba(25,135,84,1);
	--clr-notification-success-font:white;
	--clr-notification-error-bg:rgba(220,53,69,1);
	--clr-notification-error-font:white;
	--clr-notification-warning-bg:rgba(255,193,7,1);
	--clr-notification-warning-font:black;
	--clr-notification-info-bg:rgba(13,202,240,1); /* aka #0dcaf0 */
	--clr-notification-info-font:black;
	--clr-popout-outer-shadow:var(--clr-dropdown-shadow);
	--clr-popout-inner-shadow:rgba(255,255,255,0.5);
	--clr-notification-settings-bg:#ced9dc;
	--clr-user-attention-shadow-bg:#0b779f;
	
	--hdr-height:3rem;
	
	--dropdown-menu-link-vert-padding:1rem;
	--dropdown-menu-link-horiz-padding:0.5rem;
	--dropdown-border-radius:0.5rem;
	
	--iconbar-size:50px;
	--iconbar-focus-size:90px;
	--iconbar-padding:8px;
	--iconbar-z-index:1;
	
	--btn-padding:8px 16px;
	--btn-border-radius:0.5rem;
	
	--form-card-padding:16px;
	
	--progress-bar-height:16px;
}


/* ---------------------------------------------------------------------------
END default settings
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN global component styles
----------------------------------------------------------------------------*/

* {
	box-sizing:border-box;
}

html,body {
	margin:0rem;
	padding:0rem;
}

body {
/*	min-height:100vh; */
	background-color:var(--clr-body-bg);
	color:var(--clr-body-font);
	padding-top:var(--hdr-height);
	padding-bottom:var(--glbl-section-vert-padding);
}

body .no-js {
	display:inline-block;
}
body .yes-js {
	display:none;
}
body .hidden, body .hide {
	display:none;
}

h1, h2, h3, h4, h5, h6 {
	color:var(--clr-hdg-font);
	transition:color var(--glbl-transition-time) ease;
}

a {
	display:inline-block;
	transition:all 0.5s ease;
	color:var(--clr-link-font);
	transition:color var(--glbl-transition-time) ease;
}
a:hover, a:focus, a:active {
	color:var(--clr-link-font-hover);
}

a.access-skip-to-content {
	display:none;
}

section ~ section {
	padding-top:var(--glbl-section-vert-padding);
}

ul, ol {
	margin:0rem;
}

ul.horizontal-list, ol.horizontal-list {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:stretch;
	list-style-type:none;
	padding:0rem;
}
ul.horizontal-list > li, ol.horizontal-list > li {
	display:inline-block;
	height:100%;
}
ul.horizontal-list > li.hidden, ol.horizontal-list > li.hidden {
	display:none;
}

.toggle-slider {
	display:inline-block;
	height:var(--glbl-toggle-slider-height);
}
.toggle-slider > input[type=checkbox] {
/*	display:none;*/
	/* this needs to not be display:none for keyboard navigation to work */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-20;
}
.toggle-slider > input[type=checkbox]:hover ~ label.toggle-label,
.toggle-slider > input[type=checkbox]:focus ~ label.toggle-label,
.toggle-slider > input[type=checkbox]:active ~ label.toggle-label {
	border:1px solid var(--clr-toggle-label-switch-unchecked);
}
.toggle-slider > label.toggle-label {
	display:inline-block;
	position:relative;
	border-radius:8px;
	height:var(--glbl-toggle-slider-height);
	width:calc(var(--glbl-toggle-slider-height) * 2);
	background-color:var(--clr-toggle-label-bg);
	border:1px solid transparent;
}
.toggle-slider > label.toggle-label::before {
	content:' ';
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	bottom:0px;

	border-radius:8px;
	width:calc(var(--glbl-toggle-slider-height) - 2px);
	height:calc(var(--glbl-toggle-slider-height) - 2px);
	transition:all var(--glbl-transition-time) ease;
	background-color:var(--clr-toggle-label-switch-unchecked);
}
.toggle-slider > input[type=checkbox]:checked ~ label.toggle-label::before {
/*
	left:unset;
	right:0px;
*/
	background-color:var(--clr-toggle-label-switch-checked);
	left:100%;
	transform:translateX(-100%);
}
.toggle-slider > input[type=checkbox] ~ label.toggle-label-unchecked,
.toggle-slider > input[type=checkbox] ~ label.toggle-label-checked {
	margin-left:8px;
}
input[type=checkbox] ~ label.toggle-label-unchecked {
	display:inline-block;
}
input[type=checkbox] ~ label.toggle-label-checked {
	display:none;
}
input[type=checkbox]:checked ~ label.toggle-label-unchecked {
	display:none;
}
input[type=checkbox]:checked ~ label.toggle-label-checked {
	display:inline-block;
}

.topbar, .bottombar {
	position:fixed;
	top:0vh;
	left:0vw;
	right:0vw;
	width:100vw;
	display:block;
/*	height:var(--hdr-height); */
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hdr-shadow);
	background-color:var(--clr-hdr-bg);
	transition:all var(--glbl-transition-time) ease;
	z-index:2;
}
.fixed-bar-height {
	height:var(--hdr-height);
}
.bottombar {
	top:unset;
	bottom:0px;
	box-shadow:0rem -0.5rem 0.5rem var(--clr-hdr-shadow);
	background-color:var(--clr-hdr-bg);
}

.hover-title-cont {
	z-index:0;
	position:relative;
	transition:all var(--glbl-transition-time) ease;
}
.hover-title-cont:hover .hover-title {
	opacity:1;
	pointer-events:auto;
	transform:none;
}

.hover-title {
	z-index:1;
	position:absolute;
	background-color:var(--clr-hover-title-bg);
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hover-title-shadow);
	border-radius:var(--glbl-hover-title-border-radius);
	padding:var(--glbl-hover-title-vert-padding) var(--glbl-hover-title-horiz-padding);
	border:1px solid var(--clr-hover-title-border);
	opacity:0;
	pointer-events:none;
	min-width:150px;
	max-width:unset;
	text-align:center;
	transition:all var(--glbl-transition-time) ease;
}

.hover-title.above {
	bottom:calc(100% + var(--glbl-menu-arrow-height));
	transform:translateY(calc(0px - var(--glbl-hover-title-slidein-offset)));
	box-shadow:0rem -0.5rem 0.5rem var(--clr-hover-title-shadow);
}
.hover-title.below {
	top:calc(100% + var(--glbl-menu-arrow-height));
	transform:translateY(var(--glbl-hover-title-slidein-offset));
}
.hover-title.halign-l {
	left:0px;
}

.hover-title.halign-r {
	right:0px;
}

.hover-title::after {
	content:' ';
	z-index:1;
	position:absolute;
	left:var(--glbl-padding);
	border-left:var(--glbl-menu-arrow-height) solid transparent;
	border-right:var(--glbl-menu-arrow-height) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}
.hover-title::before {
	content:' ';
	z-index:1;
	position:absolute;
	left:calc(-1px + var(--glbl-padding));
	border-left:var(--glbl-menu-arrow-height) solid transparent;
	border-right:var(--glbl-menu-arrow-height) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}

.hover-title.halign-r::before {
	left:unset;
	right:calc(-1px + var(--glbl-padding));
}
.hover-title.halign-r::after {
	left:unset;
	right:calc(-1px + var(--glbl-padding));
}
.hover-title.halign-l::before {
	left:calc(-1px + var(--glbl-padding));
	right:unset;
}
.hover-title.halign-l::after {
	left:calc(-1px + var(--glbl-padding));
	right:unset;
}

.hover-title.above::after {
	bottom:calc(0px - var(--glbl-menu-arrow-height));
	border-top:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-bg);
}
.hover-title.above::before {
	bottom:calc(-1px - var(--glbl-menu-arrow-height));
	border-top:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-border);
}
.hover-title.below::after {
	top:calc(0px - var(--glbl-menu-arrow-height));
	border-bottom:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-bg);
}
.hover-title.below::before {
	top:calc(-1px - var(--glbl-menu-arrow-height));
	border-bottom:var(--glbl-menu-arrow-height) solid var(--clr-hover-title-border);
}

.hover-title.halign-l.arrow-nopadding::after,
.hover-title.halign-l.arrow-nopadding::before {
	right:unset;
	left:var(--glbl-hover-title-border-radius);
}
.hover-title.halign-r.arrow-nopadding::after,
.hover-title.halign-r.arrow-nopadding::before {
	left:unset;
	right:var(--glbl-hover-title-border-radius);
}


.dropdown-toggle-label, .topbar-link, .bottombar-link {
	height:100%;
	padding:0rem calc(var(--glbl-padding) / 2);
	font-weight:var(--glbl-font-vbold);
	height:var(--hdr-height);
	position:relative;
	background-color:var(--clr-dropdown-toggle-bg);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	border-left:1px solid var(--clr-dropdown-toggle-border);
	border-right:1px solid var(--clr-dropdown-toggle-border);
	transition:all var(--glbl-transition-time) ease;
	text-decoration:none;
}
.dropdown-toggle-label:hover,
.dropdown-toggle-label:focus,
.dropdown-toggle-label:active,
.topbar-link:hover,
.topbar-link:focus,
.topbar-link:active,
.bottombar-link:hover,
.bottombar-link:focus,
.bottombar-link:active,
.submenu-toggle-label:hover,
.submenu-toggle-label:focus,
.submenu-toggle-label:active {
	background-color:var(--clr-dropdown-toggle-hover-bg);
}
.topbar-link:hover,
.topbar-link:focus,
.topbar-link:active,
.bottombar-link:hover,
.bottombar-link:focus,
.bottombar-link:active {
	color:var(--clr-body-font);
}
input[type=checkbox].dropdown-toggle:hover ~ label.dropdown-toggle-label,
input[type=checkbox].dropdown-toggle:focus ~ label.dropdown-toggle-label,
input[type=checkbox].dropdown-toggle:active ~ label.dropdown-toggle-label,
input[type=checkbox].submenu-toggle:hover ~ label.submenu-toggle-label,
input[type=checkbox].submenu-toggle:focus ~ label.submenu-toggle-label,
input[type=checkbox].submenu-toggle:active ~ label.submenu-toggle-label {
	background-color:var(--clr-dropdown-toggle-hover-bg);
}

input[type=checkbox].dropdown-toggle, input[type=checkbox].submenu-toggle {
/*	display:none; */
	/* this needs to not be display:none for keyboard navigation to work */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-20;
}
input[type=checkbox].dropdown-toggle ~ .dropdown-menu-cont {
	opacity:0;
	pointer-events:none;
	transition:all var(--glbl-transition-time) ease;
	transform:translateY(var(--glbl-hover-title-slidein-offset));
}
input[type=checkbox].dropdown-toggle:checked ~ .dropdown-menu-cont {
	opacity:1;
	pointer-events:auto;
	transform:none;
}
input[type=checkbox].submenu-toggle ~ .submenu-cont {
	display:none;
}
input[type=checkbox].submenu-toggle:checked ~ .submenu-cont {
	display:block;
}
input[type=checkbox].submenu-toggle:checked ~ label.submenu-toggle-label.toggle-label-checked {
	border-radius:0px;
}

.dropdown-menu-cont {
	z-index:0;
	position:absolute;
	top:calc(100% + var(--glbl-menu-arrow-height));
	box-shadow:0rem 0.5rem 0.5rem var(--clr-dropdown-shadow);
	border-radius:var(--dropdown-border-radius);
	border:1px solid var(--clr-dropdown-toggle-border);
	width:10rem;
	text-align:center;
}

.dropdown-menu-cont::after {
	content:' ';
	z-index:1;
	position:absolute;
	top:calc(0rem - var(--glbl-menu-arrow-height));
	left:var(--glbl-padding);
	border-bottom:var(--glbl-menu-arrow-height) solid var(--clr-dropdown-bg);
	border-left:var(--glbl-menu-arrow-height) solid transparent;
	border-right:var(--glbl-menu-arrow-height) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}
.dropdown-menu-cont::before {
	content:' ';
	z-index:1;
	position:absolute;
	top:calc(-1px - var(--glbl-menu-arrow-height));
	left:calc(-1px + var(--glbl-padding));
	border-bottom:calc(1px + var(--glbl-menu-arrow-height)) solid var(--clr-dropdown-toggle-border);
	border-left:calc(1px + var(--glbl-menu-arrow-height)) solid transparent;
	border-right:calc(1px + var(--glbl-menu-arrow-height)) solid transparent;
	transition:all var(--glbl-transition-time) ease;
}
.dropdown-menu {
	background-color:var(--clr-dropdown-bg);
	list-style-type:none;
	padding:0rem;
	border-radius:var(--dropdown-border-radius);
	
	/* if the dropdown menu is too tall for the display, then it scrolls */
	max-height: calc(100vh - var(--hdr-height) - 2rem);
	overflow: auto;
}
.dropdown-menu > li, .submenu > li {
	padding:0rem;
}
.dropdown-menu > li > a,
.dropdown-menu > li > *,
.submenu > li > a,
.submenu > li > * {
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	transition:all var(--glbl-transition-time) ease;
	background-color:var(--clr-dropdown-link-bg);
	color:var(--clr-body-font);
	padding:var(--dropdown-menu-link-vert-padding) var(--dropdown-menu-link-horiz-padding);
	border-bottom:1px solid var(--clr-dropdown-toggle-border);
	margin-top:0px;
	margin-bottom:0px;
}

.dropdown-menu > li > .submenu-toggle:checked ~ .submenu-toggle-label {
	border-bottom:none;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:active,
.submenu > li > a:hover,
.submenu > li > a:focus,
.submenu > li > a:active {
	background-color:var(--clr-dropdown-link-hover-bg);
	text-decoration:underline;
}

.dropdown-menu > li:first-child,
.dropdown-menu > li:first-child > a,
.dropdown-menu > li:first-child > *:not(.submenu-cont) {
	border-radius:var(--dropdown-border-radius) var(--dropdown-border-radius) 0rem 0rem;
}
.dropdown-menu > li:first-child > input[type=checkbox].submenu-toggle:checked ~ label.submenu-toggle-label.toggle-label-checked {
	border-radius:var(--dropdown-border-radius) var(--dropdown-border-radius) 0rem 0rem;
}
.dropdown-menu > li:last-child,
.dropdown-menu > li:last-child > a,
.dropdown-menu > li:last-child > * {
	border-radius:0rem 0rem var(--dropdown-border-radius) var(--dropdown-border-radius);
	border-bottom:0px solid transparent;
}

.menu {
	height:100%;
	position:relative;
}

.menu.valign-b .dropdown-menu-cont {
	top:unset;
	bottom:calc(100% + var(--glbl-menu-arrow-height));
	box-shadow:0rem -0.5rem 0.5rem var(--clr-dropdown-shadow);
}
.menu.valign-b .dropdown-menu-cont::before,
.menu.valign-b .dropdown-menu-cont::after {
	top:unset;
}
.menu.valign-b .dropdown-menu-cont::before {
	border-bottom:none;
	border-top:calc(1px + var(--glbl-menu-arrow-height)) solid var(--clr-dropdown-toggle-border);
	bottom:calc(-1px - var(--glbl-menu-arrow-height));
}
.menu.valign-b .dropdown-menu-cont::after {
	border-bottom:none;
	border-top:var(--glbl-menu-arrow-height) solid var(--clr-dropdown-bg);
	bottom:calc(0px - var(--glbl-menu-arrow-height));
}
.menu.valign-b input[type=checkbox].dropdown-toggle ~ .dropdown-menu-cont {
	transform:translateY(calc(0px - var(--glbl-hover-title-slidein-offset)));
}
.menu.valign-b input[type=checkbox].dropdown-toggle:checked ~ .dropdown-menu-cont {
	transform:none;
}
.nav-list-item:not(.hidden-on-medium) ~ .nav-list-item .topbar-link,
.nav-list-item:not(.hidden-on-medium) ~ .nav-list-item .bottombar-link,
.nav-list-item:not(.hidden-on-medium) ~ .nav-list-item .dropdown-toggle-label {
	border-left:none;
}

.dropdown-menu-cont.halign-l {
	/* left alignment is default so no styles are needed here */
}
.dropdown-menu-cont.halign-r {
	right:0px;
}
.dropdown-menu-cont.halign-r::after {
	left:unset;
	right:var(--glbl-padding);
}
.dropdown-menu-cont.halign-r::before {
	left:unset;
	right:calc(-1px + var(--glbl-padding));
}

.submenu-opener {
	height:100%;
	width:100%;
	text-align:center;
}
.submenu-toggle-label {
	width:100%;
	border-bottom:none;
	cursor:pointer;
}
.submenu > li > .submenu-toggle-label.toggle-label-checked {
	border-bottom:none;
}
.submenu-opener > .submenu-cont {
	background-color:var(--clr-submenu-margin-bg);
	border-top:1px solid var(--clr-dropdown-toggle-border);
	padding:0px 8px 0px 8px;
}
.submenu {
	list-style-type:none;
	padding:0px;
}
.submenu > li:last-child > a,
.submenu > li:last-child > * {
	border-bottom:none;
}

aside.iconbar {
	position:fixed;
	background-color:rgba(255,255,255,0.70);
	border-radius:calc(var(--iconbar-padding) * 2);
	z-index:var(--iconbar-z-index,1);
}
aside.iconbar > ul.icons {
	list-style-type:none;
	width:100%;
	height:100%;
	padding:var(--iconbar-padding);
	display:flex;
	align-items:center;
	justify-content:center;
}
aside.iconbar > ul.icons img {
	display:block;
	width:100%;
	height:100%;
}
aside.iconbar > ul.icons > li {
	display:block;
	height:100%;
	width:100%;
}
aside.iconbar > ul.icons > li > * {
	transition:all 0.5s ease;
	display:inline-block;
/*
	width:100%;
	height:100%;
*/
	width:calc(var(--iconbar-size) - (var(--iconbar-padding) * 2));
	height:calc(var(--iconbar-size) - (var(--iconbar-padding) * 2));
	position:relative;
}
aside.iconbar > ul.icons > li > *:hover,
aside.iconbar > ul.icons > li > *:focus,
aside.iconbar > ul.icons > li > *:active {
	width:var(--iconbar-focus-size);
	height:var(--iconbar-focus-size);
}

aside.iconbar.left-center {
	left:0px;
	top:50%;
	transform:translateY(-50%);
	width:var(--iconbar-size);
}
aside.iconbar.left-center ul.icons {
	flex-direction:column;
	align-items:flex-start;
}

aside.iconbar.right-center {
	right:0px;
	top:50%;
	transform:translateY(-50%) rotateY(180deg);
	width:var(--iconbar-size);
}
aside.iconbar.right-center ul.icons {
	flex-direction:column;
	align-items:flex-start;
}
aside.iconbar.right-center ul.icons img {
	transform:rotateY(180deg);
}

aside.iconbar.top-center {
	top:0px;
	left:50%;
	transform:translateX(-50%);
	height:var(--iconbar-size);
}
aside.iconbar.top-center.nav-cont-offset {
	top:var(--hdr-height);
}
aside.iconbar.top-center ul.icons {
	flex-direction:row;
	align-items:flex-start;
	justify-content:center;
}

aside.iconbar.bottom-center {
	bottom:0px;
	left:50%;
	transform:translateX(-50%) rotateX(180deg);
	height:var(--iconbar-size);
}
aside.iconbar.bottom-center.nav-cont-offset {
	bottom:var(--hdr-height);
}
aside.iconbar.bottom-center ul.icons {
	flex-direction:row;
	align-items:flex-start;
	justify-content:center;
}
aside.iconbar.bottom-center ul.icons img {
	transform:rotateX(180deg);
}

.btn {
	padding:var(--btn-padding);
	border-radius:var(--btn-border-radius);
	border-width:1px;
	border-style:solid;
	transition:all var(--glbl-transition-time) ease;
	text-decoration:none;
	
	color:var(--clr-btn-font);
	background-color:var(--clr-btn-bg);
	border-color:var(--clr-btn-border);
}
.btn:hover,
.btn:focus,
.btn:active {
	color:var(--clr-btn-hover-font);
	background-color:var(--clr-btn-hover-bg);
	border-color:var(--clr-btn-hover-border);
}

@keyframes linear-lens-flare {
	from {
		transform:translateX(-100%);
	}
	to {
		transform:translateX(100%);
	}
}
.is-loading {
	position:relative;
	overflow:hidden;
	pointer-events:none;
}
.is-loading::after {
	content:' ';
	position:absolute;
	z-index:1;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:linear-gradient(90deg,transparent,var(--clr-is-loading-flare,white) 50%,transparent);
	animation-name:linear-lens-flare;
	animation-iteration-count:infinite;
	animation-duration:1s;
}

.form-card {
	background-color:var(--clr-form-card-bg);
	padding:var(--form-card-padding);
}
.form-card .cell {
	padding:8px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

form input:not([type=checkbox]),
form select,
form textarea,
input:not([type=checkbox]) {
	width:100%;
	border-radius:0px;
	border:1px solid var(--clr-btn-bg);
	transition:all var(--glbl-transition-time) ease;
}
form input:not([type=checkbox]):not([type=submit]),
form select,
form textarea,
input:not([type=checkbox]):not([type=submit]) {
	font-size:var(--glbl-font-size-input);
	font-family:inherit;
}
form select {
	min-height:32px;
	padding:6px;
}
form select > option {
	min-height:32px;
	padding:6px;
}
form input:not([type=checkbox]),
form textarea,
input:not([type=checkbox]) {
	padding:calc(var(--glbl-padding,24px) / 4);
}
form input:not([type=checkbox]):hover,
form input:not([type=checkbox]):focus,
form input:not([type=checkbox]):active,
form select:hover,
form select:focus,
form select:active,
form textarea:hover
form textarea:focus
form textarea:active,
input:not([type=checkbox]):hover,
input:not([type=checkbox]):focus,
input:not([type=checkbox]):active {
	border:1px solid var(--clr-toggle-label-switch-unchecked);
}
form input[type=submit] {
	padding:var(--btn-padding);
	border-radius:var(--btn-border-radius);
	border-width:1px;
	border-style:solid;
	transition:all var(--glbl-transition-time) ease;
	text-decoration:none;
	width:auto;
	
	color:var(--clr-btn-font);
	background-color:var(--clr-btn-bg);
	border-color:var(--clr-btn-border);
}
form input[type=submit]:hover,
form input[type=submit]:focus,
form input[type=submit]:active {
	color:var(--clr-btn-hover-font);
	background-color:var(--clr-btn-hover-bg);
	border-color:var(--clr-btn-hover-border);
}

form .toggle-slider {
	min-height:32px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

.banner {
	background-color:var(--clr-banner-bg);
	color:var(--clr-banner-font);
	text-align:center;
	padding-top:calc(var(--glbl-padding) / 4);
	padding-bottom:calc(var(--glbl-padding) / 4);
	font-weight:var(--glbl-font-bold);
}
.banner p {
	margin-top:0px;
	margin-bottom:0px;
}

.user-attention {
	animation:pulse var(--glbl-transition-time) ease;
	animation-iteration-count:2;
}

/*
NOTE: .notify-stack cannot have overflow-y:auto;overflow-x:visible;
so we need this container around it :/
*/
.notify-stack-cont {
	width:100%;
	position:fixed;
	margin-top:var(--hdr-height);
	left:50%;
	transform:translateX(-50%);
	height:calc(100% - var(--hdr-height));
	overflow-y:auto;
	/*
	this container is only for overflow uses
	so it shouldn't get any pointer events or show any scrollbars
	NOTE: this means the notify-stack MUST have pointer-events:auto set
	otherwise no pointer events will reach the notifications!
	*/
	pointer-events:none;
	scrollbar-width:none;
}
.banner:not(:empty):not(.hidden) ~ .notify-stack-cont {
	height:calc(100% - (var(--hdr-height) * 2));
}
.bottombar .notify-stack-cont {
	bottom:var(--hdr-height);
	margin-top:0px;
}
.bottombar .banner:not(:empty):not(.hidden) ~ .notify-stack-cont {
	bottom:calc(var(--hdr-height) * 2);
}
.notify-stack {
	position:relative;
	height:auto;
	pointer-events:auto;
	width:var(--glbl-max-width); /* mobile */
	padding: var(--glbl-padding) calc(var(--glbl-padding) * 2);
	left:50%;
	transform:translateX(-50%);
}
.notify-stack:empty {
	display:none;
}
.notify-stack::before {
	content:' ';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	filter:blur(3px);
	background-color:var(--clr-notify-stack-bg);
	background:radial-gradient(#ffffff,rgba(255,255,255,0.5) 90%,transparent 100%);
	z-index:-1;
}
.notification {
	padding:var(--glbl-padding) 0px var(--glbl-padding) var(--glbl-padding);
/*	padding:calc(var(--glbl-padding) / 2) 0px calc(var(--glbl-padding) / 2) calc(var(--glbl-padding) / 2); */
	box-shadow:0rem 0.5rem 0.5rem var(--clr-popout-outer-shadow);
	border-radius: var(--glbl-hover-title-border-radius);
	background-color:var(--clr-form-card-bg);
	display:flex;
	flex-direction:row;
	align-items:stretch;
	justify-content:space-between;
	width:100%;
	transition:all var(--glbl-transition-time) ease;
	position:relative;
	cursor:pointer;
	opacity:0.9; /* mobile */
	/*
	NOTE: this touch-action setting /should/ make draggable elements work correctly on mobile devices
	per https://github.com/taye/interact.js/issues/564
	however due to limitations of my testing environment I can't verify that at this time
	but I don't have any further action to take even if it doesn't work
	since we're already showing the close and setting buttons and have click-cancels-timeout behaviour
	I'm considering this "done" regardless of whether touch-action works
	until/unless someone lets me know a better and more widely supported solution
	*/
	touch-action:none;
}
.notification:hover,
.notification:focus,
.notification:active {
	opacity:1; /* mobile */
}
.notification.fade-in {
	animation:notification-fade-in 0.5s;
	animation-iteration-count:1;
}
.notification.fade-out {
	opacity:0;
	pointer-events:none;
}
.notification.fade-out.fade-out-left {
	transform:translateX(-150%);
}
.notification.fade-out.fade-out-right {
	transform:translateX(150%);
}
.notification:not(:last-child) {
	margin-bottom:var(--glbl-padding);
}
.notification.success {
	color:var(--clr-notification-success-font);
	background-color:var(--clr-notification-success-bg);
}
.notification.error {
	color:var(--clr-notification-error-font);
	background-color:var(--clr-notification-error-bg);
}
.notification.warning {
	color:var(--clr-notification-warning-font);
	background-color:var(--clr-notification-warning-bg);
}
.notification.info {
	color:var(--clr-notification-info-font);
	background-color:var(--clr-notification-info-bg);
}
.notification.notify-settings {
	cursor:auto;
	background-color:var(--clr-notification-settings-bg,#b0d4dc);
	border:1px solid transparent;
}
/*
TODO: generalize this progress-bar styling to be potentially used for other progress bars
I think some changes would need to be made and there would need to still be some notification-specific styling
*/
.notification .progress-bar {
	position:absolute;
	height:calc(0.5rem + var(--progress-bar-height));
	width:100%;
	bottom:calc(0.5rem - var(--progress-bar-height));
	left:50%;
	transform:translateX(-50%);
	border-radius:0px 0px var(--glbl-hover-title-border-radius) var(--glbl-hover-title-border-radius);
	z-index:-1;
	background-color:var(--clr-form-card-bg);
}
.notification.success .progress-bar {
/*	color:var(--clr-notification-success-font); */
	background-color:var(--clr-notification-success-bg);
}
.notification.error .progress-bar {
/*	color:var(--clr-notification-error-font); */
	background-color:var(--clr-notification-error-bg);
}
.notification.warning .progress-bar {
/*	color:var(--clr-notification-warning-font); */
	background-color:var(--clr-notification-warning-bg);
}
.notification.info .progress-bar {
/*	color:var(--clr-notification-info-font); */
	background-color:var(--clr-notification-info-bg);
}
.notify-content {
	width:100%;
	margin:calc(0px - var(--glbl-padding)) 0px calc(0px - var(--glbl-padding)) calc(0px - var(--glbl-padding));
/*	margin:calc(0px - (var(--glbl-padding) / 2)) 0px calc(0px - (var(--glbl-padding) / 2)) calc(0px - (var(--glbl-padding) / 2)); */
	padding:var(--glbl-padding);
/*	padding:calc(var(--glbl-padding) / 2); */
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
}
.notify-settings-content {
	width:100%;
}
.notify-action-btns {
	min-height:100%;
	font-size:1.5rem;
	font-weight:bold;
	margin:calc(0px - var(--glbl-padding)) 0px;
/*	margin:calc(0px - (var(--glbl-padding) / 2)) 0px; */
	border-radius:0px var(--glbl-hover-title-border-radius) var(--glbl-hover-title-border-radius) 0px;
	border:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	transition:all var(--glbl-transition-time) ease;
	color:var(--clr-close-btn-font);
	/*
	NOTE: on desktop close button is HIDDEN until user hovers over notification
	however on mobile because the html draggable attribute is not consistently supported
	we need the close action constantly visible
	*/
	width:32px;
	overflow:visible;
	padding:0px;
	opacity:1;

}
.notify-action-btns > * {
	border:none;
	/* TODO: generalize height setting so it works correctly regardless of the number of items within the container */
/*	height:100%; */
	height:50%; /* (100% / <number of elements>) */
	width:100%;
	padding:calc(var(--glbl-padding) / 4);
	font-size:1.5rem;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all var(--glbl-transition-time) ease;
	cursor:pointer;
}
.notify-action-btns > *:hover,
.notify-action-btns > *:focus,
.notify-action-btns > *:active {
	box-shadow:0rem 0.5rem 0.5rem var(--clr-popout-outer-shadow);
	z-index:1;
}
.notification.notify-settings .notify-action-btns {
	box-shadow:none;
}
.notify-action-btns > *:first-child {
	border-top-right-radius:var(--glbl-hover-title-border-radius);
}
.notify-action-btns > *:last-child:not(:first-child) {
	border-bottom-right-radius:var(--glbl-hover-title-border-radius);
}
.notify-icon {
	height:16px;
	width:16px;
}
.notify-close-btn {
	background-color:var(--clr-close-btn-bg);
}
.notify-close-btn:hover,
.notify-close-btn:focus,
.notify-close-btn:active {
	background-color:var(--clr-close-btn-hover-bg);
}
.notification.notify-settings .notify-action-btns {
	/*
	account for the 1px transparent border that's present on the page notification settings
	which is necessary for the user-attention functionality to look as intended
	*/
	position:relative;
	top:-1px;
	right:-1px;
	justify-content:flex-start;
}
.notification.notify-settings .notify-close-btn  {
	height:auto;
}
.notification-title,
.notification-message {
	margin-top:0px;
	margin-bottom:0px;
}
.notification-title {
	font-size:1.1rem;
}
.notification.success .notification-title,
.notification.success .notification-message {
	color:var(--clr-notification-success-font);
}
.notification.error .notification-title,
.notification.error .notification-message {
	color:var(--clr-notification-error-font);
}
.notification.warning .notification-title,
.notification.warning .notification-message {
	color:var(--clr-notification-warning-font);
}
.notification.info .notification-title,
.notification.info .notification-message {
	color:var(--clr-notification-info-font);
}

.notify-enable-list {
	padding-top:calc(var(--glbl-padding) / 2);
}
.notify-enable-list > .toggle-slider {
	width:100%;
	height:auto;
	display:flex;
	align-items:stretch;
	justify-content:flex-start;
}
.notify-enable-list > .toggle-slider:not(:last-child) {
	margin-bottom:calc(var(--glbl-padding) / 4);
}
.notify-timeout-settings {
	margin-top:calc(var(--glbl-padding) / 2);
}
.timeout-input-cont {
	display:flex;
	align-items:stretch;
	justify-content:space-between;
}
.timeout-input-cont:not(:last-child) {
	margin-bottom:calc(var(--glbl-padding) / 4);
}
.clear-input-field {
	background-color:var(--clr-close-btn-bg);
	transition:all var(--glbl-transition-time,0.5s) ease;
	border:none;
	border-radius:0px var(--glbl-hover-title-border-radius) var(--glbl-hover-title-border-radius) 0px;
}
.clear-input-field:hover,
.clear-input-field:focus
.clear-input-field:active {
	background-color:var(--clr-close-btn-hover-bg);
}

/* ---------------------------------------------------------------------------
END global component styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN animation definitions
----------------------------------------------------------------------------*/

@keyframes notification-fade-in {
	0% {
		transform:translateY(-150%);
		opacity:0;
		pointer-events:none;
	}
	100% {
		transform:none;
		opacity:0.9; /* mobile */
		pointer-events:all;
	}
}

@keyframes pulse {
	0% {
		box-shadow:0rem 0.5rem 0.5rem var(--clr-popout-outer-shadow);
		border:1px solid transparent;
	}
	100% {
		box-shadow:0rem 0.5rem 0.5rem var(--clr-user-attention-shadow-bg);
		border:1px solid var(--clr-user-attention-shadow-bg);
	}
}

@keyframes linear-shrink {
	0% {
		width:100%;
	}
	100% {
		width:0px;
	}
}


/* ---------------------------------------------------------------------------
END animation definitions
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN medium and large display adjustments (mobile is default)
----------------------------------------------------------------------------*/
@media all and (min-width:768px) { /* $screen-size-medium */

	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/

	ul.horizontal-list > li.hidden.shown-on-medium, ol.horizontal-list > li.hidden.shown-on-medium {
		display:inline-block;
	}
	ul.horizontal-list > li.hidden-on-medium, ol.horizontal-list > li.hidden-on-medium {
		display:none;
	}

	.dropdown-menu-cont {
		width:15rem;
	}
	.dropdown-toggle-label, .topbar-link, .bottombar-link {
		padding:0rem var(--glbl-padding);
	}
	.notify-stack {
		width:calc(var(--glbl-max-width) / 2);
	}
	.notification {
		opacity:0.75;
	}
	.notification:hover,
	.notification:focus,
	.notification:active {
		opacity:0.95;
	}
	.notify-action-btns {
		/*
		NOTE: close button is HIDDEN until user hovers over notification
		*/
		opacity:0;
	}
	.notification:hover .notify-action-btns,
	.notification:focus .notify-action-btns,
	.notification:active .notify-action-btns {
		opacity:1;
	}
	
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/

	/* ---------------------------------------------------------------------------
	BEGIN animation definitions
	----------------------------------------------------------------------------*/
	
	@keyframes notification-fade-in {
		0% {
			transform:translateY(-150%);
			opacity:0;
			pointer-events:none;
		}
		100% {
			transform:none;
			opacity:0.75;
			pointer-events:all;
		}
	}
	
	/* ---------------------------------------------------------------------------
	END animation definitions
	----------------------------------------------------------------------------*/

}
/*
this file contains site-specific styles,
that are not part of the reusable css found in libraries
*/

/* ---------------------------------------------------------------------------
BEGIN settings
----------------------------------------------------------------------------*/

body {
	--hdg-font-family:MavenPro, sans-serif;
	--body-font-family:Arial, sans-serif;
	--btn-font-family:MavenPro, sans-serif;
	
	--glbl-font-size-flyout-trigger: 2.5rem;
	--glbl-section-padding: 3rem;
	
	--hdr-height-blended: 6rem;
	--hdr-height: 5rem;
	
	--btn-single-line-form-padding: 0.25rem;
	
	--nav-flyout-width: min(70vw,460px);
	
	--single-line-form-padding:0.5rem;
	--single-line-form-btn-width:10rem;
}

/* ---------------------------------------------------------------------------
END settings
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN global component styles
----------------------------------------------------------------------------*/

/* set fonts */
h1, h2, h3, h4, h5, h6 {
	font-family:var(--hdg-font-family);
	font-weight:700;
	margin:0rem auto;
}
h1, .show-as-h1 {
	font-size:3rem;
}
h2, .show-as-h2 {
	font-size:2.5rem;
}
h3, .show-as-h3 {
	font-size:2rem;
}
h4, .show-as-h4 {
	font-size:1.75rem;
}
h5, .show-as-h5 {
	font-size:1.5rem;
}
h6, .show-as-h6 {
	font-size:1.25rem;
}
body {
	font-family:var(--body-font-family);
	padding-bottom:0px;
}
input[type=text], input[type=submit], button, .btn {
	font-family:var(--btn-font-family);
	font-size:1rem;
	font-weight:700;
}
p {
	line-height:1.4;
}

/* allow non-anchor elements to mirror anchor styles */
.link {
	display:inline-block;
	transition:all 0.5s ease;
	color:var(--clr-link-font);
	transition:color var(--glbl-transition-time) ease;
	text-decoration:underline;
}
.link:hover, .link:focus, .link:active {
	color:var(--clr-link-font-hover);
}

a.inline-link,
.link.inline-link {
	display:inline;
}

/* images should fit in their containers by default */
img {
	width:100%;
	height:100%;
	object-fit:contain;
}

.is-disabled {
	opacity:0.5;
	pointer-events:none;
}

button.is-centered, .is-centered.btn {
	text-align:center;
}

button.alt-btn, .btn.alt-btn {
	background-color:var(--clr-btn-alt-bg);
	color:var(--clr-btn-alt-font);
	border-color:var(--clr-btn-alt-border);
}
button.alt-btn:hover,
button.alt-btn:focus,
button.alt-btn:active,
.btn.alt-btn:hover,
.btn.alt-btn:focus,
.btn.alt-btn:active {
	background-color:var(--clr-btn-alt-hover-bg);
	color:var(--clr-btn-alt-hover-font);
	border-color:var(--clr-btn-alt-hover-border);
}

button.negative-btn,
.btn.negative-btn {
	color:var(--clr-negative-btn-font);
	background-color:var(--clr-negative-btn-bg);
}
button.negative-btn:hover,
button.negative-btn:focus,
button.negative-btn:active,
.btn.negative-btn:hover,
.btn.negative-btn:focus,
.btn.negative-btn:active {
	color:var(--clr-negative-btn-hover-font);
	background-color:var(--clr-negative-btn-hover-bg);
}

button.cta-btn,
.btn.cta-btn {
	position:relative;
	font-family:var(--hdg-font-family);
	font-weight:600;
	text-align:center;
	
	box-shadow:-0.25rem 0.25rem 0.25rem var(--clr-cta-btn-shadow);
	color:var(--clr-cta-btn-font);
	background:var(--clr-cta-btn-bg);
	border:none;
	
	/* mobile only */
	width:100%;
}

.cta-btn .cta-btn-text {
	position:relative;
	z-index:0;
}

button.cta-btn::before,
.btn.cta-btn::before {
	content:' ';
	opacity:0;
	transition:all var(--glbl-transition-time,0.5s) ease;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	pointer-events:none;
	background:var(--clr-cta-btn-hover-bg);
	border-radius:var(--btn-border-radius);
}

button.cta-btn:hover,
button.cta-btn:focus,
button.cta-btn:active,
.btn.cta-btn:hover,
.btn.cta-btn:focus,
.btn.cta-btn:active {
	color:var(--clr-cta-btn-hover-font);
}

button.cta-btn:hover::before,
button.cta-btn:focus::before,
button.cta-btn:active::before,
.btn.cta-btn:hover::before,
.btn.cta-btn:focus::before,
.btn.cta-btn:active::before {
	opacity:1;
}

.button-list {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:var(--glbl-padding);
	flex-direction:column;
}
.button-list .btn {
	width:auto;
	text-align:center;
}

.toggle-slider > input[type=checkbox] {
	/*
	NOTE: for accessibility reasons we need this to be focus-able
	so we can't use display:none and must instead fake it
	*/
/*	display:none; */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-1;
}

.toggle-slider > input[type=checkbox] ~ .toggle-label-unchecked,
.toggle-slider > input[type=checkbox] ~ .toggle-label-checked {
	margin-left:8px;
}
.toggle-slider > input[type=checkbox] ~ .toggle-label-unchecked {
	display:inline-block;
}
.toggle-slider > input[type=checkbox] ~ .toggle-label-checked {
	display:none;
}
.toggle-slider > input[type=checkbox]:checked ~ .toggle-label-unchecked {
	display:none;
}
.toggle-slider > input[type=checkbox]:checked ~ .toggle-label-checked {
	display:inline-block;
}

/* form adjustments */
form button[type=submit] {
	padding:var(--btn-padding);
	border-radius:var(--btn-border-radius);
	border-width:1px;
	border-style:solid;
	transition:all var(--glbl-transition-time) ease;
	text-decoration:none;
	width:auto;
	
	color:var(--clr-btn-font);
	background-color:var(--clr-btn-bg);
	border-color:var(--clr-btn-border);
}
form button[type=submit]:hover,
form button[type=submit]:focus,
form button[type=submit]:active {
	color:var(--clr-btn-hover-font);
	background-color:var(--clr-btn-hover-bg);
	border-color:var(--clr-btn-hover-border);
}
form input:not([type=submit]) {
	border-radius:var(--btn-border-radius);
}
form .single-line-text-form {
	width:100%;
	height:100%;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}
form .single-line-text-form > *:not(:last-child):not(input[type=text]) {
	margin-right:calc(var(--glbl-padding) / 2);
}
form .single-line-text-form > input[type=text] {
	padding:calc(3 * var(--btn-single-line-form-padding));
	padding-right:5rem;
}

form .single-line-text-form > input[type=submit]:last-child,
form .single-line-text-form > button[type=submit]:last-child {
	border:none;
	padding:var(--btn-single-line-form-padding,0.25rem);
	padding-left:calc(var(--btn-single-line-form-padding,0.25rem) * 3.5);
	padding-right:calc(var(--btn-single-line-form-padding,0.25rem) * 3.5);
	height:calc(100% - 0.5rem);
	
	position:absolute;
	top:50%;
	right:var(--btn-single-line-form-padding,0.25rem);
	transform:translateY(-50%);
}
/* reserve space for hcaptcha on load to avoid post-load content shifts */
form .h-captcha {
	min-height:80px;
}

.grid.form-field-grid .cell {
	padding:0rem 0rem 1rem 0rem;
}
.grid.form-field-grid input[type=submit],
.grid.form-field-grid button[type=submit] {
	border: 1px solid var(--clr-toggle-label-switch-unchecked);
}

/* header and navbar styling, mobile-first */
.topbar {
	width:100%;
}
.grid > .cell.hdr-icon-cell {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	height:100%;
	height:var(--hdr-height);
}
.hdr-icon {
	height:calc(var(--hdr-height) - 1rem);
	width:auto;
}
.hdr-icon-link {
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

.grid > .cell.hdr-flyout-trigger-cell {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	color:var(--clr-link-font,white);
	height:var(--hdr-height);
}
.hdr-trigger {
	font-size:var(--glbl-font-size-flyout-trigger);
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all 0.5s ease;
	cursor:pointer;
}
.hdr-navbar:has(input[type=checkbox].hdr-menu-toggle:focus) .hdr-query-trigger,
.grid > .cell.hdr-flyout-trigger-cell .hdr-query-trigger:hover,
.grid > .cell.hdr-flyout-trigger-cell .hdr-query-trigger:focus,
.grid > .cell.hdr-flyout-trigger-cell .hdr-query-trigger:active {
	color:var(--clr-btn-hover-bg);
}
.hdr-trigger:not(.hdr-flyout-trigger):not(:last-child){
	margin-right:calc(var(--glbl-padding) / 1.5);
}


.hdr-trigger.hdr-query-trigger > label {
	cursor:pointer;
}
.hdr-query-trigger {
	line-height:0.64;
}

.hdr-searchbar-cont {
	width:100%;
}
.hdr-searchbar-cont > .toggle-slider {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
}

.hdr-searchbar-cont .toggle-slider > input[type=checkbox] ~ .toggle-label-checked {
	transition:all 1s ease;
	display:inline-block;
	opacity:0;
	overflow:hidden;
	width:0px;
}
.hdr-searchbar-cont .toggle-slider > input[type=checkbox]:checked ~ .toggle-label-checked,
.hdr-searchbar-cont .toggle-slider > input[type=checkbox] ~ .toggle-label-checked:has(input:focus) {
	display:inline-block;
	opacity:1;
	overflow:visible;
	width:100%;
}
.hdr-searchbar-cont .toggle-slider > input[type=checkbox] ~ .toggle-label-checked input[type=submit],
.hdr-searchbar-cont .toggle-slider > input[type=checkbox] ~ .toggle-label-checked button {
	max-width:0px;
	padding-left:0px;
	padding-right:0px;
	transition:all 1s ease;
}
.hdr-searchbar-cont .toggle-slider > input[type=checkbox] ~ .toggle-label-checked input[type=text] {
	position:relative;
}
.hdr-searchbar-cont .toggle-slider > input[type=checkbox]:checked ~ .toggle-label-checked input[type=submit],
.hdr-searchbar-cont .toggle-slider > input[type=checkbox]:checked ~ .toggle-label-checked button,
.hdr-searchbar-cont .toggle-slider > input[type=checkbox] ~ .toggle-label-checked:has(input:focus) input[type=submit],
.hdr-searchbar-cont .toggle-slider > input[type=checkbox] ~ .toggle-label-checked:has(input:focus) button {
	max-width:500px;
	padding:var(--btn-single-line-form-padding,0.25rem);
	padding-left:calc(var(--btn-single-line-form-padding,0.25rem) * 2);
	padding-right:calc(var(--btn-single-line-form-padding,0.25rem) * 2);
}

.hidden-on-medium .hdr-searchbar-cont {
	transition:all 0.5s ease;
	opacity:0;
	height:0px;
}
.hidden-on-medium .hdr-searchbar-cont:has(.toggle-slider > input[type=checkbox]:checked) {
	height:var(--hdr-height);
	opacity:1;
}

header.topbar:not(.blended) {
	backdrop-filter:blur(4px);
}

header.topbar.blended .hidden-on-medium .hdr-searchbar-cont:has(.toggle-slider > input[type=checkbox]:checked) {
	height:var(--hdr-height-blended);
}

/* adjustments for when the topbar is blended into the page (scrolled to top) */
header.topbar.blended {
	background-color:transparent;
	box-shadow:none;
}
header.topbar .fixed-bar-height {
	height:auto; /* mobile only, needed for search reveal/hide effect */
}
header.topbar.blended .grid > .cell.hdr-icon-cell {
	height:var(--hdr-height-blended);
}
header.topbar.blended .hdr-icon {
	height:calc(var(--hdr-height-blended) - 1.5rem);
}
header.topbar.blended .grid > .cell.hdr-flyout-trigger-cell {
	height:var(--hdr-height-blended);
}

nav .flyout-content ul.menu,
nav .flyout-content ul.menu ul.sub-menu {
	width:100%;
	gap:0px;
	list-style-type:none;
}
nav .flyout-content ul.menu {
	padding-left:0px;
}
nav .flyout-content ul.menu > li,
nav .flyout-content ul.menu ul.sub-menu > li {
	width:100%;
}
nav .flyout-content ul.menu > li > a,
nav .flyout-content ul.menu ul.sub-menu > li > a,
nav .flyout-content ul.menu > li > .info-item,
nav .flyout-content ul.menu ul.sub-menu > li > .info-item {
	width:100%;
	padding:var(--glbl-padding);
/*	text-align:right; */
	transition:all var(--glbl-transition-time,0.5s) ease;
	text-decoration:none;
}
nav .flyout-content ul.menu > li > a:hover,
nav .flyout-content ul.menu > li > a:focus,
nav .flyout-content ul.menu > li > a:active,
nav .flyout-content ul.menu ul.sub-menu > li > a:hover,
nav .flyout-content ul.menu ul.sub-menu > li > a:focus,
nav .flyout-content ul.menu ul.sub-menu > li > a:active {
	color:var(--clr-btn-hover-font);
	background-color:var(--clr-btn-hover-bg);
}
nav .nav-flyout-toggle-cont input[type=checkbox].nav-flyout-toggle {
	/*
	NOTE: for accessibility reasons we need this to be focus-able
	so we can't use display:none and must instead fake it
	*/
/*	display:none; */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-1;
}
nav .nav-flyout-toggle-cont {
	/*
	NOTE: this is fixed relative to the whole page
	but as it sits within the navbar, which is position:fixed,
	we need position:absolute here for it to work as expected
	*/
	position:absolute;
	top:0px;
	height:100vh;
/*
	top:var(--hdr-height);
	height:calc(100vh - var(--hdr-height));
*/
	right:0px;
	width:var(--nav-flyout-width);
	transform:translateX(100%);
	background-color:var(--clr-body-bg);
	transition:all var(--glbl-transition-time) ease;
	box-shadow:0rem 0.5rem 0.5rem transparent;
	
	/* in case of too many menu items being configured, make the menu still be usable */
	overflow:auto;
}
.topbar:not(.blended) nav .nav-flyout-toggle-cont {
	background-color:var(--clr-hdr-bg);
}
nav .nav-flyout-toggle-cont:has(input[type=checkbox].nav-flyout-toggle:checked),
nav .nav-flyout-toggle-cont:has(*:not(.nav-flyout-toggle):not(.nav-flyout-toggle-icon):focus) {
	right:0px;
	transform:none;
}
body:has(input[type=checkbox].nav-flyout-toggle:checked)::after {
	content:' ';
	width:100%;
	height:100%;
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1;
}
body:has(input[type=checkbox].nav-flyout-toggle:checked) nav .nav-flyout-toggle-cont {
	box-shadow:0rem 0.5rem 0.5rem var(--clr-hdr-shadow);
}
.flyout-content {
	position:relative;
}
.flyout-content > .flyout-trigger-label {
	position:absolute;
	top:0px;
	left:0px;
	font-size:var(--glbl-font-size-flyout-trigger);
	cursor:pointer;
	height:var(--hdr-height);
	width:var(--hdr-height);
	display:flex;
	align-items:center;
	justify-content:center;
}
.flyout-content .menu-nav-cont {
	padding-top:var(--hdr-height);
}
header.topbar.blended .flyout-content .menu-nav-cont {
	padding-top:var(--hdr-height-blended);
}
.flyout-content .light-dark-toggle-parent-cont {
	position:relative;
}
.flyout-content .light-dark-toggle-cont {
	position:absolute;
	top:var(--glbl-padding);
	right:var(--glbl-padding);
}

.hdr-navbar .flyout-trigger-label {
	transition:all var(--glbl-transition-time) ease;
}

.hdr-navbar:has(input[type=checkbox].nav-flyout-toggle:focus) .flyout-trigger-label,
.flyout-trigger-label:hover,
.flyout-trigger-label:focus,
.flyout-trigger-label:active {
	color:var(--clr-link-font-hover);
/*	transform:rotate(-90deg); */
}

.hdr-flyout-trigger-cell .flyout-trigger-label {
	display:flex;
	align-items:center;
	justify-content:center;
}

.feedback-toggle-menuitem {
	padding:var(--glbl-padding);
}
.feedback-toggle-menuitem > label.btn {
	display:inline-block;
	width:100%;
	text-align:center;
}

main {
	padding-top:var(--glbl-padding);
}
main:has(section.section-user-dashboard) {
	overflow-x:hidden;
}
section {
	padding-top:var(--glbl-section-padding);
	padding-bottom:var(--glbl-section-padding);
}
footer {
	padding-top:var(--glbl-section-padding);
	padding-bottom:var(--glbl-section-padding);
}

/*
this makes hash links to a section work as expected
NOTE: we don't need to care about hdr-height-blended here
as once scrolled the header should not be blended
*/
.is-jump-dest {
	padding-top:var(--hdr-height);
	margin-top:calc(0px - var(--hdr-height));
	background-color:transparent;
	position:static; /* avoid overlap issues */
	pointer-events:none; /* avoid overlap issues */
}
.is-jump-dest > *:not(.is-jump-dest):not(.is-loading) {
	pointer-events:all;
}

.tooltip-cont {
	position:relative;
}
.tooltip {
	position:absolute;
	top:-6px;
	left:0px;
	padding:calc(var(--glbl-padding) / 2);
	transform:translateY(-100%) translateX(-50%);;
	border-radius:var(--btn-border-radius);
	transition:all 0.5s ease;
	text-align:center;
	min-width:14rem;
	background-color:var(--clr-tooltip-bg);
	color:var(--clr-tooltip-font);
	border:1px solid var(--clr-tooltip-border);
}
.tooltip::before,
.tooltip::after {
	content:' ';
	position:absolute;
	bottom:-6px;
	left:50%;
	border-top:5px solid var(--clr-tooltip-border);
	border-left:5px solid transparent;
	border-right:5px solid transparent;
}
.tooltip::after {
	bottom:-5px;
	border-top:5px solid var(--clr-tooltip-bg);
}

.grid-section-site-status {
	position:relative;
	padding:var(--glbl-padding);
	min-height:var(--site-screenshot-height,100vh);
}

.grid > .cell.cta-overlay-cell {
	margin-top:var(--glbl-padding);
	display:flex;
	align-items:flex-start;
	justify-content:center;
}

footer {
	text-align:center;
}

.third-party-logo {
	max-width:64px;
	max-height:32px;
}

body.is-in-iframe,
body.is-in-iframe main {
	padding:0rem;
}
body.is-in-iframe header,
body.is-in-iframe footer {
	display:none;
}

.error-detail.standalone:not(:empty)::before {
	content:'Error: ';
}
.success-detail.standalone:not(:empty)::before {
	content:'Success: ';
}
.error-detail.standalone:not(:empty)::before,
.success-detail.standalone:not(:empty)::before {
	font-weight:600;
}
.error-detail.standalone:not(:empty) {
	background-color:var(--clr-status-error-bg);
}
.success-detail.standalone:not(:empty) {
	background-color:var(--clr-status-success-bg);
}
.error-detail.standalone:not(:empty),
.success-detail.standalone:not(:empty) {
	border-radius:var(--btn-border-radius);
	padding:calc(var(--glbl-padding) / 4);
}

.section-user-settings h2,
.section-user-settings h3,
.section-user-settings h4,
.section-user-settings h5,
.section-user-settings h6 {
	margin:0px;
}

/* feedback widget opener label */
body > .feedback-widget {
	right:unset;
	bottom:unset;
}
.feedback-widget .toggle-opener input[type="checkbox"]:not(:checked) ~ .toggle-label-unchecked.btn[for="is-feedback-widget-open"] {
	display:none;
}
.feedback-widget .btn.toggle-close-btn {
	font-family:'FontAwesome';
}

.btn-list {
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	gap:1rem;
}

p.tagline {
	font-weight:bold;
	font-family:var(--hdg-font-family);
	margin-top:0rem;
}

.before-after-reveal-images {
	position:relative;
	min-height:100vh;
	cursor:pointer;
}
.before-after-reveal-images .before-reveal-image,
.before-after-reveal-images .after-reveal-image {
	position:absolute;
	top:0px;
	bottom:0px;
	height:100%;
	width:100%;
	overflow:hidden;
}
.before-after-reveal-images .before-reveal-image {
	left:0px;
}
.before-after-reveal-images .after-reveal-image {
	right:0px;
	border-left:2px solid var(--clr-body-font);
	width:40%; /* initial value at page load; javascript events will update this! */
}
.before-after-reveal-images .before-after-slider-grab-point {
	position:absolute;
	top:50%;
	left:60%; /* initial value at page load; javascript events will update this! */
	transform:translateY(-50%) translateX(-50%);
	background-color:var(--clr-body-bg);
	color:var(--clr-body-font);
	border-radius:50%;
	z-index:1;
	width:3rem;
	height:3rem;
	box-shadow:0rem 0.5rem 0.5rem var(--clr-dropdown-shadow);
	/* TODO: center the icons here in a less hacky way */
	font-size:1.5rem;
	line-height:1.95;
}
.before-after-reveal-images .before-after-slider-grab-point::after {
	content:"\e138 \e13a"; /* left and right carets */
	font-family:"Phosphor-Fill";
}

.before-after-reveal-images .before-reveal-image > img,
.before-after-reveal-images .after-reveal-image > img {
	position:absolute;
	top:0px;
	object-fit:cover;
	object-position:center top;
/*	width:auto; */
	width:calc(min(var(--glbl-max-width),100vw) - (2 * var(--glbl-padding)));
}
.before-after-reveal-images .before-reveal-image > img {
	left:0px;
}
.before-after-reveal-images .after-reveal-image > img {
	right:0px;
}

.before-after-reveal-images .before-reveal-image::after,
.before-after-reveal-images .after-reveal-image::after {
	position:absolute;
	display:block;
	top:var(--glbl-padding);
	font-family:var(--hdg-font-family);
	font-weight:bold;
	border:1px solid var(--clr-body-font);
	background:var(--clr-body-bg);
	padding:var(--btn-padding);
	border-radius:var(--btn-border-radius);
	box-shadow:0rem 0.5rem 0.5rem var(--clr-dropdown-shadow);
}
.before-after-reveal-images .before-reveal-image::after {
	content:'Before';
	left:var(--glbl-padding);
}
.before-after-reveal-images .after-reveal-image::after {
	content:'After';
	right:var(--glbl-padding);
}

/* ---------------------------------------------------------------------------
END global component styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN section styles
----------------------------------------------------------------------------*/

main > section:nth-child(2n),
main > div.section-cont:nth-child(2n) > section {
	background-color:var(--clr-alternate-section-bg);
}

section.featured-image.has-left-bg,
section.featured-image.has-right-bg {
	position:relative;
}

section.featured-image.has-left-bg > img.section-bg-image,
section.featured-image.has-right-bg > img.section-bg-image {
	position:absolute;
	top:0px;
	bottom:0px;
	width:50%;
	height:100%;
	object-fit:cover;
	z-index:-1;
}
section.featured-image.has-left-bg > img.section-bg-image {
	left:0px;
}
section.featured-image.has-right-bg > img.section-bg-image {
	right:0px;
}

section.featured-image h1 {
	margin-top:0rem;
	margin-bottom:0rem;
}

section.cta-section {
	text-align:center;
	position:relative;
	padding-top:calc(var(--glbl-section-padding,3rem) * 2);
	padding-bottom:calc(var(--glbl-section-padding,3rem) * 2);
	background-color:var(--clr-alternate-section-bg);
}
section.cta-section h2 {
	margin-top:0px;
}
section.cta-section img.section-bg {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:-1;
}

/* newsletter signup form, if present, is also an instance of a cta section */
section.newsletter-signup-section .email-entry-area {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	margin-top:var(--glbl-padding);
}
section.newsletter-signup-section .email-entry-area > input[type="text"],
section.newsletter-signup-section .email-entry-area > input[type="email"] {
	padding-right:calc(var(--single-line-form-btn-width) + (3 * var(--single-line-form-padding)));
	min-height:3rem;
	border-radius:var(--btn-border-radius);
}
section.newsletter-signup-section .email-entry-area > input[type="submit"],
section.newsletter-signup-section .email-entry-area > button[type="submit"] {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	height:calc(100% - var(--single-line-form-padding));
	right:calc(var(--single-line-form-padding) / 2);
	max-width:var(--single-line-form-btn-width);
	line-height:1;
}

/* faq section */
section.faq-section {
	background-color:var(--clr-section-faq-bg);
}
section.faq-section .intro-content {
	padding-bottom:var(--glbl-padding);
}
section.faq-section .faq-q {
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
section.faq-section .faq-q .faq-icon {
	font-size:1.5rem;
	margin-right:calc(var(--glbl-padding) / 2);
	display:inline-flex;
	align-items:center;
	justify-content:center;
}
section.faq-section .faq-cell .faq .faq-q {
	padding-bottom:var(--glbl-padding);
}
section.faq-section .faq-cell .faq .faq-a > p {
	margin-top:0rem;
}
section.faq-section .faq-cell .faq:not(:first-child) .faq-q {
	padding-top:var(--glbl-padding);
}
section.faq-section .faq-cell .faq:not(:last-child) {
	border-bottom:2px solid var(--clr-body-font);
}
section.faq-section .faq-cell .faq.faq-toggle-cont > input[type=checkbox]:checked ~ .faq-toggle .faq-q {
	padding-bottom:calc(var(--glbl-padding) / 2);
}

.faq-toggle-cont > input[type=checkbox] {
	/*
	NOTE: for accessibility reasons we need this to be focus-able
	so we can't use display:none and must instead fake it
	*/
/*	display:none; */
	opacity:0;
	height:0px;
	width:0px;
	position:absolute;
	z-index:-1;
}
.faq-toggle-cont > .faq-toggle .faq-q {
	position:relative;
	padding-right:2rem;
}
.faq-toggle-cont > .faq-toggle .faq-q::after {
	content:"\e3d4"; /* plus icon */
	font-family:"Phosphor-Fill";
	position:absolute;
	top:50%;
	right:0rem;
	transform:translateY(-50%);
	transition:all var(--glbl-transition-time) ease;
}
.faq-toggle-cont > .faq-content {
	overflow:hidden;
	height:0rem;
	/* TODO: find a way to animate this.  normal transitions don't work because overflow is a binary toggle and also height:auto doesn't tell the browser what resulting height to animate to */
}
.faq-toggle-cont > input[type=checkbox]:focus ~ .faq-toggle .faq-q::after,
.faq-toggle-cont > input[type=checkbox]:active ~ .faq-toggle .faq-q::after {
	color:var(--clr-section-faq-accordion-focus-font);
}
.faq-toggle-cont > input[type=checkbox]:checked ~ .faq-content {
	height:auto;
	overflow:auto;
}
.faq-toggle-cont > input[type=checkbox]:checked ~ .faq-toggle .faq-q::after {
	content:"\e32a"; /* minus icon */
}


footer {
	background-color:var(--clr-footer-bg);
	color:var(--clr-footer-font);
}
footer a, footer .link {
	color:var(--clr-footer-link-font);
}
footer a:hover,
footer a:focus,
footer a:active,
footer .link:hover,
footer .link:focus,
footer .link:active {
	color:var(--clr-footer-link-hover-font);
}

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
	color:var(--clr-footer-font);
}

/* ---------------------------------------------------------------------------
END section styles
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN animation definitions
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
END animation definitions
----------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------
BEGIN medium and large display adjustments (mobile is default)
----------------------------------------------------------------------------*/
@media all and (min-width:768px) { /* $screen-size-medium */
	
	/* ---------------------------------------------------------------------------
	BEGIN settings
	----------------------------------------------------------------------------*/
	body {
	}
	/* ---------------------------------------------------------------------------
	END settings
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/
	
	h1, .show-as-h1 {
		font-size:4rem;
	}
	h2, .show-as-h2 {
		font-size:3rem;
	}
	h3, .show-as-h3 {
		font-size:2.75rem;
	}
	h4, .show-as-h4 {
		font-size:2.25rem;
	}
	h5, .show-as-h5 {
		font-size:2rem;
	}
	h6, .show-as-h6 {
		font-size:1.75rem;
	}
	p.tagline {
		font-size:1.5rem;
	}
	
	button.cta-btn,
	.btn.cta-btn {
		width:auto;
	}
	
	.button-list {
		flex-direction:row;
		flex-wrap:wrap;
	}
	
	/* form adjustments (currently none) */
	
	/* header and navbar styling, mobile-first */
	.hdr-trigger:not(.hdr-flyout-trigger):not(:last-child){
		margin-right:var(--glbl-padding);
	}
	.hdr-searchbar-cont > .toggle-slider {
		justify-content:flex-end;
	}
	
	/* adjustments for when the topbar is blended into the page (scrolled to top) */
	header.topbar.blended {
		background-color:transparent;
		box-shadow:none;
	}
	header.topbar .fixed-bar-height {
		height:var(--hdr-height);
	}
	header.topbar.blended .fixed-bar-height {
		height:var(--hdr-height-blended);
	}
	
	.grid > .cell.cta-overlay-cell {
		margin-top:0px;
		justify-content:flex-end;
	}
	
	body > .feedback-widget {
		right:calc(min(50%,var(--feedback-widget-desktop-page-border)));
		bottom:0px;
	}
	/* feedback widget opener label */
	.feedback-widget .toggle-opener input[type="checkbox"]:not(:checked) ~ .toggle-label-unchecked.btn[for="is-feedback-widget-open"] {
		display:inline-block;
	}
	
	.btn-list {
		flex-direction:row;
	/*	justify-content:space-between; */
	}
	
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN section styles
	----------------------------------------------------------------------------*/
	
	section.featured-image > .grid-container > .grid > .cell {
		min-height:70vh;
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	
	section.featured-image.has-left-bg,
	section.featured-image.has-right-bg {
		min-height:70vh;
	}
	section.featured-image.has-left-bg::before ,
	section.featured-image.has-right-bg::before {
		content:' ';
		display:block;
		position:absolute;
		top:0px;
		height:100%;
		width:50%;
		background:linear-gradient(90deg, var(--clr-body-bg) 0%, transparent 10%, transparent 90%, var(--clr-body-bg) 100%);
		background-repeat:no-repeat;
	}
	section.featured-image.has-left-bg::before {
		left:0px;
	}
	section.featured-image.has-right-bg::before {
		right:0px;
	}
	
	/* faq section */
	section.faq-section .faq-intro-cell {
		position:sticky;
		top:calc(var(--hdr-height) + var(--glbl-padding));
	}
	section.faq-section .faq-q .faq-icon {
		background-color:var(--clr-faq-icon-bg);
		height:40px;
		width:40px;
		min-width:40px;
		border-radius:calc(var(--btn-border-radius) / 4);
		margin-right:var(--glbl-padding);
	}
	
	/* ---------------------------------------------------------------------------
	END section styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN animation definitions
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	END animation definitions
	----------------------------------------------------------------------------*/

}

@media all and (min-width:1024px) { /* $screen-size-large */
	/* ---------------------------------------------------------------------------
	BEGIN settings
	----------------------------------------------------------------------------*/
	/* ---------------------------------------------------------------------------
	END settings
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN global component styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	END global component styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN section styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	END section styles
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	BEGIN animation definitions
	----------------------------------------------------------------------------*/
	
	/* ---------------------------------------------------------------------------
	END animation definitions
	----------------------------------------------------------------------------*/

}
/* heading font */
@font-face {
	font-family:MavenPro;
	font-style:normal;
	font-display:swap; /* performance; render fallback font family while this font loads */
	src:url('https://searchazon.com/assets/fonts/MavenPro/MavenPro-VariableFont_wght.ttf');
}
body {
	/* TODO: change ALL of these colors to match the searchazon color scheme that we pre-defined in inkscape! */
	
	/* TODO: test this for AODA compliance */
	
	--clr-body-bg:#ffffff;
	--clr-body-font:#0c0e0e;
	--clr-link-font:var(--clr-body-font);
	--clr-link-font-hover:#205c99;
	--clr-hdg-font:var(--clr-body-font);
	--clr-dropdown-shadow:rgba(0,0,0,0.2);
	--clr-dropdown-bg:#ffd501;
	--clr-dropdown-toggle-bg:var(--clr-dropdown-bg);
	--clr-dropdown-toggle-hover-bg:#f3c413;
	--clr-dropdown-toggle-border:var(--clr-body-font);
	--clr-dropdown-link-bg:var(--clr-dropdown-toggle-bg);
	--clr-dropdown-link-hover-bg:var(--clr-dropdown-toggle-hover-bg);
	--clr-hdr-shadow:var(--clr-dropdown-shadow);
	--clr-hdr-bg:rgba(255,255,255,0.925);
	/* TODO: update clr-toggle-label-* colors  to match searchazon color scheme */
/*
	--clr-toggle-label-bg:rgba(0,0,0,0.25);
	--clr-toggle-label-switch-unchecked:rgba(16,16,190,0.5);
	--clr-toggle-label-switch-checked:rgba(16,16,190,1);
*/
	--clr-hover-title-bg:var(--clr-dropdown-toggle-bg);
	--clr-hover-title-border:var(--clr-dropdown-toggle-border);
	--clr-btn-font:var(--clr-body-font);
	--clr-btn-bg:var(--clr-dropdown-toggle-bg);
	--clr-btn-border:var(--clr-hdr-bg);
	--clr-btn-boxshadow:transparent;
	--clr-btn-hover-font:var(--clr-body-font);
	--clr-btn-hover-bg:var(--clr-dropdown-toggle-hover-bg);
	--clr-btn-hover-border:var(--clr-hdr-bg);
	--clr-btn-hover-boxshadow:var(--clr-hdr-shadow);
	--clr-btn-alt-font:var(--clr-body-font);
	--clr-btn-alt-bg:var(--clr-body-bg);
	--clr-btn-alt-border:var(--clr-body-font);
	--clr-btn-alt-hover-font:var(--clr-btn-hover-font);
	--clr-btn-alt-hover-bg:var(--clr-btn-hover-bg);
	--clr-btn-alt-hover-border:var(--clr-btn-hover-border);
	--clr-status-success-bg:rgba(0,128,0,0.8);
	--clr-status-error-bg:rgba(128,0,0,0.8);
	--clr-status-warning-bg:rgba(128,128,0,0.8);
	--clr-cta-btn-font:var(--clr-btn-font);
	--clr-cta-btn-bg:linear-gradient(10deg,#fcbc69,#ffd501);
	--clr-cta-btn-shadow:rgba(0,0,0,0.2);
	--clr-cta-btn-hover-font:var(--clr-btn-font);
	--clr-cta-btn-hover-bg:linear-gradient(10deg,#f4733b,#f3d513);
	--clr-negative-btn-font:var(--clr-body-font);
	--clr-negative-btn-bg:#c23b3a; /* red for X/delete buttons (separate from rest of color scheme) */
	--clr-negative-btn-hover-font:var(--clr-body-font);
	--clr-negative-btn-hover-bg:#b81413; /* hover red for X/delete buttons (separate from rest of color scheme) */
	--clr-tooltip-bg:var(--clr-btn-alt-bg);
	--clr-tooltip-font:var(--clr-btn-alt-font);
	--clr-tooltip-border:var(--clr-btn-alt-border);
	
/*	--clr-alternate-section-bg:#f0f2f2; */
	--clr-alternate-section-bg:rgba(240,242,242,0.97);
	
	--clr-section-faq-bg:var(--clr-body-bg);
	
	--clr-footer-bg:#23303f;
	--clr-footer-font:var(--clr-body-bg);
	--clr-footer-link-font:var(--clr-footer-font);
	--clr-footer-link-hover-font:rgba(255,255,255,0.9);
}