@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@400;700&family=Oleo+Script:wght@400;700&family=Ubuntu:wght@300;500;700&display=swap'); @import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css'); :root{ --primary: #004ea8; /* Blue */ --primaryDark: #081d4d; /*Dark Blue*/ --secondary: #4e008e; /* Purple */ --accent: #007367; /* Green */ --opaque: rgba(78, 0, 142,0.9); --black: #000000; --white: #FFFFFF; --text: #222222; --mainFont: 'Ubuntu', sans-serif; --headingFont: 'Oleo Script', cursive; --condensedFont: 'Fira Sans Extra Condensed', sans-serif; /*override Bootstrap color and font settings as needed*/ /*--bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));*/ } /*############################################### # SITEWIDE STYLES ###############################################*/ body { background-color: var(--white); color: var(--text); font-size: 16px; font-weight: 300; min-width: 300px; font-family: var(--mainFont); position:relative; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); } a:hover { color: var(--primaryDark); } h1, h2, h3 .ptitles { font-family: var(--headingFont); color: var(--primary); line-height: 2.1rem; margin-bottom: 15px; } h4, h5, h6 .subtitles { font-family: var(--mainFont); color: var(--accent); } .h1, h1 { font-size: 2.2rem; } .condensed { font-family: var(--condensedFont); font-weight: 400; line-height: 1.2em; } .subtitles { font-size: 21px; font-weight: 500; color: var(--accent); } .htitle { margin: 0; } img { max-width: 100%; border: none; } .size16 {font-size: 16px;} .size18 {font-size: 18px;} .size20 {font-size: 20px;} .size22 {font-size: 22px;} .size24 {font-size: 24px;} .size26 {font-size: 26px;} .size28 {font-size: 28px;} .size30 {font-size: 30px;} .size32 {font-size: 32px;} .size34 {font-size: 34px;} .size36 {font-size: 36px;} .size42 {font-size: 42px;} .body-col { overflow: hidden; } /*############################################### # HEADER AND MENU STYLES ###############################################*/ header{ font-weight: 700; } .logo-main { max-width: 290px; padding: 5px; } .nav-item { padding: 0; } .nav-link { color: var(--secondary); } .accentLink { color: var(--accent); text-decoration: none; } .accentLink:hover { color: var(--primary); } .primaryLink { color: var(--primary); text-decoration: none; } .primaryLink:hover { color: var(--accent); } .top-nav .nav-link { padding-left: 0.6rem; padding-right: 0.6rem; } /*Make BS dropdowns show on hover*/ .dropdown:hover > .dropdown-menu, .dropdown:focus > .dropdown-menu, .dropdown:focus-within > .dropdown-menu { display: block; } .dropdown-menu { background: var(--primary); color: var(--white); padding: 0; border-radius: 0; position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(90px, 40px); } .dropdown-toggle::after { display: none !important; } .dropdown-item { font-weight: 500; color: var(--white); } /*.dropdown-menu > *:not(:last-child) { border-bottom: 1px solid var(--white); }*/ .dropdown-item:focus, .dropdown-item:hover { color: var(--white); background-color: var(--secondary); text-decoration: underline; } .menu-trigger, .menu-trigger:hover { display: inline-block; cursor: pointer; color: inherit; text-decoration: none; } .menu-bar { height: 4px; background: #FFFFFF; margin-top: 6px; } .menu-bar-wrapper { width: 28px; margin-right: 2px; display: inline-block; } .menu-text { display: inline-block; position: relative; bottom: 8px; font-weight: 700; } .topbar { background: var(--secondary); color: var(--white); padding: 4px 15px; } .topbar a { margin-right: 10px; color: var(--white); } .header-main { padding: 10px 0 0 0; background: #FFFFFF; background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(208,238,238,1) 90%); } .hero-section { width: 100%; height: auto; border-top: 10px solid var(--secondary); border-bottom: 10px solid var(--secondary); } .hero-section img { width: 100%; } #mobile-sticky-top { padding:10px; position:relative; color:#FFFFFF; } #mobile-sticky-top { position:fixed; display: none; background-color: var(--opaque); z-index: 100; width:100%; left:0; top:0; padding: 10px 15px; -webkit-box-shadow:0 0 10px 0 #000000; -moz-box-shadow:0 0 10px 0 #000000; box-shadow:0 0 10px 0 #000000; } #mobile-sticky-top img { max-width: 190px; } #search { border: solid 3px #4c2b71; } #searchForm { display:inline-block; position:relative; vertical-align:middle; width: 100%; margin: 0 !important; } .search-input { padding:3px !important; position:relative !important; height:31px !important; margin-bottom:0 !important; width:100%; color:#335e13; } .search-button { color:#000 !important; padding:0; box-shadow: none !important; background-color: transparent !important; border: none; } .search-submit { position:absolute; top:4px; right:7px; width: auto !important; padding: 0 !important; background: transparent !important; } .interior-page .homepage-cta { display: none; } .interior-page .inside-bar { display: block; height: 10px; background: var(--secondary); } /*############################################### # MOBILE MENU ###############################################*/ #mobile-menu { width: 300px; background: var(--white); font-weight: 500; position: relative; overflow: auto; height: 100vh; } #mobile-menu a { cursor: pointer; text-decoration: none; } .mm-link { position: relative; display: block; padding: 9px 15px; color: var(--primaryDark); border-bottom: 1px solid var(--secondary); } .mm-link:hover { background: var(--secondary); color: var(--white); } .mask { position: absolute; top: 0; left: 300px; width: calc(100vw - 300px); height: 100vh; background: rgba(0,0,0,0.6); z-index: 999999; } .mm-close-block { background: var(--secondary); color: var(--white); padding: 3px 15px; } .mm-close-block a { color: var(--white); } .facebook-fc { color: #1877f2; z-index: 20000; font-size: 24px; width: 23px; height: 23px; background: #FFFFFF; border-radius: 50%; } #mm-nav .mm-link:nth-child(1), #mm-nav .mm-link:nth-child(2) { background: var(--primary); color: var(--white); text-align: center; border-bottom: 1px solid var(--white); } #mm-nav .mm-link:nth-child(1):hover, #mm-nav .mm-link:nth-child(2):hover { background: var(--primaryDark); } /*############################################### # BODY STYLES ###############################################*/ #homeText, #interior { padding: 40px 0; background: #FFFFFF; background: linear-gradient(180deg, rgba(208,238,238,1) 10px, rgba(255,255,255,1) 100px); width: 100vw; min-height: 400px; } #pagesContainer { display: block; } .homeMapCol { border-left: none; border-top: 2px solid var(--secondary); } .homeMapCol img { margin: 0 auto 25px auto; } .mapContainer { position: relative; margin: 0 auto; text-align: center; } .mapText { position: relative; font-size: 23px; font-family: var(--headingFont); color: var(--primary); text-align: center; line-height: 23px; margin-bottom: 30px; } .mapTextIntro { color: var(--accent); font-family: var(--mainFont); font-weight: 700; font-size: 17px; } #pages-menu { display: none; } .pages-menu-sub a { display: block; color: var(--accent); font-weight: 500; text-decoration: none; padding: 4px 8px; border-radius: 4px; width: 250px; } .pages-menu-sub a:hover { background: var(--secondary); color: var(--white); } #pages-menu-heading a { display: block; color: var(--primary); font-family: var(--headingFont); font-size: 28px; text-decoration: none; padding: 4px 8px; border-radius: 4px; width: 250px; line-height: 1.7rem; } #pages-menu-heading a:hover { background: var(--primary); color: var(--white); } #accessibility { scroll-margin-top: 80px; } .mission-box { background: var(--accent); color: var(--white); padding: 20px 20px 5px 20px; border-radius: 10px; line-height: 1.2em; } .btn-group-custom>.btn, .btn-custom { display: block; padding: 10px 2px; font-size: 1rem; width: 100%; border-radius: 0; margin: 3px 0; text-decoration: none; text-align: center; } .btn-custom-primary { background-color: var(--primary); color: var(--white); } .btn-custom-primary:hover, .btn-custom-primary:focus { background-color: var(--primary); color: var(--white); filter: brightness(1.2); } .btn-custom-primary-dark { background-color: var(--primaryDark); color: var(--white); } .btn-custom-secondary { background-color: var(--secondary); color: var(--white); } .btn-custom-accent { background-color: var(--accent); color: var(--white); } .break_md { display: block; height: 0; overflow: hidden; } .contact-information { margin: 20px auto; } /*############################################### # CONTACT FORM STYLES ###############################################*/ .col-lg-6 h3 { margin: 0 0 10px 0; line-height: 1.0rem; font-size: 1.0rem; } .customFormTranslateButton { font-size: 16px; color: #FFFFFF; background: var(--primary); padding: 3px 10px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease-in-out; } .customFormTranslateButton:hover { color: #FFFFFF; text-decoration: none; filter: brightness(1.2); } .contact_us .formOuterWrapper { position: relative; padding: 20px 10px 0 10px; border-left: 1px solid #333333; border-bottom: 1px solid #333333; border-right: 1px solid #333333; margin: 10px auto 30px auto; } .contact_us .formOuterWrapper::before { content: " "; position: absolute; top: 0; left: 0; width: 28px; border-top: 1px solid #333333; } .contact_us .formOuterWrapper::after { content: " "; position: absolute; top: 0; right: 0; width: calc(100% - 165px); border-top: 1px solid #333333; } .contact_us .formWrapper::before { position: absolute; display: inline-block; top: -22px; left: 20px; content: "Contact Us"; padding: 0px 10px; font-size: 28px; font-family: var(--headingFont); color: var(--primary); font-weight: 900; } .contact_us h1.ptitles { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .contact_us h3 { font-size: 28px; font-family: var(--headingFont); color: var(--primary); font-weight: 900; } .contact_us #printButton { display: none; } /*############################################### # FOOTER STYLES ###############################################*/ footer { padding: 20px 0 40px 0; background: #004ea8; background: linear-gradient(90deg, rgba(0,78,168,1) 0%, rgba(0,115,103,1) 50%, rgba(0,78,168,1) 100%); color: var(--white); } footer a { color: var(--white); } footer a:hover { color: var(--white); text-decoration: none; } .logo-footer { max-width: 290px; padding: 5px; } #footerPhone { border-right: none; } .equal-housing-block a { color: var(--white); text-decoration: none; } .equal-housing-block a { color: var(--white); text-decoration: underline; } .housing-icon { width: 30px; height: auto; } .address-block { line-height: 1.2em; margin: 12px auto; } /*############################################### # INTERACTIONS AND ANIMATIONS ###############################################*/ .ease { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .zoom:hover { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -o-transform: scale(1.03); -ms-transform: scale(1.03); transform: scale(1.03); } .rise:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .rise:focus { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .rise:focus-within { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } /*############################################### # HTML FORMS ###############################################*/ form { margin: 0 0 1rem; } /* Using forms within rows, we need to set some defaults */ form .row .row { margin: 0 auto; } form .row .row.collapse { margin: 0; } form .row .row.collapse .column, form .row .row.collapse .columns { padding: 0; } form .row .row.collapse input { -moz-border-radius-bottomright: 0; -moz-border-radius-topright: 0; -webkit-border-bottom-right-radius: 0; -webkit-border-top-right-radius: 0; } /* Label Styles */ label { margin-bottom: 0.5rem; /* Styles for required inputs */ } label.right { float: none; text-align: right; } label.inline { margin: 0 0 1rem 0; padding: 0.625rem 0; } label small { text-transform: capitalize; color: #666666; } select { -webkit-appearance: none !important; /*background: #fafafa url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") no-repeat; background-position-x: 97%; background-position-y: center;*/ border: 1px solid #cccccc; padding: 0.5rem; font-size: 0.875rem; -webkit-border-radius: 0; border-radius: 0; } select.radius { -webkit-border-radius: 3px; border-radius: 3px; } select:hover { /*background: #f2f2f2 url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") no-repeat; background-position-x: 97%; background-position-y: center;*/ border-color: #999999; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } input[type="submit"] { display: block; width: 310px; margin: 10px auto; padding: 5px; background: var(--primary); color: var(--white); } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ min-height: 100px; } /* We use this to get basic styling on all basic form elements */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; background-color: white; font-family: inherit; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); display: block; font-size: 100%; /*0.875rem*/ margin: 0 0 0.1rem 0; padding: 0.5rem; height: 2.3125rem; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out; -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out; transition: box-shadow 0.45s, border-color 0.45s ease-in-out; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus { -webkit-box-shadow: 0 0 5px #003366; -moz-box-shadow: 0 0 5px #003366; box-shadow: 0 0 5px #003366; border-color: #003366; background: #fafafa; } input[type="text"][disabled], input[type="password"][disabled], input[type="date"][disabled], input[type="datetime"][disabled], input[type="datetime-local"][disabled], input[type="month"][disabled], input[type="week"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="time"][disabled], input[type="url"][disabled], textarea[disabled] { background-color: #dddddd; } /* Adjust margin for form elements below */ input[type="file"], /*input[type="checkbox"],*/ input[type="radio"], select { margin: 0 0 1rem 0; } input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; /*margin-left: 0.5rem; margin-right: 1rem;*/ margin-bottom: 0; vertical-align: baseline; } label { /* custom */ display: block; margin: 5px 0; } /* We add basic fieldset styling */ fieldset { border: solid 1px #dddddd; padding: 1.25rem; margin: 1.125rem 0; } fieldset legend { font-weight: bold; /*background: white;*/ padding: 0 0.1875rem; margin: 0; margin-left: -0.1875rem; } /* Normalize file input width */ input[type="file"] { width: 100%; } /* placeholder styling */ ::-webkit-input-placeholder { color: #777; opacity: 1; } :-moz-placeholder { /* Firefox 18- */ color: #777; opacity: 1; } ::-moz-placeholder { /* Firefox 19+ */ color: #777; opacity: 1; } :-ms-input-placeholder { color: #777; opacity: 1; } #map-map { height: 400px !important; } /*############################################### # TABLES ###############################################*/ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /*############################################### # MEDIA QUERIES / RESPONSIVE CLASSES ###############################################*/ /* No media query for SMARTPHONE VIEW `xs` since this is the default in Bootstrap */ /* Small devices (TABLET VIEW, 576px and up) */ @media (min-width: 576px) { .logo-main { max-width: 350px; } .logo-footer { max-width: 300px; } .mapContainer { position: relative; max-width: 500px; margin: 0 auto; text-align: left; } .homeMapCol img { max-width: 75%; margin: 0 0 50px 0; } .mapText { position: absolute; bottom: 40px; left: 41%; text-align: left; min-width: 300px; margin-bottom: 0; } .mapTextIntro { padding-left: 50px; } .mapText1 { padding-left: 30px; } } /* Medium devices (larger tablets, 768px and up) */ @media (min-width: 768px) { .header-main { padding: 10px; } .btn-group-custom>.btn, .btn-custom { display: inline-block; width: auto; padding: 1px 15px; border-radius: 6px; margin: 0 5px; } #footerPhone { border-right: 1px solid var(--white); } .interior-page .homepage-cta { display: block; } } /* Large devices (LAPTOP VIEW, 992px and up) */ @media (min-width: 992px) { #search { position: absolute; right: 20px; top: 55px; z-index: 20; } #pagesContainer { display: flex; } #pages-menu { display: block; padding-right: 30px; border-right: 2px solid var(--secondary); margin-right: 30px; } .homeMapCol { border-left: 2px solid var(--secondary); border-top: none; } .break_md { display: inline; height: auto; } } /* large devices ONLY */ @media (min-width: 992px) and (max-width: 1199px) { .homeMapCol img { margin: 0 auto 5px auto; } .mapContainer { position: relative; margin: 0 auto; text-align: center; } .mapText { position: relative; bottom: auto; left: auto; font-size: 23px; text-align: center; line-height: 23px; margin-bottom: 30px; } .mapTextIntro { padding-left: 0; } .mapText1 { padding-left: 0; } } /* X-Large devices (DESKTOP VIEW, 1200px and up) */ @media (min-width: 1200px) { } /* XX-Large devices (larger desktops, 1400px and up) */ @media (min-width: 1400px) { }