/*!
Theme Name: hbportal
Theme URI: http://underscores.me/
Author: Cesar Ramirez
Author URI: http://inksprite.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hbportal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

hbportal is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# CSS Fonts
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Header
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/*--------------------------------------------------------------
# CSS Fonts
--------------------------------------------------------------*/
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://793263.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-brands-400.eot");
  src: url("https://0548a2.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-brands-400.eot#iefix") format("embedded-opentype"), url("https://148983.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-brands-400.woff2") format("woff2"), url("https://e0dc72.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-brands-400.woff") format("woff"), url("https://9a832e.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-brands-400.ttf") format("truetype"), url("https://93e628.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://c2f59f.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-regular-400.eot");
  src: url("https://16b8b9.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-regular-400.eot#iefix") format("embedded-opentype"), url("https://298c95.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-regular-400.woff2") format("woff2"), url("https://8ebfbb.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-regular-400.woff") format("woff"), url("https://8ba869.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-regular-400.ttf") format("truetype"), url("https://8ddd23.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://2f75df.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-solid-900.eot");
  src: url("https://f3bfaf.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-solid-900.eot#iefix") format("embedded-opentype"), url("https://fc3b83.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-solid-900.woff2") format("woff2"), url("https://774e18.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-solid-900.woff") format("woff"), url("https://44cb2f.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-solid-900.ttf") format("truetype"), url("https://228040.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }


.fa-search:before {
  content: "\f002"; }

.fa-plus:before {
  content: "\f067"; }

.fa-minus:before {
  content: "\f068"; }

.fa-bars:before {
  content: "\f0c9"; }

.fa-star:before {
  content: "\f005"; }

.fa-lightbulb:before {
  content: "\f0eb"; }

.fa-long-arrow-alt-right:before {
  content: "\f30b"; }

.fa-facebook:before {
	content: "\f09a";
}
.fa-twitter:before {
	content: "\f099";
}
.fa-linkedin-in:before {
	content: "\f0e1";
}


/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}
a.post-edit-link {
	position:fixed;
	bottom: 0;
	left: 0;
	display: inline-block;
	background-color: #24D3CA;
	padding: .2em .4em;
	border-radius: 0 .2em 0 0;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 1em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}
.hentry ul {
	list-style: none;
}
.hentry ul li::before{
	content: "\2022";
	color:#24D3CA;
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}
.hentry ul li{
	margin: 1em 0;
}
.hentry ul li li::before{
	content: "\26AC";
	color:#24D3CA;
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}
.turquoise,
.has-turquoise-color{
	color:#24D3CA;
}
.sapphire,
.has-sapphire-color{
	color:#052933;
}
.quartz,
.has-quartz-color{
	color:#B2BAC2;
}
.ruby,
.has-ruby-color{
	color:#E92A50;
}
.light-gray,
.has-light-gray-color {
	color:#e6e9ea;
}
.gray,
.has-gray-color {
	color:#404040;
}
.purple,
.has-purple-color {
	color:#792a8d;
}
.blue,
.has-blue-color {
	color:#4e80ac;
}
.green,
.has-green-color {
	color:#48A369;
}
.dark-green,
.has-dark-green-color {
	color:#246c35;
}

.turquoise-bg,
.has-turquoise-background-color{
	background-color:#ebf8f7;
}
.sapphire-bg,
.has-sapphire-background-color{
	background-color:#052933;
}
.quartz-bg,
.has-quartz-background-color{
	background-color:#B2BAC2;
}
.ruby-bg,
.has-ruby-background-color{
	background-color:#E92A50;
}
.light-gray-bg,
.has-light-gray-background-color {
	background-color:#e6e9ea;
}
.gray-bg,
.has-gray-background-color {
	background-color:#404040;
}
.purple-bg,
.has-purple-background-color {
	background-color:#792a8d;
}
.blue-bg,
.has-blue-background-color {
	background-color:#4e80ac;
}
.green-bg,
.has-green-background-color {
	background-color:#48A369;
}
.dark-green-bg,
.has-dark-green-background-color {
	background-color:#246c35;
}

a.button {
	color:#fff;
	background-color:#24D3CA;
	padding: .4em 1.2em;
	border-radius: 1.2em;
	text-decoration: none;
	display: inline-block;
	-webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
	transform: scale(1);
	-webkit-box-shadow: 0px 0px 0px 0px rgba(19,124,125,0.39); 
box-shadow: 0px 0px 0px 0px rgba(19,124,125,0.39);
}
.button.large {
	font-size: 1.4rem;
}
a.button:hover {
	color:#fff;
	background-color:#137c7d;
	transform: scale(1.02);
	-webkit-box-shadow: 5px 5px 10px 2px rgba(19,124,125,0.39); 
box-shadow: 5px 5px 10px 2px rgba(19,124,125,0.39);
}

.wp-block-spacer.is-style-tiny {
	height: 1em  !important;
}
.wp-block-spacer.is-style-small {
	height: 2em  !important;
}
.wp-block-spacer.is-style-medium {
	height: 3em  !important;
}
.wp-block-spacer.is-style-large {
	height: 4em  !important;
}
.wp-block-columns.has-spacing-none,
.wp-block-group.has-spacing-none,
.tableau-block.has-spacing-none,
.sticky-panel.has-spacing-none,
.wp-block-separator.has-spacing-none{
	margin-top: 0em;
	margin-bottom: 0em;
}
.wp-block-columns.has-spacing-small,
.wp-block-group.has-spacing-small,
.tableau-block.has-spacing-small,
.sticky-panel.has-spacing-small,
.wp-block-separator.has-spacing-small{
	margin-top: 2em;
	margin-bottom: 2em;
}
.wp-block-columns.has-spacing-medium,
.wp-block-group.has-spacing-medium,
.tableau-block.has-spacing-medium,
.sticky-panel.has-spacing-medium,
.wp-block-separator.has-spacing-medium{
	margin-top: 3em;
	margin-bottom: 3em;
}
.wp-block-columns.has-spacing-large, 
.wp-block-group.has-spacing-large,
.tableau-block.has-spacing-large,
.sticky-panel.has-spacing-large,
.wp-block-separator.has-spacing-large {
	margin-top: 5em;
	margin-bottom: 5em;
}
.wp-block-columns.has-innerspacing-none,
.wp-block-group.has-innerspacing-none,
.tableau-block.has-innerspacing-none,
.sticky-panel.has-innerspacing-none {
	padding: 0 30px;
}
.wp-block-columns.has-innerspacing-small,
.wp-block-group.has-innerspacing-small,
.tableau-block.has-innerspacing-small,
.sticky-panel.has-innerspacing-small {
	padding: 1.5em 30px;
}
.wp-block-columns.has-innerspacing-medium,
.wp-block-group.has-innerspacing-medium,
.tableau-block.has-innerspacing-medium,
.sticky-panel.has-innerspacing-medium {
	padding: 3.5em 30px;
}
.wp-block-columns.has-innerspacing-large, 
.wp-block-group.has-innerspacing-large,
.tableau-block.has-innerspacing-large,
.sticky-panel.has-innerspacing-large {
	padding: 6em 30px;
}
.wp-block-column.has-spacing-none {
	margin-top: 0em;
	margin-bottom: 0em;
}
.wp-block-column.has-spacing-small {
	margin-top: 1em;
	margin-bottom: 1em;
}
.wp-block-column.has-spacing-medium {
	margin-top: 2em;
	margin-bottom: 2em;
}
.wp-block-column.has-spacing-large {
	margin-top: 3em;
	margin-bottom: 3em;
}
.wp-block-column.has-innerspacing-none {
	padding: 0;
}
.wp-block-column.has-innerspacing-small {
	padding: 1em 0;
}
.wp-block-column.has-innerspacing-medium {
	padding: 2em 0;
}
.wp-block-column.has-innerspacing-large {
	padding: 3em 1em;
}
.wp-block-columns.alignfull .wp-block-column.has-innerspacing-small {
	padding: 1em 2em 1em 1em;
}
.wp-block-columns.alignfull .wp-block-column.has-innerspacing-medium {
	padding: 2em 3em 2em 2em;
}
.wp-block-columns.alignfull .wp-block-column.has-innerspacing-large {
	padding: 3em 4em 3em 3em;
}
.hentry .wp-block-image.has-innerspacing-none figure{
	padding: 0em;
}
.hentry .wp-block-image.has-innerspacing-small figure{
	padding: .5em;
}
.hentry .wp-block-image.has-innerspacing-medium figure{
	padding: 1em;
}
.hentry .wp-block-image.has-innerspacing-large figure{
	padding: 2em;
}

.hentry figure.wp-block-image.has-spacing-none{
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
}
.hentry figure.wp-block-image.has-spacing-small{
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 1em;
	padding-bottom: 1em;
}
.hentry figure.wp-block-image.has-spacing-medium{
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 2em;
	padding-bottom: 2em;
}
.hentry figure.wp-block-image.has-spacing-large{
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 3em;
	padding-bottom: 3em;
}
.hentry figure.wp-block-image.has-spacing-none img, 
.hentry figure.wp-block-image.has-spacing-small img, 
.hentry figure.wp-block-image.has-spacing-medium img, 
.hentry figure.wp-block-image.has-spacing-large img{
	display: block;
}

.wp-block-separator.is-style-between-sticky {
	display: none;
}



/* Links
--------------------------------------------- */
a {
	color: #24c0b8;
}

a:visited {
	color: #25a9c5;
}

a:hover,
a:focus,
a:active {
	color: #00a9a0;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	width: 100%;
	transition: height 200ms ease-out;
	overflow: hidden;
	height: 0px;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	overflow: hidden;
	height: 0px;
}

.main-navigation ul ul.show {
	height: auto;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
	font-size: 1.2rem;
	padding: .5em 1em;
}

.main-navigation div > ul > li {
	border-top:1px solid #e6e9ea;
	position: relative;
}

.main-navigation div > ul > li:last-child {
	border-bottom:1px solid #e6e9ea;
}

.main-navigation div > ul > li > a{
	padding: .5em 1em;
	margin-right: 3em;
}

.main-navigation div > ul ul > li > a{
	color:#fff;
	background-color: #00a9a0;
	border-bottom: 1px solid #86ddd9;
}
.main-navigation div > ul ul ul > li > a{
	color:#fff;
	background-color: #052933;
	border-bottom: 1px solid #86ddd9;
}

.main-navigation div > ul ul > li > a:last-child,
.main-navigation div > ul ul ul > li > a:last-child{
	border-bottom: 0;
}

.main-navigation li span.subtoggle {
	display: none;
}
.main-navigation li.menu-item-has-children > span.subtoggle {
	display: block;
    position: absolute;
    right: 20px;
    font-size: 1.5rem;
    top: 6px;
	color:#24c0b8;
}

/* Small menu. */
.menu-toggle {
	display: block;
	padding: 5px 10px;
    background-color: #24D3CA;
    color: #fff;
    font-size: 2em;
    text-align: center;
    cursor: pointer;
}

.main-navigation.toggled {
	height: auto;
}

.main-search form#search-form{
	display: flex;
	justify-content: center;
	padding: 1em;
}

.main-search form#search-form input[type=submit] {
	color: #052933;
    padding: 0;
    font-family: 'Font Awesome 5 Free';
    font-size: 1em;
    width: 45px;
    border: 0;
    background:#ebf8f7;
	margin-left: 0;
	border-radius: 0 2em 2em 0;
}

.main-search form#search-form > label {
	border:0;
	background-color: #fff;
	border-radius: 2em 0 0 2em;
	padding: .5em 1.5em;
	width: calc(100% - 46px);
	position: relative;
	-webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.main-search form#search-form > label.is-focus {
	background-color: #ebf8f7;
}

.main-search form#search-form > label input[type=text] {
	border:0;
	background-color: transparent;
	padding: .2em 1em .2em .5em;
	margin-left: 1em;
	width: 100%;
}

.main-search form#search-form > label input[type=text]:focus {
	outline:none;
}

.main-search form#search-form > label > span{
	color:#052933;
	position: absolute;
	font-size: 1.1em;
	left:15px;
	top:10px;
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.site-main {
	padding-bottom: 3em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Header
--------------------------------------------- */
.site-header {
	background-color: #052933;
	position: relative;
	min-height: 100px;
}
.logo-wrapper {
	display: flex;
	flex-direction: column;
	height: 180px;
	justify-content: space-evenly;
}
.site-title {
	background-image: url('https://4db5e5.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/hpportal-logo3.png');
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 350px;
    margin: 0 auto;
    max-width: 100%;
    height: 56px;
	background-size: 300px auto;
}
.site-title a{
	text-indent: -9999px;
    display: block;
    height: 100%;
    width: 100%;
}
.project-of-all {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	height:60px;
	justify-content: space-around;
	margin-bottom: 1em;
}
.project-of-all-top,
.project-of-all-bottom {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.project-of-all-top p,
.project-of-all-bottom p {
	margin: 0;
	padding: 0;
	font-size: .9em;
}
.project-of-all .homebase-logo {
	display: block;
	text-indent: -9999px;
	background-image: url('https://45ad1e.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/homebase-logo.png');
	width:107px;
	height: 21px;
	background-position: center;
	background-size: contain;
	margin-left: .6em;
}
.project-of-all .googleorg-logo {
	display: block;
	text-indent: -9999px;
	background-image: url('https://39cad0.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/googleorg.png');
	width:96px;
	height: 21px;
	background-position: center;
	background-size: contain;
	margin-left: .6em;
}
.project-of-all .homebase-logo {
	position: relative;
	top:-5px;
}
.project-of-all .googleorg-logo {
	
}
.project-of {
	background-image: url('https://758421.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/project-of-hb.png');
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 218px;
    margin: 0 auto;
    max-width: 100%;
    height: 27px;
}
.project-of a{
	text-indent: -9999px;
    display: block;
    height: 100%;
    width: 100%;
}
.home-nav-banner {
	display: none;
}
.home-header1 {
	text-align: center;
	color:#24D3CA;
	font-family: "Roboto Condensed";
	font-weight: bold;
	font-size: 1.8rem;
	text-transform: uppercase;
}
.home-header1 > div{
	color:#052933;
	font-weight: normal;
	font-size: 1.5rem;
	line-height: 1em;
	text-transform:none;
}
.project-of-home {
	background-image: url('https://e95e4c.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/project-of-hb2.png');
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 218px;
    margin: 0 auto 2em auto;
    max-width: 100%;
    height: 27px;
}
.project-of-home a{
	text-indent: -9999px;
    display: block;
    height: 100%;
    width: 100%;
}
.page-template-front-page .hero {
	height: 280px;
	background-color:#052933;
	background-image: url('https://4ad277.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/map-bg2.gif');
	background-position: left;
	background-size: contain;
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	    
}
.page-template-front-page .hero .hero-inner{
	padding: 1.2em 1em;
    display: flex;
    flex-direction: column;
	width: 230px;
	position: absolute;
	right: 0;
	top:0;
	bottom: 0;
}
.hero-button {
    display: block;
    text-decoration: none;
	margin: .6em 0;
	position: relative;
	background-color: #052933;
}
.hero-button img {
    height: auto;
	width: 30px;
	display: block;
	position: absolute;
	left:0;
}

.hero-button.impactful-efforts img{
	background-color: #052933;
    width: 50px;
    padding: 0 10px 0 15px;
    top: -3px;
	left: -31px;
}


.hero-button.challenges img{
	width: 33px;
    top: 0px;
    left: -17px;
}

.hero-button.bay-area img{
	width: 45px;
    top: 8px;
    left: -25px;
}

.hero-button.prevention img{
	width: 60px;
    left: -35px;
    top: 3px;
}
.hero-button p {
	display: inline-block;
	margin: 0 0 0 25px;
	padding: 0;
	color: #24D3CA;
    font-family: "Roboto Condensed";
	font-size: 1.2rem;
    line-height: 1em;
    text-transform: uppercase;
}
.home .moto h2 {
    color: #24D3CA;
    padding-top: .4em;
}
.entry-content h2:first-child {
    margin-top: 0;
}
h2, h3.h2 {
    color: #24c0b8;
    font-size: 1.6rem;
    font-weight: normal;
    margin-top: 2em;
}


/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}
.site {
    overflow: hidden;
}
.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 2em 0 0;
	font-size: 1.2rem;
	line-height: 1.6em;
}

.entry-content {
	padding: 0 30px;
}
.home .site-main {
	    background-color: #ebf8f7;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}
.wrap {
	max-width: 1200px;
	margin: 0 auto;
}
.wrap-narrow {
	max-width: 800px;
	margin: 0 auto;
}
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}
.wp-block-group.alignfull .wp-block-group__inner-container {
	max-width: 800px;
	margin-left:auto;
	margin-right: auto;
	padding: 0 30px;
}

.entry-header {
	background-color:#ebf8f7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}
.entry-header .entry-title {
	color:#052933;
	padding: 0 30px;
}
.entry-content h2.massive-heading,
.entry-content h2.is-style-display-heading{
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	font-size: 2.2rem;
	line-height: 1.2em;
	color: #404040;
	padding: 1em 0;
	position: relative;
	margin-bottom: 2em;
}
.entry-content h2.massive-heading:after,
.entry-content h2.is-style-display-heading:after{
	content:" ";
	border-bottom:16px #E92A50 solid;
	position: absolute;
	bottom:0;
	width: 100px;
	left:calc(50% - 50px);
}
.side-menu {
	margin: 2em 30px;
	padding: 0;
	list-style: none;
}
.side-menu li{
	margin: .5em 0 .5em 1.3em;
	padding: 0;
	position: relative;
}
.side-menu li.parent{
	margin: .5em 0 .5em 0;
	padding: 0;
	position: relative;
	font-weight: bold;
}
.side-menu li:not(.parent)::before{
    content: "•";
    font-size: 1rem;
    position: absolute;
    top: 0em;
    left: -1em;
    color: #deeeed;
    font-weight: bold;
}
.side-menu li.current::before{
	font-family: 'Font Awesome 5 Free';
    content: "\f105";
    font-size: 1rem;
    position: absolute;
    top: -.1em;
    left: -1em;
    color:#052933;
	font-weight: bold;
}
.side-menu a, .side-menu a:visited {
	text-decoration: none;
	color:#24c0b8;
}
.side-menu .current a, .side-menu .current a:visited {
	color:#052933;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Tableau
--------------------------------------------- */

.tableau {
	width:100%;
}
.tableau-filter-wrap {
	font-size: .9rem;
	display: flex;
	flex-direction: column;
}
.tableau-filter-wrap .filterName {
	font-size: 1.2rem;
}
.tableau-filter-wrap .label {
	padding: 0;
	color:#24D3CA;
	margin-top: 1em;
	text-transform: uppercase;
}
.tableau-filter {
	display: flex;
	flex-wrap: wrap;
}
.tableau-filter > div{
	padding: .1em .5em;
	margin:  .2em;
	background-color:#ebf8f7;
	cursor: pointer;
	-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	border-radius: .2em;
	border:1px solid #b2e0dc;
}
.tableau-filter > div:hover,
.tableau-filter > div.selected{
	background-color:#24D3CA;
	border:1px solid #24D3CA;
	color:#ffffff;
}
.tableau-title {
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	font-size:1.5rem;
	margin: 1.5em 0 1em 0;
}
.legend {
	display: flex;
	line-height: 1.1em;
	flex-wrap: wrap;
	margin: 0 0 1em 0;
}
.legend > div {
	display: flex;
	margin: .5em;
	align-items: center;
}
.legend .color{
	width:15px;
	height: 15px;
	background-color: #24D3CA;
	margin-right: .3em;
}
.legend #sheltered .color{
	background-color: #48A369;
}
.legend #unsheltered .color{
	background-color: #E92A50;
}
.sticky-panel {
	background-color: #ebf8f7;
	margin: 1em -30px;
	padding: 1em 0;
}
.sticky-panel-inner {
	padding: 0 30px;
}
.tableau-wrap {
	height:500px;
	margin-bottom: 50px;
}
.tableau-wrap.mobile-250 {
	height:250px;
}
.trigger-event,
.trigger-event.show,
.overlay,
.overlay.show {
	opacity: 0;
	visibility: hidden;
	display: none;
}
.display-font {
	font-size: 1.6rem;
	line-height: 1.8em;
	margin: 1em 0 1em 0;
}
.display-font strong{
	font-weight: bold;
	color:#E92A50;
	font-size: 1.2em;
}
.bars-stk-horz {
	width: 100%;
	height: 500px;
	margin-top: 1em;
	margin-bottom: 1em;
	display: flex;
}
.bars-stk-horz .bar-wrapper{
	width: 20%;
	display: flex;
	flex-direction: column;
	margin: 0 29.9999% 0 0;
}
.bars-stk-horz .bar{
	height: 500px;
}
.bars-stk-horz .bar > div{
	background-color: #000;
	width: 100%;
	position: relative;
	overflow: visible;
	-webkit-transition: all 250ms ease-in;
    -moz-transition: all 250ms ease-in;
    -o-transition: all 250ms ease-in;
    transition:all 250ms ease-in;
}
.bars-stk-horz .bar > div .number{
	position: absolute;
	left:110%;
	bottom:calc(50% - .5em);
	font-size: 1.2em;
}
.bars-stk-horz .bar > div:nth-child(1){
	background-color: #E92A50;
	color: #E92A50;
}
.bars-stk-horz .bar > div:nth-child(2){
	background-color: #792a8d;
	color: #792a8d;
}
.bars-stk-horz .bar > div:nth-child(3){
	background-color: #4e80ac;
	color: #4e80ac;
}
.bars-stk-horz .bar > div:nth-child(4){
	background-color: #24D3CA;
	color: #24D3CA;
}
.bars-stk-horz .bar > div:nth-child(5){
	background-color: #36bb9a;
	color: #36bb9a;
}
.bars-stk-horz .bar > div:nth-child(6){
	background-color: #48A369;
	color: #48A369;
}
.bars-stk-horz .bar > div:nth-child(7){
	background-color: #246c35;
	color: #246c35;
}

.bars-stk-horz .label{
	font-weight: bold;
    line-height: 1.2em;
    font-size: 1.4rem;
    margin-bottom: .5em;
}

.bars-stk-horz .bar .tooltip{
	display: none;
	position: absolute;
	background-color: #fff;
	color:#404040;
	font-size:1rem;
	padding: 1em;
}
.bars-stk-horz .bar > div:hover .tooltip{
	display: block;
}
.sheltered-icons {
	display: flex;
	flex-wrap: wrap;
}
.sheltered-icons > div,
.sheltered-icons > span{
	width: 80px;
	height: 73px;
	margin: 5px;
	background-size: contain;
}

.sheltered-icons > .unsheltered{
	background-image: url("https://6d7fd3.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/unsheltered.png");
}
.sheltered-icons > .sheltered{
	background-image: url("https://a64aea.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/sheltered.png");
}

/* Bright Spots
--------------------------------------------- */
.bright-spot-loop,
.menu-item-loop{
	display: flex;
	flex-wrap:wrap;
	box-sizing: border-box;
	padding: 2em 0 0 0;
	align-items: flex-start;
	align-content: flex-start;
	
}
.bright-spot-loop > .bright-entry,
.menu-item-loop > a.menu-entry{
	width:100%;
	margin: 0 auto;
	margin-bottom: 2em;
	position: relative;
	color:#052933;
	text-decoration: none;
}
.bright-spot-loop > .bright-entry.open{
	
}
.bright-spot-loop > .bright-entry .bright-entry-wrap,
.menu-item-loop > a.menu-entry .menu-entry-wrap{
	position: relative;
	padding: 0 30px;
	cursor: pointer;
}
.bright-spot-loop > .bright-entry .bright-entry-wrap > div,
.menu-item-loop > a.menu-entry .menu-entry-wrap > div{
	border-top:10px solid #052933;
	font-weight: bold;
	text-align: center;
	font-size: 1.4rem;
    padding: .3em;
	-webkit-transition: all 250ms ease-in;
    -moz-transition: all 250ms ease-in;
    -o-transition: all 250ms ease-in;
    transition:all 250ms ease-in;
}
.bright-spot-loop > .bright-entry.open .bright-entry-wrap > div,
.bright-spot-loop > .bright-entry:hover .bright-entry-wrap > div,
.menu-item-loop > .menu-entry:hover .menu-entry-wrap > div{
	border-top:10px solid #24D3CA;
	color:#24D3CA;
	
}
.bright-spot-loop > .bright-entry.open .bright-entry-wrap > div {
	background-color:#ebf8f7;
}
.bright-spot-loop > .bright-entry .bright-content {
	overflow: hidden;
	max-height: 0px;
	opacity: 0;
	padding: 0 30px;
	-webkit-transition: all 250ms ease-in;
    -moz-transition: all 250ms ease-in;
    -o-transition: all 250ms ease-in;
    transition:all 250ms ease-in;
}
.bright-spot-loop > .bright-entry.open .bright-content {
	max-height: 4000px;
	opacity: 1;
	background-color:#ebf8f7;
}
.bright-spot-loop > .bright-entry.open .bright-content .bright-content-wrap {
}
.bright-spot-loop > .bright-entry .bright-entry-wrap > img,
.menu-item-loop > a.menu-entry .menu-entry-wrap > img{
	width: 100%;
	height: auto;
	display: block;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}
.bright-spot-loop > .bright-entry:hover img,
.bright-spot-loop > .bright-entry.open img {
	
}
.bright-spot-loop > .bright-entry .bright-col1 > div > ul{
	margin-left:0;
	
}
.bright-spot-loop > .bright-entry .bright-col2 > div > span.fa-star{
	display: inline-block;
	margin-right: .4em;
	color:#24c0b8;
}
.bright-spot-loop > .bright-entry .bright-col2 > div > span.fa-lightbulb{
	display: inline-block;
	margin-right: .8em;
	color:#24c0b8;
}
.bright-spot-loop > .bright-entry .bright-col2 > div > h4{
	display: inline-block;
	margin-bottom: 0;
	color:#24c0b8;
}

.bright-spot-loop > .bright-entry .bright-col2 > div > div > p:first-child{
	margin-top:.3em;
}

.bright-spot-loop > .bright-entry .bright-col2 > h3:first-child{
	margin-top: 2em;
}

.bright-spot-loop > .bright-entry .bright-footer{
	border-top: 1px solid #24D3CA;
	padding-bottom: 1em;
}
.sidebar-block {
	background-color:#ebf8f7;
	padding: 0 30px .6em 30px;
    margin: 0 -30px;
	border-top:10px solid #24D3CA;
}
.bright-content .sidebar-block {
	background-color:#ffffff;
	padding: 0 30px .6em 30px;
    margin: 1em 0;
	border-top:10px solid #24D3CA;
}
.sidebar-block ul {
	margin-left: 0;
	padding-left: 1.2em;
}
.sidebar-block ul li{
	margin: .8em 0;
}
.hentry .modern-footnotes-footnote__note--tooltip {
	max-width: 600px;
	width: min-content;
	line-height: 1.4em;
	min-width: 150px;
}
.monthly-costs {
	background-color:#ebf8f7;
	padding: 0 20px;
	margin: 0 -30px;
}
.monthly-costs-wrap {
	border-top: 1px solid #24D3CA;
	margin: 1.5em -30px 2.5em -30px;
    display: flex;
    flex-wrap: wrap;
}
.monthly-costs-wrap .item{
	background-color:#ebf8f7;
	border-bottom: 1px solid #24D3CA;
	text-align: center;
	padding: 20px 0;
	width: 49.999%;
}
.monthly-costs-wrap .item:nth-child(odd){
	border-right: 1px solid #24D3CA;
}
.monthly-costs-wrap .item img{
	width: 60px;
	height: auto;
}
.monthly-costs-wrap .item .title{
	color:#052933;
	font-size: 1.4rem;
	margin-top: .1em;
}
.monthly-costs-wrap .item .number{
	color:#052933;
	font-size: 1.4rem;
	font-weight: bold;
	margin-top: .1em;
}
ol.display-ol,
ol.is-style-display-ol {
	counter-reset: ol-list-counter;
  	list-style: none;
	margin: 0;
	padding: 0;
}
ol.display-ol li,
ol.is-style-display-ol li{
	counter-increment: my-awesome-counter;
	position: relative;
	border:1px solid #24D3CA;
	padding: .8em 1em .8em 3.6em;
    margin: 2em 0;
	border-radius: .2em;
}
ol.display-ol li::before,
ol.is-style-display-ol li::before {
	content: counter(my-awesome-counter);
	position: absolute;
	left:.6em;
	top:.7em;
	color:#24D3CA;
	font-size: 2.4rem;
	font-weight: bold;
}
.hentry ul.modern-footnotes-list {
	position: relative;
	padding-top: 1em;
	margin-top: 4em;
}
.hentry ul.modern-footnotes-list::before {
	content:" ";
	display: block;
	border-top:1px solid #ccc;
	width: 10em;
	position: absolute;
	top:0;
	left:0;
}
.hentry ul.modern-footnotes-list li {
	margin: .5em 0 0 0;
}
.hentry ul.modern-footnotes-list li::before {
	display: none;
}
.hentry ul.modern-footnotes-list li>span {
    margin-right: .5em;
}

.shortfall {
	display: flex;
	flex-direction: row;
	justify-content:flex-end;
}
.fall-col-label {
	margin-bottom: 1em;
	overflow: visible;
	font-weight: bold;
    line-height: 1.2em;
    font-size: 1.4rem;
    margin-bottom: .5em;
	min-height: 2.4em;
}
.shortfall .renter .svgs,
.shortfall .rentals .svgs{
	
}
.shortfall .renter {
	margin-right: 2%;
}
.shortfall .rentals {
	margin-left: 2%;
}
.shortfall .renter .vli,
.shortfall .renter .eli,
.shortfall .rentals .vli,
.shortfall .rentals .eli {
	display: flex;
	flex-direction: row;
	flex-wrap:wrap-reverse;
	margin-bottom: 3em;
}
.shortfall.BayArea .renter .vli,
.shortfall.BayArea .renter .eli,
.shortfall.BayArea .rentals .vli,
.shortfall.BayArea .rentals .eli {
	margin-bottom: 1em;
}
.shortfall .renter .vli svg,
.shortfall .renter .eli svg,
.shortfall .rentals .vli svg,
.shortfall .rentals .eli svg{
	width: 11.9999%;
	height: auto;
}
.shortfall .renter .vli svg,
.shortfall .rentals .vli svg{
	fill:#792a8d;
}
.shortfall .renter .eli svg,
.shortfall .rentals .eli svg{
	fill:#E92A50;
}
.shortfall .svgs {
	position: relative;
}
.fall-label {
	font-size: .9rem;
	line-height: 1.2em;
	margin: 1em 0 .1em 0;
    min-height: 3.8em;
}
.fall-label span{
	font-weight: bold;
	font-size: 1.3em;
	display: block;
	margin-bottom: .1em;
}
.fall-label.eli-label,
.fall-label.eli-house-label,
.fall-label.eli-mthouse-label{
	color:#E92A50;
}
.fall-label.vli-label,
.fall-label.vli-house-label,
.fall-label.vli-mthouse-label{
	color:#792a8d;
}

.fall-label.eli-house-label,
.fall-label.vli-house-label{
}
.fall-label.eli-mthouse-label span {
	color:#ebf8f7;
	text-shadow: 2px 2px 0 #E92A50, 2px -2px 0 #E92A50, -2px 2px 0 #E92A50, -2px -2px 0 #E92A50, 2px 0px 0 #E92A50, 0px 2px 0 #E92A50, -2px 0px 0 #E92A50, 0px -2px 0 #E92A50, 2px 2px 2px rgba(233,42,80,0);
}
.fall-label.vli-mthouse-label span {
	color:#ebf8f7;
	text-shadow: 2px 2px 0 #792a8d, 2px -2px 0 #792a8d, -2px 2px 0 #792a8d, -2px -2px 0 #792a8d, 2px 0px 0 #792a8d, 0px 2px 0 #792a8d, -2px 0px 0 #792a8d, 0px -2px 0 #792a8d, 2px 2px 2px rgba(121,42,141,0);
}
.fall-label.eli-label-spacer,
.fall-label.eli-house-label {
	padding-bottom: 1em;
	margin-bottom: 1.5em;
	min-height: 4.8em;
	border-bottom:1px solid #ccc;
}

.fall-map {
	display: none;
}
/* NEO */
.shortfall_bars {
	display: flex;
	flex-direction: column;
	justify-content:flex-start;
}
.shortfall_bars:first-child {
	margin-right: 2%;
}
.shortfall_bars:last-child {
	margin-left: 2%;
}
.shortfall_bars .row {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	border-bottom: 1px solid #ccc;
	padding-bottom: .7em;
	margin-bottom: .5em;
}
.shortfall_bars .row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.shortfall_bars .row .bars{
	width: 47.9999%;
}
.shortfall_bars .title-row {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
}
.shortfall_bars .fall-col-label {
	margin-bottom: 1em;
	overflow: visible;
	font-weight: normal;
    line-height: 1.2em;
    font-size: 1.4rem;
    margin-bottom: .5em;
	min-height: 2.4em;
	width: 47.9999%;
}
.shortfall_bars .icons {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    margin-bottom: 1em;
}
.shortfall_bars .icons svg {
	width: 11.9999%;
	height: auto;
}
.shortfall_bars .row .fall-label {
	font-size: .9rem;
	line-height: 1.2em;
	margin: 1em 0 .1em 0;
    min-height: 3.8em;
}
.shortfall_bars .row:nth-child(2) .fall-label {
	margin-top: 0;
}
/* #Accordion
================================================== */

.accordion-container {
	margin-bottom: 2em;
}

.entry-content a.accordion-header{
	display: block;
	font-weight:normal;
	font-size:1.4rem;
	margin: 1em 0 0 0;
	padding: .4em .8em .4em 0;
	border-bottom: 1px solid #24D3CA;
	cursor: pointer;
	-webkit-transition: all 150ms ease-out;
	-moz-transition: all 150ms ease-out;
	-o-transition: all 150ms ease-out;
	transition: all 150ms ease-out;
	color:#052933;
}
.entry-content a.accordion-header:hover{
	padding: .4em .8em .4em .8em;
	color:#24c0b8;
}

.entry-content a.active-header{
	background-color: #24D3CA;
	color:#ffffff;
	padding: .4em .8em .4em .8em;
}

.entry-content a.active-header:hover{
	background-color:#24c0b8;
	color:#fff;
	-webkit-box-shadow: 0px 5px 18px 0px rgba(209,56,115,0.4);
		-moz-box-shadow: 0px 5px 18px 0px rgba(209,56,115,0.4);
		box-shadow: 0px 5px 18px 0px rgba(209,56,115,0.4);
}

.accordion-content {
	display: none;
	padding: 20px;
	border: 1px solid #052933;
	border-top: 0;
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
	background-color: #ffffff;
}

.accordion-content, .open-content {
	max-width:100% !important
}
.accordian-content p:empty{
	display:none;
}
.site-footer {
	background-color: #052933;
	color:#fff;
	padding: 2em 30px;
}
.site-footer a {
	color:#fff;
	text-decoration: none;
}
.site-footer ul.menu{
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer ul.menu li {
	margin: .5em 0;
}
.site-footer ul.menu > li > a,
.contact a{
	font-weight: bold;
	text-transform: uppercase;
}
.site-footer ul.menu ul  {
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
}
.site-footer .contact img {
	width: 200px;
	height: auto;
	display: block;
	margin: 2em 0 1em 0;
}
.site-footer .contact {
	margin: 0 0 1em 0;
}
.site-footer .social {
	display: flex;
	margin-bottom: 1em;
}
.site-footer .social a{
	font-size: 1.7rem;
	margin: 0 .5em;
}
.site-footer .social a:first-child{
	margin-left:0;
}
.wp-block-separator {
 	border-top: 4px solid #24D3CA;
	border-bottom: 0;
	width: 150px;
	background-color: transparent;
	margin-top:2em;
	margin-bottom: 2em;
}
.caption {
	font-size: .9rem;
	text-align: center;
	color:#8fb0b2;
}

@media (min-width: 576px) {
	.bright-spot-loop > .bright-entry,
	.menu-item-loop > a.menu-entry{
		width:47.9999%;
		margin: 0 1.9999% 1.5em 1.9999%;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+1),
	.menu-item-loop > a.menu-entry:nth-child(2n+1){
		margin-left: 0;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+0),
	.menu-item-loop > a.menu-entry:nth-child(2n+0){
		margin-right: 0;
	}
	.bright-spot-loop > .bright-entry .bright-content .bright-content-wrap {
		padding: 1em 2em;
	}
	.bright-spot-loop > .bright-entry .bright-col1 h3 {
		font-size: 2rem;
		margin-top: .8em;
		margin-bottom: 2em;
		line-height: 1.2em;
		color:#052933;
		position: relative;
	}
	.bright-spot-loop > .bright-entry .bright-col1 h3:after {
		content:" ";
		display: block;
		border-bottom:15px solid #24D3CA;
		width: 4em;
		position: absolute;
		bottom: -1.1em;
		left: 0;
	}
	.bright-spot-loop > .bright-entry .bright-col2 h3:first-child{
		font-size: 1.5rem;
		margin-top: .8em;
		margin-bottom: 0;
	}
	.bright-spot-loop > .bright-entry .bright-col1 .title{
		font-size: 1.3rem;
	}
	.bright-spot-loop > .bright-entry .bright-content {
		padding: 0;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+1) .bright-content {
		width: 100vw;
		max-width: 100vw;
		
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+0) .bright-content {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(-50vw - .65em);
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+1) .bright-entry-wrap
	.menu-item-loop > a.menu-entry:nth-child(2n+1) .menu-entry-wrap{
		position: relative;
		padding: 0 0 0 30px;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+0) .bright-entry-wrap,
	.menu-item-loop > a.menu-entry:nth-child(2n+0) .menu-entry-wrap{
		position: relative;
		padding: 0 30px 0 0;
	}
	.bright-spot-loop > .bright-entry .bright-entry-wrap > div,
	.menu-item-loop > a.menu-entry .menu-entry-wrap > div{
		min-height: 120px;
	}
	.bright-spot-loop > .bright-entry.open .bright-content {
		margin-bottom: 2em;
	}
	.bright-spot-loop > .bright-entry .bright-col2 > div > div{
		margin-left:1.5em;
	}
	.bright-spot-loop > .bright-entry .bright-col2 > h3:first-child{
		margin-bottom: 1em;
	}
	.bright-spot-loop > .bright-entry .bright-footer{
		padding: 0 2em 1em 2em;
	}
	.hentry .bright-spot-loop > .bright-entry .bright-footer ul li{
		margin: .5em 0;
	}
	.fall-label span {
    	font-size: 2em;
		margin-bottom: .3em;
	}
}

@media screen and (min-width: 1000px) {
	
	.project-of-all {
		margin-top: 2em;
		align-items: flex-start
	}
	
	.wp-block-spacer.is-style-tiny {
		height: 1em  !important;
	}
	.wp-block-spacer.is-style-small {
		height: 3em  !important;
	}
	.wp-block-spacer.is-style-medium {
		height: 6em  !important;
	}
	.wp-block-spacer.is-style-large {
		height: 8em  !important;
	}
	body {
		background-color: #052933;
	}
	.site-header {
		background-color: #052933;
		z-index: 5;
		height: 130px;
		position: relative;
	}
	.logo-wrapper {
		justify-content: flex-start;
		flex-direction: row;
		height: 130px;
		align-items: center;
		width: 600px;
		position: absolute;
		left: 20px;
	}
	.site-title {
		margin: 0;
	}
	.project-of {
		margin: 0 0 0 40px;
	}
	.wp-block-separator {
		margin-top:4em;
		margin-bottom: 4em;
	}
	.wp-block-group.alignfull .wp-block-group__inner-container {
		padding: 0;
	}
	.menu-toggle {
		display: none;
	}
	
	.main-navigation {
		height: auto;
		position: relative;
		overflow: visible;
	}

	.main-navigation ul {
		display: flex;
		justify-content: space-between;
	}
	
	.main-navigation li.menu-item-has-children span.subtoggle {
		display: none;
	}
	
	.main-navigation ul ul a {
		width: 300px;
	}
	.main-navigation .menu-primary-nav-container {
		background-color: #24D3CA;
	}
	.main-navigation > div > ul {
		max-width:1200px;
		margin: 0 auto;
	}
	.main-navigation a {
		color:#fff;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	.main-navigation div > ul > li {
		border-top: 0;
	}
	.main-navigation div > ul ul > li > a {
		color: #fff;
		background-color:#03847d;
		border-bottom: 1px solid #fff;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	.main-navigation div > ul ul > li > a:hover {
		background-color:#052933;
	}
	.main-navigation div > ul ul > li:last-child > a {
		border-bottom: 0;
	}
	.main-navigation div > ul > li > a {
		margin: 0;
		padding: 1.2em 1em 0 1em;
		text-transform: uppercase;
		font-size: 1rem;
		font-weight: bold;
		height: 62px;
	}
	.main-navigation div > ul > li > a {
		margin: 0;
		padding: 1.2em 0 0 0;
		text-transform: uppercase;
		font-size: 1rem;
		font-weight: bold;
		height: 62px;
	}
	.main-navigation div > ul > li > a:after {
		content:" ";
		display: block;
		border-bottom:2px solid #fff;
		width:0%;
		position: absolute;
		bottom:1.1em;
		left:0;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	.main-navigation div > ul > li > a:hover:after {
		width: 100%;
	}
	.site-header.small .main-navigation div > ul > li > a {
		padding: .5em 1em 0 1em;
		height: 40px;
	}
	.site-header.small .main-navigation div > ul > li > a:hover:after {
		display: none;
	}
	.main-navigation div > ul > li:last-child {
		border-bottom: 0;
	}
	.main-navigation div > ul > li:first-child > a{
		padding-left: 0;
	}
	.main-navigation div > ul > li:last-child a{
		padding-right: 0;
	}
	
	.main-navigation div > ul > li > ul.sub-menu{
		position: absolute;
		height: auto;
		opacity: 0;
		visibility:hidden;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		z-index: 3;
		flex-direction: column;
		border-radius: 0 0 .2em .2em;
		overflow: hidden;

		-webkit-box-shadow: 0px 4px 11px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow:    0px 4px 11px 0px rgba(50, 50, 50, 0.36);
box-shadow:         0px 4px 11px 0px rgba(50, 50, 50, 0.36);
	}
	.main-navigation div > ul > li:hover > ul.sub-menu{
		position: absolute;
		height: auto;
		opacity: 1;
		visibility:visible;
	}
	.site-header .main-navigation {
		position: absolute;
		top:130px;
	}
	.site-header.small .main-navigation {
		position: fixed;
		top:0;
	}
	.main-search {
		position: absolute;
		top:-103px;
		right: 20px;
	}
	.main-search form#search-form > label input[type=text] {
		width: 150px;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	.main-search form#search-form > label input[type=text]:focus {
		width: 300px;
	}
	.home-nav-banner .main-search {
		right: 150px;
		top:-100px;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	.home-nav-banner .main-search.open {
		right: 150px;
		top:7px;
	}
	.home-nav-banner .main-search form#search-form {
		display: flex;
		justify-content: center;
		padding: 0;
	}
	.home-nav-banner {
		display: block;
		height: 62px;
		background-color: #24D3CA;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 5;
	}
	.home-nav-banner > .navicons{
		display: flex;
		flex-direction: row;
		position: absolute;
		right:20px;
		align-items: center;
		height: 62px;
	}
	.home-nav-banner > .navicons > div{
		color:#fff;
		margin: 0 20px;
		font-size: 1.5rem;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		cursor: pointer;
	}
	.home-nav-banner > .navicons > div:hover {
		color:#792a8d;
	}
	.home .main-navigation {
		position: absolute;
		top:-62px;
		-webkit-transition: all .5s ease-out;
		-moz-transition: all .5s ease-out;
		-o-transition: all .5s ease-out;
		transition: all .5s ease-out;
		z-index: 3;
	}
	.home .main-navigation .menu-primary-nav-container {
		background-color: #00aea5;
	}
	.home .main-navigation.show {
		top:62px;
		z-index: 4;
	}
	.logo-wrap-home-wrap {
		max-width: 1200px;
		margin: 0 auto;
	}
	.logo-wrap-home {
		position:absolute;
		top:280px;
		z-index: 4;
		left:40px;
	}
	.home-header1 {
		text-align: left;
		font-size: 3.5rem;
		width: 420px;
		line-height: 1em;
		margin: 0;
		text-shadow: 2px 2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, -2px -2px 0 #fff, 2px 0px 0 #fff, 0px 2px 0 #fff, -2px 0px 0 #fff, 0px -2px 0 #fff;
	}
	.home-header1 > div{
		font-size: 2rem;
		line-height: 1.3em;
	}
	.project-of-home {
		margin: 2em 0 0 0;
	}
	.project-of-home a{
	}
	
	.page-template-front-page .hero-outer {
		transform: skewY(8deg);
		overflow: hidden;
		margin-top: -100px;
		position: relative;
    	z-index: 1;
	}
	.page-template-front-page .hero {
		z-index: 1;
		margin-top: 0;
		height: 1050px;
		margin-bottom: -200px;
		background-color: #fff;
		background-image: none;
		position: relative;
		transform: skewY(-8deg);
		
	}
	.page-template-front-page .hero:before{
		content: " ";
		background-color:#052933;
		position: absolute;
		width:50%;
		right: 0;
		height: 100%;
		z-index: 1
	}
	.page-template-front-page .hero .hero-inner{
		display: block;
		position: absolute;
		left:calc(50vw - 600px);
		height: 100%;
		background-image: url("https://4ad277.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/map-bg2.gif");
		width: 1200px;
		background-position: 150px 80px;
    	background-size: 1070px auto;
		background-repeat: no-repeat;
		position: relative;
		z-index: 2;
		top:40px;
	}
	.hero-button {
		position: absolute;
	}
	.hero-button.bay-area {
		width: 225px;
		height: 130px;
		top: 380px;
    	left:860px;
	}
	.hero-button.bay-area img{
		width: 80px;
		left:-60px;
		top:0;
	}
	.hero-button.challenges {
		width: 225px;
		height: 130px;
		top: 480px;
    	left:860px;
	}
	.hero-button.challenges img{
		width: 55px;
		left:-45px;
		top:-15px;
	}
	.hero-button.prevention {
		width: 225px;
		height: 130px;
		top: 580px;
    	left:860px;
	}
	.hero-button.prevention img{
		width: 100px;
		left: -75px;
		top:-10px
	}
	.hero-button.impactful-efforts {
		width: 225px;
		height: 130px;
		top: 680px;
    	left:860px;
	}
	.hero-button.impactful-efforts img{
		width: 60px;
		left: -50px;
		top:-10px;
	}
	.hero-button p {

		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	
	.hero-button img {
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	.hero-button:hover img {
		transform: scale(1.1);
	}
	.hero-button:hover p.short {
		transform: scale(1.1);
		color:#fff;
	}
	.site-main {
		background-color: #fff;
		position: relative;
		top:62px;
	}
	.home .site-main {
		top:0;
		background-color: #ebf8f7;
		overflow: hidden;
		position: relative;
		padding-bottom: 0;
	}
	.home .site-main:before {
		content: " ";
		background-image: url('https://554f08.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/left-hb-bg.jpg');
		position: absolute;
		left:0;
		top:0;
		bottom: 0;
		width: 40%;
		background-repeat: repeat-y;
		z-index: 0;
	}
	.home .site-main:after {
		content: " ";
		background-image: url('https://085449.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/right-hb-bg.jpg');
		position: absolute;
		right:0;
		top:0;
		bottom: 0;
		width: 40%;
		background-repeat: repeat-y;
		z-index: 0;
		background-position: right;
	}
	.hentry {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.entry-header {
		padding: 0;
		min-height: 200px;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 4em;
		position: relative;
		width: 100%;
		min-width: 100%;
	}
	.entry-header .entry-title {
		color:#052933;
		max-width: 900px;
		margin: 0 auto;
	}
	.has_cover .entry-header {
		min-height: 300px;
    	padding-bottom: 100px;
		padding-top: 50px;
    	margin-bottom: 400px;
	}
	.entry-header img {
		display: block;
		left: calc(50% - 600px);
		position: absolute;
		bottom: -350px;
		border-bottom: 10px solid #052933;
	}
	.entry-header.prevent-menu{
		background: #fff;
		padding-top: 4em;
		margin: 0;
	}
	.entry-header.prevent-menu > div{
		background-image: url('https://d48e6b.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/prevent-bg.jpg');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		width: 1200px;
		margin: 0 auto 0 auto;
		height: 500px;
		position: relative;
	}
	.entry-header.prevent-menu > div a{
		display: block;
		position: absolute;
		text-decoration: none;
		width: 175px;
		text-align: center;
	}
	.entry-header.prevent-menu > div a img{
		position: relative;
		left:auto;
		bottom: auto;
		border:0;
		width: 150px;
		height: auto;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		text-align: center;
		display: block;
		margin: 0 auto;
	}
	.entry-header.prevent-menu > div a.unshelter-interv{
		left:20px;
		top:300px;
		width: 300px;
	}
	.entry-header.prevent-menu > div a.unshelter-interv img{
		width: 260px;
	}
	.entry-header.prevent-menu > div a.shelter-interv{
		left: 310px;
    	top: 225px;
	}
	.entry-header.prevent-menu > div a.shelter-interv img{
		width:95px;
		position: relative;
		left:8px;
	}
	.entry-header.prevent-menu > div a.expand{
		left: 510px;
		top: 170px;
		width: 260px;
	}
	.entry-header.prevent-menu > div a.expand img{
		width: 110px;
	}
	.entry-header.prevent-menu > div a.prevent{
		left: 775px;
    	top: 110px;
	}
	.entry-header.prevent-menu > div a.prevent img{
		width: 190px;
	}
	.entry-header.prevent-menu > div a.affordable{
		left: 970px;
    	top: 40px;
	}
	.entry-header.prevent-menu > div a.affordable img{
		width: 200px;
	}
	
	.entry-header.prevent-menu > div a p {
		color:#052933;
		font-family: "Roboto Condensed";
		font-size: 1.5rem;
		line-height: 1em;
		text-transform: uppercase;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		text-align: center;
		margin: .5em 0 0 0;
	}
	.entry-header.prevent-menu > div a:hover img {
		transform: scale(1.1);
	}
	.entry-header.prevent-menu > div a:hover p {
		transform: scale(1.1);
		color:#24c0b8;
	}
	.entry-content {
		padding: 0;
		margin: 0 auto;
		width: 800px;
	}
	.home .entry-content {
		padding-top: 150px;

	}
	h2,
	h3.h2{
		color: #24c0b8;
    	font-size: 1.6rem;
    	font-weight: normal;
		margin-top: 2em;
	}
	.entry-content h2:first-child {
		margin-top: 0;
	}
	.entry-content h2.massive-heading,
	.entry-content h2.is-style-display-heading{
		font-size: 2.4rem;
	}
	.entry-content h3 {
		font-size: 1.4rem;
		color: #052933;
		margin-top: 2em;
	}
	.home .entry-content {
		position: relative;
		z-index: 1;
	}
	.home .entry-content h2 {
		color:#052933;
		font-weight: bold;
	}
	
	.has_side .entry-content {
		margin: 0;
	}
	.site-info {
		color: #fff;
		max-width: 1200px;
		margin: 0 auto;
	}
	.entry-footer {
		width: 100%;
		min-width: 100%;
	}
	.side-menu-wrapper {
		margin: .5em 150px 0 2em;
		padding: 0;
		width:250px;
	}
	.side-menu {
		margin: .5em 150px 0 0;
		padding: 0;
		list-style: none;
		width:250px;
		position: relative;
	}
	.side-menu.stick {
		position: fixed;
		top:60px;
	}
	.panel {
		margin: 9em 0;
		display: flex;
		width: 1200px;
		position: relative;
		left: calc(50% - 600px);
		flex-direction: row;
		justify-content: space-between;
	}
	.panel > div{
		width: 47%;
		text-align: left;
	}
	.panel h2 {
		color:#052933;
		font-size: 3.5rem;
		line-height: 1.1em;
		border-bottom:12px solid #24D3CA;
	}
	.legend {
		justify-content: center;
	}
	.moto {
		font-size: 1.8rem;
		text-align: center;
		line-height: 1.4em;
	}
	.home .moto h2 {
		font-size: 2.4rem;
		color:#24D3CA;
		position: relative;
		padding-top: 1em;
	}
	.home .moto h2:before {
		content: " ";
		position: absolute;
		top:0;
		width: 150px;
		left:calc(50% - 75px);
		border-top:solid 12px #052933;
	}
	.has-large-font-size {
		font-size: 2.25rem;
		line-height: 1.5em;
	}
	.bright-spot-loop,
	.menu-item-loop{
		padding: 2em;
		justify-content: center;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+1),
	.menu-item-loop > a.menu-entry:nth-child(2n+1){
		margin-left: .9999%;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+0),
	.menu-item-loop > a.menu-entry:nth-child(2n+0){
		margin-right: .9999%;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+1) .bright-content {
		margin-left:inherit;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+0) .bright-content {
		margin-left:inherit;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+1) .bright-entry-wrap,
	.menu-item-loop > a.menu-entry:nth-child(2n+1) .menu-entry-wrap{
		padding: 0;
	}
	.bright-spot-loop > .bright-entry:nth-child(2n+0) .bright-entry-wrap,
	.menu-item-loop > a.menu-entry:nth-child(2n+0) .menu-entry-wrap{
		padding: 0;
	}
	.bright-spot-loop > .bright-entry,
	.menu-item-loop > a.menu-entry{
		width:31.99999%;
		margin: 0 .9999% 1.5em .9999%;
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+1),
	.menu-item-loop > a.menu-entry:nth-child(3n+1){
		margin-left: 0;
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+0),
	.menu-item-loop > a.menu-entry:nth-child(3n+0){
		margin-right: 0;
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+1) .bright-content {
		width: 1200px;
		max-width: 100vw;
		margin-left: -2em;
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+2) .bright-content {
		width: 1200px;
		max-width: 100vw;
		margin-left: -118.66666%;
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+3) .bright-content {
		width: 1200px;
		max-width: 100vw;
		margin-left: -224.99999%;
	}
	.bright-spot-loop > .bright-entry.config1-0:nth-child(3n+1) .bright-content {
		margin-left: -118.66666%;
	}
	.bright-spot-loop > .bright-entry.config1-0:nth-child(3n+1),
	.menu-item-loop > a.menu-entry.config1-0:nth-child(3n+1){
		margin-right: 0;
	}
	.bright-spot-loop > .bright-entry.config2-1:nth-child(3n+1),
	.menu-item-loop > a.menu-entry.config2-1:nth-child(3n+1){
		margin-left: .9999%;
	}
	.bright-spot-loop > .bright-entry.config2-1:nth-child(3n+1) .bright-content {
		margin-left: -65.66666%;
	}
	.bright-spot-loop > .bright-entry.config2-0:nth-child(3n+2) .bright-content {
		margin-left: -171.66666%;
	}
	.sidebar-block {
		float: right;
		width: 400px;
		padding: 0 1.5em .3em 1.5em;
		margin: 0 0 1em 2em;
	}
	.sidebar-block.full-width {
		float: none;
		width: 100%;
		padding: 0 1.5em .3em 1.5em;
		margin: 0 0 1em 0;
	}
	.bright-content .sidebar-block {
		float:none;
		width:auto;
		padding: 0 1.5em .3em 1.5em;
		margin: 3em 0 1em 0;
	}
	.fall-col-label {
		font-weight: normal;
		font-size: 1.3rem;
		min-height:unset;
		margin-bottom: 1em;
	}
	.shortfall .renter {
		margin: 0 1% 0 18%;
	}
	.shortfall .rentals {
		margin: 0 0 0 19%;
	}
	.shortfall .renter .eli.small,
	.shortfall .rentals .eli.small,
	.shortfall .renter .vli.small,
	.shortfall .rentals .vli.small{
		margin-bottom: 7em;
	}
	.shortfall .renter .eli.medium,
	.shortfall .rentals .eli.medium,
	.shortfall .renter .vli.medium,
	.shortfall .rentals .vli.medium{
		margin-bottom: 6em;
	}
	.shortfall .renter .eli.large,
	.shortfall .rentals .eli.large,
	.shortfall  .renter .vli.large,
	.shortfall  .rentals .vli.large {
		margin-bottom: 5em;
	}
	.shortfall .renter .eli.xlarge,
	.shortfall .rentals .eli.xlarge,
	.shortfall  .renter .vli.xlarge,
	.shortfall  .rentals .vli.xlarge {
		margin-bottom: 4em;
	}
	.shortfall.bayarea .renter .eli.xlarge,
	.shortfall.bayarea .rentals .eli.xlarge,
	.shortfall.bayarea .renter .vli.xlarge,
	.shortfall.bayarea .rentals .vli.xlarge {
		margin-bottom: 1em;
	}
	.fall-label {
		position: absolute;
		right: 104%;
		margin: .5em 0 0 0;
		width: 115px;
	}
	.fall-label.eli-label-spacer {
		display: none;
	}
	.fall-label.eli-house-label,
	.fall-label.vli-house-label {
		margin-top: -5.4em;
		border-bottom: 0;
	}
	.shortfall .renter .vli svg, .shortfall .renter .eli svg, .shortfall .rentals .vli svg, .shortfall .rentals .eli svg {
		width: 9.9999%;
	}
	
	/*NEO START*/
	.shortfall_bars .row .bars {
		position: relative;
	}
	.shortfall_bars .icons {
		margin-left: 34%;
	}
	.shortfall_bars .row {
		margin-bottom: 1.4em;
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: .5em
	}
	.shortfall_bars .row .fall-label {
		left: 0;
		margin-top: .5em;
	}
	.shortfall_bars .row:nth-child(2) .fall-label {
		margin-top: .5em;
	}
	.shortfall_bars .icons svg {
		width: 8.5%;
	}
	.shortfall_bars .fall-col-label {
		margin-left: 17%;
		min-height: 1.6em;
	}
	.shortfall_bars .fall-col-label:nth-child(2) {
		margin-left: 20%;
	}
	.shortfall_bars .row .fall-label.houses {
		bottom:1em;
	}
	.short-fall-sticky .tableau-title {
		margin: 1.2em 0 1em 0;
	}
	.shortfall_bars .icons.small {
		margin-bottom: 7em;
	}
	.shortfall_bars .icons.medium {
		margin-bottom: 6em;
	}
	.shortfall_bars .icons.large {
		margin-bottom: 5em;
	}
	.shortfall_bars .icons.xlarge {
		margin-bottom: 1em;
	}
	/*NEO END*/
	
	
	.sheltered-icons > div{
		width: 60px;
		height: 55px;
	}
	.monthly-costs-wrap {
		margin: 1.5em -20px 2.5em -20px;
	}
	figure.is-provider-youtube iframe {
		width: 100%;
		height:450px;
	}
	.site-footer {
		padding: 7em 0;
	}
	.home .site-footer {
		padding: 4em 0;
	}
	.site-footer ul.menu{
		display: flex;
	}
	.site-footer ul.menu > li{
		padding-right: 1%;
		min-width: 19.999%;
		max-width: 19.999%;
		box-sizing: border-box;
	}
	.site-footer ul.menu > li:last-child{
		padding-right: 0;
	}
	.site-footer .footer2 {
		display: flex;
		justify-content: space-between;
	}
	.site-footer .contact img {
		margin: 0 0 1em 0;
	}
	.site-footer .share {
		margin-left: 2em;
	}
	.site-footer .social {
		justify-content: flex-end;
	}
	.site-footer .site-info {
		margin-top: 1em;
		text-align: right;
	}
}

@media screen and (min-width: 1240px) {
	.wp-block-separator.is-style-between-sticky {
		border-top: 2px solid #24D3CA;
		display: block;
		background-color:#ebf8f7;
		margin-top: 0;
		margin-bottom: 0;
		padding-bottom: 2em;
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}
	.home-nav-banner > .navicons {
		right:calc(50vw - 630px);
	}
	.main-search {
		right: calc(50vw - 630px);
	}
	.logo-wrapper {
		left: calc(50vw - 630px);
	}
	.page-template-front-page .hero-outer {
		transform: skewY(8deg);
		overflow: hidden;
		margin-top: -100px;
		position: relative;
    	z-index: 1;
	}
	.page-template-front-page .hero {
		z-index: 1;
		margin-top: 0;
		height: 1050px;
		margin-bottom: -200px;
		background-color: #fff;
		background-image: none;
		position: relative;
		transform: skewY(-8deg);
		
	}
	.page-template-front-page .hero:before{
		content: " ";
		background-color:#052933;
		position: absolute;
		width:50%;
		right: 0;
		height: 100%;
		z-index: 1
	}
	.page-template-front-page .hero .hero-inner{
		display: block;
		position: absolute;
		left:calc(50vw - 600px);
		height: 100%;
		background-image: url("https://4ad277.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/map-bg2.gif");
		width: 1200px;
		background-position: 150px 80px;
    	background-size: 1070px auto;
		background-repeat: no-repeat;
		position: relative;
		z-index: 2;
		top:40px;
	}
	
	.hero-button {
		position: absolute;
		display: block;
		text-decoration: none;
		margin: 0;
	}
	.hero-button p {
		color:#24D3CA;
		font-family: "Roboto Condensed";
		font-size: 1.5rem;
		line-height: 1em;
		position: absolute;
		left: 100px;
		text-transform: uppercase;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		padding: 1.1em 0;
		margin: 0;
	}
	
	.hero-button img {
		display: block;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
		transform: scale(1);
	}
	.hero-button:hover img {
		transform: scale(1.1);
	}
	.hero-button:hover p.short {
		transform: scale(1.1);
		color:#fff;
	}
	
	.hero-button.impactful-efforts {
		background-image: url('https://ae4762.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow1.png');
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 350px;
    	left: 810px;
	}
	.hero-button.impactful-efforts img{
		width: 55px;
		height: auto;
		position: absolute;
		left: 50px;
		top: 5px;
		padding: 0;
		background: transparent;
	}
	.hero-button.impactful-efforts p{
		top: 90px;
    	left: -15px;
    	text-align: center;
	}
	.hero-button.challenges {
		background-image: url('https://aa052e.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow2.png');
		background-position: 0px 45px;
		background-size:110px auto;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 377px;
    	left: 1120px;
}
	
	.hero-button.challenges img{
		width: 70px;
		height: auto;
		position: absolute;
		left: 24px;
		top: -5px;
	}
	.hero-button.challenges p{
		top: 63px;
    	left: -5px;
    	text-align: center;
	}
	.hero-button.bay-area {
		background-image: url('https://e7a637.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow3.png');
		background-position: 0px 35px;
		background-size:160px auto;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 610px;
    	left: 810px;
	}
	.hero-button.bay-area img{
		width: 120px;
		height: auto;
		position: absolute;
		left: 25px;
    	top: 8px;
	}
	.hero-button.bay-area p{
		top: 58px;
		left: 7px;
		text-align: center;
	}
	.hero-button.prevention {
		background-image: url('https://b0f86e.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow4.png');
		background-position: 0px 35px;
		background-size:130px auto;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 600px;
    	left: 1115px;
	}
	.hero-button.prevention img{
		width: 180px;
    height: auto;
    position: absolute;
    left: -24px;
    top: -10px;
	}
	.hero-button.prevention p{
		top:68px;
		left:-2px;
		text-align: center;
	}
	.project-of-all {
		flex-direction:row;
		height: inherit;
	}
	.project-of-all-top,
	.project-of-all-bottom {
		margin-right: .7em;
	}
	

	/* Tableau
	--------------------------------------------- */
	.tableau {
		
	}
	.alignwide {
		width: 100vw;
		max-width: 1000px;
		margin-right:auto;
		margin-left: calc(50% - 500px);
	}
	.wp-block-image .alignright {
		margin: .5em -200px .5em 1em;
	}
	.wp-block-image .alignleft {
		margin: .5em 1em .5em -200px;
	}
	.tableau-sticky {
		z-index: 1;
		min-height: 770px;
		height: calc(100vh - 62px);
		width: 800px;
		position: absolute;
		right:calc(50% - 600px);
		top:auto;
		display: flex;
		opacity: 1;
		flex-direction: column;
		animation-duration: .5s;
    	animation-iteration-count: 1;
		animation-name:fadeIn;
		animation-fill-mode: forwards;  
		/*-webkit-transition: all .5s ease-out;
    	-moz-transition: all .5s ease-out;
    	-o-transition: all .5s ease-out;
    	transition: all .5s ease-out;*/
	}
	.tableau-sticky.stick {
		position: fixed;
		top:62px;
		opacity: 1;
	}
	.tableau-sticky.hide {
		opacity: 0;
	}
	.tableau-sticky.hider {
		display: none;
	}
	.tableau-wrap {
		position:relative;
	}
	.tableau-wrap:after{
		content: "";
		position:absolute;
		bottom:0;
		left:0;
		right:0;
		height: 28px;
		background-color: #ebf8f7;
	}
	.tableau-wrap,
	.tableau-wrap.mobile-250 {
		height:600px
	}

	.sticky-panel {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		background-color: #ebf8f7;
		padding-top: 4em;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	.sticky-panel-inner {
		width: 100vw;
		max-width: 1200px;
		margin-right: auto;
		margin-left: calc(50% - 600px);
		position: relative;
		padding: 0 0 100px 0;
		margin-bottom: 200px;
	}
	.sticky-panel-inner.bottom-separator {
		border-bottom: 1px solid #24D3CA;
	} 
	.sticky-pane {
		width: 330px;
		z-index: 2;
	}
	.display-font {
		font-size: 1.6rem;
		line-height: 1.8em;
		margin: 0 0 8em 0;
	}
	.display-font:first-child{
		padding-top: 4em;
	}
	
	.display-font strong{
		font-weight: bold;
		color:#E92A50;
		font-size: 1.2em;
	}
	.tableau-filter-wrap .label {
		margin-top: 0;
	}
	
	.trigger-event {
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all .5s ease-out;
    	-moz-transition: all .5s ease-out;
    	-o-transition: all .5s ease-out;
    	transition: all .5s ease-out;
		position: absolute;
		right: 50px;
		top: 296px;
		display: block;
	}
	.overlay {
		opacity: 0;
		visibility: hidden;
		-webkit-transition: all .5s ease-out;
    	-moz-transition: all .5s ease-out;
    	-o-transition: all .5s ease-out;
    	transition: all .5s ease-out;
		position: absolute;
		display: block;
		top: 189px;
    	left: -5px;
	}
	.overlay.show {
		visibility:visible;
		opacity: 1;
		display: block;
	}
	.overlay .circle {
		border-radius: 200px;
		position: absolute;
		opacity: .1;
	}
	.overlay .stat {
		position: absolute;
		box-sizing: border-box;
		width: auto;
		max-width: 200px;
		height: 65px;
	}
	.overlay .stat .number-arrow{
		display: flex;
		flex-wrap: nowrap;
		box-sizing: border-box;
		width: auto;
		max-width: 200px;
		height: 34px;
	}
	.overlay .stat .number{
		font-weight: bolder;
		font-size: 2.4em;
		color: #E92A50;
		text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 1px 1px 1px rgba(255,255,255,0);
	}
	.overlay .stat .number{
		font-weight: bolder;
		font-size: 2.4em;
		color: #E92A50;
		text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 1px 1px 1px rgba(255,255,255,0);
	}
	.overlay .stat .label{
		font-size: 1em;
		color: #E92A50;
		text-transform: uppercase;
		text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 1px 1px 1px rgba(255,255,255,0);
	}
	#trigger-event1 {
		right: 50px;
		top: 296px;
	}
	#trigger-event2 {
		right: 120px;
		top: 250px;
	}
	#trigger-event3 {
		right: 70px;
		top: 640px;
	}
	.trigger-event.show {
		visibility:visible;
		opacity: 1;
		display: block;
	}
	.trigger-event .circle{
		background-color: rgba(233,42,80,0.10);
		border-radius: 200px;
	}
	#trigger-event1 .circle{
		width: 240px;
		height: 240px;
	}
	
	#trigger-event2 .circle{
		width: 320px;
		height: 320px;
	}
	.trigger-event .stat1{
		position: absolute;
		bottom:200px;
		height: 100px;
		right: 0;
	}
	.trigger-event .stat2{
		position: absolute;
		bottom:0px;
		height: 100px;
		right: 0;
	}
	#trigger-event1 .stat1{
		position: absolute;
		bottom:50px;
	}
	#trigger-event2 .stat1{
		position: absolute;
		bottom:100px;
	}
	#trigger-event3 .stat1{
		position: absolute;
		bottom:165px;
	}
	#trigger-event3 .stat2{
		position: absolute;
		bottom:-30px;
	}
	.trigger-event .arrow-outline{
		position: absolute;
		right: 0px;
    	bottom: 37px;
	}
	.trigger-event .number{
		font-weight: bolder;
		font-size: 2.4em;
		color: #E92A50;
		position: absolute;
		right: 30px;
		bottom: 35px;
		text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 1px 1px 1px rgba(255,255,255,0);
	}
	
	.trigger-event .number.green{
		color: #48A369;
	}
	.trigger-event .label{
		font-size: 1em;
		color: #E92A50;
		position: absolute;
		right: -8px;
		bottom: 0;
		text-transform: uppercase;
		text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 1px 1px 1px rgba(255,255,255,0);
	}
	.trigger-event .label.green{
		color: #48A369;
	}
	.arrow {
	position: relative;
	height: 0px; width: 0px;
	border: 12px solid;
	border-color: 
		#E92A50
		transparent
		transparent
		#E92A50
		;
		transform: scale(.8);
		top: -13px;
    left: -13px;
	}

	.arrow:before {
		content: '';
		position: absolute;
		top: 0px; right: 0px;
		display: block;
		height: 16px;
		width: 15px;
		background-color: #E92A50;
		transform: 
			rotate(-45deg) 
			translate(11px, 7px);
	}
	.overlay :before {
		display: none;
	}
	.arrow.green {
	border-color: 
		#48A369
		transparent
		transparent
		#48A369
		;
	}
	.arrow.green:before {
	background-color: #48A369;
	}
	.arrow-outline {
	/* more triangle */
	position: relative;
	height: 0px; width: 0px;
	border: 12px solid;
	border-color: 
		white
		transparent
		transparent
		white
		;
	transform: rotate(45deg) translate(1px, 1px) scale(1.3); 
	}
	
	.overlay .arrow-outline {
		margin-left: 6px;
    	margin-top: 3px;
	}
	
	.arrow-outline.down {

	transform: rotate(225deg) translate(1px, 1px) scale(1.3); 
	}

	.arrow-outline:before {
		content: '';
		position: absolute;
		top: 0px; right: 0px;
		display: block;
		height: 16px;
		width: 15px;
		background-color: white;
		transform: 
			rotate(-45deg) 
			translate(11px, 4px);
	}
	.arrow-inner {
		position: absolute;
		top: 0px; 
		right: 0px;
		display: block;
		height: 16px;
		width: 15px;
		transform: 
			rotate(-45deg) 
			translate(11px, 7px);
	}
	.tableau-filter-wrap {
		-webkit-transition: all .5s ease-out;
    	-moz-transition: all .5s ease-out;
    	-o-transition: all .5s ease-out;
    	transition: all .5s ease-out;
	}
	.tableau-filter-wrap.hide {
		opacity: 0;
		visibility: hidden;
	}
	.tableau-filter-wrap > .row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 1em;
	}
	.tableau-filter-wrap > .col {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 1em;
	}
	.bars-stk-horz {
		height: 600px;
		display: block;
	}
	.bars-stk-horz .bar{
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: row;
		margin: 0 0 5em 0;
	}
	.bars-stk-horz .bar > div{
		background-color: #000;
		height: 100%;
		position: relative;
		overflow: visible;
	}
	.bars-stk-horz .bar > div .number{
		position: absolute;
		bottom:-1.5em;
		left:calc(50% - .5em);
	}
	.bars-stk-horz .bar-wrapper {
		width: 100%;
		margin: 0;
	}
	
	/**.bars-stk-horz .label{
		display: flex;
		align-items:flex-end;
	}
	.bars-stk-horz .label > div{
		padding: 0 1em .5em 1em;
		line-height: 1.1em;
	}
	
	.bars-stk-horz .bar .tooltip{
		display: none;
		position: absolute;
		background-color: #fff;
		color:#404040;
		font-size:1rem;
		padding: 1em;
	}
	.bars-stk-horz .bar > div:hover .tooltip{
		display: block;
	}**/
	
	.bright-spot-loop,
	.menu-item-loop{
		padding: 2em 0 0 0;
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+1) .bright-content {
		max-width: 1200vw;
		margin-left: 0;
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+2) .bright-content {
		max-width: 1200vw;
		margin-left: -106%;
		
	}
	.bright-spot-loop > .bright-entry:nth-child(3n+3) .bright-content {
		max-width: 1200vw;
		margin-left: -212.6%;
	}
	.bright-spot-loop > .bright-entry.config1-0:nth-child(3n+1) .bright-content {
		margin-left: -106%;
	}
	.bright-spot-loop > .bright-entry.config2-1:nth-child(3n+1) .bright-content {
		margin-left: -53.3333%;
	}
	.bright-spot-loop > .bright-entry.config2-0:nth-child(3n+2) .bright-content {
		margin-left: -159.3333%;
	}
	.bright-spot-loop > .bright-entry.open .bright-content .bright-content-wrap {
		display: flex;
		flex-direction: row;
	}
	.bright-spot-loop > .bright-entry .bright-col1 {
		min-width: 375px;
		max-width: 375px;
		margin-right: 2em;
	}
	.sidebar-block {
		margin: 0 -200px 1em 2em;
		width: 450px;
	}
	.monthly-costs-wrap{
		background-color:#ebf8f7;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 3em;
		margin-bottom:3em;
	}
	.monthly-costs-wrap .item{
		box-sizing: border-box;
		width: 24.9999%;
		border-right: 1px solid #24D3CA;
		height: 240px;
		display: flex;
		flex-direction: column;
		justify-content: center;
    	align-items: center;
	}
	.monthly-costs-wrap .item img{
		display: block;
	}
	.monthly-costs-wrap .item:nth-child(4),
	.monthly-costs-wrap .item:nth-child(8){
		border-right: 0;
	}
	.monthly-costs-wrap .item:nth-child(5),
	.monthly-costs-wrap .item:nth-child(6),
	.monthly-costs-wrap .item:nth-child(7),
	.monthly-costs-wrap .item:nth-child(8){
		border-bottom: 0;
	}
	
	.monthly-costs-wrap .item:nth-child(8){
		background-color:#052933;
		color:#fff;
	}
	.monthly-costs-wrap .item:nth-child(8) .number,
	.monthly-costs-wrap .item:nth-child(8) .title{
    	color: #fff;
	}
	.monthly-costs-wrap .item:nth-child(8) .number:nth-child(2){
    	margin-bottom: .7em;
	}
	.monthly-costs-wrap .item:nth-child(8) .title:nth-child(3),
	.monthly-costs-wrap .item:nth-child(8) .number:nth-child(4){
    	color:#E92A50;
	}
	.fall-map-mobile {
		display: none;
	}
	.fall-map {
		display: block;
		background-image: url("https://c30df5.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/fall-map.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		width: 900px;
		height: 588px;
		position: relative;
	}
	.fall-map .title,
	.fall-map .title2 {
		font-weight: bold;
		font-size: 2rem;
		position: absolute;
		width: 300px;
		top:120px;
		left:50px;
		line-height: 1.3em;
	}
	.fall-map .circle {
		position: absolute;
		background-color: rgba(233,42,80,.9);
		width: 100px;
		border:1px solid #fff;
		height: 100px;
		color:#fff;
		border-radius: 9999px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		text-align: center;
		line-height: 1.2em;text-shadow: 2px 2px 0 #E92A50, 2px -2px 0 #E92A50, -2px 2px 0 #E92A50, -2px -2px 0 #E92A50, 2px 0px 0 #E92A50, 0px 2px 0 #E92A50, -2px 0px 0 #E92A50, 0px -2px 0 #E92A50, 2px 2px 2px rgba(233,42,80,0);
		-webkit-transition: all .5s ease-out;
    	-moz-transition: all .5s ease-out;
    	-o-transition: all .5s ease-out;
    	transition: all .5s ease-out;
	}
	.fall-map .circle .county{
		color:#fff;
	}
	.fall-map .circle .num,
	.fall-map .circle .num2{
		font-weight: bold;
	}
	.fall-map .circle .num2,
	.fall-map .bay-area .num2,
	.fall-map .total-bay-area .num2,
	.fall-map .title2 {
		display: none;
	}
	.fall-map.build .circle .num,
	.fall-map.build .bay-area .num,
	.fall-map.build .total-bay-area .num,
	.fall-map.build .title {
		display: none;
	}
	.fall-map.build .circle .num2,
	.fall-map.build .bay-area .num2,
	.fall-map.build .total-bay-area .num2,
	.fall-map.build .title2 {
		display: block;
	}
	.fall-map .bay-area,
	.fall-map .total-bay-area{
		position: absolute;
		top:400px;
		left:50px;
		font-size: 2rem;
		line-height: 1.3em;
	}
	.fall-map .bay-area .num,
	.fall-map .bay-area .num2,
	.fall-map .total-bay-area .num,
	.fall-map .total-bay-area .num2{
		font-weight: bold;
		color:#E92A50;
	}
	.fall-map .circle.alameda {
		top:270px;
		left:560px;
		width: 197px;
		height: 197px;
	}
	.fall-map .circle.contra-costa {
		top:190px;
		left:560px;
		width: 158px;
		height: 158px;
	}
	.fall-map .circle.marin {
		top:200px;
		left:430px;
		width: 83px;
		height: 83px;
	}
	.fall-map .circle.napa {
		top:100px;
		left:530px;
		width:47px;
		height: 47px;
	}
	.fall-map .circle.san-francisco {
		top:280px;
		left:380px;
		width: 134px;
		height: 134px;
	}
	.fall-map .circle.san-mateo {
		top:380px;
		left:440px;
		width: 126px;
		height: 126px;
	}
	.fall-map .circle.santa-clara {
		top:420px;
		left:600px;
		width: 200px;
		height: 200px;
	}
	.fall-map .circle.solano {
		top:120px;
		left:600px;
		width: 84px;
		height: 84px;
	}
	.fall-map .circle.sonoma {
		top:70px;
		left:380px;
		width: 113px;
		height: 113px;
	}
	.fall-map.build .circle.alameda {
		top: 350px;
    	left: 640px;
		width: 26px;
		height: 26px;
	}
	.fall-map.build .circle.contra-costa {
		top: 235px;
		left: 605px;
		width: 57px;
		height: 57px;
	}
	.fall-map.build .circle.marin {
		top:235px;
		left:465px;
		width: 15px;
		height: 15px;
	}
	.fall-map.build .circle.napa {
		top:110px;
		left:540px;
		width:27px;
		height: 27px;
	}
	.fall-map.build .circle.san-francisco {
		top: 300px;
    	left: 430px;
		width: 83px;
		height: 83px;
	}
	.fall-map.build .circle.san-mateo {
		top: 410px;
    	left: 510px;
		width: 32px;
		height: 32px;
	}
	.fall-map.build .circle.santa-clara {
		top: 470px;
    	left: 650px;
		width: 72px;
		height: 72px;
	}
	.fall-map.build .circle.solano {
		top: 145px;
    	left: 625px;
		width: 34px;
		height: 34px;
	}
	.fall-map.build .circle.sonoma {
		top:94px;
		left:404px;
		width: 37px;
		height: 37px;
	}
	
}
@media screen and (min-width: 1340px) {

	/* Tableau
	--------------------------------------------- */

	
	.sticky-panel-inner {
		width: 100vw;
		max-width: 1300px;
		margin-right: auto;
		margin-left: calc(50% - 650px);
		position: relative;
	}
	.tableau-sticky {
		width: 875px;
		right: calc(50% - 650px);
	}
	.sticky-pane {
    	width: 375px;
	}
	.display-font {
		font-size: 1.6rem;
	}
	.sheltered-icons > div{
		width: 80px;
		height: 73px;
	}
	.fall-col-label {
		font-size: 1.4rem;
	}
	
}
@media screen and (min-width: 1440px) {
	
	.logo-wrap-home {
		left:6%;
	}

	/* Tableau
	--------------------------------------------- */

	
	.sticky-panel-inner {
		width: 100vw;
		max-width: 1400px;
		margin-right: auto;
		margin-left: calc(50% - 700px);
		position: relative;
	}
	.tableau-sticky {
		width: 900px;
		right: calc(50% - 700px);
	}
	.sticky-pane {
    	width: 400px;
	}
	.display-font {
		font-size: 2.2rem;
	}
	.tableau-filter-wrap > .col {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 1em;
	}
	.tableau-filter-wrap .label {
		margin-top: 0;
		padding-right: .3em;
	}
	.tableau-filter > div {
    	padding: .2em .4em .1em .4em;
	}
	.shortfall .renter {
		margin: 0 0 0 17%;
	}
	.shortfall .rentals {
		margin: 0 0 0 17%;
	}
	.fall-col-label {
		font-size: 1.5rem;
	}
	.hero-button.impactful-efforts {
		background-image: url('https://ae4762.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow1.png');
		background-position: 0 0;
		background-size: contain;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 310px;
    	left: 960px;
	}
	.hero-button.challenges {
		background-image: url('https://aa052e.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow2.png');
		background-position: 0px 45px;
		background-size:110px auto;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 500px;
    	left: 1170px;
}
	.hero-button.bay-area {
		background-image: url('https://e7a637.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow3.png');
		background-position: 0px 35px;
		background-size:160px auto;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 500px;
    	left: 750px;
	}
	.hero-button.prevention {
		background-image: url('https://b0f86e.claudeassets.com/20250621070857im_/https://housingimpactbayarea.org/wp-content/themes/hbportal/images/shadow4.png');
		background-position: 0px 35px;
		background-size:130px auto;
		background-repeat: no-repeat;
		width: 225px;
		height: 130px;
		top: 650px;
    	left: 960px;
	}
	.shortfall_bars .icons {
		margin-left: 30%;
	}
	.shortfall_bars .fall-col-label {
		margin-left: 15%;
	}
	.shortfall_bars .fall-col-label:nth-child(2) {
		margin-left: 18%;
	}
}
/*
     FILE ARCHIVED ON 12:33:26 May 03, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 06:34:52 Sep 17, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.79
  exclusion.robots: 0.071
  exclusion.robots.policy: 0.054
  esindex: 0.013
  cdx.remote: 45.941
  LoadShardBlock: 208.563 (3)
  PetaboxLoader3.datanode: 128.495 (4)
  PetaboxLoader3.resolve: 300.563 (2)
  load_resource: 441.98
*/