/* -- ROOT LEVEL VARIABLE DEFINITONS -- */
:root {
  --font-primary: 'roboto', sans-serif;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-dark: #1b1b1b;
  --color-gray-medium-dark: #454545;
  --color-gray-medium: #666666;
  --color-gray-light: #cccccc;

  --color-blue-dark: #172b6b;
  --color-blue-medium: #05528f;
  --color-blue-light-hover: #d0e4f5;
  --color-blue-light: #e6edf3;
  --color-blue-sky: #e6f7fe;

  --color-orange-dark: #ff9700;
  --color-orange-medium: #ffae39;
  --color-orange-light: #ffd79c;
  --color-orange-bright: #ffe3bd;

  --color-alert-background: #ffebeb;
  --color-alert-border: #ff3939;

  --color-border-major: #666666;
  --color-border-minor: #aaaaaa;

  --color-table-header: #ffd79c;
  --color-table-odd: #ffffff;
  --color-table-even: #f0f0f0;

  --font-size-h1: 4.0rem;
  --font-size-h2: 3.0rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.25rem;
  --font-size-p: 1.0rem;

  --font-size-mobile-h1: 3.5rem;
  --font-size-mobile-h2: 2.5rem;
  --font-size-mobile-h3: 1.5rem;
  --font-size-mobile-h4: 1.1rem;
  --font-size-mobile-p: 1.0rem;

  --font-weight-light: 300;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --line-height-normal: 1.5;
  --line-height-tall: 2.25;
}

/* -- BASIC HTML TAG STYLES -- */

html {
  font-family: var(--font-primary);
}

h1, h2, h3, h4, h5, h6, p, a, li, blockquote {
  font-family: var(--font-primary);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

h2, h3, h4 {
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-blue-dark);
}

h2 {
  font-size: var(--font-size-h2);
  margin: 2.75rem 0 1.75rem;
}

h3 {
  font-size: var(--font-size-h3);
  margin: 2.0rem 0 1.25rem;
}

h4 {
  font-size: var(--font-size-h4);
  margin: 1.75rem 0 1.0rem;
}

p, li {
  font-size: var(--font-size-p);
  line-height: var(--line-height-normal);
}

p {
  margin: 1.1rem 0;
}

/* Mobile HTML Tag Styles */
@media only screen and (max-width: 640px) {
  h1 { font-size: var(--font-size-mobile-h1); }
  h2 { font-size: var(--font-size-mobile-h2); }
  h3 { font-size: var(--font-size-mobile-h3); }
  h4 { font-size: var(--font-size-mobile-h4); }
  p { font-size: var(--font-size-mobile-p); }
}

li {
  padding-bottom: 0.5rem;
}

blockquote {
  font-size: var(--font-size-h4);
  background-color: var(--color-blue-sky);
  margin: 0.75rem 0;
  padding: 1rem 2rem;
  border-left: 12px solid var(--color-blue-medium);
}

blockquote.alert-block {
  background-color: var(--color-alert-background);
  border-left-color: var(--color-alert-border);
}

a {
  color: var(--color-blue-medium);
  text-decoration: underline solid var(--color-blue-medium) 1px;
  text-underline-offset: 0.3rem;
}

a:hover, a:active {
  color: var(--color-blue-dark);
}

/*  --  SITEWIDE PAGE ELEMENT STYLES  --  */

hr.major {
  border-top: 1px solid var(--color-border-major);
}

hr.minor {
  border-top: 1px solid var(--color-border-minor);
}

figure.featured-image {
  margin: 1.5rem 0;
}

figure.image-style-align-right {
  float: right;
}

figcaption {
  padding-top: 0.5rem;
}

figcaption p {
  margin-top: 0.25rem;
}

main {
  padding-bottom: 3.0rem;
}

main#main-content-homepage {
  padding-bottom: 0;
}

/*  FORM STYLES  */

.usa-label, .usa-form, .usa-form--large {
  font-family: var(--font-primary);
}

/*  VIDEO STYLES
    Used primarily for embedded videos on Webinars pages  */

.full-width-video {
  position: relative;
  padding-bottom: 53.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  margin: 1.5rem 0 0;
}

.full-width-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*  ALERT STYLES  */

.usa-alert--success {
    background-color: rgba(255,174,57,0.1);
    border-left-color: var(--color-orange-medium);
    color: var(--color-black);
    margin: 1.0rem 0;
}

/*  DATA TABLE STYLES
    Used extensively on Statistics on Disability page  */

.usa-table--striped tbody tr:nth-child(odd) td,
.usa-table--striped tbody tr:nth-child(odd) th {
  background-color: var(--color-table-odd)!important;
  color: var(--color-gray-dark)!important;
}

.usa-table--striped tbody tr:nth-child(even) td,
.usa-table--striped tbody tr:nth-child(even) th {
  background-color: var(--color-table-even);
  color: var(--color-gray-dark);
}

.usa-table--striped thead th {
  background-color: var(--color-table-header)!important;
}

.usa-table--striped tbody tr:nth-child(odd) td.table-section-title,
.usa-table--striped tbody tr:nth-child(even) td.table-section-title {
  font-weight: bold;
  background-color: var(--color-blue-sky)!important;
}

.usa-table--striped tbody tr.table-total-row:nth-child(odd) th,
.usa-table--striped tbody tr.table-total-row:nth-child(even) th,
.usa-table--striped tbody tr.table-total-row:nth-child(odd) td,
.usa-table--striped tbody tr.table-total-row:nth-child(even) td {
  font-weight: bold;
  background-color: var(--color-blue-sky)!important;
}

table.accordion-table {
  /* used when table is displayed in an accordion element to set width properly */
  margin-left: 1.0rem;
  margin-right: 1.0rem;
  width: calc(100%-2rem); /* used to preserve margins within the accordion */
}

table.tall-table thead th {
  position: sticky;
  top: 0;
  background-color: var(--color-white); /* Ensure the text doesn't get hidden when header overlaps table rows */
  z-index: 1; /* Ensures the header is above the content */
}

/*  Legacy Table Styles  */
.blue-row {
  background: rgb(229,246,254);
  background: linear-gradient(180deg, rgba(205,238,254,1) 0%, rgba(229,246,254,1) 25%);
}

/*  BUTTON STYLES
    Used for inline buttons and contextual navigation buttons across the site */

/* Parent required with EARN buttons for proper inheritance */

.usa-button {
  border-radius: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
}

/* LEGACY USA buttons */

.usa-button--accent-warm {
  color: var(--color-gray-dark);
  background-color: var(--color-orange-medium);
  box-shadow: -3px 3px var(--color-blue-dark);
  margin-bottom: 3px;
}

a:visited.usa-button--accent-warm, button:visited.usa-button--accent-warm {
  color: var(--color-gray-dark);
  background-color: var(--color-orange-light);
}

a:hover.usa-button--accent-warm, button:hover.usa-button--accent-warm {
  color: var(--color-black);
  background-color: var(--color-orange-dark);
  box-shadow: -1px 1px var(--color-black);
}

/* --- END LEGACY USA buttons --- */

/* Inline square orange buttons on homepage and in pre-footer */

.earn-button--orange {
  color: var(--color-gray-dark);
  background-color: var(--color-orange-medium);
  box-shadow: -3px 3px var(--color-blue-dark);
  margin-bottom: 3px;
}

.earn-button--orange:link {
  text-decoration: none;
}

.earn-button--orange:visited {
  color: var(--color-gray-medium-dark);
  background-color: var(--color-orange-light);
}

.earn-button--orange:hover, .earn-button--orange:focus {
  color: var(--color-black);
  background-color: var(--color-orange-dark);
  box-shadow: -1px 1px var(--color-blue-dark);
  text-decoration: underline solid var(--color-black);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15rem;
}

/* Pathway buttons on home page and contextual nav in sidebar of some toolkits (Inclusion@Work) */

.earn-button--big {
  color: var(--color-white);
  font-size: var(--font-size-h3);
  text-transform: none;
  background-color: var(--color-blue-medium);
  padding: 1.25rem 1.75rem;
  width: 100%;
}

.earn-button--big:hover, .earn-button--big:focus {
  background-color: var(--color-blue-dark);
  text-decoration: underline solid var(--color-white);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

/* Arrow-type ontextual nav in sidebar of some toolkits (Mental Health) */

.earn-button--arrow {
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.5;
  text-transform: none;
  background-color: var(--color-blue-medium);
  padding: 1.25rem 3.75rem 1.25rem 1.5rem;
  background-repeat: no-repeat;
  background-size: 2.25rem;
  background-position: right 1.35rem center;
  width: 100%;
}

.earn-button--arrow:visited {
  color: var(--color-orange-bright);
}

.earn-button--arrow:hover, .earn-button--arrow:focus {
  color: var(--color-white);
  background-color: var(--color-blue-dark);
  text-decoration: underline solid var(--color-white);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

.earn-button--arrow-right {
  background-image: url(/images/arrow-right.svg), linear-gradient(transparent, transparent);
}

.earn-button--arrow-down {
  background-image: url(/images/arrow-down.svg), linear-gradient(transparent, transparent);
}

.earn-button--current {
  color: var(--color-white)!important;
  background-color: var(--color-blue-dark);
}

.earn-button--light-blue {
  font-family: var(--font-primary);
  color: var(--color-blue-dark);
  text-align: left;
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  text-transform: none;
  text-decoration: none;
  background-color: var(--color-blue-light);
  padding: 1.25rem 1.5rem;
  width: 100%;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
}

.earn-button--light-blue:visited {
  color: var(--color-blue-medium);
}

.earn-button--light-blue:hover, .earn-button--light-blue:focus   {
  color: var(--color-white);
  background-color: var(--color-blue-medium);
  text-decoration: underline solid var(--color-white);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

.earn-button--light-blue-current {
  color: var(--color-white)!important;
  background-color: var(--color-blue-dark)!important;
}

.earn-button--banner {
  display: block;
  width: 98px;
  height: 98px;
  margin-right: 1.5rem;
  margin-top: 1.5rem;
  background-image: url('https://production-askearn-org.s3.amazonaws.com/icon_arrow_button_242196bd7a.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease;
}

.earn-button--banner:hover, .earn-button--banner:focus {
  background-image: url('https://development-askearn-org.s3.us-east-1.amazonaws.com/icon_arrow_button_hover_d13b447ac5.svg');
}

/* Contextual nav in sidebar of some toolkits (Neurodiversity) */

.earn-button--small {
  font-size: var(--font-size-p);
  padding: 1.0rem 3.75rem 1.0rem 1.5rem;
}

/* Spanish language buttons */

.earn-button--globe {
  width: 100%;
  padding: 1.0rem 3.75rem 1.0rem 1.5rem;
  border-radius: 10px;
  text-align: left;
  font-size: var(--font-size-p);
  line-height: 1.5;
  text-transform: none;
  color: var(--color-black);
  background-color: var(--color-orange-medium);
  background-image: url('/images/globe-black.svg'), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-size: 2.25rem;
  background-position: right 1.35rem center;
  text-decoration: none;
}

.earn-button--globe:hover, .earn-button--globe:focus {
  color: var(--color-black);
  text-decoration: underline solid var(--color-black) 1px;
  text-underline-offset: 0.3rem;
  background-color: var(--color-orange-dark);
}

.earn-button--globe:visited {
  color: var(--color-black)!important;
}

.earn-button--globe + hr {
  border: none;
  border-top: 1px solid #aaaaaa;
  margin: 1rem 0;
}

/* Deprecated style used after other contextual sidebar nav styles to indicate current page

.earn-button--current-page {
  color: var(--color-white)!important;
  background-color: var(--color-blue-dark);
}

.earn-button--current-page:hover, .earn-button--current-page:focus {
  color: var(--color-orange-medium)!important;
}

*/

/* Styles used for grid square buttons on some toolkit pages */

.links-grid .links-grid-square {

  background-color: var(--color-blue-light);
}

.links-grid .links-grid-square a {
  color: var(--color-blue-medium);
  text-decoration: none;
}

.links-grid .links-grid-square a:hover,
.links-grid .links-grid-square a:focus {
  color: var(--color-blue-dark);
  text-decoration: underline solid var(--color-blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
}

/*  Search pagination control buttons */

.usa-button-group__item button.usa-button {
  color: var(--color-white);
  background-color: var(--color-blue-dark);
  padding: 0.75rem 0.85rem;
}

.usa-button-group__item a.usa-button {
  color: var(--color-white);
  background-color: var(--color-blue-medium);
  padding: 0.75rem 0.85rem;
}

.usa-button-group__item a.usa-button:hover {
  color: var(--color-orange-medium);
  background-color: var(--color-blue-dark);
}

.prev-page {
   border-right: 6px #fff solid;
}

.next-page {
  border-left: 3px #fff solid;
}

.page-number {
  border-right: 3px #fff solid;
}


/*  TAG STYLES
    Used across site, primarily for topics tags  */

a.earn-tag { /* Used for topics tags */
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tall);
  color: var(--color-gray-dark);
  text-transform: capitalize;
  text-decoration: none;
  white-space: pre;
  background-color: var(--color-orange-medium);
  border-radius: 99rem;
  margin-right: 0.5rem;
  padding: 0.25rem 1.0rem 0.3rem;
}

a.earn-tag:visited {
  color: var(--color-gray-medium-dark);
  background-color: var(--color-orange-light);
}

a.earn-tag:hover, a.earn-tag:focus {
  color: var(--color-black);
  background-color: var(--color-orange-dark);
  text-decoration: underline solid var(--color-black);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15rem;
}

.earn-square-tag { /* Used to provide a call-out for content: it is not used for buttons */
  font-family: var(--font-primary);
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-heavy);
  color: var(--color-orange-medium);
  background-color: var(--color-black);
  border-radius: 0;
  padding: 0.25rem 0.75rem;
}

/*  LIST STYLES
    Special list styles gathered here  */

ul.ul-checklist {
  list-style: none;
  padding: 0 0 0 3.25rem;
}

ul.ul-checklist li::before {
  content: "\2713";
  font-size: x-large;
  color: green;
  padding-right: 10px;
  margin-left: -1.75rem;
}

/*  ACCORDION STYLES
    Used in select Toolkits and FAQ pages  */

/*  USA base accordion styles  */

.usa-accordion__heading, .usa-prose {
  font-family: var(--font-primary);
}

h2.usa-accordion__heading button.usa-accordion__button, h3.usa-accordion__heading button.usa-accordion__button, h4.usa-accordion__heading button.usa-accordion__button {
  font-size: 1.15rem;
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-heavy);
  color: var(--color-blue-dark);
}

.usa-accordion__content p {
  padding: 0.75rem 0 1.0rem;
}

/*  EARN accordion styles  */

.earn-accordion h2.usa-accordion__heading, .earn-accordion h3.usa-accordion__heading, .earn-accordion h4.usa-accordion__heading {
  color: var(--color-blue-dark);
  font-weight: var(--font-weight-heavy);
  margin: 10px 0 0;
}

.earn-accordion h2.usa-accordion__heading button.usa-accordion__button, .earn-accordion h3.usa-accordion__heading button.usa-accordion__button, .earn-accordion h4.usa-accordion__heading button.usa-accordion__button {
  background-color: var(--color-blue-light);
  padding: 1.5rem 3.75rem 1.5rem 1.2rem;
  background-image: url(/images/remove2.svg), linear-gradient(transparent, transparent);
}

.earn-accordion h2.usa-accordion__heading button.usa-accordion__button:hover, .earn-accordion h3.usa-accordion__heading button.usa-accordion__button:hover, .earn-accordion h4.usa-accordion__heading button.usa-accordion__button:hover {
  background-color: var(--color-blue-light-hover);
}

.earn-accordion h2.usa-accordion__heading button.usa-accordion__button:focus, .earn-accordion h3.usa-accordion__heading button.usa-accordion__button:focus, .earn-accordion h4.usa-accordion__heading button.usa-accordion__button:focus {
  background-color: var(--color-blue-light-hover);
}

.earn-accordion h2.usa-accordion__heading button.usa-accordion__button[aria-expanded=false], .earn-accordion h3.usa-accordion__heading button.usa-accordion__button[aria-expanded=false], .earn-accordion h4.usa-accordion__heading button.usa-accordion__button[aria-expanded=false] {
  background-image: url(/images/add2.svg), linear-gradient(transparent, transparent);
}

.earn-accordion .usa-accordion__content {
  padding: 1.0rem 0;
  border: 1px solid var(--color-blue-light);
}

.earn-accordion .usa-accordion__content p {
  margin-top: 0;
  padding: 0 1.0rem 0.75rem;
}

.earn-accordion .usa-accordion__content div.tip-text {
  background-color: var(--color-blue-light);
  width: 40%;
  padding: 0;
  float: right;
  margin: 1.75rem 1.0rem 1.0rem;
}

.earn-accordion .usa-accordion__content div.tip-text p {
  font-size: 1.1rem;
  line-height: 1.75;
  padding: 1.0rem 1.5rem;
}

.earn-accordion .usa-accordion__content img.infographic-banner {
  padding: 0 0.5rem;
  width: 100%;
}

.earn-accordion .usa-prose > ul li, .earn-accordion .usa-prose > ol li {
  max-width: 100%;
  margin: 0 1.0rem 0.25rem;
}

.earn-banner-button {
  text-align: center;
  margin: 1.25rem 0;
}

.earn-banner-button a.btn {
  color: var(--color-white);
  background-color: var(--color-blue-dark);
  text-decoration: none;
  border: none;
  margin: 0.5rem 1.0rem 1.0rem;
  padding: 1.0rem 1.25rem;
  line-height: 3.0;
}

.earn-banner-button a.btn:hover {
  color: var(--color-white);
  text-decoration: underline;
}

@media only screen and (max-width: 800px) {
  .earn-banner-button a.btn {
    color: var(--color-blue-medium);
    background-color: transparent;
    padding: 0;
    line-height: 2.0;
  }

  .earn-banner-button a.btn:hover {
    color: var(--color-blue-dark);
  }
}

/*  BANNER STYLES
    Used on master.blade.php for site-wide alert  */

#earn-banner {
  padding: 0;
  color: var(--color-white);
  background-color: var(--color-black);
}

#earn-banner p {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-medium);
  line-height: 1.5rem;
}

#earn-banner p a {
  color: var(--color-white);
  text-decoration: underline solid var(--color-white);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

#earn-banner p a:hover {
  text-decoration: underline solid var(--color-white);
}

/*  PAGE INDEX STYLES
    Used on pages like /topics and /publications to style an A to Z index  */

.ux-a-z-item-container .usa-alert--info {
  border-left-color: var(--color-orange-medium);
}

.ux-a-z-item-container .usa-alert__body {
  background-color: #1c538c;
}

.ux-a-z-item-container h3.usa-alert__text {
  margin: 0!important;
}

.ux-a-z-item-container h3.usa-alert__text a {
    color: var(--color-white);
    text-decoration: none;
}

.ux-a-z-index {
  font-size: 1.5rem;
}

.ux-a-z-index a.usa-button--unstyled {
  padding: 0.25rem 0;
  min-height: 24px;
  min-width: 24px;
  text-align: center;
}

/*  --  SITEWIDE STRUCTURE STYLES --  */

/*  SITE PRE-HEADER STYLES
    Used for site-wide social media stack pre-header  */

#earn-pre-header {
  padding: 0;
  color: var(--color-white);
  background-color: var(--color-blue-medium);
}

#earn-pre-header span {
  margin: 0 2.5rem;
}

@media only screen and (max-width: 640px) {
  #earn-pre-header span {
    margin: 0 0.25rem;
  }
}

#earn-pre-header span a {
  color: var(--color-white);
  padding: 0;
}

#earn-pre-header span a:hover {
  text-decoration: underline;
}

#earn-pre-header a img {
  height: 36px;
  padding: 0.7rem 0.7rem 0.5rem 0;
  color: var(--color-white);
}

/*  SITE HEADER STYLES
    Used for site-wide logo, search form, and navigation header  */

#earn-header {
  margin: 0 2.5rem;
}

#earn-header-left {
  margin: 1.75rem 0 1.25rem;
}

#earn-header-left img {
  height: 90px;
}

#earn-search {
  margin-top: 2.0rem;
}

#earn-search input {
  width: 100%;
  padding-left: 5px;
  margin-top: 0;
  border: 2px solid var(--color-blue-medium);
  border-right: 0;
  background-color: var(--color-white);
  border-radius: 25px 0 0 25px;
}

#earn-search .earn-button--search {
  /* Search button in site search in header */
  background-image: url(../uswds-3.4.1/img/usa-icons-bg/search--white.svg), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1.5rem;
  width: 3.0rem;
  padding: 0;
  border-radius: 0 25px 25px 0;
}

#earn-search .usa-search--small [type=submit], .usa-search--small .usa-search__submit {
  min-width: 2.0rem;
}

@media only screen and (max-width: 639px) {
  #earn-search {
    margin-top: 0;
  }
  .usa-search {
    float:left!important;
  }
}

#earn-nav {
  margin-top: 1.75rem;
}

/*  NAVIGATION MENU STYLES
    Used for navigation in site-wide header  */

li.usa-nav__primary-item {
  padding-bottom: 0;
}

li.usa-nav__primary-item a.usa-nav__link {
  font-size: var(--font-size-h4);
  color: var(--color-blue-medium);
}

li.usa-nav__primary-item button.usa-nav__link {
  font-size: var(--font-size-h4);
  color: var(--color-blue-medium);
}

li.usa-nav__primary-item a:hover.usa-nav__link {
  color: var(--color-blue-dark);
  text-decoration: underline solid var(--color-blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

li.usa-nav__primary-item button:hover.usa-nav__link {
  color: var(--color-blue-dark);
  text-decoration: underline solid var(--color-blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

.usa-nav__primary button {
  line-height: 1.2;
}

.usa-nav__primary button[aria-expanded=true] {
  background-image: url(../img/usa-icons-bg/expand_less.svg), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-color: var(--color-white);
  background-position: right 0.75rem top 53%;
  color: var(--color-blue-dark);
  text-decoration: underline solid var(--color-blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

/*  MOBILE NAV Styles
    Used for the mobile nav (hamburger icon)  */

.usa-menu-btn {
  height: 2.5rem;
  background-color: var(--color-blue-medium);
}

.usa-menu-btn a:hover {
  background-color: #201b5a;
}

.mobile-show-1024 .usa-nav__submenu-list li a {
  padding-left: 0.5rem;
  color: var(--color-blue-medium)!important;
}

/*  MEGAMENU Styles
    Used for site-wide megamenus  */

.usa-megamenu.usa-nav__submenu {
  padding: 1.25rem 1.0rem;
  left: 0;
  right: 0;
}

.usa-nav__submenu {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-light);
    box-shadow: rgba(23, 43, 107, 0.25) 0px 25px 50px -12px;
}

.usa-megamenu .border-right {
  border-right: 1px solid var(--color-gray-light);
}

.usa-nav__submenu .usa-nav__submenu-item a {
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
}

.usa-nav__submenu .usa-nav__submenu-item a:hover {
    text-decoration-thickness: 1px;
}

.usa-megamenu.usa-nav__submenu::before {
    background-color: transparent;
}

.usa-megamenu.usa-nav__submenu::after {
    background-color: transparent;
}

.usa-megamenu a {
  color: var(--color-blue-medium);
  text-decoration: underline solid var(--color-blue-medium);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

.usa-megamenu a:hover {
  color: var(--color-blue-dark);
  text-decoration: underline solid var(--color-blue-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

.usa-megamenu h1 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-heavy);
  margin: 0.5rem 0 0;
}

.usa-megamenu h2 {
  font-size: var(--font-size-h4);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}

.usa-megamenu h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
}

.usa-megamenu h4 {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-medium);
  margin: 0 0 0.5rem 0.5rem;
}


.usa-megamenu p {
  font-size: var(--font-size-p);
  line-height: 1.5;
  margin: 0.5rem 0 0.5rem;
}

.usa-megamenu p a {
  text-decoration: underline solid var(--color-blue-medium)!important;
  text-decoration-thickness: 1px!important;
}

.usa-megamenu img.thumbnail {
  width: 40%;
  margin: 4px 15px 0 0;
}

.usa-megamenu li {
  margin-top: 0;
}

/*  megamenu override styles added for USWDS 3 upgrade  */
@media all and (min-width: 64em) {
  .usa-nav__submenu .usa-nav__submenu-item + * {
    margin-top:0;
  }
  .usa-nav__submenu .usa-nav__submenu-item h3 {
    margin-top:2px;
  }
  .usa-nav__submenu .usa-nav__submenu-item a {
    color:var(--color-blue-medium);
    text-decoration: underline solid var(--color-blue-medium);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
    padding:0;
    line-height:1.3;
  }
  .usa-nav__submenu .usa-nav__submenu-item a:hover{
    background-color:transparent;
    color:var(--color-blue-dark);
    text-decoration: underline solid var(--color-blue-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
    padding:0;
    text-decoration:underline;
  }
  .usa-nav__submenu .usa-nav__submenu-item a:focus{
    text-decoration: underline solid var(--color-blue-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
  }
}

/*  SITE PRE-FOOTER STYLES
    Site-wide pre-footer styles including subscription and feedback forms  */

#mc_embed_signup {  /*  Mailchimp newsletter subsribe form style  */
  clear: left;
  font: 14px var(--font-primary);
  width: 100%;
}

#earn-pre-footer {
  padding: 5px 0;
  color: var(--color-white);
  background-color: var(--color-blue-medium);
}

#earn-pre-footer h2 {
  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
}

#earn-pre-footer h3 {
  font-size: 1.2rem;
  font-weight: var(--font-weight-light);
  color: var(--color-orange-medium);
}

#earn-pre-footer h3 a {
  color: var(--color-orange-medium);
  text-decoration: underline solid var(--color-orange-medium);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

#earn-pre-footer h3 a:hover {
  color: var(--color-white);
  text-decoration: underline solid var(--color-white);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

/*  SITE FOOTER STYLES
    Site-wide footer styles including reversed textmark and social media stack  */

#earn-footer {
  padding: 3.25rem;
  color: var(--color-white);
  background-color: var(--color-blue-dark);
}

#earn-footer a {
    color: var(--color-white);
}

#earn-logo-reversed {
  height: 50px;
}

@media only screen and (max-width: 640px) {
  #earn-logo-reversed {
    margin-bottom: 2.0rem;
  }
}

@media only screen and (max-width: 640px) {
  #earn-footer-nav a {
    padding: 0.1rem 0;
  }
}

#earn-social-media {
  height: 22px;
  margin-top: 11px;
}

#earn-social-media a {
  text-decoration: none;
}

#earn-social-media img {
  height: 22px;
  padding-right: 15px;
  color: var(--color-white);
}

@media only screen and (max-width: 640px) {
  #earn-social-media {
    text-align: left;
  }
}

@media only screen and (max-width: 1024px) {
  #learning-center {
    padding-top:1.0rem;
  }
}

@media only screen and (max-width: 640px) {
  #learning-center .mobile-hide {
    display:none;
  }
}

/*  --  HOMEPAGE STYLES  --  */

/*  PATHWAY STYLES
    Used for top messaging area, 4 pathway images and buttons  */

#pathway-messaging {
  background-color: var(--color-blue-dark);
  background-image: linear-gradient(#201b5b, #172b6b);
}

#pathway-messaging h2 {
  font-weight: var(--font-weight-light);
  color: var(--color-white);
  margin: 2.0rem 0;
}

@media only screen and (max-width: 640px) {
  #pathway-messaging h2 {
    text-align: center;
    font-size: var(--font-size-mobile-h2);
  }
}

#pathway-messaging h2 a {
  color: var(--color-orange-medium);
  text-decoration: underline solid var(--color-orange-medium);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25rem;
}

#pathway-messaging h2 a:hover {
  text-decoration-style: solid;
}

#pathway-photos {
  margin: 7px 0 7px 7px;
}

#pathway-photos div {
  height: 325px;
  margin-right: 7px;
}

#pathway-buttons {
  margin: 7px 0 0 7px;
}

#pathway-buttons div {
  margin: 0 7px 7px 0;
}

#popular-topics {
  padding: 2.0rem 0;
}

#popular-topics .tag-prefix-label {
  font-size: var(--font-size-h4);
  margin-right: 0.5rem;
}

/*  UPPER FEATURE STYLES
    Used for featured resources and content area  */

#featured-upper {
  padding: 0;
}

@media only screen and (max-width: 1250px) {
  #featured-upper, #featured-lower {
    padding: 0 1.0rem;
  }
}

#featured-upper h3, #featured-lower h3 {
  font-weight: 500;
  text-transform: uppercase;
  margin: 3.0rem 0 2.0rem;
}

#featured-upper h4, #featured-lower h4 {
  font-size: var(--font-size-h3);
  line-height: 1.5;
  margin: 1.5rem 0;
  color: var(--color-black);
}

#featured-document img {
  border: var(--color-blue-dark) solid 2px;
  margin: 0.65rem 1.5rem 0 0;
  float: left;
}

.featured-document-info {
  margin-top: 1.0rem;
  padding-right: 2.0rem;
}

@media only screen and (max-width: 1024px) {
  .featured-document-info {
    margin-bottom: 2.0rem;
  }
}

#featured-resources div {
  display: flex;
  align-items: center;
  height: 85px;
}

#featured-resources div h4 {
  font-size: 1.5rem;
}

/*  FAQ BAR STYLES
    Used for FAQ bar dropdown navigation area */

#askearn-faq {
  background-color: var(--color-white);
  background-image: url("../images/askearn-blue-bg.svg");
  background-position: left bottom;
  background-repeat: repeat-x;
}

@media only screen and (max-width: 1024px) {
  #askearn-faq .mobile-blue-bg {
    background-color: var(--color-blue-dark);
  }
}

#askearn-faq-bar {
  color: var(--color-white);
  background-color: var(--color-blue-dark);
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  height: 150px;
}

@media only screen and (max-width: 1024px) {
  #askearn-faq-bar {
    background-color: var(--color-blue-dark);
    width: 100%;
    height:auto;
    padding: 0 2.0rem 2.5rem;
  }
}

#askearn-faq-bar .select-faq {
  padding-right: 1.0rem;
}

@media only screen and (max-width: 479px) {
  #askearn-faq-bar .select-faq {
    padding-right: 0;
  }
}

#askearn-faq-bar select {
  width: 100%;
  padding-left: 30px;
  margin-top: 0;
  border: 2px solid var(--color-orange-medium);
  border-radius: 2.0rem 2.0rem 2.0rem 2.0rem;
  background-color: var(--color-white);
}

#askearn-faq-bar a {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-light);
  color: var(--color-orange-medium);
  text-decoration: underline solid var(--color-orange-medium);
}

#askearn-faq-bar a:hover {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-light);
  color: var(--color-orange-medium);
  text-decoration: underline solid var(--color-orange-medium);
}

@media only screen and (max-width: 479px) {
  #askearn-faq-bar .see-all-faqs {
    margin-top: 1.25rem;
    text-align: right;
  }
}

/*  LOWER FEATURED AREA STYLES
    Used for inclusion in action and featured webinar areas  */

#featured-lower {
  background-color: #e5f6fe;
  padding-bottom: 5.0rem;
}

#featured-lower p {
  font-size: 1.125rem;
}

#employer-spotlight img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 1024px) {
  #employer-spotlight img {
    display: none;
  }
}

#featured-event #event-date-banner {
  position: absolute;
  /* bottom: 244px; */
  left: 310px;
}

@media only screen and (max-width: 1024px) {
  #featured-event #event-date-banner {
    position: relative;
    bottom: auto;
    left: auto;
  }
}

#featured-event span.event-date-banner-text {
  font-size: 1.5rem;
  font-weight: var(--font-weight-heavy);
  color: var(--color-white);
  background-color: var(--color-blue-medium);
  background-image: url("../images/earn-event-banner-tail.svg");
  background-origin: border-box;
  background-position: right center;
  background-repeat: no-repeat;
  padding: 0 30px;
  display: flex;
  align-items: center;
  height: 70px;
}

@media only screen and (max-width: 1250px) {
  #featured-event span.event-date-banner-text {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    background-color:inherit;
    background-image: none;
    background-origin: inherit;
    background-position: inherit;
    background-repeat: inherit;
    padding: 0;
    display: flex;
    align-items: left;
    height: auto;
  }
}

#featured-event img {
  margin-top: 0;
  width: 285px;
}

/*  --  INNER PAGE STYLES  --  */

/*  TITLE BLOCK STYLES
    Used for the title, teaser, and breakcrumb area on all content types */

#page-title {
  background-color: var(--color-blue-dark);
  background-image: linear-gradient(#201b5b, #172b6b);
  color: var(--color-white);
}

#page-title h1 {
  margin: 4.0rem 0 2.0rem;
}

#page-title p {
  font-weight: 100;
  font-size: var(--font-size-h3);
  line-height: 1.5;
  margin: 0 0 3.0rem;
}

@media only screen and (max-width: 640px) {
  #page-title p {
    font-size: 1.5rem;
  }
}

#page-breadcrumb p {
  font-size: var(--font-size-h4);
}

/*  PAGE BODY STYLES
    Used for body content on inner pages between title area and site-wide footer  */

#page-content {
  padding-top: 3.0rem;
  padding-bottom: 3.0rem;
}

#page-content h2 {
  font-size: 2.5rem;
}

#page-content .h2s-like-h3s h2 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-blue-dark);
  margin: 2.0rem 0 1.25rem;
}

#page-content .h2s-like-h4s h2 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-blue-dark);
  margin: 1.75rem 0 1.0rem;
}

#page-content .h3s-like-h4s h3 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-blue-dark);
  margin: 1.75rem 0 1.0rem;
}

#page-introduction {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-minor);
}

#page-introduction p {
  font-size: var(--font-size-h4);
  line-height: 2.5rem;
}

#page-body .case-study-grid img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 75px;
  max-width: 275px;
}

#page-sidebar-column h2 {
  /* makes h2 appear like an h3 in all sidebars */
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-blue-dark);
  margin: 2.0rem 0 1.25rem;
}

#page-sidebar-column h3 {
  /* makes h3 appear like an h4 in all sidebars */
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    color: var(--color-blue-dark);
    margin: 1.75rem 0 1.0rem;
}

#page-sidebar-column figure {
  margin: 1.0rem 0;
}

figure.image-style-align-left {
  float: left;
  margin-left: 0;
}

figure.image-style-align-right {
  float: right;
  margin-right: 0;
}

/*  FAQ STYLES
    Used on the FAQs page  */

.usa-prose > p {
  line-height: 1.75;
  max-width: 100%;
}

.usa-prose h3 {
  font-family: var(--font-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-blue-dark);
  margin: 2.0rem 1rem 1.25rem;
}

/*  SEARCH RESULTS STYLES
    Used on the search results page  */

#page-content .search-earn h2 {
  margin: 0;
  padding: 0;
}

#page-content .search-earn h3 {
  font-size: var(--font-size-h4);
}

#page-content .search-earn p {
  font-size: 1.125rem;
}

#search-earn__first-five {
  margin: 25px 0 25px -25px;
  padding: 20px 25px;
  background-color: var(--color-blue-light);
}

#page-sidebar-column .search-accordion h3 {
    margin: 0;
}

.search-accordion .usa-accordion__content {

}

.search-accordion .usa-accordion__button {
  background-color: unset;
  padding: 0.75rem 3.75rem 0.75rem 1.1rem;
  background-color: var(--color-blue-light);
  background-image: url(/images/remove2.svg), linear-gradient(transparent, transparent);
}

.search-accordion .usa-accordion__button:hover,
.search-accordion .usa-accordion__button:focus {
  background-color: #e6edf3;
}

.search-accordion .usa-accordion__button[aria-expanded=false] {
  background-image: url(/images/add2.svg), linear-gradient(transparent, transparent);
}

/*  COMPACT LIST STYLES
    Used on Publication, Profiles, and Events pages  */

.compact-list h4 {
  margin-bottom: 0;
}

.compact-list p {
  margin-top: 0.5rem;
}

/*  --  RESPONSIVE BREAKPOINT STYLES  --  */

@media only screen and (max-width: 1024px) {
  .mobile-hide-1024 {
    display:none;
  }
}

@media only screen and (max-width: 640px) {
  .mobile-hide-640 {
    display:none;
  }
}

@media only screen and (max-width: 480px) {
  .mobile-hide-480 {
    display:none;
  }
}

@media only screen and (min-width: 1024px) {
  .mobile-show-1024 {
    display:none;
  }
}

@media only screen and (min-width: 640px) {
  .mobile-show-640 {
    display:none;
  }
}

@media only screen and (min-width: 480px) {
  .mobile-show-480 {
    display:none;
  }
}