@import url("/_resources/css/buttons-2024-12-17.css");  /* buttons.css */

/* 
Last Updated: Jan 16, 2024

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
*/

/* Elements */
* {
    box-sizing: border-box;
    font-family: nimbus-sans-n4, nimbus-sans, "Helvetica Neue", Helvetica, Arial, "Droid Sans", sans-serif;
    letter-spacing: -0.3px;
}
:root {
	--light-gray: #e1e1e1;
	--hblue: #003366; 
	--nav-blue: #335B84;
	--white: #FFFFFF;
	--pop: #b6cc2c;
}

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 1em;
}

body {
    background: #fff;
    color: #000;
    line-height: 1.3em;
}


/* Universal Heading Defaults */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

/* h1 Heading */
h1 {
    font-size: 2.5em;
    color: #036;
    font-weight: 700;
    margin: 20px 0 0;
    padding: 0 0 0.5em;
    letter-spacing: -1.7px;
}

/* h2 Heading */
h2 {
    font-size: 2.25em;
    color: #036;
    font-weight: 700;
    margin: 20px 0 0;
    padding: 0 0 0.5em;
    letter-spacing: -1.7px;
}

/* h3 Heading */
h3 {
    font-size: 2em;
    color: #000;
    font-weight: 500;
    margin: 20px 0 0;
    padding: 0 0 0.5em;
    letter-spacing: -0.04em;
}

/* h4 Heading */
h4 {
    font-size: 1.75em;
    color: #3F3F3F;
    font-weight: 500;
    margin: 18px 0 5px;
}

/* h5 Heading */
h5 {
    font-size: 1.5em;
    color: #494747;
    font-weight: 500;
    margin: 28px 0 0;
}

/* h6 Heading */
h6 {
    font-size: 1.375em;
    color: #494747;
    font-weight: 500;
    margin: 28px 0 0;
    font-style: italic;
}

/* ==========================================================================
   Heading Link Styles – WCAG-Compliant
   ========================================================================== */

/* All heading links: visually distinct and accessible */
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;
}

/* Hover/focus WCAG */
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;
}

/* List Styles */
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;
}

p {
    font-size: 1.24em;
    color: #1C1C1C;
    line-height: 1.86em;
    font-weight: 100;
    margin: 0px 0px 10px 0px;
    padding: 0 0 6px;
}

ul li ul, ul li ul li { font-size: 1em; }
ol a, p a { font-weight: 700; border-bottom: 2px dotted #076AB0; }
li ul li { font-size: .8em; margin-top: 10px; }
ul ul li { font-size: .8em;}

/* Margins */
section ol li, section ul li {
    margin-bottom: 5px;
}

/* Font Weights */
b, strong { font-weight: 700; }

/* Link Styles */
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;
}

li a { border-bottom: 2px dotted #076AB0; }
ul.normal a { border-bottom: none; }

/* Image Styles */

.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: 27px 20px 20px 0px;}

.profile {float: left; margin: 35px 20px 20px 0px;}

/* Text Styles */

.centered { text-align: center; }

.centered-margin { margin: 0 auto; }

.nowrap {white-space: nowrap;}

.weight600 { font-weight: 600; }


/* Block Styles */

.inline-block {display: inline-block;}

.left { float: left;}

.right { float: right;}

.spacer { margin-top: 20px; border-top: none; }


/* Hidden Elements */
.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 Controls - End */

/* Additional 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;
}

/* Open Class List */

.box-style-hidden-controls .open-course-search-container p {display:none;}

/* END Open Class List */

.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;
}

button.btn.btn-large.btn-primary-grey.white a {
    border-bottom: none;
}

/* 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;
}

.adult-button-fix {
	background: #060;
	border-color: #060;
	border-radius: 10px;
	font-size: 16px;
	width: 100%;
}
a.adult-button-fix {
	border-bottom: 0px;
}

/* Background Styles for Universal Template - Start*/

.content-box-1, .content-box-2, .content-box-3, .content-box-4, .content-box-5, .content-box-6, .content-box-7, .content-box-8, .content-box-9, .content-box-10, .content-box-11, .content-box-12 {
	width: 100%;
	background: #fff;
	z-index: -1;
	margin-top: 0px;
	overflow: auto;
	margin-bottom: 0px;
}
.content-box-1 .row.page_content.row, .content-box-2 .row.page_content.row, .content-box-3 .row.page_content.row, .content-box-4 .row.page_content.row, .content-box-5 .row.page_content.row, .content-box-6 .row.page_content.row, .content-box-7 .row.page_content.row, .content-box-8 .row.page_content.row, .content-box-9 .row.page_content.row, .content-box-10 .row.page_content.row, .content-box-11 .row.page_content.row, .content-box-12 .row.page_content.row {
	background: transparent
}
.content-box-1 .container .row p:first-child, .content-box-2 .container .row p:first-child, .content-box-3 .container .row p:first-child, .content-box-4 .container .row p:first-child, .content-box-5 .container .row p:first-child, .content-box-6 .container .row p:first-child, .content-box-7 .container .row p:first-child , .content-box-8 .container .row p:first-child, .content-box-9 .container .row p:first-child, .content-box-10 .container .row p:first-child, .content-box-11 .container .row p:first-child, .content-box-12 .container .row p:first-child{
	padding-top: 30px;
}
.content-box-1 .container .row p:last-child, .content-box-2 .container .row p:last-child, .content-box-3 .container .row p:last-child, .content-box-4 .container .row p:last-child, .content-box-5 .container .row p:last-child, .content-box-6 .container .row p:last-child, .content-box-7 .container .row p:last-child, .content-box-8 .container .row p:last-child, .content-box-9 .container .row p:last-child, .content-box-10 .container .row p:last-child, .content-box-11 .container .row p:last-child, .content-box-12 .container .row p:last-child {
	padding-bottom: 0px;
}

.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, .box-style- .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, .box-style- .col-xs-12.col-sm-12.col-md-8 {
	padding: 20px 0;
}
/* Background Styles for Universal Template - End*/

::selection {
	background: #00508A;
	color: #FFF
}
.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;
}
body section #main_content {
	background: #FFF;
	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
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
	min-height: 0px;
}

.profile_list {
	min-height: 120px
}
.profile_list h3 {
	margin-top: 0
}
section span.nostretch img {
	width: inherit
}
h1+img, span.img-responsive img {
	display: block;
	height: auto;
	max-width: 100%
}
.img-responsive {
    width: 100%;
	height: auto;
}

.container-fluid {
	padding: 0
}

.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
}

/* Buttons */

.body-button-green a {
	color: #FFF;
	font-size: 18px
}
.body-button-green {
	background: #060;
	color: #FFF;
	padding: 8px;
	width: 150px;
	text-align: center
}
.side-bar-button-green a {
	color: #FFF;
	font-size: 20px
}
.side-bar-button-green {
	background: #060;
	color: #FFF;
	padding: 8px 8px 8px 10px;
	text-align: left;
	margin: 5px 0
}
.contact-box-contact-info {
	margin: 0px 0px 4px 0px;		
	}
.request-info-text-link {
	font-size: 1.24em;
	margin: 0px 0px 30px 0px;
	}		
.request-info-text-link button {
	font-weight: 700;
    border: 0px;
    border-bottom: 2px dotted #076AB0;
    background: transparent;
    padding: 0px;
    font-size: 1em;
    color: #076AB0;
	}
.request-info-text-link button:hover {
	color: #036;
	}




.empl-card a {
	line-height: 24px;
	display: inline-block;
}

/* General Footer Styles */
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;
}

/* Lists Styles */
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:hover {
	text-shadow: 0 0 var(--hblue);
    color: var(--hblue);
    text-decoration: underline;
}

ul.list-footer a {
	font-size: 1em;
    line-height: 1.5em;
    color: #000;
    font-weight: 500;
    font-family: nimbus-sans-n4, nimbus-sans, "Helvetica Neue", Helvetica, Arial, "Droid Sans", sans-serif;
    letter-spacing: -0.3px;
    border-bottom: none;
}
.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 Containers & Icons */
#social-container {
    padding: 10px 0 12px 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 0 0 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;
}

.upper-footer ul, .upper-footer li {
    font-size: 1em;
    padding: 2.5px 0;
}

.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; }

/* Search Box Styles */
#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;
}

#sf-btn {
    background: #B20D01;
    border: none;
    height: 29px;
}

#sf-text {
    line-height: normal;
    margin-bottom: 5px;
    height: 29px;
    color: #000;
    padding-left: 4px;
}

/* Accordions */

.accordion-group {
	margin-bottom: 2px;
	border: 1px;
	border-radius: 4px
	}
.accordion-heading {
    border-bottom: 0;
    font-size: 1.2em;
	}
.accordion-heading .accordion-toggle {
	display: block;
	padding: 8px 15px;
	margin: 0px 30px 15px 30px;
	background: url(https://www.harpercollege.edu/_resources/images/down_arrow.jpg) no-repeat calc(100% - 10px);
	border: solid 3px #dedede;
	box-shadow: 0 3px 1px 1px rgba(107, 107, 107, 0.1), 0 1px 1px 0 rgba(112, 112, 112, 0.13), 0 1px 2px 0 rgba(134, 134, 134, 0.1);
	}
.accordion-toggle {
	cursor: pointer
	}
.accordion-inner {
	padding: 9px 15px;
	border-top: none;
	}
div.accordion:last-of-type {
	margin-bottom: 30px;
	}
.accordion-alt-1 .accordion-heading .accordion-toggle {
	position: relative;
	padding: 1rem 3rem 1rem 1rem;
	margin-right: 4px;
	background: none;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #a7a9ac;
	padding-bottom: 12px;
    width: 100%;
    display: inline-table;	
}
.accordion-alt-1 .accordion-heading a.accordion-toggle::after {
    position: absolute;
    right: 0.4em;
    top: 0.25em;
    font-family: "Font Awesome 5 Free";
    content: "\f055";
    line-height: 1.245em;
    font-weight: 900;
    width: initial;
    height: inherit;
    display: table-cell;
    text-align: initial;
    vertical-align: initial;
    padding: 5px 0px 0px 15px;
    font-size: 1.3em;
}
.accordion-alt-1 .accordion-heading a.accordion-toggle:not(.collapsed)::after {
	content: "\f056";
	}
.accordion-alt-1 .accordion-heading a.accordion-toggle.collapsed::after {
	content: "\f055";
	}

/* This is a fix for the programs pages */

.accordion-css-tweeks {
	background: #000!important;
	color: #fff;
	}
.accordion-css-tweeks:hover {
	color: #fff; text-decoration: underline;
	}	
.far {
	font-family: nimbus-sans-n4, nimbus-sans, "Helvetica Neue", Helvetica, Arial, "Droid Sans", sans-serif!important;
	}
.far:before {
	font-family: "Font Awesome 6 Free"!important;
	}
.print-program {
	padding: 15px;
	}
/* Fixing accordion issue on mobile */
@media only screen and (max-width: 768px) {
.accordion-heading .accordion-toggle {
     margin: 0px 0px 15px 0px;	
}
}


/* END Accordions */

.pull-right img {
	margin: 0px 0px 10px 20px;
}

.pull-left img {
	margin: 0px 20px 10px 0px;
}

.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
}

.row {
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 0
}

/* Pull Quotes - Needs some work */
.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;
}

button.btn.btn-default {
	height: 25px;
	border-radius: 0 0px 0px 0;
	margin: 9.5px 0 0 0;
	padding: 2px 6px;
	border-style: none;
	color: #B3B3B3;
	background: #FFF;
	float: left
}

/* Keyword Sorter CSS */
.filtergroup p {min-height: 60px; padding-right:10px;}	
.filtergroup p em {color:#525354; font-size:14px;}	

@media only screen and (min-width:768px) {
	.is-table-row {
		display: table
	}
	.is-table-row [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: #FFF
}
.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 {
	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
}
.linked-image, .linked-image:hover {
	border-bottom: 0px;
}	
.linked-image img:hover {
	border: #000 solid 2px;
}	
.harper-logo {
	margin: 0 auto;
	height: 92px;
	background: url(https://www.harpercollege.edu/_resources/images/logo_white.png) center center no-repeat #036
}
#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;
}
 @media only screen and (max-width: 640px) {
	 #goal {
		 text-align: center;
	}
}
 #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;
}
 @media only screen and (max-width: 640px) {
	 .goal-stat {
		 width: 50%;
     color: #000;
		 text-align: center;
	}
}
 .goal-number, .goal-label {
	 display: block;
   color: #000;
}
 .goal-number {
	 font-weight: bold;
   color: #000;
}

#main {
	padding: 0 0 0 0;
	float: right;
}

#main_content {
	padding: 0 0 0 0;
}
.content {
	width: 100%;
	margin-top: 200px;
	font-size: 20px
}
button, html input[type=button], input[type=reset], input[type=submit] {
	cursor: pointer;
	font-weight: 500
}
input {
	line-height: normal;
	margin-bottom: 5px
}

.modal-body img {
	width: 100%;
	height: 100%;
}
/* Image Quotes */
.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;
}

.contactbox-tag-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
}
.contactbox-tag {
	max-height: initial;
}
.contactbox-tag-purple {
	max-height: initial;
	background: #8a2be252;
}

.white-text {
	color: #fff;
}

@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) x 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) x 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) x 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) x 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);
	}
}
#emergency * {
	min-height: 0px;
}
#emergency p {
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: 500;
	text-align: center;
	color: #fff;
}

/* PHP Rave - Start */
.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;
}

/* PHP Rave - End */

/* Custom Alert CSS - Start */
#custom-alert-box {
	color: #fff;
	padding: 15px 15px 1px 15px;
}
#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;
}

/* Custom Alert CSS - End */

#de {
    display: none;
}
#directedit #de {
    display: inline;
}
.col-sm-12.col-sm-push.col-md-12.col-md-push {
	padding-left: 40px;
	padding-right: 40px;
}
.row.page_content {
	padding: 0;
	margin: 0;
}
.bold-text-header {
	font-size: 32px;
	font-weight: bold;
	padding: 0 0 18px;
	letter-spacing: -0.03em;
}
.is-table-row [class*=col-] {
	background: #FFF;
	text-align: center;
}
.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;
}

.block {
	height: 40px;
}


body section #main_content, body section #main {
	background: transparent;
}

.is-table-row [class*=col-] {
	background: transparent;
	text-align: center;
}
.lwl {
	display: none;
}
li.lwe {
	width: 27%;
	float: left;
	list-style: none;
	padding: 3%;
}

.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 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;}

.ender-button-box-container {
	width: 200px;
	margin: auto;
	margin-top: calc((100% / 400) * 12);
}
.content-box-3 #main_content, .content-box-3 #main {
	padding: 0;
}
.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%);
}
.box .btn-primary {
	min-width: 90%;
	margin: auto 5% auto 5%;
}

#emergency {
	color: #ffffff;
	padding-left: 0px;
	padding-right: 0px;
}
.no-banner {
	height: 37px;
}

.circle-box-content-heading a {
	color: #fff;
}
.circle-box-content-heading a:hover, .circle-box-content-heading a:focus {
	text-decoration: underline;
}
.covid-button {
    background: #ffe144;
    color: #036;
    border: none;
    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 img {
    width: 100%;
    max-width: 250px;
    margin-top: 16px;
    float: left;
}

.hsi-logo a {
    text-decoration: none;
}
.feedback-form-link {
    cursor: pointer;
}
@media screen and (max-width: 900px) {
	h1.ytd-video-primary-info-renderer {
		display: none;
	}
}
@media screen and (max-width: 1200px) {
	#circle-box-1, #circle-box-2, #circle-box-3 {
		border-top: #f2f0ea;
		border-top-style: solid;
		border-top-width: 15px;
		padding-bottom: 20px;
	}
	#main_content, #main {
		padding: 0 0 0 0;
	}
	.container-lg {
		max-width: unset;
	}
}
@media screen and (max-width: 767px) {
	.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;
	}
}
.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-box-flex-row {
	display: flex;
}
.dual-color-box-flex-col {
	flex: 1;
	height: 100%;
}
.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;
}
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;
}
.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;
}
.purple-box-80width {
	width: 100%;
	background: #6217a74f;
	height: 100%;
	padding: 10%;
}
.area-cat-bluebox-inner h2, .area-cat-bluebox-inner h3, .area-cat-bluebox-inner p {
	color: #fff;
	line-height: 1em;
	font-size: 24px;
	margin: 0;
}
.area-cat-bluebox-inner hr {
	border: 1px solid #000;
}

.area-cat-bluebox-inner li {
	font-size: 16px;
	line-height: 1.3em;
	font-weight: 300;
	color: #fff;
}

.program-link {
	font-size: 18px;
	padding: 8px;
	margin-bottom: 6px;
	margin-left: 6px;
	margin-right: 6px;
}
.program-link-art {
	background: #F2E5BF;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;
}
.program-link-business {
	background: #ccd8a3;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-education {
	background-color: #e4e4f6;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-stem {
	background-color: #D0EAEA;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-health {
	background-color: #f6dbd1;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-liberal {
	background-color: #F1E1F9;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-manufacturing {
	background-color: #EEE8F2;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-science {
	background-color: #e1f6d1;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-public {
	background-color: #ebf9da;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-link-social {
	background-color: #cee3f2;
	padding: 8px;
	margin-bottom: 6px;
	margin-right: 8px;	
}
.program-container {
	margin-top: 10px;
	margin-bottom: 10px;
}
.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;
}
.col-md-12 .circle-box-table-container .circle-box-alt-box {
	width: 33.33%;
}
.circle-box-content-heading {
	width: 100%;
	color: #fff;
	background: #036;
	padding: 10px;
	font-weight: 900;
	text-align: center;
	height: 100%;
}
.circle-box-alt-box {
	background: #e7e7e7;
	display: table-cell;
	height: 100%;
	float: none;
	border: solid 10px #fff;
	padding: 0px;
	vertical-align: top;
}
.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-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-alt-box p {
	margin: 0px;
	border-bottom: solid 10px #fff;
	background: #fff;
}
.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%;
}
a.fab.fa-google, a.fa.fa-calendar, a.fa.fa-clock-o {
	width: 28px;
}

/* Areas Program Highlight Stat Box */

.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-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;
	}
.highlight-stats-heading h3 {
	color: #fff; font-size: 1.8em;
	}
@media only screen and (max-width: 768px) {
			.highlight-stats {
				float: none;
				padding-top: 10px;
				width: 100%;
				margin: 0;
			}
		}
/* Areas Program Stat Box */

.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;
}
#google_translate_element {
	float: right;
	margin: 20px;
    padding: 10px;
    border: 2px transparent solid;
    border-radius: 5px;
}
#google_translate_element:hover {
    border: 2px #999 solid;
}
@media screen and (max-width: 900px) {
	.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;
	}
}

.grey-fullspan-box-alert2 .col-xs-12.col-sm-12.col-md-12 p {
	color: #000;
	}

.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;
	}

/* Consent Cook Widget - Start */
#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: #855056;
	color: #fff;
	font-size: 14px;
	width: 170px;
	text-transform: capitalize;
}
.truste-messageColumn, .truste-cookie-link{
	font-size: .9em ;
}
.truste-button1, .truste-button2 {
    background: #036!important;
}
/* Consent Cook Widget - End */

.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: 1em;
}
.megaphone {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.enhanced-highlight-heading {
  color: #036;
  font-weight: 900;
  font-size: 1.5em;
  margin-bottom: 16px;
}

/* HARPER BLUE CALLOUT BOX */

.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;
	} 	
/* END HARPER BLUE CALLOUT BOX */


/* 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: #060; 
	font-size: 1.35em; 
	margin-top: 0px; 
	padding: 15px 20px;
	}
.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;
	}

.indent {
	padding-left: 40px;
	}

.indent-list {
	padding-left: 60px;
	}
/* END SALESFORCE FORM EMBEDS */

/* FORMSTACK FORM OVERRIDES */

.fsform-container .fsLabel {
   /* color: #036; */
}

.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;
}

/* END FORMSTACK FORM OVERRIDES */

/* HIGHLIGHT BOX COMPONENT */
.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);
}
/* END HIGHLIGHT BOX COMPONENT */


/* LEAD IMAGE OVERLAY COMPONENT */

.overlay-text-image-box {
	width: 100%;
	position: relative;
	margin-bottom: 15px;
}
.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;
}
	
@media screen and (max-width: 962px){
	.image-callout-text p {
		font-size: 3em;
	}
	.image-callout-text {
		width: 100%;
		position: absolute;
		Bottom: 0;
		Left: 0;
		height: max-content;
		transform: unset;
		background: #0049929e;
	}
	.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;
	}			
}
/* END LEAD IMAGE OVERLAY COMPONENT */

/* Start of Menu CSS */

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-nav {
    position: fixed;
    background-color: #000;
    width: 340px;
    overflow: hidden;
    height: 100%;
    z-index: 200; /* changed this after menu update in March 2024 */
    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 {
    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--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::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);
}
.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
}

.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}


.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}
.hamburger-inner::before {
    top: -10px;
}
.hamburger-inner::after {
    bottom: -10px;
}
.hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0px;
}
.side-nav-ul {
    list-style: none;
    font-size: 28px;
    color: #036;
    display: inline-block;
    line-height: 1.3em;
    margin: 0 20px 0 20px;
}
.search-box {
    width: 100%;
}
#cse-search-box input[type=text] {
    color: #000;
    background: #FFF;
    border: 0;
    padding: 2px 2px 2px 6px;
    height: 25px;
    width: calc(100% - 30px);
    font-size: 14px;
}
button.btn.btn-default {
    height: 25px;
    border-radius: 0;
    margin: 10px 0 0 0;
    padding: 2px 6px;
    border-style: none;
    color: #B3B3B3;
    background: #FFF;
    float: left;
}
.side-nav-ul li {
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 0 10px 0;
    color: #fff;
}
.header-nav-icons .col-xs-4.col-sm-4.col-md-4 {
    padding: 6px;
}
.header-icon-container {
    font-size: .57em;
    text-align: center;
    line-height: .75em;
    margin: 10px 0px;
}
.side-nav-ul hr {
    border-top: 1px solid #fff;
    width: 100%;
}
.side-nav-ul a {
    color: #fff;
}

.header-icon-container a {
    padding: 0px;
    padding-bottom: 10px;
    width: 100%;
    display: block;
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
}
.header-icon-container a:hover {
    border: none;
    padding: 0px;
    padding-bottom: 10px;
	font-weight: 900;	
}
.nav-ico-spacer {
    background: #333;
    float: left;
    margin-bottom: 10px;
    padding: 12%;
}
.header-icon-container img {
    width: 90%;
    margin: 0 0 10px 0;
    background-size: 100%;
}
.sidenav-icoblackboard, .sidenav-icocalendar, .sidenav-icoharperlogo, .sidenav-icohip, .sidenav-icolibrary, .sidenav-icomyharper {
    background-image: url(/images/sidenav-ico.png);
}
.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%;
}

.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: 2px #fff solid;
}
.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 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 a:focus, .sub-nav a:focus-visible {
	border: none;
}

.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;
}
		.sub-nav ul li ul li:first-child {
			border-top: none;
		}

		/* main nav 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; 
		}

		/* rounding edges of dropdown menu */

		.sub-nav ul > li > ul > li:last-child {
			border-bottom: none;
			border-radius: 0 0 10px 10px;
		}

		/* Unround the bottom right edge of li if it has third tier dropdown */
		
		.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;
		}
		
		/* rounding bottom edges of li in third tier desktop dropdown */
		.sub-nav ul > li > ul > li:hover > ul > li:last-child:hover {
			border-radius: 0 0 10px 10px;
		}

		/* Changing the spacing of nav bar */

		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;
		}

.dropdown {
    display: none;
    width: 100%;
    position: relative;
}

#dropdownMenuButton {
    touch-action: manipulation;
    cursor: pointer;
    width: 100%;
    background: #333;
    font-size: 1.1em;
	border-radius:0px;
	color: #000;
	background-color: var(--light-gray);
	border: none;
	font-weight: 900;
}

.dropdown-menu {
    background: #333;
	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;
    color: #fff;
    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);
}

.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;
}
		
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;
}

/* the spacing for the mobile menu first tier */
button:not(:disabled) + div a { 
	margin-left: 2em;
}

/* talk to wes about making the font size the same size for the @media of mobile dropdown */

/* button:not(:disabled) + div li:hover {
background: var(--light-gray);
} */

button:not(:disabled) + div>li>a:hover {
	color: #FFF;
}

.sub-nav ul li ul li a {
	text-wrap: wrap;
	text-align: left;
	margin: 0.8em auto;
	width: 100%;
	padding: 0px 1.5em;
}

/* Second tier mobile drop down menu */

button:not(:disabled) + div li > a + ul {
	background: var(--light-gray); 
	font-size: 1em;
	margin: 20px 0 0 0;
	text-wrap: wrap; 
	padding: 0;
}

/* rounding bottom of last li and internal ul (if available) */

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;
}

/* Editing the third tier menu on mobile */

button:not(:disabled) + div li > a + ul li:last-child ul {
	box-shadow: none;
}

/* 		button:not(:disabled) + div li > a + ul li ul li, button:not(:disabled) + div li > a + ul li ul li:hover { */ /* this is the mobile third tier menu */


button#dropdownMenuButton:not(:disabled) + div li ul li ul li, button#dropdownMenuButton:not(:disabled) + div li ul li ul li:hover { /* HERE */
	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-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;
}



.menu-cta {
    background: #fff;
    color: #036;
    border-radius: 30px 30px 30px 30px;
    border: none;
    margin: 0;
    padding-left: 30px;
    padding-right: 30px;
    float: right;
    line-height: 1em;
    margin-top: 14px;
    height: 35px;
    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 {
    background: #fff!important;
}
.menu-cta:focus, .menu-cta:active, .menu-cta:hover{
    color: #fff!important;
	background: #036!important;
}
.menu-cta a:focus, .foundation-buttons-menu-item a:active, .menu-cta a:hover, .foundation-buttons-menu-item:focus a, .menu-cta:active a, .menu-cta:hover a {
    color: #fff!important;
}


/* End of Menu CSS */ 

.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: 0 0 0 0;
	position: relative;
	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;
}

/*Component Display Options*/

.component-display-inital  {
	display:initial;
}	

.component-display-inline-block  {
	display:inline-block;
}	

.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;	
}
.ou-search-directory {
	display: none;
}
.ou-search-result-heading {
	font-size: 1.3em;
}
.ou-search-link {
	font-size: 1em;
}
.ou-search-link {
	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;
}

.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;
}

/* Tile Buttons Component - START */

.tile-container {
    background: #036;
    height: 180px;
    width: 300px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    margin: 0px 30px 30px 0px;
    display: inline-block;
    vertical-align: middle;
}		
.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-medium div.tile-container {
	background: #007097;
	height: 80px;
	margin: 0px 25px 30px 0px;
}      
.tile-medium div.tile-container:hover {
	background: #007097;
}
.tile-medium .tile-container p {
	font-size: 1em;
    line-height: 1.56em;
}
.tile-medium div.tile-container:hover {
	background: #109AD7;
}
.tile-tall {
    margin: 0px auto;
    width: fit-content;
}
.tile-tall .tile-container p a {
	height: 180px;
    display: block;
}
.tile-medium .tile-container p a {
	height: 80px;
    display: block;
}
.tile-medium .tile-container p a button:hover {
	color: #000;
}
/* Component - Tile Buttons - END */


/* Component - Image with Text Overlay - START */

.image-button-overlay-int {
	background: #6217a74f;
	padding: 10%;
	width: 100%;
}
		
.image-button-overlay {
	margin: 25px 0px 20px 0px;
		}
				
.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;
}
				
		

/* Asset - Contact Card - Start */

.contact-box-left {
	float: left; 
	margin: 10px 0px 40px 0px; 
	width: 50%;
}

.contact-box-right {
	float: right; 
	padding: 0px 0px 0px 30px; 
	width: 50%;
}

/* Asset - Contact Card - End */

.grey-fullspan-box-alert2 .col-xs-12.col-sm-12.col-md-12 p {
    color: #000;
    padding: 0;
    margin: 0;
}
.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;
}

/* 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;
    overflow:hidden;
    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 Component*/

.youtube-embed {margin: 10px;}
.video-align-left {float: left; margin-right: 30px;}
.video-align-right {float: right; margin-left: 30px;}
.video-align-left {margin: 0px auto; width: fit-content;}

/* Code Mergered from Homepage BS5 CSS*/

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    float: left;
}
.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;
}

.blue-header-box {
    font-size: 22px;
    letter-spacing: -0.04em;
    background: #036;
    height: 44px;
    vertical-align: middle;
    text-align: center;
    margin: 10px;
}

button.btn.btn-large.btn-primary.white {
    display: inline-block;
}

button.btn.btn-large.btn-primary.white a {
	padding-top: 1px;
}

.inner.color-white p {
    padding-top: 10px;
}

a {
    text-decoration: unset;
}

.interrupter-slide a {
    font-size: 24px;
    text-align: center;
    width: 100%;
    float: left;
    color: #036;
    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;
}

.interrupter-slide-arrow {
    position: absolute;
    display: flex;
    top: 0;
    bottom: 0;
    margin: auto;
    height: unset;
    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 - This might need some conditional call - Start */
.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-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;
}
.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;
}

.interrupter-slide {
    width: 100%;
    flex: 1 0 100%;
}

/* interrupter - End */

#sf-btn {
    background: #B20D01;
    border: none;
    height: 29px;
    color: #fff;
}
.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;
}

span.img-responsive img {
    display: block;
    height: auto;
    width: 100%;
    padding: 0;
    margin: 0;
}
.non-bs-row {
	padding-left: 25px;
    width: 100%;
    float: left;
}
.row>* {
    padding: 0;
    margin: 0;
}
.container .row {
    width: 100%;
}
.ppw-container {
    float: right!important;
    width: 500px!important;
}

.highlighted {
    background-color: yellow;
    color: black; 
}

.highlighted-blue {
    background-color: #00fff7;
    color: black; 
}



.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: nimbus-sans-n4, nimbus-sans, "Helvetica Neue", Helvetica, Arial, "Droid Sans", sans-serif;
    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;}

@media (max-width: 767px) {
  .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 (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;}
}

/* Media Queries */

@media screen and (max-width: 1400px) {
	.container-lg, .container-xl {
		max-width: 100%;
		padding: 0px;
	}
	.content-box-1, .content-box-2, .content-box-3, .content-box-4, .content-box-5, .content-box-6, .content-box-7, .content-box-8, .content-box-9, .content-box-10, .content-box-11, .content-box-12 {	
		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;
	}
	.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
		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);
    }
	
	.content-box-1, .content-box-2, .content-box-3, .content-box-4, .content-box-5, .content-box-6, .content-box-7, .content-box-8, .content-box-9, .content-box-10, .content-box-11, .content-box-12 {	
		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
	}
}
@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
	}
	.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
		padding-right: 10px;
		padding-left: 10px
	}
}
@media screen and (max-width: 900px) {
    body {
        background: #000000;
        color: #000;
        font-size: 16px;
        line-height: 1.3em;
    }
}
@media only screen and (min-width: 768px) {
	.is-table-row2 [class*=col-] {
		float: none;
		display: table-cell;
		vertical-align: top;
	}
}
@media screen and (max-width: 750px){
	.flex-image-box {
		width: 15%;
	}			
}	
@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 (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 screen and (max-width: 500px) {
	.callouttext-bottom {
	bottom: 5%;
	transform: translate(-0%, -0%);
	}
}
@media screen and (max-width: 460px) {
	header#pushed {
   		padding: 15px;
	}
	.brand-dept {
		margin: 0px;
		padding: 5px 0px 0px 58px;
	}
}
@media (max-width: 340px){
	.rate, .rate-label {
		display: revert; padding-right:0px;
		}
}
/* General reset for box sizing */
* {
    box-sizing: border-box;
}

/* Flexbox for container alignment */
.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;
    margin: 10px 0px;
}

/* Ensure images are properly sized */
.header-icon-container img {
    width: 90%;
    margin: 0 0 10px 0;
    background-size: 100%;
}

.nav-ico-spacer {
    background: #333;
    margin-bottom: 10px;
    padding: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure the text aligns properly */
.header-icon-container a {
    font-size: .8em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 0 0 10px;
}

.header-icon-container a:hover {
    font-weight: 900;
}

/* Fix for specific icons to ensure uniformity */
.sidenav-icoharperlogo, 
.sidenav-icomyharper, 
.sidenav-icoblackboard, 
.sidenav-icocalendar, 
.sidenav-icolibrary, 
.sidenav-icohip {
    background-image: url(/images/sidenav-ico.png);
    background-size: cover;
    width: 100%;
    height: 100%;
}

/* Specific background positions for each icon */
.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%;
}

/* Media queries for responsiveness */
@media (max-width: 575px) {
    .header-nav-icons .col-xs-4,
    .header-nav-icons .col-sm-4,
    .header-nav-icons .col-md-4 {
        width: 50%;
    }
}

@media (max-width: 460px) {
    .header-nav-icons .col-xs-4,
    .header-nav-icons .col-sm-4,
    .header-nav-icons .col-md-4 {
        width: 100%;
    }
}

/* SEO Magic - Links Plugin */

.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;
}