/*Moved to headcode-bs5 - snippets/accordions.css */
/*Moved to headcode-bs5 -  snippets/buttons.css */
/*Moved to headcode-bs5 -  components-all.css */

/*
Last Updated: Feb 17, 2026

Harper College Website CSS

Table of Contents:
	Print Styles
	Elements
	Component Controls
	fonts
	links
	layout adjustments
	emergency
	main content padding
	faculty profile grid
	images
	header
	footer
	subpage - intro section
	Bootstrap style adjustments
	Page Specific styles
	Jobs template page in about/directory/hr/jobs/jobs.php
	Responsive styles
*/

/* ==========================================================================CSS Custom Properties========================================================================== */
:root {
	--light-gray: #e1e1e1;
	--hblue: #003366;
	--nav-blue: #335B84;
	--white: #FFFFFF;
	--pop: #b6cc2c;
	--font-primary: nimbus-sans-n4, nimbus-sans, "Helvetica Neue", Helvetica, Arial, "Droid Sans", sans-serif;
}
/* ==========================================================================Reset & Base Elements========================================================================== */
* {
	box-sizing: border-box;
	font-family: var(--font-primary);
	letter-spacing: -0.3px;
}
html, body {
	padding: 0;
	margin: 0;
	height: 100%;
	font-size: 1em;
}
body {
	background: #fff;
	color: #000;
	line-height: 1.3em;
}
::selection {
	background: #00508A;
	color: #FFF;
}
/* ==========================================================================Typography — Headings========================================================================== */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.3em;
	margin: 0;
	padding: 0;
	font-weight: 500;
}
h1 {
	font-size: 2.5em;
	color: #036;
	font-weight: 700;
	margin: 20px 0 0;
	padding: 0 0 0.5em;
	letter-spacing: -1.7px;
}
h2 {
	font-size: 2.25em;
	color: #036;
	font-weight: 700;
	margin: 20px 0 0;
	padding: 0 0 0.5em;
	letter-spacing: -1.7px;
}
h3 {
	font-size: 2em;
	color: #000;
	font-weight: 500;
	margin: 20px 0 0;
	padding: 0 0 0.5em;
	letter-spacing: -0.04em;
}
h4 {
	font-size: 1.75em;
	color: #3F3F3F;
	font-weight: 500;
	margin: 18px 0 5px;
}
h5 {
	font-size: 1.5em;
	color: #494747;
	font-weight: 500;
	margin: 28px 0 0;
}
h6 {
	font-size: 1.375em;
	color: #494747;
	font-weight: 500;
	margin: 28px 0 0;
	font-style: italic;
}
/* Heading Links — WCAG-Compliant */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #05A;
	font-weight: 700;
	text-decoration: underline;
	transition: color 0.2s ease, text-decoration 0.2s ease;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
	color: #024;
	text-decoration: none;
	outline: 3px solid #FFA500;
	outline-offset: 2px;
}
/* ==========================================================================Typography — Body Text========================================================================== */
p {
	font-size: 1.24em;
	color: #1C1C1C;
	line-height: 1.86em;
	font-weight: 100;
	margin: 0px 0px 10px 0px;
	padding: 0 0 6px;
}
sup {
	line-height: 1.5em;
}
b, strong {
	font-weight: 700;
}
/* ==========================================================================Links========================================================================== */
a {
	overflow-wrap: anywhere;
	word-break: break-word;
	text-decoration: unset;
}
a, ul.list-unstyled li a {
	color: #076AB0;
	font-weight: 500;
}
a:focus, a:hover {
	color: #036;
	text-decoration: none;
	border-bottom: 2px dotted #036;
}
a:hover:has(img) {
	border-bottom: 0px dotted #036;
}
li a {
	border-bottom: 2px dotted #076AB0;
	min-height: 24px;
}
ol a, p a {
	font-weight: 700;
	border-bottom: 2px dotted #076AB0;
	text-decoration: none;
	overflow-wrap: break-word;
}
ul.normal a {
	border-bottom: none;
}
/* ==========================================================================Lists========================================================================== */
ul, ol, dl, dd {
	font-size: 1.24em;
	line-height: 1.3em;
	font-weight: 300;
}
li {
	line-height: 1.3em;
	font-weight: 100;
	margin: 0;
	padding: 0 0 10px;
}
li.grey-text-treatment {
	margin: 0;
	padding: 0 0 10px;
}
ul li ul, ul li ul li {
	font-size: 1em;
}
li ul li {
	font-size: .8em;
	margin-top: 10px;
}
ul ul li {
	font-size: .8em;
}
li h2 {
	font-size: 1.3em;
	font-weight: 600;
	color: #036;
}
li h3 {
	font-size: 1.1em;
	font-weight: 600;
	color: #036;
}
li h4 {
	font-size: 1em;
	font-weight: 600;
	color: #036;
}
li p {
	font-size: 1em;
	margin: 0px;
	padding: 0px;
}
li:has(p) {
	margin: 0px;
	padding: 0px;
}
ol ol, ol ul, ul ol, ul ul {
	font-size: 1em;
	margin-top: 1rem;
}
.align-bullets {
	list-style-position: inside;
}
.hide-bullets {
	list-style: none;
}
section ol li, section ul li {
	margin-bottom: 5px;
}
/* ==========================================================================Images & Figures========================================================================== */
figure {
	border: 0px;
	text-align: center;
}
figure:has(figcaption) {
	border: 1px solid #ccc;
	text-align: center;
}
li figure {
	margin-top: 20px;
}
figure img {
	max-width: 100%;
}
.figure-left {
	float: left;
	margin: .5rem 1rem 1rem 0;
	max-width: 450px;
}
.figure-left-250 {
	float: left;
	margin: .5rem 1rem 1rem 0;
	max-width: 250px;
}
.figure-left-350 {
	float: left;
	margin: .5rem 1rem 1rem 0;
	max-width: 350px;
}
.figure-right {
	float: right;
	margin: .5rem 0 1rem 1rem;
	max-width: 450px;
}
.figure-right-250 {
	float: right;
	margin: .5rem 0 1rem 1rem;
	max-width: 250px;
}
.figure-right-350 {
	float: right;
	margin: .5rem 0 1rem 1rem;
	max-width: 350px;
}
.figure-350 img {
	max-width: 350px;
	padding: 10px;
}
figure:has(> img:nth-child(3):last-child) img {
	width: 30%;
	margin: 10px 10px;
	min-width: 250px;
}
figure:has(> img:nth-child(3):last-child) {
	border: 0px;
}
figcaption {
	line-height: 1.2em;
	font-size: 1em;
	margin: 10px;
}
figcaption p {
	line-height: 1.2em;
	font-size: 1em;
	margin: 10px;
}
h1+img, span.img-responsive img {
	display: block;
	height: auto;
	max-width: 100%;
}
.img-responsive {
	width: 100%;
	height: auto;
}
span.img-responsive img {
	display: block;
	height: auto;
	width: 100%;
	padding: 0;
	margin: 0;
}
section span.nostretch img {
	width: inherit;
}
.horizontal-align {
	display: flow-root;
	margin: 0px auto;
	width: fit-content;
}
.horizontal-align {
  display: flex;
  gap: 1rem;             
}

.horizontal-align figure {
  display: flex;
  flex-direction: column;
  flex: 1;              
}

.horizontal-align img {
  width: 100%;
  height: auto;
}
		
.horizontal-align figcaption h3 {
  margin: 0 0 0.5rem 0;
}

.horizontal-align img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
		
figcaption h3 {font-size: 1.6em;}


/* Deprecated image classes — kept for backward compatibility */
.profile {
	float: left;
	margin: 35px 20px 20px 0px;
}
.float-right {
	float: right;
	margin: 10px 0px 20px 20px;
}
.float-left {
	float: left;
	margin: 10px 20px 20px 0px;
}
.pull-right {
	float: right;
	margin: 27px 0px 20px 20px;
}
.pull-left {
	float: left;
	margin: 9px 20px 20px 0px;
}
.pull-right img {
	margin: 0px 0px 10px 20px;
}
.pull-left img {
	margin: 0px 20px 10px 0px;
}
.linked-image, .linked-image:hover {
	border-bottom: 0px;
}
.linked-image img:hover {
	border: #000 solid 2px;
}
/* ==========================================================================Utility Classes========================================================================== */
/* Text */
.centered {
	text-align: center;
}
.centered-margin {
	margin: 0 auto;
}
.nowrap {
	white-space: nowrap;
}
.weight600 {
	font-weight: 600;
}
.font-size-large {
	font-size: 2em;
}
.bold-statement p {
	text-align: center;
	font-size: 2em;
}
.harper-blue {
	color: #036;
}
.indented {
	padding-left: 40px;
}
.clear-left {
	clear: left;
}
.white-text {
	color: #fff;
}
.bold-text-header {
	font-size: 32px;
	font-weight: bold;
	padding: 0 0 18px;
	letter-spacing: -0.03em;
}
/* Block */
.inline-block {
	display: inline-block;
}
.left {
	float: left;
}
.right {
	float: right;
}
.spacer {
	margin-top: 20px;
	border-top: none;
}
.spacer40 {
	margin-top: 40px;
	border-top: none;
}
.spacer-bottom {
	margin-bottom: 20px;
}
.margin10 {
	margin: 10px;
}
.border-none {
	border:none;
}
.indent {
	padding-left: 40px;
}
.indent-list {
	padding-left: 60px;
}
.block {
	height: 40px;
}
/* Highlighted */
.highlighted {
	background-color: yellow;
	color: black;
}
.highlighted-blue {
	background-color: #00fff7;
	color: black;
}
/* ==========================================================================Hidden Elements & Display Control========================================================================== */
.hidden {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#custom-alert-box.hidden, h1.hidden, .breadcrumb.hidden {
	display: none;
}
#hidden {
	display: none;
}
.display-none, .random, .hide, #text-only-mode, .component-display-none {
	display: none;
}
h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty,li:empty, p:empty, tbody:empty, ul:empty {
	display: none;
}
a[href="mailto:"] {
	visibility: hidden;
}
img[src=""] {
	visibility: hidden;
}
.component-display-inital {
	display: initial;
}
.component-display-inline-block {
	display: inline-block;
}
/* ==========================================================================Fonts========================================================================== */
.garamond-regular {
	font-family: "adobe-garamond-pro", serif;
	font-weight: 400;
	font-style: normal;
}
.garamond-bold {
	font-family: "adobe-garamond-pro", serif;
	font-weight: 700;
	font-style: normal;
}
.nimbus-condensed-regular {
	font-family: "nimbus-sans-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.nimbus-condensed-bold {
	font-family: "nimbus-sans-condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
}
/* ==========================================================================Breadcrumb========================================================================== */
.breadcrumb {
	color: #1C1C1C;
	font-size: 0.7em;
	padding-top: 20px;
}
.breadcrumb>li {
	display: inline-block;
	font-size: 1.5em;
}
.breadcrumb>li+li:before {
	padding: 0 5px;
	color: #ccc;
	content: "/\00a0";
}
.breadcrumb a {
	border-bottom: none;
	color: var(--hblue);
}
.breadcrumb a:hover {
	text-decoration: underline;
	color: var(--nav-blue);
}
.breadcrumb .active {
	color: var(--nav-blue);
	font-size: 1.56em;
}
hr {
	border-top: 1px solid #a7a9ac;
}
.disclaimer {
	font-size: .8em;
	font-weight: bold;
	text-align: center;
}
/* ==========================================================================Content Boxes (Universal Template backgrounds)========================================================================== */
[class^="content-box-"] {
	width: 100%;
	background: #fff;
	z-index: -1;
	margin-top: 0px;
	overflow: auto;
	margin-bottom: 0px;
}
[class^="content-box-"] .row.page_content.row {
	background: transparent;
}
[class^="content-box-"] .container .row p:first-child {
	padding-top: 30px;
}
[class^="content-box-"] .container .row p:last-child {
	padding-bottom: 0px;
}
/* ==========================================================================Box Styles========================================================================== */
.box-style-grey-gradient,.box-style-purple,.box-style-grey,.box-style-maya-blue,.box-style-light-blue,.box-style-harper-blue {
	overflow: auto;
}
.box-style-grey-gradient {
	background: #ffffff;
	background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 74%, #e5e5e5 100%);
}
.box-style-purple {
	background: #85698C;
}
.box-style-purple h2, .box-style-purple p {
	color: #fff;
}
.box-style-grey {
	background: #E5E5E5;
}
.box-style-grey p {
	color: #000;
}
.box-style-maya-blue {
	background: #66cbff;
}
.box-style-maya-blue a {
	color: #036;
	border: none;
}
.box-style-maya-blue p {
	color: #000;
}
.box-style-light-blue {
	background: #79cdef;
	padding: 0;
	margin: 0;
}
.box-style-impact-blue {
	background: #4667a5;
}
.box-style-harper-blue {
	background: #036;
}
.box-style-no-padding {
	margin-bottom: 0px;
}
.box-style-no-padding .container {
	width: 100%;
}
.box-style-no-padding-margin {
	margin: 0;
	padding: 0!important;
}
.box-style-purple .col-xs-12.col-sm-12.col-md-4,.box-style-grey .col-xs-12.col-sm-12.col-md-4 {
	padding-top: 20px;
}
.box-style-purple .col-xs-12.col-sm-12.col-md-8,.box-style-grey .col-xs-12.col-sm-12.col-md-8 {
	padding: 20px 0;
}
/* Open Class List */
.box-style-hidden-controls .open-course-search-container p {
	display: none;
}
/* ==========================================================================Buttons========================================================================== */
button.btn.btn-large.btn-primary-grey.white a {
	border-bottom: none;
}
.btn.white a {
	color: #FFF;
}
.btn-primary-grey {
	color: #FFF;
	background: #545454;
	font-size: 1.2em;
}
.btn-primary-grey:hover, .btn-primary-grey:focus {
	color: #FFF;
	background: #262626;
}
/* MERGED: button.btn.btn-default (was defined twice) */
button.btn.btn-default {
	height: 25px;
	border-radius: 0;
	margin: 10px 0 0 0;
	padding: 2px 6px;
	border-style: none;
	color: #333;
	background: #FFF;
	float: left;
}
.bttn {
	display: inline-block;
	margin-bottom: 0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 0;
	padding: 0;
	line-height: 1.2em;
}
a:has(button.btn.btn-large.btn-primary.white) {
	border-bottom: none;
}
button.btn.btn-large.btn-primary.white {
	display: inline-block;
}
button.btn.btn-large.btn-primary.white a {
	padding-top: 1px;
}
.btn.btn-large.btn-primary.white span {
	color: #fff;
}
button, html input[type=button], input[type=reset], input[type=submit] {
	cursor: pointer;
	font-weight: 500;
}
input {
	line-height: normal;
	margin: 10px 10px 0px 0px;
}
/* Adult button */
.adult-button-fix {
	background: #060;
	border-color: #060;
	border-radius: 10px;
	font-size: 16px;
	width: 100%;
}
a.adult-button-fix {
	border-bottom: 0px;
}
/* Vet Red Star */
.vet-red-stars a {
	border-bottom: none;
}
p .fa-star {
	padding: 6px;
	margin-right: 6px;
	background-color: #d43f3a;
	color: #fff;
	border-radius: 6px;
}
/* ==========================================================================Layout — Main Content========================================================================== */
body section #main_content, body section #main {
	background: transparent;
	padding-bottom: 20px;
}
body section #main_content .row>.col-sm-12.col-md-12,body section #main .row>.col-sm-12.col-md-12 {
	padding-left: 15px;
	padding-right: 15px;
}
body section #main_content .row>.col-sm-12.col-md-9,body section #main_content .row>.col-sm-9.col-md-9,body section #main .row>.col-sm-12.col-md-9,body section #main .row>.col-sm-9.col-md-9 {
	padding-left: 30px;
	padding-right: 30px;
}
[class*="col-"] {
	min-height: 0px;
	float: left;
}
#main {
	padding: 0;
	float: right;
}
#main_content {
	padding: 0;
}
.content {
	width: 100%;
	margin-top: 200px;
	font-size: 20px;
}
.container-fluid {
	padding: 0;
}
.row {
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 0;
}
.row>* {
	padding: 0;
	margin: 0;
}
.container .row {
	width: 100%;
}
.row.page_content {
	padding: 0;
	margin: 0;
}
.col-sm-12.col-sm-push.col-md-12.col-md-push {
	padding-left: 40px;
	padding-right: 40px;
}
.non-bs-row {
	padding-left: 25px;
	width: 100%;
	float: left;
}
.profile_list {
	min-height: 120px;
}
.profile_list h3 {
	margin-top: 0;
}
/* ==========================================================================Header & Navigation========================================================================== */
header {
	display: flex;
	flex-direction: column;
	padding: 25px;
	background-color: #036;
}
.brand {
	width: fit-content;
	border: 1px transparent solid;
}
.brand:hover {
	border: 1px #fff solid;
}
.brand-dept {
	margin-top: 10px;
	padding-left: 62px;
}
.brand-dept, .brand-dept a {
	font-weight: 100;
	letter-spacing: -1px;
	line-height: 1em;
	font-size: 1.3em;
	color: #7BCDE1;
}
.brand-dept a:hover {
	text-decoration: underline;
}
/* Side Navigation */
.side-nav {
	position: fixed;
	background-color: #000;
	width: 340px;
	overflow: hidden;
	height: 100%;
	z-index: 200;
	right: 0;
	overscroll-behavior: contain;
	-ms-scroll-chaining: none;
}
.open-menu-side {
	position: relative;
	display: block;
	height: 80px;
	width: 100%;
	text-align: center;
	float: right;
}
/* Hamburger */
.hamburger {
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	background: transparent;
	float: right;
	border: 1px solid transparent;
	padding: 8px;
}
.hamburger:hover {
	border: 1px solid #fff;
}
.hamburger-box {
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
	color: #fff;
}
.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	width: 40px;
	height: 4px;
	background: #fff;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
}
.hamburger-inner::before, .hamburger-inner::after {
	content: "";
	display: block;
}
.hamburger-inner::before {
	top: -10px;
}
.hamburger-inner::after {
	bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
	transition-duration: 0.075s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
	transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze.is-active .hamburger-inner {
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
	top: 0px;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* Side nav list */
.side-nav-ul {
	list-style: none;
	font-size: 28px;
	color: #036;
	display: inline-block;
	line-height: 1.3em;
	margin: 0 20px;
}
.side-nav-ul li {
	font-size: 16px;
	line-height: 1.2em;
	font-weight: 500;
	text-transform: uppercase;
	padding: 0 0 10px 0;
	color: #fff;
}
.side-nav-ul hr {
	border-top: 1px solid #fff;
	width: 100%;
}
.side-nav-ul a {
	color: #fff;
}
/* Header icon container — MERGED (was defined twice) */
.header-nav-icons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.header-nav-icons .col-xs-4,.header-nav-icons .col-sm-4,.header-nav-icons .col-md-4 {
	padding: 6px;
	display: flex;
	justify-content: center;
}
.header-icon-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-size: .57em;
	line-height: .75em;
	margin: 10px 0px;
}
.header-icon-container a {
	padding: 0px;
	padding-bottom: 10px;
	width: 100%;
	display: block;
	font-size: .8em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
.header-icon-container a:hover {
	border: none;
	padding: 0px;
	padding-bottom: 10px;
	font-weight: 900;
}
.header-icon-container img {
	width: 90%;
	margin: 0 0 10px 0;
	background-size: 100%;
}
/* Nav icon spacer — MERGED (was defined twice) */
.nav-ico-spacer {
	background: #333;
	margin-bottom: 10px;
	padding: 12%;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
}
/* Sidenav icons — MERGED (was defined twice) */
.sidenav-icoblackboard, .sidenav-icocalendar, .sidenav-icoharperlogo,.sidenav-icohip, .sidenav-icolibrary, .sidenav-icomyharper {
	background-image: url(/images/sidenav-ico.png);
	background-size: cover;
	width: 100%;
	height: 100%;
}
.sidenav-icoharperlogo {
	background-position: 0 40%;
}
.sidenav-icomyharper {
	background-position: 0 100%;
}
.sidenav-icoblackboard {
	background-position: 0 0%;
}
.sidenav-icocalendar {
	background-position: 0 20%;
}
.sidenav-icolibrary {
	background-position: 0 80%;
}
.sidenav-icohip {
	background-position: 0 60%;
}
/* ==========================================================================Main Navigation (sub-nav)========================================================================== */
.sub-nav {
	float: left;
	width: 100%;
	font-size: 1.1em;
	background: var(--light-gray);
	color: #000;
	z-index: 1000;
}
.sub-nav ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 75px;
	z-index: 100;
}
.sub-nav li {
	float: left;
	padding: 0;
	position: relative;
	height: 60px;
}
.sub-nav a {
	float: left;
	text-decoration: none;
	margin: 15px;
	color: #000;
	font-size: clamp(1rem, 1rem + 0vw, 1rem);
	font-weight: 900;
}
.sub-nav a:hover {
	border-bottom: none;
}
.sub-nav a:focus, .sub-nav a:focus-visible {
	border: none;
}
/* Dropdown menus */
.sub-nav ul li ul {
	display: none;
	padding: 0;
	margin: 0;
	top: 0;
	width: 100%;
	line-height: 1em;
	border-radius: 0 0 10px 10px;
	border-top: var(--pop) solid 4px;
	margin-top: -4px;
}
.sub-nav > ul > li > ul {
	position: absolute;
	top: 60px;
	left: 0;
	min-width: 250px;
}
.sub-nav ul li ul li {
	width: 100%;
	height: unset;
	margin: 0;
	padding: 0;
	text-wrap: wrap;
	transition-duration: .5s;
	background: var(--hblue);
	border-top: 1px solid #fff;
}
.sub-nav ul li ul li:first-child {
	border-top: none;
}
.sub-nav ul li ul li a,.sub-nav > ul > li > ul > li > a {
	height: unset;
	display: block;
	line-height: 1.4em;
	width: fit-content;
}
.sub-nav ul li ul li a:hover,.sub-nav > ul > li > ul > li > a:hover {
	border: none;
	text-decoration: underline;
}
.sub-nav > ul > li:hover > ul,.sub-nav ul li ul li:hover ul {
	display: block;
}
.sub-nav ul li ul li:hover ul {
	position: absolute;
	left: 100%;
	min-width: 180px;
}
.sub-nav > ul > li:hover {
	background: #fff;
}
.sub-nav > ul > li:hover > a {
	color: var(--hblue);
}
.sub-nav li:hover {
	background: var(--nav-blue);
}
.sub-nav>ul>li>a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-bottom: 4px solid var(--pop);
	opacity: 0;
	transition: .3s;
}
.sub-nav>ul>li>a:hover::after {
	transform-origin: bottom;
	opacity: 1;
}
/* Desktop 2nd tier caret */
.sub-nav > ul > li > ul > li > a > span.fa-caret-down {
	color: #fff;
}
.sub-nav > ul > li > ul > li:hover > a > span.fa-caret-down {
	transform: rotate(-90deg) translateX(-2px);
	transition-duration: .45s;
}
.sub-nav ul li ul a {
	color: var(--white);
	text-decoration: none;
}
.sub-nav ul li ul li a {
	text-wrap: wrap;
	text-align: left;
	margin: 0.8em auto;
	width: 100%;
	padding: 0px 1.5em;
}
/* Rounding edges of dropdown */
.sub-nav ul > li > ul > li:last-child {
	border-bottom: none;
	border-radius: 0 0 10px 10px;
}
.sub-nav ul > li > ul > li:hover:has(ul) {
	border-radius: 0 0 0 10px;
}
.sub-nav ul > li > ul > li:hover > ul > li:hover {
	border-radius: 0;
}
.sub-nav ul > li > ul > li:hover > ul > li:last-child:hover {
	border-radius: 0 0 10px 10px;
}
/* Nav bar spacing */
nav#main-navigation.sub-nav {
	display: flex;
	justify-content: space-evenly;
	gap: 20px;
	align-items: center;
	text-wrap: nowrap;
}
.sub-nav ul {
	padding: 0 2.5em;
}
/* ==========================================================================Mobile Dropdown Menu========================================================================== */
.dropdown {
	display: none;
	width: 100%;
	position: relative;
}
#dropdownMenuButton {
	touch-action: manipulation;
	cursor: pointer;
	width: 100%;
	font-size: 1.1em;
	border-radius: 0px;
	color: #000;
	background-color: var(--light-gray);
	border: none;
	font-weight: 900;
}
@media (max-width: 480px) {
	#dropdownMenuButton {
		white-space: wrap;
	}
}
.dropdown-menu {
	border-radius: 0px;
	display: none;
	font-size: 1em;
	position: absolute;
	text-align: left;
	width: 100%;
	background: var(--light-gray);
	border-top: red;
}
.open > .dropdown-menu {
	display: block;
}
.dropdown-menu ul {
	display: none;
}
.dropdown-menu ul li:hover a {
	color: #fff!important;
}
.dropdown-menu a {
	padding: 8px 28px 8px 14px;
}
.dropdown-toggle::after {
	margin-left: 0.255em;
	border-top: unset;
	border-right: unset;
	border-bottom: unset;
	border-left: unset;
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	margin-top: -0.1em;
	transition-duration: .45s;
	color: var(--pop);
	padding: 0 0.3em;
}
.open .dropdown-toggle::after {
	transition-duration: .45s;
	transform: rotate(-180deg);
}
#dropdown > div li > a > span {
	transition-duration: .45s;
	color: var(--pop);
}
/* Mobile menu button interactions */
button:not(:disabled) + div li {
	border-bottom: none;
	min-width: 100%;
}
button:not(:disabled) + div li:last-child {
	border-bottom: none;
}
button:not(:disabled) + div,button:not(:disabled) + div a {
	text-align: left;
	border: none;
	font-size: 1em;
	color: #fff;
	padding: inherit;
}
button:not(:disabled) + div a {
	margin-left: 2em;
}
button:not(:disabled) + div>li>a:hover {
	color: #FFF;
}
/* Second tier mobile dropdown */
button:not(:disabled) + div li > a + ul {
	background: var(--light-gray);
	font-size: 1em;
	margin: 20px 0 0 0;
	text-wrap: wrap;
	padding: 0;
}
button:not(:disabled) + div li:last-child:hover,button:not(:disabled) + div li:last-child > a + ul {
	border-radius: 0 0 10px 10px;
	border-bottom: none;
}
button:not(:disabled) + div li > a + ul a,button:not(:disabled) + div li > a + ul a:hover {
	color: #000;
	text-align: left;
	padding: 0;
}
/* Third tier mobile */
button:not(:disabled) + div li > a + ul li:last-child ul {
	box-shadow: none;
}
button#dropdownMenuButton:not(:disabled) + div li ul li ul li,button#dropdownMenuButton:not(:disabled) + div li ul li ul li:hover {
	background: #fff !important;
	padding-top: 1px;
}
button:not(:disabled) + div li > a + ul li ul li a,button:not(:disabled) + div li > a + ul li ul li a:hover {
	color: var(--hblue);
	padding: 0 15px 0 2em;
}
button:not(:disabled) + div li > a + ul li ul li:last-child {
	padding: 0 0 10px 0;
}
/* Nav buttons */
#nav-button-box {
	float: left;
	display: none;
}
.hidden-on-desktop {
	display: none;
}
.hidden-on-mobile {
	max-height: 495px;
	overflow: hidden;
	position: relative;
	width: 100%;
	float: left;
	margin: auto !important;
}
.button-box-button-1, .button-box-button-2 {
	width: 150px;
	background: #236393;
	height: 42px;
	text-align: center;
	margin: 5px 15px 0px 0px;
	line-height: 2.3em;
	display: inline-block;
	vertical-align: middle;
	color: #68ccfe;
	font-size: 1.2em;
	font-weight: 900;
	text-transform: uppercase;
}
.button-box-button-1:hover, .button-box-button-2:hover {
	text-decoration: underline;
}
/* Menu CTA */
.menu-cta {
	border-radius: 30px;
	border: none;
	margin: 0;
	padding-left: 30px;
	padding-right: 30px;
	float: right;
	line-height: 1em;
	margin-top: 14px;
	height: 30px;
	margin-left: 10px;
	margin-right: 10px;
}
.menu-cta a {
	color: #036!important;
	line-height: 1.2em;
	font-size: 0.85em;
	font-weight: 500;
	text-transform: none;
	margin: 0px;
	padding: 1px;
}
.menu-cta:focus, .menu-cta:active, .menu-cta:hover {
	color: #fff!important;
	background: #036!important;
}
.menu-cta a:focus, .menu-cta a:active, .menu-cta a:hover,.menu-cta:focus a, .menu-cta:active a, .menu-cta:hover a {
	color: #fff!important;
}
li.catalyst-li {
    pading: 0!important;
}
.btn-primary.white.menu-cta {
    width: 120px!important;
    padding: .35em .5rem!important;
    border-radius: 999px!important;
    background-color: #ffffff!important;
    color: #002E5B!important;
    text-decoration: none!important;
    font-size: 1rem!important;
    font-weight: bold!important;
    text-align: center!important;
}
.dropdown .btn-primary.white.menu-cta {
    background-color: #ffffff !important;
    color: #002E5B !important;
}
.btn-primary.white.menu-cta:hover, .btn-primary.white.menu-cta:focus {
    color: #fff !important;
    background: #036 !important;
}
/* ==========================================================================Search========================================================================== */
.search-box {
	width: 100%;
}
#cse-search-box input[type=text] {
	color: #333;
	background: #fff;
	border: 0;
	padding: 2px 2px 2px 6px;
	height: 25px;
	width: calc(100% - 30px);
	font-size: 14px;
	margin: 0px 0px 5px 0px;
}
#cse-search-box button:active {
	background-color: #fff;
}
@supports (-moz-appearance: none) {
	#cse-search-box button {
		margin: 11px 0 0 0;
	}
}
#ir-search-box {
	background: none;
	color: #FFF;
	width: 40px;
	height: unset;
	margin: 10px auto 2px auto;
	padding: 7px;
	font-size: 20px;
}
#ir-search-box input[type=text] {
	display: inline-block;
	color: #000;
	background: #FFF;
	border: 0;
	margin-right: 0;
	padding: 0;
	height: 24px;
}
#ir-search-box button {
	background: #B20D01;
	color: #FFF;
	width: 40px;
	height: 24px;
	margin-bottom: 2px;
}
/* MERGED: #sf-btn (was defined twice) */
#sf-btn {
	background: #B20D01;
	border: none;
	height: 29px;
	color: #fff;
}
#sf-text {
	line-height: normal;
	margin-bottom: 5px;
	height: 29px;
	color: #000;
	padding-left: 4px;
}
/* OU Search */
.ou-search-directory {
	display: none;
}
.ou-search-result-heading {
	font-size: 1.3em;
}
.ou-search-link {
	font-size: 1em;
	display: initial;
}
.ou-search-abstract {
	font-size: 1em;
}
.ou-search-branding-display {
	display: none;
}
#ou-search-results ul li {
	padding: 20px;
	background: #f5f5f5;
	margin: 20px 0px;
}
/* ==========================================================================Footer========================================================================== */
footer {
	padding: 0 0 20px 0;
	background: #D6D6D6;
	border-top: 5px solid #a7a9ac;
	width: 100%;
	float: left;
	height: initial;
}
footer .container img {
	width: initial;
}
footer .container .row {
	background: #D6D6D6;
}
footer p, footer li {
	padding-bottom: 0;
	margin-bottom: 0;
	line-height: 1em;
	font-size: 1em;
	list-style: none;
}
.upper-footer h2 {
	color: #000;
	font-size: 1em;
	font-weight: 900;
	padding: 0;
	margin: 0;
	letter-spacing: 0px;
}
.upper-footer ul, .upper-footer li {
	font-size: 1em;
	padding: 2.5px 0;
}
ul.list-footer {
	padding: 4px 0;
	margin-bottom: 0;
	color: #076AB0;
	font-weight: 500;
}
ul.list-unstyled li a, ul.list-footer a {
	line-height: 1.4em;
	color: #000;
	border-bottom: none;
}
ul.list-footer a {
	font-size: 1em;
	line-height: 1.5em;
	color: #000;
	font-weight: 500;
	font-family: var(--font-primary);
	letter-spacing: -0.3px;
	border-bottom: none;
	height: 24px;
	display: inline-block;
}
ul.list-footer a:hover {
	text-shadow: 0 0 var(--hblue);
	color: var(--hblue);
	text-decoration: underline;
}
.lower-footer {
	padding-top: 22px;
	margin-top: 10px;
	border-top: 1px solid #000;
}
.lower-footer address, .lower-footer a {
	margin: 0;
	color: #000;
	height: fit-content;
	display: block;
	width: fit-content;
	border: 2px solid transparent;
}
.lower-footer a:hover {
	text-shadow: 0 0 var(--hblue);
	color: var(--hblue);
	text-decoration: underline;
}
.footer-image {
	float: right;
}
.footer-ask-box-spacer {
	text-align: center;
	width: 100%;
}
/* Social */
#social-container {
	padding: 14px 0 8px 0;
	background: #999;
	height: fit-content;
	float: left;
	width: 100%;
	margin: auto 0 24px 0;
}
footer div.container span.fa,footer div.container span.far,footer div.container span.fas {
	width: 20px;
	text-align: center;
	margin-right: 4px;
}
.footer-icons {
	padding: 0;
	margin: 0;
	color: #076AB0;
	font-weight: 500;
}
.footer-icons li {
	padding: 5px 15px 0 0 !important;
	float: left;
	font-size: .9em !important;
}
.footer-icons li a span:hover {
	opacity: .8;
}
.footer-icons a span ul {
	transition: opacity .2s cubic-bezier(.35, .35, .25, 1), color .2s cubic-bezier(.35, .35, .25, 1);
	color: #000;
	border-bottom: none;
}
.fa-2x {
	font-size: 2em;
}
li.footer-facebook a span:hover {
	color: #3b5998;
}
li.footer-twitter a span:hover {
	color: #4ec2dc;
}
li.footer-youtube a span:hover {
	color: #DF1F1C;
}
li.footer-flickr a span:hover {
	color: #f90784;
}
li.footer-pinterest a span:hover {
	color: #CB2528;
}
li.footer-instagram a span:hover {
	color: #413A33;
}
li.footer-linkedin a span:hover {
	color: #0077b5;
}
/* ==========================================================================Emergency / Alert Systems========================================================================== */
#emergency {
	color: #ffffff;
	padding-left: 0px;
	padding-right: 0px;
}
#emergency * {
	min-height: 0px;
}
#emergency p {
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 500;
	text-align: center;
	color: #fff;
}
/* RAVE Alert */
.rave-alert {
	min-height: 0px;
	background: #ce2121;
	padding: 20px;
	width: 100%;
	float: left;
	text-align: center;
	color: #fff;
	font-size: 1.3em;
}
.rave-alert p {
	font-size: 1em;
	line-height: 1.5em;
	font-weight: 500;
	text-align: center;
	color: #fff;
}
.rave-alert a {
	font-size: 24px;
	font-weight: 500;
	text-align: center;
	text-decoration: underline;
	color: #fff;
}
.rave-alert-blue {
	background: #217bce;
}
.rave-alert-orange {
	background: #f7981b;
}
.rave-alert-red {
	background: #ce2121;
}
.rave-alert-green {
	background: #00A300;
}
/* Custom Alert */
#custom-alert-box {
	color: #fff;
}
#custom-alert-box p {
	font-size: 1.5em;
	font-weight: 500;
	text-align: center;
	line-height: 1.5em;
	color: #fff;
	margin: 0;
	padding: 0;
}
#custom-alert-box a {
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	border-bottom: dotted #fff 2px;
	color: #fff;
}
#custom-alert-box a:hover {
	border-bottom: solid #fff 2px;
}
.custom-alert-red {
	background: #ce2121;
}
.custom-alert-orange {
	background: #f7981b;
}
.custom-alert-blue {
	background: #1F70BD;
}
.custom-alert-text {
	text-align: center;
	margin: 0 0 1rem;
	margin: 15px;
	font-weight: 500;
	font-size: 1.5em;
}
/* ==========================================================================Components========================================================================== */
/* Pull Quotes */
.pullquote-main, .pullquote-main-right {
	padding: 15px 25px 0 30px;
	max-width: 500px;
	width: 100%;
	margin: 15px;
}
.pullquote-main {
	background: #f0f8ff;
}
.pullquote-main h2 {
	font-size: 1.5em;
}
.pullquote-main img {
	margin-left: 10px;
}
.pullquote-citation {
	font-weight: 900;
	font-style: italic;
	font-size: 1em;
	color: #036;
}
.pullquote-main-right {
	background-color: #497AAB;
	float: right;
}
/* Image Quotes / Overlay */
.image-overlay-text {
	position: relative;
}
.image-overlay-text-box span {
	font-family: "garamond-premier-pro-caption";
}
.image-overlay-text-box::before {
	content: "\201C";
	position: relative;
	left: -.5%;
	margin-left: -2.2rem;
}
.image-overlay-text-box::after {
	content: "\201D";
	font-size: 6rem;
	margin-top: .9em;
	position: absolute;
	line-height: 0px;
	margin-left: 6px;
}
.image-overlay-text-box {
	position: absolute;
	padding: 7% 16% 5% 7%;
	line-height: 1.1em;
	bottom: 0;
	text-shadow: 2px 2px #000000a6;
	font-size: 19.6px;
	color: #fff;
}
/* Image overlay responsiveFIXED: calc() expressions were missing * operator — browsers silently ignored them */
@media (min-width: 422px) {
	.image-overlay-text-box {
		font-size: calc(1.8820224719vw + 11.6578651685px);
		line-height: calc(1.8820224719vw + 11.6578651685px);
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc((1.8820224719vw + 11.6578651685px) * 1.8);
	}
}
@media (min-width: 600px) {
	.image-overlay-text-box {
		font-size: calc(-0.7948333333vw + 27.719px);
		line-height: calc(-0.7948333333vw + 27.719px);
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc((-0.7948333333vw + 27.719px) * 1.8);
	}
}
@media (min-width: 900px) {
	.image-overlay-text-box {
		font-size: calc(0.65vw + 14.7155px);
		line-height: calc(0.65vw + 14.7155px);
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc((0.65vw + 14.7155px) * 1.8);
	}
}
@media (min-width: 901px) {
	.image-overlay-text-box {
		font-size: calc(0.6436666667vw + 14.7725633333px);
		line-height: calc(0.6436666667vw + 14.7725633333px);
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc((0.6436666667vw + 14.7725633333px) * 1.8);
	}
}
@media (min-width: 991px) {
	.image-overlay-text-box {
		font-size: calc(254.53vw - 2501.241px);
		line-height: calc(254.53vw - 2501.241px);
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc((254.53vw - 2501.241px) * 1.8);
	}
}
@media (min-width: 992px) {
	.image-overlay-text-box {
		font-size: calc(1.8155288462vw + 5.6865538462px);
		line-height: calc(1.8155288462vw + 5.6865538462px);
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc((1.8155288462vw + 5.6865538462px) * 1.8);
	}
}
@media (min-width: 1200px) {
	.image-overlay-text-box {
		font-size: calc(-0.5561165049vw + 34.1462980583px);
		line-height: calc(-0.5561165049vw + 34.1462980583px);
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc((-0.5561165049vw + 34.1462980583px) * 1.8);
	}
}
@media (min-width: 1612px) {
	.image-overlay-text-box {
		font-size: 25.1817px;
		line-height: 25.1817px;
	}
	.image-overlay-text-box:before, .image-overlay-text-box:after {
		font-size: calc(25.1817px * 1.8);
	}
}
/* Keyword Sorter */
.filtergroup p {
	min-height: 60px;
	padding-right: 10px;
}
.filtergroup p em {
	color: #525354;
	font-size: 14px;
}
/* Table Row Layout */
@media only screen and (min-width: 768px) {
	.is-table-row, .is-table-row2 {
		display: table;
	}
	.is-table-row [class*=col-],.is-table-row2 [class*=col-] {
		float: none;
		display: table-cell;
		vertical-align: top;
	}
}
.is-table-row .box {
	background: 0 0;
	position: static;
}
.is-table-row [class*=col-] {
	background: transparent;
	text-align: center;
}
/* Twin Boxes */
.twin-boxes .col-xs-12.col-sm-6 {
	background: #DDE6F3;
	border: 20px solid #FFF;
	padding: 0;
}
.twin-boxes .greybox {
	width: 100%;
	color: #FFF;
	background: #686868;
	padding: 6px;
	text-align: center;
	font-size: 24px;
	line-height: 1.2em;
}
.twin-boxes .box {
	padding: 4px 20px;
}
.twin-boxes h1 {
	line-height: 1.3em;
	font-size: 28px;
	color: #aa6700;
	letter-spacing: -.4px;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.bold-header {
	margin-right: 20px;
}
/* Image Caption Box */
.image-caption-box {
	float: left;
	margin-right: 20px;
	margin-bottom: 12px;
	background: #FFF;
	max-width: 300px;
	border: 1px;
	box-shadow: 3px 3px 3px #ddd;
}
.image-caption-box p {
	margin: 10px 20px;
	font-size: 1em;
}
/* Harper Logo */
.harper-logo {
	margin: 0 auto;
	height: 92px;
	background: url(https://www.harpercollege.edu/_resources/images/logo_white.png) center center no-repeat #036;
}
/* Box spans */
.box span {
	font-size: 30px;
	line-height: 0.6em;
	color: #595959;
	width: 100%;
	letter-spacing: -0.05em;
}
.sub-cap-circle-box {
	font-size: 20px;
	padding-left: 20px;
	padding-right: 20px;
	float: left;
	line-height: 1em;
	padding-bottom: 20px;
}
/* ==========================================================================Callout & Related Info========================================================================== */
.calltoaction.onestop ul {
	margin-left: 30px;
}
.calltoaction.onestop ul li {
	list-style-type: disc;
	display: list-item;
	padding: 2px;
}
.relatedinfo .img {
	float: left;
	position: relative;
	padding: 10px;
}
.relatedinfo .text {
	float: left;
	position: relative;
	padding: 10px 5px 5px;
}
.list-question, .pagination .right, .subscribe {
	float: right;
}
.relatedinfo .emergency {
	background: #C1182D;
}
.empl-card a {
	line-height: 24px;
	display: inline-block;
}
/* ==========================================================================Countdown / Progress Bar========================================================================== */
#countdown-wrap {
	width: 100%;
	height: unset;
	padding: 20px;
	font-family: arial;
	max-width: 650px;
	margin: 0 auto 0;
	color: #000;
}
#goal {
	font-size: 2.4em;
	text-align: right;
	color: #000;
	line-height: 1em;
}
#glass {
	width: 100%;
	height: 20px;
	border-radius: 10px;
	float: left;
	overflow: hidden;
	background: lightgray;
}
#progress {
	float: left;
	width: 85%;
	height: 20px;
	background: #FF5D50;
	z-index: 333;
}
.goal-stat {
	width: 25%;
	padding: 10px;
	float: left;
	margin: 0;
	color: #000;
}
.goal-number, .goal-label {
	display: block;
	color: #000;
}
.goal-number {
	font-weight: bold;
	color: #000;
}
/* ==========================================================================Modal========================================================================== */
.modal-body img {
	width: 100%;
	height: 100%;
}
/* ==========================================================================Contact Boxes========================================================================== */
.contactbox-container {
	border: 1px solid #DDDDDD;
	width: 100%;
	position: relative;
}
.contactbox-tag {
	z-index: 1000;
	padding: 5px;
	color: #FFFFFF;
	font-weight: bold;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: initial;
}
.contactbox-tag-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}
.contactbox-tag-purple {
	max-height: initial;
	background: #8a2be252;
}
.box .btn-primary {
	min-width: 90%;
	margin: auto 5%;
}
/* Contact Box Left/Right */
.contact-box-left {
	float: left;
	margin: 10px 0px 40px 0px;
	width: 50%;
}
.contact-box-right {
	float: right;
	padding: 0px 0px 0px 30px;
	width: 50%;
}
/* Contact Card Simple */
.contact-card-simple {
	background-color: #EBEBEB;
	border: 1px solid #E2E0DC;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 2rem;
}
.contact-card-simple .figure-left {
	margin: 0 2rem 1rem 0;
	position: relative;
	border-radius: 6px 0px 0px;
	overflow: clip;
}
.contact-card-simple figcaption {
	position: absolute;
	left: 1.25rem;
	top: 1.25rem;
	padding: 0.4rem 0.9rem;
	background-color: rgba(1, 51, 101, 0.8);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	border-radius: 3px;
}
.contact-card-simple dd {
	font-weight: 100;
	font-size: 1.1em;
}
.contact-card-simple ul {
	list-style: none;
	display: inline-block;
	padding-left: 0px;
}
/* ==========================================================================COVID Button (legacy)========================================================================== */
.covid-button {
	background: #ffe144;
	color: #036;
	border: 1px solid #000;
	margin: 0;
	float: left;
	line-height: 1em;
	height: fit-content;
	margin-top: 15px;
	margin-right: 14px;
	padding: 8px;
	font-weight: 900;
}
.covid-button:hover, .covid-button:focus, .covid-button:active {
	background: #dbc139;
}
.covid-button a {
	font-weight: 900;
	color: #000000;
	font-size: 0.65em;
	margin: 0;
}
.covid-button a:hover {
	text-decoration: underline;
}
/* ==========================================================================HSI Logo========================================================================== */
.hsi-logo img {
	width: 100%;
	max-width: 250px;
	margin-top: 16px;
	float: left;
}
.hsi-logo a {
	text-decoration: none;
}
/* ==========================================================================No Banner========================================================================== */
.no-banner {
	height: 37px;
}
/* ==========================================================================DirectEdit========================================================================== */
#de {
	display: none;
}
#directedit #de {
	display: inline;
}
/* ==========================================================================LWL / LWE========================================================================== */
.lwl {
	display: none;
}
li.lwe {
	width: 27%;
	float: left;
	list-style: none;
	padding: 3%;
}
/* ==========================================================================Text Treatments========================================================================== */
.grey-text-treatment a {
	color: #036;
	font-weight: 700;
	border-bottom: 2px dotted #036;
	text-decoration: none;
}
.large-grey-text-treatment {
	color: #767676;
	font-size: 38px;
	line-height: 1.1em;
	font-weight: 100;
}
.large-grey-text-treatment h2 {
	color: #767676;
	font-size: 38px;
	line-height: 1.1em;
	font-weight: 100;
}
.large-grey-text-treatment-smaller {
	color: #767676;
	font-size: 1em;
	line-height: 1.3em;
	font-weight: 100;
}
.large-grey-text-treatment-smaller strong {
	color: #000;
}
.white-text-treatment {
	padding: 0 20px;
	font-size: 20px;
	color: #fff;
	line-height: 1.4em;
	font-weight: 100;
}
.white-text-treatment a {
	color: #fff;
	border-bottom: 2px dotted #fff;
}
.white-text-treatment a:hover {
	color: #fff;
	border-bottom: 2px solid #fff;
}
/* ==========================================================================Circle Boxes========================================================================== */
.circle-box-content-heading {
	width: 100%;
	color: #fff;
	background: #036;
	padding: 10px;
	font-weight: 900;
	text-align: center;
	height: 100%;
}
.circle-box-content-heading a {
	color: #fff;
}
.circle-box-content-heading a:hover, .circle-box-content-heading a:focus {
	text-decoration: underline;
}
.circle-box-alt-box {
	background: #e7e7e7;
	display: table-cell;
	height: 100%;
	float: none;
	border: solid 10px #fff;
	padding: 0px;
	vertical-align: top;
}
.circle-box-alt-box p {
	margin: 0px;
	border-bottom: solid 10px #fff;
	background: #fff;
}
.circle-box-solid-color {
	background: #beb7be;
}
.circle-box-solid-color p {
	color: #fff;
	background: transparent;
	font-size: 3.0em;
	text-align: center;
	border: none;
	padding: 10%;
	border-bottom: 0px;
	line-height: 1.5em;
	display: block;
}
.col-md-12 .circle-box-table-container .circle-box-alt-box {
	width: 33.33%;
}
.col-md-12 .circle-box-table-container .circle-box-alt-box-wide {
	width: 66.6%;
}
.circle-box-alt-box-wide {
	background: #e7e7e7;
	display: table-cell;
	height: 100%;
	float: none;
	border: solid 10px #fff;
	padding: 0px;
	vertical-align: top;
}
.circle-box-tag-text-float {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}
.circle-box-tag-text {
	font-size: 3.0em;
	font-weight: 900;
	text-align: center;
	line-height: 1.1em;
	color: #fff;
	text-shadow: 2px 2px 0px rgba(33, 33, 33, 0.86);
}
.circle-box-content-containter {
	padding: 0px;
}
.circle-box-content-text {
	width: 100%;
	color: #1C1C1C;
	background: #e7e7e7;
	height: 100%;
	padding: 20px 30px;
}
.circle-box-table-container {
	display: table;
	width: 100%;
	margin: -10px;
	overflow: hidden;
	margin-bottom: 10px;
}
.circle-box-table-container h2.circle-box-alt-box {
	text-align: center;
	vertical-align: top;
}
.circle-box-table-container:last-of-type {
	margin-bottom: 20px;
	max-width: 33.33%;
}
.circle-box-table-container .circle-box-alt-box,.circle-box-table-container .circle-box-alt-box-wide {
	padding-top: 0px;
	padding-bottom: 0px;
}
.double-wide-circle-box {
	width: 63.66%;
	background: #beb7be;
	display: table-cell;
	padding: 0;
	vertical-align: top;
	padding-left: 30px;
	padding-right: 30px;
	height: 300px;
}
.double-wide-circle-box p {
	color: #fff;
	background: transparent;
	padding: 30px;
	font-size: 3.0em;
	text-align: center;
	border: none;
	float: left;
	line-height: 1.4em;
	height: 200px;
	vertical-align: middle;
	margin: auto;
	padding-top: 100px;
}
a.fab.fa-google, a.fa.fa-calendar, a.fa.fa-clock-o {
	width: 28px;
}
/* ==========================================================================Highlight Boxes========================================================================== */
.grey-highligh-box, .grey-highlight-box {
	min-height: 20px;
	padding: 20px;
	margin-bottom: 20px;
	overflow: auto;
	background: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.enhanced-highlight-box {
	min-height: 20px;
	padding: 20px;
	margin: 20px 0;
	background: #ebebeb;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	border: solid 1px #c1c1c1;
	border-left: 15px solid #036;
}
.enhanced-highlight-box p {
	color: #000;
	font-weight: 100;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-size: 1.25em;
}
.megaphone {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}
.enhanced-highlight-heading {
	color: #036;
	font-weight: 900;
	font-size: 1.5em;
	margin-bottom: 16px;
}
.highlight-box-component {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	margin-top: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
/* Harper Blue Callout */
.callout-harper-blue {
	background-color: #036;
	margin: 10px 0px;
	padding: 5px 0px 20px 0px;
}
.callout-harper-blue h1 {
	color: #fff;
	font-size: 2.0em;
	text-align: center;
}
.callout-harper-blue a {
	border-bottom: 2px dotted #ccc;
	color: #ccc;
}
.callout-harper-blue a:hover {
	border-bottom: 2.2px dotted #fff;
	color: #fff;
	text-decoration: none;
}
/* ==========================================================================Areas / Programs========================================================================== */
.highlight-stats {
	background-color: #036;
	float: right;
	border-radius: 10px;
	padding: 0px 20px;
	width: 50%;
	max-width: 500px;
	margin: 10px 0px 0px 20px;
}
.highlight-stats-heading h2 {
	color: #fff;
	line-height: 1em;
	font-size: 2em;
	margin: 20px auto;
	display: block;
	width: fit-content;
	padding: 0px 20px;
}
.highlight-stats-heading h3 {
	color: #fff;
	font-size: 1.8em;
}
.highlight-stats-body p {
	color: #fff;
	margin: 0px 20px 10px 20px;
}
.highlight-stats-body li {
	color: #fff;
	margin-left: 20px;
}
.highlight-stats-body a {
	color: #fff;
	border-bottom: #fff 2px dotted;
}
.highlight-stats-body a:hover {
	color: #fff;
	border-bottom: #fff 2px solid;
}
.areas-button-body {
	background-color: #060;
	border: 0px;
	color: #fff;
	height: 64px;
	line-height: 1.5em;
	margin: 5px 20px 5px 0px;
	padding: 8px 15px;
	text-align: center;
}
.areas-button-body span {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}
.areas-button-body a {
	color: #fff;
	border-bottom: 0px;
}
.areas-button-leftnav {
	background-color: #757575;
	color: #fff;
	padding: 8px;
	text-align: left;
	margin-top: 15px;
	margin-bottom: 5px;
	padding-left: 10px;
}
.areas-button-leftnav a {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.aoi-explore-container {
	margin-bottom: 20px;
}
.aoi-highlight-right-text-container a {
	color: #fff;
	border-bottom: 2px #fff dotted;
}
/* Program Links — shared padding/margin */
.program-link,[class^="program-link-"] {
	padding: 8px;
	margin-bottom: 6px;
}
.program-link {
	font-size: 18px;
	margin-left: 6px;
	margin-right: 6px;
}
[class^="program-link-"] {
	margin-right: 8px;
}
.program-link-art {
	background: #F2E5BF;
}
.program-link-business {
	background: #ccd8a3;
}
.program-link-education {
	background-color: #e4e4f6;
}
.program-link-stem {
	background-color: #D0EAEA;
}
.program-link-health {
	background-color: #f6dbd1;
}
.program-link-liberal {
	background-color: #F1E1F9;
}
.program-link-manufacturing {
	background-color: #EEE8F2;
}
.program-link-science {
	background-color: #e1f6d1;
}
.program-link-public {
	background-color: #ebf9da;
}
.program-link-social {
	background-color: #cee3f2;
}
.program-container {
	margin-top: 10px;
	margin-bottom: 10px;
}
/* ==========================================================================Blue Inset Box Snippet========================================================================== */
.area-cat-bluebox-inner h2, .area-cat-bluebox-inner h3 {
	color: #fff;
	margin: 0px;
	padding: 0px;
	letter-spacing: 0em;
	font-size: 1.6em;
	font-weight: 500;
}
.area-cat-bluebox-inner p {
	color: #fff;
	margin: 0px;
	line-height: 1.5em;
	font-size: 1.3em;
}
.area-cat-bluebox-inner hr {
	border: 1px solid #fff;
	color: #fff;
	margin: .5rem 0;
}
.area-cat-bluebox-inner li {
	color: #fff;
}
.area-cat-bluebox-inner ul {
	margin: 5px;
}
/* Two Column Snippet */
.snippet-two-column ul {
	margin-bottom: 0px;
}
/* ==========================================================================Ender Button Box========================================================================== */
.ender-button-box-container {
	width: 200px;
	margin: auto;
	margin-top: calc((100% / 400) * 12);
}
/* ==========================================================================Dual Color Boxes========================================================================== */
.dual-color-box-flex-row {
	display: flex;
}
.dual-color-box-flex-col {
	flex: 1;
	height: 100%;
}
.dual-color-box-pink {
	margin-left: 10px;
	background: #f7ddfa;
	padding: 20px;
	color: #772753;
	font-size: 18px;
	text-align: center;
	flex: 1;
	height: 100%;
	padding-top: 32px;
}
.dual-color-box-blue {
	margin-right: 10px;
	background: #d6e2fc;
	padding: 20px;
	color: #032D53;
	font-size: 18px;
	text-align: center;
	flex: 1;
	height: 100%;
	padding-top: 32px;
}
.dual-color-button-pink {
	text-decoration: underline;
	padding: 10px;
	background: #b23988;
	color: #fff;
	font-weight: 900;
	font-size: 16px;
	max-width: 200px;
	border-radius: 25px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
.dual-color-button-blue {
	text-decoration: underline;
	padding: 10px;
	background: #4766a6;
	color: #fff;
	font-weight: 900;
	font-size: 16px;
	max-width: 200px;
	border-radius: 25px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
.dual-color-button-pink:focus, .dual-color-button-pink:hover,.dual-color-button-blue:focus, .dual-color-button-blue:hover {
	text-decoration: underline;
}
span.dual-color-box-heading {
	font-weight: 100;
	font-size: 32px;
	letter-spacing: -0.04em;
}
/* ==========================================================================Big Blue Box========================================================================== */
span.big-blue-box-big-text {
	width: 100%;
	float: left;
	font-size: 14vw;
	text-align: center;
	line-height: 1em;
	color: #f4cd58;
	font-weight: 900;
	padding-top: 3vw;
}
span.big-blue-box-smaller-text {
	width: 100%;
	float: left;
	text-align: center;
	line-height: 1em;
	color: #f4cd58;
	font-size: 4.5vw;
	overflow: hidden;
	padding-bottom: 3vw;
}
.purple-box-80width {
	width: 100%;
	background: #6217a74f;
	height: 100%;
	padding: 10%;
}
/* ==========================================================================Blue Info Box========================================================================== */
.blue-info-box-container {
	background: #036;
	color: #fff;
	width: 80%;
	float: left;
	text-align: center;
}
.blue-info-box-highlight-text {
	font-size: 6em;
	line-height: 1.5em;
	font-weight: 100;
}
.blue-info-box-supporting-text {
	font-size: 1.1em;
	padding-left: 30px;
	padding-right: 30px;
	margin-bottom: 30px;
}
.blue-header-box {
	font-size: 22px;
	letter-spacing: -0.04em;
	background: #036;
	height: 44px;
	vertical-align: middle;
	text-align: center;
	margin: 10px;
}
.blue-header-box h3 {
	font-size: 22px;
	letter-spacing: -0.04em;
	color: #fff;
	text-align: center;
	margin: 0;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1em;
}
/* ==========================================================================Lead Image Overlay Component========================================================================== */
.overlay-text-image-box {
	width: 100%;
	position: relative;
	margin-bottom: 15px;
	overflow: hidden;
}
.overlay-text-image-box img {
	min-height: 250px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.image-callout-text {
	position: absolute;
	bottom: 0%;
	left: 0;
	transform: translate(-0%, -50%);
	background: #0049929e;
	color: #fff;
	text-align: center;
	height: max-content;
}
.image-callout-text h1 {
	color: #fff;
	font-size: 3.8em;
	font-weight: 400;
	line-height: 1em;
	padding: 10px 20px;
	margin: 0px;
}
/* Image Button Overlay */
.image-button-overlay {
	margin: 25px 0px 20px 0px;
}
.image-button-overlay-int {
	background: #6217a74f;
	padding: 10%;
	width: 100%;
}
.image-button-overlay h2 {
	color: #fff;
	font-size: 2.6em;
	text-align: center;
}
.image-button-overlay p {
	text-align: center;
}
.image-button-overlay-background {
	width: -webkit-fill-available;
}
/* ==========================================================================Tile Buttons Component========================================================================== */
.tile-container {
	background: #036;
	height: 180px;
	display: flex;
	border-radius: 10px;
	flex: 1 1 auto;
	margin-bottom: 20px;
}
.tile-container:hover {
	background-color: #496b90;
}
.tile-container p {
	font-size: 1.24em;
	color: #1C1C1C;
	line-height: 1.86em;
	font-weight: 100;
	padding-bottom: 6px;
	display: block;
	width: 100%;
	vertical-align: middle;
	height: 100%;
}
.tile-button {
	background: none;
	width: 100%;
	border: 0px;
	color: #fff;
	font-size: 1.4em;
	height: 100%;
}
.tile-container p a {
	border-bottom: none;
	color: #fff;
	font-weight: 500;
}
.tile-container p a:hover {
	border-bottom: none;
	color: #fff;
}
.tile-container a:hover > button {
	text-decoration: underline;
}
.tile-tall {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}
.tile-tall .tile-container p a {
	height: 180px;
	display: block;
}
.tile-medium {
	width: 100%;
	margin: 0px auto 30px auto;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tile-medium div.tile-container {
	background: #007097;
	height: 80px;
	min-width: 200px;
}
.tile-medium div.tile-container:hover {
	background: #109AD7;
}
.tile-medium .tile-container p {
	font-size: 1em;
	line-height: 1.56em;
}
.tile-medium .tile-container p a {
	height: 80px;
	display: block;
}
.tile-medium .tile-container p a button:hover {
	color: #000;
}
/* ==========================================================================Interrupter Slider========================================================================== */
.interrupter-slider-wrapper {
	margin: 1rem;
	position: relative;
	overflow: hidden;
}
.interrupter-slides-container {
	width: calc(100% - 60px);
	display: flex;
	list-style: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
	min-height: 42px;
}
.interrupter-slide {
	width: 100%;
	flex: 1 0 100%;
}
.interrupter-slide a {
	font-size: 24px;
	text-align: center;
	width: 100%;
	float: left;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1em;
	border-bottom: none;
	text-decoration: none;
	color: #000;
}
li.interrupter-slide {
	line-height: 1em;
	padding: 0;
	margin: 0;
}
/* MERGED: .interrupter-slide-arrow (was defined twice) */
.interrupter-slide-arrow {
	position: absolute;
	display: flex;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 4rem;
	background-color: transparent;
	border: none;
	width: 2rem;
	font-size: 3em;
	padding: 0;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 100ms;
	font-weight: 100;
	color: #fff;
	line-height: 12px;
}
.interrupter-slide-arrow:hover, .interrupter-slide-arrow:focus {
	opacity: 1;
}
#interrupter-slide-arrow-prev {
	left: 0;
	padding: 0;
	border-radius: 0 2rem 2rem 0;
}
#interrupter-slide-arrow-next {
	right: 0;
	padding: 0;
	border-radius: 2rem 0 0 2rem;
}
.lw-event-item-arrow {
	opacity: 0.9;
	z-index: 1;
	position: absolute;
	display: flex;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 4rem;
	background-color: transparent;
	border: none;
	width: 2rem;
	font-size: 5rem;
	padding: 0;
	transition: opacity 100ms;
	font-weight: 100;
	color: #fff;
}
.inner.color-white p {
	padding-top: 10px;
}
/* ==========================================================================Salesforce Form Embeds========================================================================== */
.label {
	font-size: 1.1em;
	padding: 1em 0em;
	text-align: left;
	white-space: normal;
}
.wFormContainer {
	font-size: 1.1em;
	margin: 0px;
	max-width: 1280px;
}
.wFormHeader {
	display: none;
}
.wForm .actions {
	text-align: center;
	padding: 10px 44.2%;
}
.wForm form > div.oneField {
	margin-top: 0px;
}
.wFormContainer .actions .primaryAction {
	background-color: #036!important;
	font-size: 1.35em!important;
	margin-top: 0px!important;
	padding: 15px 20px!important;
	color: #fff!important;
	border-radius: 5px!important;
}
.wFormContainer .wForm form {
	padding: 0px 33px;
}
.wFormContainer .oneChoice .label.postField {
	padding: 5px 0px;
}
.wFormContainer .wForm .inputWrapper input[type='text'],.wFormContainer .wForm .inputWrapper input[type='password'],.wFormContainer .wForm .inputWrapper select,.wFormContainer .wForm .inputWrapper textarea {
	height: 40px;
}
.wForm .oneField {
	padding: 2px 15px 0px 6px;
}
.wForm .captchaHelp {
   color: #000;
}
@media (max-width: 800px) {
	.wForm td {
		display: block;
		width: 100%;
	}
	.wFormContainer .wForm form {
		padding: 0 !important;
	}
}
/* Formstack */
.fsform-container label {
	color: #1C1C1C;
	font-size: 1em;
}
.fsform-container div[class^="StyledErrorBanner"] {
	background-color: #f5f5f5;
	color: #DE1B1B;
}
.fsform-container div[class^='StyledReferralBadge'] {
	display: none;
}
/* ==========================================================================Consent Cookie Widget========================================================================== */
#consent_blackbar {
	position: fixed;
	bottom: 0%;
	width: 100%;
	background: none;
	opacity: 1;
	z-index: 1000;
}
#truste-consent-track {
	background: #430a2df7;
	opacity: 1;
	padding-top: 20px;
	padding-bottom: 20px;
}
.truste-button1, .truste-button2 {
	background: #036!important;
	color: #fff;
	font-size: 14px;
	width: 170px;
	text-transform: capitalize;
}
.truste-messageColumn, .truste-cookie-link {
	font-size: .9em;
}
/* ==========================================================================Google Translate========================================================================== */
#google_translate_element {
	float: right;
	margin: 20px;
	padding: 10px;
	border: 2px transparent solid;
	border-radius: 5px;
}
#google_translate_element:hover {
	border: 2px #999 solid;
}
/* ==========================================================================Star Ratings========================================================================== */
.rate {
	height: 46px;
	padding: 0px;
	width: max-content;
	display: inline;
}
.rate:not(:checked) > input {
	position: absolute;
	left: -9999px;
}
.rate:not(:checked) > label {
	float: right;
	width: 1em;
	white-space: nowrap;
	cursor: pointer;
	font-size: 30px;
	color: #424242;
}
.rate:not(:checked) > label:before {
	content: '★ ';
}
.rate > input:checked ~ label {
	color: #ffc700;
}
.rate:not(:checked) > label:hover,.rate:not(:checked) > label:hover ~ label {
	color: #deb217;
}
.rate > input:checked + label:hover,.rate > input:checked + label:hover ~ label,.rate > input:checked ~ label:hover,.rate > input:checked ~ label:hover ~ label,.rate > label:hover ~ input:checked ~ label {
	color: #c59b08;
}
.rate-stars {
	margin: 30px auto;
	width: max-content;
}
.rate-label {
	font-size: 1.26em;
	margin: 10px auto;
	width: fit-content;
	display: inline;
	padding-right: 15px;
}
/* ==========================================================================YouTube Embed========================================================================== */
.youtube-embed {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube-embed iframe {
	width: 100%;
	height: 100%;
	border: none;
	min-height: 200px;
}
.youtube-w-500 {
	max-width: 500px;
}
.youtube-w-600 {
	max-width: 600px;
}
.youtube-w-1000 {
	max-width: 1000px;
}
.youtube-w-1200 {
	max-width: 1200px;
}
.youtube-w-full-width {
	max-width: 100%;
}
.video-align-right {
	float: right;
	margin-left: 30px;
	max-width: 50%;
}
/* ==========================================================================PPW Container========================================================================== */
.ppw-container {
	float: right!important;
	width: 500px!important;
}
/* ==========================================================================Grey Fullspan Boxes========================================================================== */
.grey-fullspan-box-alert2 .col-xs-12.col-sm-12.col-md-12 p {
	color: #000;
	padding: 0;
	margin: 0;
}
.grey-fullspan-box-alert2 .col-xs-12.col-sm-12.col-md-12 a {
	color: #036;
}
.grey-fullspan-box-no-padding2 a:hover, .grey-fullspan-box-no-padding2 a:focus {
	text-decoration: underline;
	border-bottom: 0px;
}
.grey-fullspan-box-container-alert2 {
	width: 100%;
	float: none;
	background: #062856;
	display: inline-block;
	color: #036;
	margin: 0;
	padding: 0;
}
.grey-fullspan-box-no-padding2 {
	padding: 0;
	margin: 0;
}
.content-box-3 #main_content, .content-box-3 #main {
	padding: 0;
}
/* ==========================================================================Module / News Feed========================================================================== */
.module-heading, .news-feed-section-headline-display, .news-feed-heading {
	color: #036;
	font-weight: 900;
	text-align: center;
}
.homepage-image-callout-text .news-feed-heading {
	display: none;
}
.news-feed-intro {
	text-align: center;
}
/* ==========================================================================Accessibility========================================================================== */
.accessibility-menu {
	left: -999px;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -999;
}
a.skip, .accessibility-link {
	left: unset;
	position: relative;
	display: inline;
	width: unset;
	height: unset;
	overflow: hidden;
	color: #fff;
	background-color: #000;
	margin: 0;
	z-index: 999;
	text-align: left;
	padding: 12px 28px 12px 14px;
	font-size: 1em;
	margin-left: 0;
}
.accessibility-menu:focus-within {
	display: inline;
	position: relative;
	color: #fff;
	background-color: #000;
	width: 100%;
	height: auto;
	overflow: auto;
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	z-index: 999;
	float: left;
	left: 0;
	text-align: left;
}
.accessibility-menu>ul>li {
	display: list-item;
	list-style: none;
	float: left;
	padding: 5px;
	border: 1px solid #fff;
	margin: 10px;
	text-align: center;
}
.accessibility-menu>ul>li a {
	color: #fff;
	padding: 0;
	width: unset;
	margin: 0;
}
.accessibility-menu ul {
	padding: 0;
	margin: auto;
	width: max-content;
}
.accessibility-menu>ul>li a:focus, .accessibility-menu>ul>li a:hover {
	font-size: 1em;
}
.feedback-form-link {
	cursor: pointer;
}
/* ==========================================================================BrightEdge Links========================================================================== */
.be-ix-link-block .be-related-link-container {
	margin: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	padding-left: 25px;
	padding-right: 25px;
}
.be-ix-link-block .be-related-link-container .be-label {
	margin: 0;
	line-height: 1em;
	font-variant-numeric: lining-nums;
	font-weight: 700;
}
.be-ix-link-block .be-related-link-container .be-list {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.be-ix-link-block .be-related-link-container .be-list .be-list-item {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 6px;
}
.be-ix-link-block .be-related-link-container .be-list .be-list-item .be-related-link {
	font-size: 1em;
	line-height: 1.5em;
	color: #000;
	font-weight: 500;
	font-family: var(--font-primary);
	letter-spacing: -0.3px;
	border-bottom: none;
}
.be-ix-link-block .be-related-link-container .be-list .be-list-item .be-related-link:hover {
	text-shadow: 0 0 #000;
	text-decoration: underline;
	color: var(--hblue);
}
.be-ix-link-block .be-related-link-container .be-list .be-list-item:last-child {
	margin-right: 0;
}
/* ==========================================================================SEO Magic Links========================================================================== */
.sm-ix-link-block {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin-bottom: 18px;
}
.sm-label {
	margin: 0;
	line-height: 1em;
	font-variant-numeric: lining-nums;
	font-weight: 700;
	display: inline-block;
	margin-right: 20px;
	flex-grow: 0;
	flex-shrink: 0;
}
ul.sm-list {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1em;
}
li.sm-list-item {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 6px;
	font-size: 1em;
}
a.sm-related-link {
	font-size: 1em;
	line-height: 1.5em;
	color: #000;
	font-weight: 500;
	letter-spacing: -0.3px;
	border-bottom: none;
}
a.sm-related-link:focus, a.sm-related-link:hover {
	color: #036;
	text-decoration: underline;
}
/* ==========================================================================Chatbot========================================================================== */
.helpButton button {
	background: #036!important;
}
.embeddedServiceHelpButton .uiButton .helpButtonLabel .message {
	overflow: visible !important;
}
/* ==========================================================================WIOA Button Box========================================================================== */
.wioa-button-row p {
	margin: 0;
}
.wioa-button-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.wioa-button-row button {
	margin-right: 20px;
}
/* ==========================================================================RESPONSIVE — CONSOLIDATED MEDIA QUERIESAll rules at the same breakpoint merged into single blocks========================================================================== */
@media (max-width: 340px) {
	.rate, .rate-label {
		display: revert;
		padding-right: 0px;
	}
}
@media screen and (max-width: 460px) {
	header#pushed {
		padding: 15px;
	}
	.brand-dept {
		margin: 0px;
		padding: 5px 0px 0px 58px;
	}
	h1, h2, h3, h4, h5, h6 {
		line-height: 1.1em;
	}
	h2 {
		font-size: 1.8em;
	}
	p {
		font-size: 1.2em;
		line-height: 1.6em;
	}
	.header-nav-icons .col-xs-4,.header-nav-icons .col-sm-4,.header-nav-icons .col-md-4 {
		width: 100%;
	}
}
@media screen and (max-width: 500px) {
	.callouttext-bottom {
		bottom: 5%;
		transform: translate(-0%, -0%);
	}
}
@media (max-width: 575px) {
	.header-nav-icons .col-xs-4.col-sm-4.col-md-4 {
		width: 50%;
	}
	.brand img {
		width: 250px;
	}
	.hamburger-box .fa-search {
		display: none;
	}
	.sub-nav li > a {
		padding: 0px 20px;
	}
	.col-md-12, .col-sm-12 {
		float: unset;
	}
}
@media (max-width: 602px) {
	.container-xl {
		padding: 0;
		margin: 0;
	}
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		padding-right: 0;
		padding-left: 0;
	}
}
@media only screen and (max-width: 640px) {
	#goal {
		text-align: center;
	}
	.goal-stat {
		width: 50%;
		color: #000;
		text-align: center;
	}
}
@media (max-width: 750px) {
	.flex-image-box {
		width: 15%;
	}
	.image-callout-text {
		position: relative;
		background: #036;
	}
}
@media (max-width: 767px) {
	.figure-left, .figure-right {
		float: none;
		max-width: 100%;
		margin: 0 0 1rem 0;
	}
	.contactbox-container .bold-header {
		font-size: 3.5vw;
	}
	.contactbox-container .btn {
		font-size: initial;
		font-size: unset;
	}
	.contactbox-container .btn a {
		font-size: 12pt;
	}
	.col-sm-12.col-sm-push.col-md-12.col-md-push {
		padding-left: 25px;
		padding-right: 25px;
		max-width: 100%;
	}
	.contact-card-simple .figure-left {
		margin: unset;
	}
	.contact-card-simple figcaption {
		left: unset;
	}
	.contact-card-simple address, .contact-card-simple h2, .contact-card-simple h3 {
		margin: 0px 0px 0px 30px;
	}
	.be-ix-link-block .be-related-link-container .be-label {
		width: 100%;
		margin-bottom: 10px;
	}
	.be-ix-link-block .be-related-link-container .be-list {
		display: block;
		width: 100%;
	}
	.be-ix-link-block .be-related-link-container .be-list .be-list-item {
		display: block;
		margin-right: 0;
	}
}
@media (max-width: 480px) {
    .col-sm-12.col-sm-push.col-md-12.col-md-push {
        padding-left: 5px;
        padding-right: 5px;
    }
}
@media only screen and (min-width: 768px) {
	.be-ix-link-block .be-related-link-container {
		display: flex;
		align-items: baseline;
		justify-content: center;
	}
	.be-ix-link-block .be-related-link-container .be-label {
		display: inline-block;
		margin-right: 20px;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.highlight-stats {
		/* no change needed, just contextual for the mobile override below */
	}
}
@media only screen and (max-width: 768px) {
	.highlight-stats {
		float: none;
		padding-top: 10px;
		width: 100%;
		margin: 0;
	}
	.wioa-button-row {
		flex-direction: column;
		padding: 1rem;
	}
	.wioa-button-row button {
		width: 90%;
		margin: 10px;
	}
}
@media screen and (max-width: 900px) {
	body {
		background: #000000;
		color: #000;
		font-size: 1em;
		line-height: 1.3em;
	}
	h1.ytd-video-primary-info-renderer {
		display: none;
	}
	.col-md-4#circle-box-1, .col-md-4#circle-box-2, .col-md-4#circle-box-3,.col-md-4#circle-box-4, .col-md-4#circle-box-5, .col-md-4#circle-box-6,.col-md-4#circle-box-7, .col-md-4#circle-box-8, .col-md-4#circle-box-9,.col-md-4#circle-box-10, .col-md-4#circle-box-11, .col-md-4#circle-box-12 {
		width: 100%;
		float: left;
	}
}
@media screen and (max-width: 1400px) {
	.container-lg, .container-xl {
		max-width: 100%;
		padding: 0px;
	}
	[class^="content-box-"] {
		padding: 0px 48px;
	}
}
@media only screen and (max-width: 1200px) {
	.non-bs-row {
		padding-left: 25px;
	}
	.button-box-button-1, .button-box-button-2 {
		display: none;
	}
	[class*="col-md-"] {
		float: left;
	}
	.container {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.side-nav {
		overflow: auto;
		width: 50%;
	}
	ul.normal {
		display: none;
	}
	.dropdown {
		display: inline-block;
	}
	.sub-nav li {
		font-size: 1em;
		width: 100%;
		display: block;
		position: relative;
		height: unset;
		padding: 15px 0px;
		border-bottom: 1px solid #999;
		float: unset;
		margin: 0px auto;
		max-width: 550px;
	}
	.sub-nav li > a {
		line-height: 1.3em;
		cursor: pointer;
		border-bottom: 2px dotted #333;
		padding: 0px;
		float: unset;
		width: fit-content;
	}
	.sub-nav a:hover {
		border-bottom: 2px dotted white;
	}
	.sub-nav ul {
		padding-inline-start: 25px;
	}
	.fa-caret-down {
		color: var(--pop);
		transition-duration: .45s;
	}
	.fa-caret-down:before {
		color: #b7cd33;
		padding-left: 2px;
	}
	#main-navigation > ul > li:hover > a > .fa-caret-down {
		transition-duration: .45s;
		transform: translateY(3px) rotate(-180deg) translateX(-2px);
	}
	#main-navigation .dropdown-menu {
		background: var(--hblue);
	}
	#circle-box-1, #circle-box-2, #circle-box-3 {
		border-top: #f2f0ea;
		border-top-style: solid;
		border-top-width: 0px;
		padding-bottom: 20px;
	}
	#main_content, #main {
		padding: 0;
	}
	.container-lg {
		max-width: unset;
	}
	[class^="content-box-"] {
		padding: 0px;
	}
}
@media screen and (max-width: 1100px) {
	.lw-event-item {
		flex: 1 0 calc(100%/1);
		width: calc(100%/1);
		height: 100%;
		display: block;
		float: left;
		position: relative;
		max-height: inherit;
	}
}
@media (max-width: 992px) {
	.container, .container-lg, .container-md, .container-sm {
		max-width: 100%;
	}
	.interrupter-slide-arrow {
		height: 3rem;
	}
	.image-callout-text {
		background: #0049929e;
		bottom: 0;
		height: max-content;
		left: 0;
		position: absolute;
		transform: unset;
		width: 100%;
	}
	.image-callout-text p {
		font-size: 3em;
	}
	.image-callout-text h1 {
		color: #fff;
		font-size: 2.3em;
		font-weight: 400;
		line-height: 1em;
		padding-top: 6px;
		padding-left: 10px;
		padding-right: 10px;
		margin: 0 0 10px;
	}
}
@media screen and (max-width: 962px) {
	.side-nav {
		width: 100%;
	}
	nav {
		text-align: center;
	}
	.brand-dept, .brand-dept a {
		font-size: 1.5em;
		margin: 5px 0px 10px;
	}
	.content {
		width: 100%;
		margin-top: 200px;
		font-size: 20px;
		color: #000;
	}
	.row, .row.page_content.row {
		padding: 0px 15px;
		margin: 0;
	}
	[class*="col-"] {
		padding-right: 10px;
		padding-left: 10px;
	}
}