/* declaring global style variables */
:root {
  /* COLORS */
  --eq-dark-blue: #12355b;
  --eq-light-blue: #16a4c5;
  --eq-orange: #ff4612;
  --eq-pink: #d40164;
  --eq-text-gray: #333333;
  --eq-light-gray: #b7b7b7;
  --eq-lighter-gray: #f3f3f3;
  --eq-opaque-dark-blue: #12355b17;
  /* TYPO */
  --eq-ff-title: 'Oswald', sans-serif;
  --eq-ff-text: 'Alegreya Sans', sans-serif;
}

/* /// overflow address sitewide  /// */
body {
  overflow-x: hidden;
}

/* ////////////// TYPOGRAPHY ////////////// */
body, p, ul, ol, li, a {
  font-family: var(--eq-ff-text); /* Alegreya */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--eq-ff-title); /* Oswald */
}

h1 {
  font-weight: bold;
  color: var(--eq-orange);
  font-size: 2.5rem;
  text-transform: uppercase;
}

h2 {
  color: var(--eq-dark-blue);
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
  font-weight: 500;
}

h3 {
  font-weight: 600;
  color: var(--eq-dark-blue);
  font-size: 1.75rem;
  margin-bottom: 1.75rem;
  margin-top: 1.75rem;
}

h4 {
  font-weight: 400;
  font-size: 1.4rem;
  margin: 1rem 0;
  color: var(--eq-dark-blue);
}

h5 {
  font-weight: bold;
  color: var(--eq-text-gray);
  font-size: 1.15rem;
}

main p, 
main ul, 
main ol {
  color: var(--eq-text-gray);
  font-size: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
}

a {
  color: #00aaca;
}

a:hover {
  color: #23527c;
}

/* this is breaking region pages
.main {
  overflow-x: hidden;
}
*/

/* ////////////// PAGE HEADER //////////////// */

/* Displayed on : Single news and insights */
.header_image {
  display: block;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  object-position: center center;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* page-regionNew */
.header_with_img {
  min-height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /*margin-bottom: 3rem;*/
}

@media only screen and (max-width: 600px) {
  .header_with_img {
    min-height: 250px;
    max-height: 250px;
  }
  
}

.header_image h1 {
  font-weight: 400;
  color: var(--eq-dark-blue);
  font-size: 2.5rem;
  text-transform: capitalize;
}

.header_no_img {
  min-height: 100px;
}

.page-header-box h1 {
  margin: 0;
  margin-bottom: -0.75rem;
}

.page-header-box-description {
  background: #FFF;
  font-size: 1.35rem;
  font-weight: 600;
  padding: 1.5rem 0;
}

.header_with_img .page-header-box-description {
  padding: 1.5rem;
  padding-left: 2rem;
  max-width: 700px;
}
/* END OF page-region */

/* Template-parts / header_page styles */
.title_section {
  display: flex;
  align-items: center;
}
.title_section .h1 {
  margin-left: 1rem;
}
.title_section .spacer1 {
  flex: 1;
}
.title_section .spacer2 {
  flex: 5;
}

.title_section_img {
  min-height: 400px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.title_section_no_img {
  min-height: 100px;
}
/* END OF Template-parts / header_page styles */

/* Style dependent classes for text */
#main_post p.text-dark-blue {
  color: var(--eq-dark-blue);
}

#main_post p.text-light-blue {
  color: var(--eq-light-blue);
}

/* Style dependent classes for text */
.main p.text-dark-blue {
  color: var(--eq-dark-blue);
}

.main p.text-light-blue {
  color: var(--eq-light-blue);
}

/* BEGIN Main Header Styles */
.bluebar ul li p a {
  color: #FFF;
}

.bluebar ul li p a:hover {
  color: #FFF;
  text-decoration: underline;
}

.navbar-brand img {
  max-height: 65px;
}

.navbar-collapse {
  flex-grow: 0;
}

.navbar-special-scroll {
  -webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%), 0 -5px 3px -10px #fff;
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%), 0 -5px 3px -10px #fff;
  border-bottom: 2px solid #12355b;
}

.navbar.bg-white {
  background-color: #FFF;
}

.page_title_area p.title-caption {
  font-size: 1.5rem;
}
/* END Main Header Styles */
/* BEGIN Main Page Styles */

/* Base Styles for #main_post to handle post display w/varied margins */
.post {
  margin-top: 1rem;
}


/* Utility Classes */
.highlight {
  background: var(--eq-orange);
  color: white;
  padding: 0 1rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

h1 .highlight {
  line-height: 4.3rem;
}

/* Sometimes (like in page.php), this gets used instead of highlight when there is no header image. */
.plain-page-title {
  font-weight: 400;
  color: var(--eq-dark-blue);
  font-size: 2.5rem;
  text-transform: capitalize;
}

.w-30 {
  width: 30% !important;
}

/* DEPRECATING */
.main h1.portal-tab-title {
  margin-left: 0rem;
  font-size: 2.5rem;
  margin-bottom: -2.5px;
}

