/* ==========================================================================

  Style Changes - Base CSS
 
   ========================================================================== */

/* ==========================================================================
   VARIABLE DEFINITIONS
   ========================================================================== */

:root {
	/* Brand Colors */
	--c1: #f8ad40; /* Primary brand color */
	--c2: #333333; /* Major heading color */
	--c3: #e15a2e; /* Links and minor heading color */
	--c4: #000000; /* Basic page text color */
	--c5: #333333; /* Interrupter headings - Contrasts with --c1 */
	--c6: #333333; /* Button color */
	--c7: #ffffff; /* Button text color */
	--c8: #f8ad40; /* Button hover color */
	/* Brand Fonts */
	--f1: "poppins"; /* Heading font */
	--f2: "poppins"; /* Alternate heading font */
	--fp: "open sans";
}

/* gradient source: http://gradientmagic.com/ */

/* ==========================================================================
   FONT STYLING
   ========================================================================== */

h1 {
	font-family: var(--f1), serif;
	color: var(--c2);
}

h2 {
	font-family: var(--f1), sans-serif;
	color: var(--c3);
}

h3 {
	font-family: var(--f2), sans-serif !important;
	color: var(--c2) !important;
}

h4 {
	font-family: var(--f2), sans-serif !important;
	color: var(--c3) !important;
}

h5 {
	font-family: var(--f2), sans-serif !important;
	color: var(--c2) !important;
}

h6 {
	font-family: var(--f2), sans-serif !important;
	color: var(--c3) !important;
}

p {
	font-family: var(--fp), sans-serif;
	color: var(--c4);
}

/* li {
	color: var(--c4) !important;
} */

a {
    transition: .25s all ease-in-out
}

a,:link,:visited {
    color: var(--c3);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
	color: var(--c3);
}

p a,p :link,p :visited {
    text-decoration: underline
}

p a:hover,p :link:hover,p :visited:hover {
    text-decoration: none;
    color: var(--c3);
}

.title-text h2{
	font-size: 52px;
}

dfn,cite,em,i {
    font-style: italic;
	color: var(--c3);
}

.overview-text blockquote {
    border-left: 2px solid var(--c3);
    padding: 2rem 30px 2.5rem;
    margin: 2.5rem 0
}

.overview-text blockquote p {
    color: var(--c2);
    font-family: var(--f1),serif;
    line-height: 1.7em;
    margin-bottom: 0;
    font-size: 1.8em
}

main ul,main ol {
    margin: 0 1.6rem;
    font-family: var(--fp), Roboto, sans-serif;
    line-height: 1.6;
	padding-bottom: 1.6em;
	color: var(--c4);

	li {
		margin-bottom: 0;
	}
}

.paragraph--type--program-overview .container .overview-questions ul, ol {
    margin: 0;
}

.paragraph--type--faq .container .accordion .paragraph--type--faq-item .accordion-header h4,.paragraph--type--faqs-entity .container .accordion .paragraph--type--faq-item .accordion-header h4 {
	color: var(--c1) !important;
}

.paragraph--type--program-overview .container .overview-questions ul, ol {
    margin: 0;
}

.paragraph--type--program-overview .container .overview-questions section h3 {
    font-size: 2em;
    text-transform: none;
	align-content:flex-end;
}

.paragraph--type--program-overview .container .overview-questions section {
	border-bottom: solid 1px var(--c2);
}


/* ==========================================================================
   HEADER AND FOOTER
   ========================================================================== */

@media(min-width: 64.0625em) {
    .site-header .pre-nav:has(nav) {
        padding-left:0;
        background: var(--c1);
    }
}

@media(min-width: 64.0625em) {
    .site-header>.pre-nav .menu__wrapper ul li>.dropdown-menu {
        position:absolute;
        left: 0;
        background: var(--c1);
		transform: translateY(-5px);
    }
}

@media(min-width: 64.0625em) {
    .site-header>.pre-nav .menu__wrapper ul li>.dropdown-menu>ul>li:first-child {
        margin-top:0;
        border-top: solid 3px var(--c4);
    }
    .site-header>.pre-nav .menu__wrapper ul li>.dropdown-menu>ul>li:last-child {
        margin-bottom: 5px;
    }
}

.footer {
    background-color: var(--c4);
    margin-top: 2rem;
    position: relative;
    z-index: auto
}

.footer p {
	color: #fff !important;
}

.category-banner {
    background: var(--c1);
}

.category-banner::before {
    content: "";
    background-image: none;
}

.site-header>.pre-nav nav>h2>button,.site-header>.pre-nav nav>.timeline__title>button {
    background: var(--c1);
}

/* ==========================================================================
   INTERRUPTERS
   ========================================================================== */

.text-module.full-width {
    background: var(--c1) !important;
    position: relative
}

.text-module .container h2,.text-module .container .timeline__title,.text-module .container h3,.text-module .container h4,.text-module .container h5,.text-module .container h6 {
    color: var(--c5);
}

.text-module .container h2 strong,.text-module .container .timeline__title strong,.text-module .container h3 strong,.text-module .container h4 strong,.text-module .container h5 strong,.text-module .container h6 strong {
    color: var(--c5);
}

.interrupter__text {
    background-color: var(--c1);
}

.interrupter__text p.pre-header {
    color: var(--c2);
	font-family: var(--f2), serif;
}

.interrupter__text h2 a {
    color: var(--c4) !important;
	line-height: 150%;
}

.text-module .container {
    padding: 4em;
    color: #fff;
    background: var(--c1);
    position: relative
}

/* ==========================================================================
   TABLES
   ========================================================================== */

table {
    margin: 0 auto;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: 30px;
    background-color: #fafafa;
    border: solid 1px var(--c2);
    width: auto
}

table tr th,table tr td {
    padding: 1rem;
    padding: 1rem;
    color: var(--c2);
    text-align: left
}

table tr td+td {
    border-left: solid 1px var(--c2);
}

table thead {
    border-right: solid 1px var(--c2);
    border-bottom: solid 3px var(--c2)
}

table thead tr th+th {
    border-left: solid 1px var(--c2)
}

table tr+tr {
    border-top: solid 1px var(--c2)
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn, a.btn,.form-submit {
    background-color: var(--c6);
	color: var(--c7);
}

.btn:hover,.resource-filter .pager__item a.button:hover,.news ul.pager .pager__item .button:hover,p a.btn:hover,.form-submit:hover {
    background-color: var(--c8);
	transition: all .2s ease-out
}

.form-section input[type=submit] {
    background: var(--c6);
}

.form-section input[type=submit]:hover{
    background-color: var(--c8);
	transition: all .2s ease-out
}

.program-enhanced.program-enhanced--quicklinks .program-enhanced--quicklinks--buttons__item {
    font-family: montserrat,sans-serif;
    color: var(--c6);
	text-align: center;
	border-radius: 8px;
}

.program-enhanced.program-enhanced--quicklinks .program-enhanced--quicklinks--buttons__item:hover {
    background: var(--c8);
    color: #fff;
	filter: brightness(100%);
    transition: all .2s ease-out
}

.text-module.full-width .btn,.text-module.full-width .resource-filter .pager__item a.button,.resource-filter .pager__item .text-module.full-width a.button,.text-module.full-width .news ul.pager .pager__item .button,.news ul.pager .pager__item .text-module.full-width .button {
    text-wrap: nowrap;
    display: inline-block;
    background: var(--c6);
	color: #fff;
    font-weight: bold;
    border-radius: 2em;
    margin-top: 0
}

.article--gallery--controls__prev:hover,.article--gallery--controls__prev:focus,.article--gallery--controls__prev.focused,.article--gallery--controls__next:hover,.article--gallery--controls__next:focus,.article--gallery--controls__next.focused {
    background-color: var(--c1);
	transition: all .2s ease-out
}

a.btn-external {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    padding: 1.5em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    display: table;
    border: none;
    transition: .25s all ease-in-out
}

a.btn-external:hover {
    background-color: var(--c4);
    text-decoration: none;
    color: #fff;
}

a.btn-external:after {
    background: none !important;
}

/* ==========================================================================
   CONTENT CARD MODULES
   ========================================================================== */

.heading h2,.heading .timeline__title {
    font-family: var(--f2);
    color: var(--c2);
}

.centered-heading h2,.centered-heading .timeline__title {
    font-family: var(--f2);
    border-bottom: 1px solid var(--c2);
}

.card p.title {
    color: var(--c6);
	font-family: var(--f1);
}

.card p.title a {
    color: var(--c2);
	font-family: var(--f1);
}

.card p.title a:hover,.card p.title a:focus-visible {
	color: var(--c6);
    filter: brightness(100%);
}

.articles__collection .heading h2,.articles__collection .heading .timeline__title {
    text-transform: unset;
    color: var(--c2);
    font-family: var(--c2);
}

.tag a {
    color: var(--c2);
	font-size: 150%;
	font-family: var(--fp), sans-serif;
}

.tag a:hover {
    color: var(--c4);
    text-decoration: none
}

/* ==========================================================================
   CAROUSELS
   ========================================================================== */

.carousel--wrapper .control-left .slick-arrow,.carousel--wrapper .control-right .slick-arrow {
    background: var(--c1);
    color: #fff;
    opacity: 1;
    transition: all .3s ease-out
}

.has-carousel .carousel--wrapper .article--carousel .card--carousel .card__button {
    color: #fff;
    background-color: var(--c2);
    display: inline-block;
    width: auto;
    margin-bottom: 16px
}

.has-carousel .carousel--wrapper .article--carousel .card--carousel .card__button:hover,.has-carousel .carousel--wrapper .article--carousel .card--carousel .card__button:focus-visible {
    background-color: var(--c8);
	filter: brightness(100%);
}

.article--gallery--controls__prev,.article--gallery--controls__next {
    background-color: var(--c2);
}

.article--gallery--slide h2,.article--gallery--slide .timeline__title {
    color: var(--c2) !important;
}

.carousel--wrapper .control-left .slick-arrow:hover,.carousel--wrapper .control-left .slick-arrow:focus,.carousel--wrapper .control-left .slick-arrow:focus-within,.carousel--wrapper .control-right .slick-arrow:hover,.carousel--wrapper .control-right .slick-arrow:focus,.carousel--wrapper .control-right .slick-arrow:focus-within {
    background-color: var(--c6);
	filter: brightness(100%);
}

/* ==========================================================================
   FANCY LINKS
   ========================================================================== */

a.fancy-link {
    font-family: var(--f1),serif;
    font-weight: 700;
    color: var(--c2);
    display: inline-block;
    position: relative;
    margin-right: 20px;
    text-decoration: none;
    box-shadow: 0px 0px 0px 0px var(--c2);
    transition: all .3s ease-out
}

@media(min-width: 64.0625em) {
    a.fancy-link {
        font-size:35px;
        line-height: 40px
    }
}

a.fancy-link:hover,a.fancy-link:focus {
    box-shadow: 0 4px 0 0 var(--c3);
    transition: all .2s ease-out
}

a.fancy-link:hover:after,a.fancy-link:focus:after {
    border-color: var(--c3);
    right: -24px;
}

a.fancy-link:after {
    content: "";
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border: solid 5px var(--c2);
    border-width: 5px 5px 0 0;
    width: 16px;
    height: 16px;
    transition: all .3s ease-out
}

/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

.quote blockquote {
    border-top: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
    padding: 2rem 30px 2.5rem;
    margin: 2.5rem 0;
    line-height: 1.1em;
    margin-bottom: 2rem;
    font-size: 1em;
}

.quote blockquote p {
    color: var(--c2);
    font-family: var(--f2),serif;
	font-style: italic;
}

/* ==========================================================================
  TIMELINE
   ========================================================================== */

.timeline__title {
    font-size: 30px;
    line-height: 49px;
    font-weight: 700;
    text-align: center;
    padding-block:14px 20px;
	border-style: solid;
    border-color: var(--c3);
    border-width: 2px 0;
    margin-bottom: 0;
	font-family: var(--f1), serif;
}

.timeline .container .timeline-inner .timeline__wrapper .timeline__item .timeline__item-right h3:before {
    background: var(--c3);
}

.timeline .container .timeline-inner .timeline__wrapper .timeline__item .timeline__item-right {
    border-left: 2px solid var(--c3);
}

.paragraph--type--program-overview .container {
    background: #FEF2E0;
}