/* ==================================================
	Fonts
================================================== */
/* source-sans-pro-300 - latin */
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; font-display: swap; src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/source-sans-pro-v13-latin-300.woff2') format('woff2'); }
/* source-sans-pro-regular - latin */
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('../fonts/source-sans-pro-v13-latin-regular.woff2') format('woff2'); }
/* source-sans-pro-700 - latin */
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/source-sans-pro-v13-latin-700.woff2') format('woff2'); }
/* merriweather-300 - latin */
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap; src: local('Merriweather Light'), local('Merriweather-Light'), url('../fonts/merriweather-v21-latin-300.woff2') format('woff2'); }

/* montserrat-300 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: light;
    font-weight: 300;
    font-display: swap;
    src: url('/fonts/Montserrat-Light.ttf') format('truetype'); /* Chrome 26+, Opera 23+, Firefox 39+ */
  }

/* ==================================================
	Bootstrap Overwrites/Additions/Fixes
================================================== */
main a { text-decoration: underline; }
a.btn,  nav a { text-decoration: none!important; }
legend { font-size: inherit; }

/*=====================================================================
 bs5 global link color -- darken
======================================================================*/
a { color:#006AE0; }
a:hover, a:focus { color: #004998; }


.container { width: 98%; max-width: 1200px; }
.modal-content { border-radius: .5rem; }
.modal-header { color: #fff; background: #14315c /*cc*/; padding: .5rem 1rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
/* The close button has opacity that makes it fail a contrast check and it has no visual focus cue. Opacity turned off, focus style added. */
.close { opacity: 1; text-shadow: none; color: #fff; }
.close:focus { outline: 1px dotted #000; }
.close:focus, .close:hover { color: #fff!important; }
/* BS removes vertical scrollbar and adds padding to account for that on modal. Stop that. */
body, .modal { padding-right: 0!important; } 
.breadcrumb-item + .breadcrumb-item::before { color: #ccc; }
.form-control:focus { border-color: #2F70A8 /*cc*/; box-shadow: 0 0 0 .2rem rgba(113,90,214,.25) /*cc*/; }
.lead { font-size: 1.375rem; }
/* Linked table headers on dark theme */
.table .thead-dark th { background-color: #1f496f; color: #fff; }
.thead-dark a { color: #fff; }
.thead-dark a:hover, .thead-dark a:focus { color: #fff; }
/* Linked table headers on dark theme bs5 */
.table-dark {border-color:rgba(255,255,255,.3);}
.table .table-dark th { background-color: #1f496f; color: #fff;}
.table-dark a { color: #fff; }
.table-dark a:hover, .table-dark a:focus { color: #fff; }

/*=====================================================================
 bs5 table-dark a
======================================================================*/
.table-dark a { color: #fff; text-decoration: none; }
.table-dark a:hover { color: #fff; text-decoration: underline; }

/*=====================================================================
 bs5 card-title a
======================================================================*/
.card-title a { text-decoration: none;}
.card-title a:hover { text-decoration: underline;}

/* ==================================================
	Misc
================================================== */
html { overflow-y: scroll; scroll-behavior: smooth; } /* Force scrollbar on right side to avoid viewport width change on short pages */
body { font-family: "Source Sans Pro", Segoe, "Segoe UI", Arial, "sans-serif"; font-size: 1.125rem; font-weight: 300; }
img, object, embed, video { max-width: 100%; height: auto; width: auto; } /* responsive media */

h1 { font-family: "Merriweather",Georgia,"Times New Roman",Times,serif; font-size: 2.25rem; font-weight: 300; padding: 1.875rem 0; }
h2, h3 { padding-top: 1.875rem; margin-top: 0; margin-bottom: 0.625rem; font-weight: 700; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.15rem; margin-top: 1.25rem; font-weight: 700; }
h5 { font-size: 0.875rem; font-weight: 700; margin-top: 0.625rem; }

/* header icons */
@media (min-width: 576px) {
	[class*="icon-header-"] { padding-left: 100px; position: relative; display: inline-block; margin: 1rem; }
	[class*="icon-header-"]:before { position: absolute; content: ""; display: block; height: 80px; width: 80px; background-repeat: no-repeat; background-position: center; border-radius: 50%; left: 0; top: 50%; margin-top: -40px; background-size: cover; border: 5px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); }
	.icon-header-webinar:before { background-image: url("../i/dccps/icon-2x-webinar.png"); }
	.icon-header-announce:before { background-image: url("../i/dccps/icon-2x-announce.jpg"); }
	.icon-header-application:before { background-image: url("../i/dccps/icon-2x-application.png"); }
	.icon-header-chat:before { background-image: url("../i/dccps/icon-2x-chat.jpg"); }
	.icon-header-export:before { background-image: url("../i/dccps/icon-2x-export.jpg"); }
	.icon-header-connect:before { background-image: url("../i/dccps/icon-2x-connect.jpg"); }
	.icon-header-news:before { background-image: url("../i/dccps/icon-2x-news.png"); }
	.icon-header-spotlight:before { background-image: url("../i/dccps/icon-2x-spotlight.jpg"); }
	.icon-header-web:before { background-image: url("../i/dccps/icon-2x-web.jpg"); }
	.icon-header-speaker:before { background-image: url("../i/dccps/icon-2x-speaker.jpg"); }
	.icon-header-book:before { background-image: url("../i/dccps/icon-2x-book.jpg"); }
	.icon-header-calendar:before { background-image: url("../i/dccps/icon-2x-calendar.jpg"); }	
}

.extlink { display: inline-block; margin: -8px 0 0 3px; vertical-align: middle; }

/* NCI Logo */
.nciLogo svg { max-height: 54px; max-width: 616px; margin: 23px 0; }

/* backgrounds */
.bg-lightgray { background-color: #f2f2f2; }
.bg-lightgray-1 {background-color:#f9f9f9;}
.bg-lightblue { background-color: #eef3fb;}
.bg-lightblue-1 {background-color: #dee8f7;}
.bg-lightblue-2 { background-color: #bcd1f0;}
.bg-lightblue-3 { background-color: #8aaee5;}
.bg-primary { background-color: #008390 /*cc*/; }
.bg-lightprimary { background-color: #59d1df /*cc*/; }
.bg-darkprimary { background-color: #01555f /*cc*/; }

/* modify 1-col template for homepage: hide breadcrumbs, accessibly hide h1 */
.home .tophat h1 { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home .tophat nav { display: none; }

/* Bioshare Login */
.container h1 + .dropdown { margin-left: 2rem; }
@media (max-width: 575px) {
	.container h1 { order: 2; }
	.container h1 + .dropdown { margin: 1rem 0 -.75rem 0; order: 1; }
}

/* ==================================================
	Header Search
================================================== */
/* .searchForm { position: relative; }
.searchForm input { padding-right: 3em; }
.searchForm button { position: absolute; top: 2px; right: 2px; background: none; border: none; padding: 4px 8px; margin: 0; border-radius: .25rem;  }
.searchForm button:hover, .searchWrap button:focus, .searchWrap button:active { background: #f2f2f2!important /; }
.searchWrap button:focus { box-shadow: 0 0 0 .2rem rgba(79, 79, 79, 0.25)!important; }
.searchForm svg { height: 23px; width: 23px; }
@media (max-width: 47.99em) {
    .searchForm > div { margin-top: 1rem; }
	.searchForm button { position: absolute; top: calc(1rem + 2px); }
} */

/* ==================================================
	Site Ribbon
================================================== */
.ribbon { background: #2F70A8 /*cc*/; color: #fff; font-weight: 700; padding: .6rem 0; line-height: 1.25; }

/* ==================================================
	Main Navigation
================================================== */
.navBar { position: relative; background: #0F2443; }
#menu-button, #search-tog { display: none; }
#search-tog { position: absolute; right: 0; top: 0; margin-right: 1.275rem; }
#main-search { max-height: 10em; overflow: hidden; visibility: visible; transition: all .5s ease-in; }
@media (max-width: 992px) {
	.navBar { padding: 1rem 0; }
	#menu-button, #search-tog { display: block; width: 46.5%; font-weight: 700; background: #fff; box-shadow: inset 0 -1rem .5rem rgba(0,0,0,.12); border: 1px solid #999; color: #2F70A8 ; }
	#menu-button[aria-expanded="true"], #search-tog[aria-expanded="true"] { background: #2F70A8 ; color: #fff; border-color: #e1acfc; }
	#search-tog { top: 1rem; }
	/* #main-search.mobileState { max-height: 0; visibility: hidden; overflow: hidden; transition: all .5s ease-out; } */
}

/* Active Section Highlight in Main Navigation - body class -> li class -> link */
.home .nav-item > a.nav-link.home,.funding .nav-item > a.nav-link.funding, .areas .nav-item > a.nav-link.areas, .resources .nav-item > a.nav-link.resources,  .news .nav-item > a.nav-link.news, .events .nav-item > a.nav-link.events, .about .nav-item > a.nav-link.about,
.hei .resources > a
{ background-color: #2F70A8; }


/* customize/overwrite some BS */
.navbar-custom { padding: 0; font-size: 1rem; line-height: 1.1; }
.navbar-custom .navbar-nav .nav-link { color: #fff; padding: 1.125rem .75rem; transition: background-color .1s linear; }
.navbar-custom .navbar-nav .nav-link:hover, .navbar-custom .navbar-nav .nav-link:focus { background-color: #2F70A8; transition: background-color .1s linear; }
.navbar-custom .dropdown-menu { margin: 0; padding:1rem; border-radius: 0; border:none; background-color: #2F70A8;}
.navbar-custom .dropdown-item { font-weight: 300; padding: .5rem 2rem; color:#fff;}
.navbar-custom .dropdown-item ul>li>a:first-of-type { font-weight: 700; padding-left: 1.25rem; }
.navbar-custom .dropdown-toggle { position: relative; }
.navbar-custom .dropdown-toggle .toggle-icon { display: none; }
.navbar-custom .dropdown-toggle .toggle-icon::before { content:'+' }
.navbar-custom .dropdown-toggle[aria-expanded="true"] .toggle-icon::before { content:'-' }
.navbar-custom .dropdown-toggle .toggle-icon { background: #fff; }
.navbar-custom .dropdown-toggle .toggle-icon:before { color: #333; font-size: 1.3rem; }
.navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus { text-decoration:underline!important; color:#fff; background-color:transparent;}

/*=====================================================================
 bs5 target changed now uses: .nav-link + .dropdown-menu on mobile
======================================================================*/

@media (max-width: 47.99em) {
	.navbar-custom .navbar-nav { padding-top: .5rem; }
	.navbar-custom .navbar-nav .nav-link { padding: .875rem .75rem; border-left: 3px solid transparent; }
	.navbar-custom .navbar-nav .nav-link:hover, .navbar-custom .navbar-nav .nav-link:focus { background-color: rgba(0,0,0,.1); border-left-color: #2F70A8; }
	 
	.navbar-custom .dropdown-toggle .toggle-icon { display: inline-block; position:absolute; top:50%; margin-top:-17px; left:auto; right:4px; width: 34px; height: 34px; overflow: hidden; font:bold 16px/34px monospace!important; text-align:center; text-shadow:none; background:#fff; border-radius: 5px; }

	.navbar-custom .dropdown-toggle::after { display: none; }

	.navbar-custom .nav-link.show + .dropdown-menu {max-height: 100vh; visibility: visible; }
	.navbar-custom .dropdown-menu { background: #ddd; box-shadow: none; border-radius: 0; padding: 0; border: none; display: block;
		max-height: 0;
		visibility: hidden;
		transition: all 0.4s ease-in-out;
		overflow: hidden; }
	.navbar-custom .dropdown-item { padding: .75rem 1.75rem; border-top: 1px solid rgba(0,0,0,.1); border-left: 3px solid #474747; white-space: pre-wrap; }
	.navbar-custom .dropdown-item:first-of-type { font-weight: 300; padding-left: 1.75rem; }
	.navbar-custom .dropdown-item:hover, .navbar-custom .dropdown-item:focus { background-color: rgba(255,255,255,.04); border-left-color: #2F70A8; }
}

/* ==================================================
	Breadcrumbs
================================================== */
.breadcrumb { font-size: 0.875rem; position: relative; top: -17px; padding: 6px 12px; box-shadow: 0 0 4px rgba(0,0,0,0.15); background: #fff; font-weight: 400; }
/* limit long titles so the crumbs look a bit better on desktop */
.breadcrumb-item { max-width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 47.99em) {
    .breadcrumb { display: none; }
}

/* ==================================================
	Side Navigation
================================================== */
.subNav .heading { text-transform: uppercase; color: #fff; background: #1f496f; font-size: 1rem; font-weight: 700; padding: 8px 15px; margin: 0; }

.subNav ul { list-style: none; margin: 0; padding: 0; }
.subNav li { position: relative; }
.subNav li a, .subNav li .no-link { background: #f2f2f2; display: block; padding: 10px 35px 10px 10px; border-left: 5px solid #f2f2f2; line-height: 1.2; transition: all .1s linear; }
.subNav li a:hover, .subNav li a:focus, .subNav li.is-hover > a { background: #f9f9f9; color: #363636; border-left-color: #2f70a8; text-decoration: none; transition: color .1s linear, background .1s linear, border .1s linear; }
.subNav li a.active { border-left-color: #2f70a8; background: #f9f9f9; color: #363636; }

.subNav ul ul { display: none; list-style:none; list-style-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); /* IE11/Edge Hack */ }
.js .subNav ul ul { display: block; }
.subNav ul ul li a, .subNav ul ul li .no-link { padding-left: 1.5rem; }
.subNav ul ul ul li a, .subNav ul ul ul li .no-link { padding-left: 2rem; }
.subNav ul ul ul ul li a, .subNav ul ul ul ul li .no-link {	padding-left: 2.5rem; }
.subNav ul ul ul ul ul li a, .subNav ul ul ul ul ul li .no-link { padding-left: 3rem; }

/* menu toggles for sub-sections +/- */
.expand { position: absolute; right: 5px; top: 11px; display: block; border: none; background: none; padding: 0; line-height: 0; cursor: pointer; z-index: 99; }
	.expand:focus { outline: 1px dotted #000; }

.expand svg { padding: 4px; border-radius: 3px; height: 22px; width: 22px; }
.expand svg rect { fill: #333; }
.subNav a:hover + .expand svg rect, .subNav li.is-hover > .expand svg rect { fill: #333; }
.subNav a.active:hover + .expand svg rect, .subNav li.is-hover .active + .expand svg rect { fill: #333; }
.subNav li.is-hover .no-link + .expand svg rect { fill: #333; }

.expand .vert { opacity: 1; transition: opacity .1s linear; }
.expand[aria-expanded="true"] .vert { opacity: 0; transition: opacity .1s linear; }

/* toggle button to show on mobile */
.togSubNav { display: none; position: fixed; z-index: 100; bottom: 0; padding: .5em 0; width: 100%; background: #2F70A8 /*cc*/; color: #fff; border: none; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.togSubNav svg { fill: #fff; height: 20px; width: 26px; margin-right: .3rem; }
	.togSubNav:hover, .togSubNav:focus { cursor: pointer; background: #352d57 /*cc*/; }

@media (max-width: 991px) {
	/* JS recreates the left navigtaion in an overlay for mobile, so we can hide the original */
	.subNav-wrap .subNav { display: none; }
	.togSubNav { display: block; }
    .subNav { font-size: 1rem; }
    .subNav .heading { display: none; }
}

/* ==================================================
	On-page Navigation
================================================== */
.pageNav { font-size: 1.125rem; padding-top: 0; margin-bottom: .25rem; }
.pageNav + ul { font-size: 1.125rem; margin-bottom: 1rem; }

/* ==================================================
	Footer
================================================== */
footer, .lastUpdate { font-size: 1rem; color: #fff; }
.footerGray { background: #0F2443; }
.lastUpdate { padding: 7px 0; }
footer { background: #14315c; }

footer h2 { font-size: 1.125rem; padding-top: 0; text-transform: uppercase; font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-weight: 700; }
footer h2 { font-size: 1.325rem; padding-top: 0; text-transform: uppercase; font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-weight: 700; }
footer .footerGray h2 {
    line-height: 105%;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 28px;
}

footer a, footer a:hover, footer a:focus { color: #fff; }
footer li { margin-bottom: 10px;}

footer .connect {
    display: flex;
    align-items: center;
    margin-bottom: 2em;
}
footer .connect a.social-icon {
    width: 38px;
    height: 38px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    margin-right: 15px;
    transition: all .2s ease-in-out;
}
footer .icon-linkedin {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGlkPSJwcmVmaXhfX0xheWVyXzEiIHg9IjAiIHk9IjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE4LjEuNUgxLjlDMS4xLjUuNSAxLjEuNSAxLjl2MTYuM2MwIC44LjYgMS40IDEuNCAxLjRoMTYuMmMuOCAwIDEuNC0uNiAxLjQtMS40VjEuOWMwLS44LS42LTEuNC0xLjQtMS40em0tMTIgMTYuMkgzLjNWNy42aDIuOHY5LjF6TTQuNyA2LjRjLS45IDAtMS42LS43LTEuNi0xLjYgMC0uOS43LTEuNiAxLjYtMS42LjkgMCAxLjYuNyAxLjYgMS42LjEuOS0uNyAxLjYtMS42IDEuNnptMTIgMTAuM2gtMi44di00LjRjMC0xLjEgMC0yLjQtMS41LTIuNHMtMS43IDEuMS0xLjcgMi4zdjQuNUg3LjlWNy42aDIuN3YxLjJjLjQtLjcgMS4zLTEuNSAyLjctMS41IDIuOSAwIDMuNCAxLjkgMy40IDQuM3Y1LjF6IiBzdHlsZT0iZmlsbDojZmZmIi8+PC9zdmc+);
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
    margin: 8px;
    display: inline-block;
    border: none;
    border-radius: 0;
}

.links { padding: 40px 0 60px 0; }
.govLinks { margin-top: 30px; }

/*===================================================
bs5 update -- footer
====================================================*/

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

.livehelp { background: #fff; color: #333; text-align: center; padding-top: 10px; }
.livehelp a { padding: 0 0 10px 0; display: block; font-size: 20px; font-weight: 700; color: #333; }
.livehelp a:hover, .livehelp a:focus { color: #333; }
.livehelp img { width: 165px; height: 55px; display: block; margin: 0 auto; }
.livehelp a .livehelp-tel { font-size: 1rem; font-weight: 400; }
.tagline-container { display: table; height: 135px; }
.tagline { display: table-cell; vertical-align: middle; font-family: "Merriweather","Times New Roman",Times,Georgia,serif; font-size: 24px; font-weight: 300; padding: 0 15px; }
/* @media (max-width: 47.99em) {
    footer { padding-bottom: 50px; }
    footer .list-unstyled { margin: 0 0 1rem 0; padding: 0 0 1rem 0; border-bottom: 1px solid #5b5b5b; }
    footer .list-unstyled li { display: inline-block; padding: 4px 12px 4px 0; margin-right: 8px; border-right: 1px solid #5b5b5b; }
    footer .list-unstyled li:last-child { border: none; }
    
    .tagline-container { height: auto; }
    .tagline { font-size: 1.125em; padding: 1rem 0; }
} */

/* ==================================================
	Events
================================================== */
.eventList { list-style: none; margin: 0; padding: 0; }
.card-event { display: flex; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; top: 0; transition: all .3s ease-in-out; margin-bottom: 1rem; border-top: 3px solid #352d57 /*cc*/; }
.date { min-width: 125px; text-align: center; border-right: 1px solid #ccc; margin-right: 25px; padding: .5rem 0; text-transform: uppercase; line-height: 1.1; }
.date strong { font-size: 2rem; font-weight: 700; }
@media (max-width: 576px) {
    .card-event { display: block; }
    .date { border: none; margin: 0; padding: 0; font-weight: 700; }
}

/* ==================================================
	Cards
================================================== */
/* add class to enable flex */
.cardWrap { display: flex; flex-wrap: wrap; justify-content: center; }
/* target specific cards and set width */
.card-25 { display: flex; padding: 0 2rem 2rem 0; width: 25%; }
.card-33 { display: flex; padding: 0 2rem 2rem 0; width: 33.33%; }
.card-50 { display: flex; padding: 0 2rem 2rem 0; width: 50%; }
.card-50:nth-child(2n+2), .card-33:nth-child(3n+3), .card-25:nth-child(4n+4) { padding-right: 0; }
@media (max-width: 1200px) {
    .card-25 { width: 50%; }
    .card-25:nth-child(4n+4) { padding-right: 2rem; }
    .card-25:nth-child(2n+2) { padding-right: 0; }
}
@media (max-width: 992px) {
    .card-33 { width: 50%; }
    .card-33:nth-child(3n+3) { padding-right: 2rem; }
    .card-33:nth-child(2n+2) { padding-right: 0; }
}
@media (max-width: 768px) {
    .card-25, .card-33, .card-50 { width: 100%; padding: 0 0 1rem 0!important; }
}

/* white w/icon, title, desc. */
.card-white { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; top: 0; transition: all .3s ease-in-out; text-decoration: none!important; }
.card-white:hover, .card-white:focus { color: #333; text-decoration: none; top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
.card-head { display: table; margin-bottom: 1rem; }
.card-head * { display: table-cell; vertical-align: middle; }
.card-head > img { max-width: 60px; background: #2F70A8 /*cc*/; border-radius: 50%; margin-right: .5rem; display: inline-block; }
.card-white .card-title { font-size: 1.0625rem; margin: 0; padding: 0; color: #14315c /*cc*/; font-weight: 700; }
.card-white .card-content { font-size: 1.0625rem; }

/* white with dark head */
.card-dark { display: block; width: 100%; background: #fff; box-shadow: 0 2px 2px rgba(0,0,0,0.18); color: #333; position: relative; top: 0; transition: all .3s ease-in-out; text-decoration: none!important; }
.card-dark:hover, .card-dark:focus { color: #333; text-decoration: none; top: -.35rem; box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
.card-dark > .card-title { display: flex; align-items: center; background: #14315c /*cc*/; font-size: 1.25rem; margin: 0; padding: .5rem 1rem; color: #fff; }
.card-dark > .card-content { font-size: 1.125rem; padding: 1rem; }

/* for when the whole card isn't a link but we need the styling (home, about) */
.card-dark.static { background: #f2f2f2; }
.card-dark.static:hover { position: static; top: 0; box-shadow: 0 2px 2px rgba(0,0,0,0.18); }

/* gray w/optional icon, title, desc, link button */
.card-gray { display: block; padding: 1rem; background: #f2f2f2; margin-bottom: 1rem; }
.card-gray > .card-title { font-size: 1.5rem; padding: 0; margin: 0 0 .5rem 0; line-height: 1.1; }
.card-gray > .card-content { font-size: 1.125rem; }
.card-gray > .card-content *:last-child { margin-bottom: 0; } /* remove margin from last item in card */
.card-icon { padding-left: 5rem; position: relative; }
.card-icon > img { position: absolute; top: 1rem; left: -50px; width: 100px; height: 100px; border-radius: 50%; }
.icon-border { border: 5px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.2); }
.icon-center > img { top: 50%; margin-top: -50px; }
@media (max-width: 575px) {
    .card-icon { padding-left: 1rem; padding-top: 4rem; margin-top: 5rem; }
    .card-icon > img, .icon-center > img { top: -50px; left: 50%; margin-left: -50px; margin-top: 0; width: 100px; height: 100px; }
}
/* clickable gray w/optional icon, title, desc */
a.card-gray { text-decoration: none; }
a.card-gray > .card-content * { color: #333; }

/* news/funding cards */
.card-accent { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); padding: 1rem; color: #333; position: relative; transition: all .3s ease-in-out; border-left: 50px solid #14315c /*cc*/; }
.card-accent:before { display: block; width: 30px; height: 32px; position: absolute; top: 1rem; left: -40px; content:""; background-size: cover; background-repeat: no-repeat; background-position: center; }
	.card-news:before { background-image: url("../i/dccps/icon-news.svg"); }
	.card-funding:before { background-image: url("../i/dccps/icon-funding.svg") ; }
.card-accent .card-title { font-size: 1.25rem; margin: 0; padding: 0; }
.card-accent > .card-content { font-size: 1.0625rem; display: flex; flex-direction: column; height: 100%; }
.card-accent > .card-content .btn { margin-top: auto; }
/* clickable version */
a.card-accent { text-decoration: none; position: relative; top: 0; transition: all .3s ease-in-out; }
a.card-accent:hover, a.card-accent:focus { top: -.35rem; box-shadow: 0 4px 8px 2px rgba(0,85,94,.5) /*cc*/; transition: all .3s ease-in-out; }
a.card-accent > .card-content { color: #333; }

/* ==================================================
	DataTables
================================================== */
table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer { border-bottom-color: #dee2e6!important; }

/* ==================================================
	Toggles
================================================== */
.tog-control { padding: 0; margin: 0; }
.tog-control button { display: table; border: none; width: 100%; font-size: 1rem; margin: .5rem 0 0 0; padding: 0; border-radius: 4px; font-weight: 700; text-align: left; background: #f2f2f2; color: #2f70a8; transition: all .2s ease-in-out; }
    /* account for toggle on gray background, give white background on elements instead */
    .bg-lightgray .tog-control button, .bg-lightgray .tog-content { background: #fff; }
.tog-control button:hover { cursor: pointer; background: #2f70a8; color: #fff; transition: all .2s ease-in-out; }
.state { display: table-cell; background: #2f70a8; border-radius: 3px 0 0 3px; padding: 13px; line-height: 0; width: 41px; }
.state svg { height: 15px; width: 15px; }
.state svg rect { fill: #fff; }
.tog-control button[aria-expanded="true"] { background: #2f70a8; color: #fff; }
.tog-control button[aria-expanded="true"] .vert { display: none; }

.tog-control .tog-title { display: table-cell; vertical-align: middle; padding: .5rem 1rem; }
.tog-content { background: #fff; border: 1px solid #ddd; padding: 1rem; margin: .25rem 0 1rem 0; box-shadow: inset .25rem .25rem 0 #fff, inset -.25rem -.25rem 0 #fff; }
.tog-content > :last-child { padding-bottom: 0; margin-bottom: 0; }
    
/* ==================================================
	Modal Window
================================================== */
.modalItem { display: inline-block; }

/* no JS? no modal trigger shown */
.modalItem-trigger { display: none; }

/* js class on body? we got JS, so show the modal trigger */
.js .modalItem-trigger { display: inline-block; line-height: 1.2; }

/* js class on body? we got JS, so hide the provided content, it will go into a modal now */
.js .modalItem-content { display: none; }

/* style the provided content in case there is no JS */
.modalItem-content { padding: 1rem; border: 1px solid #ccc; background: #f2f2f2; }
.modalItem-title { font-size: 1.25rem; font-weight: bold; border-bottom: 1px dotted #ccc; margin-bottom: 1rem; }

/* ==================================================
	Tabs
================================================== */
.nav-tabs { margin-bottom: -8px; background: #f2f2f2; border: none; }
.nav-tabs .nav-item { margin: 0; }
.nav-tabs .nav-link { color: #2f70a8; display: inline-block; overflow: hidden; padding: 0.75rem 1rem; text-decoration: none; font-weight: 700; position: relative; border: 1px solid transparent; border-radius: 0; }
.nav-tabs .nav-link::after { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #006ADC; content: ''; transition: transform 0.3s; transform: translate3d(0,-150%,0); }
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: rgba(255,255,255,.5); color: #222; border-bottom-color: #ccc; }
.nav-tabs .nav-link.active { background: #fff; color: #222; border-color: #ccc; border-bottom-color: #fff; }
.nav-tabs .nav-link.active::after { transform: translate3d(0,0,0); }
.tab-pane { margin: 0; padding: 1rem; background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0,0,0,0.18); }
.tab-pane > :first-child { padding-top: 0; margin-top: 0; }

.nav-pills { margin-bottom: 1rem; background: #f2f2f2; border-radius: 3px; }
.nav-pills + .tab-content .tab-pane { border-radius: 3px; background: #f2f2f2; box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #fff; }
.nav-pills .nav-link.active { text-decoration: none; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.nav-pills .nav-link.active:after { content:""; position: absolute; display: block; height: 0; width: 0; border: 6px solid transparent; border-top-color: #2f70a8; left: 50%; top: 100%; margin-left: -6px; }

/* tabs with tabs-lg class will go full width at the lg breakpoint */
@media screen and (max-width: 1200px) {
    .nav-tabs.tabs-lg { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-lg .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-lg .nav-link { display: block; border: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #333; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-lg .nav-link::after { display: none; }
    .nav-tabs.tabs-lg .nav-link::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../i/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs.tabs-lg .nav-link.active, .nav-tabs.tabs-lg .nav-link:focus, .nav-tabs.tabs-lg .nav-link:hover { background: #333; color: #fff;  }
    .nav-tabs.tabs-lg .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills.pills-lg .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills.pills-lg .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills.pills-lg .nav-link { padding-left: 2rem; }
}

/* tabs with tabs-md class will go full width at this breakpoint */
@media screen and (max-width: 992px) {
	.nav-tabs.tabs-md { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-md .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-md .nav-link { display: block; border: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #006ADC; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-md .nav-link::after { display: none; }
    .nav-tabs.tabs-md .nav-link::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../i/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs.tabs-md .nav-link.active, .nav-tabs.tabs-md .nav-link:focus, .nav-tabs.tabs-md .nav-link:hover { background: #006ADC; color: #fff;  }
    .nav-tabs.tabs-md .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills.pills-md .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills.pills-md .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills.pills-md.nav-link { padding-left: 2rem; }
}

/* tabs with tabs-sm class will go full width at this breakpoint */
@media screen and (max-width: 768px) {
	.nav-tabs.tabs-sm { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-sm .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-sm .nav-link { display: block; border: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #006ADC; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-sm .nav-link::after { display: none; }
    .nav-tabs.tabs-sm .nav-link::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../i/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs.tabs-sm .nav-link.active, .nav-tabs.tabs-sm .nav-link:focus, .nav-tabs.tabs-sm .nav-link:hover { background: #006ADC; color: #fff;  }
    .nav-tabs.tabs-sm .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills.pills-sm .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills.pills-sm .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills.pills-sm .nav-link { padding-left: 2rem; }
}

/* tabs will go full width at this breakpoint (default) */
@media screen and (max-width: 576px) {
	.nav-tabs { margin-bottom: 0; background: none; }
	.nav-tabs .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs .nav-link { display: block; border: 1px solid #ccc; background: #fff; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #006ADC; font-weight: 700; border-radius: 4px;  }
    .nav-tabs .nav-link::after { display: none; }
    .nav-tabs .nav-link::before { display: block; width: 16px; height: 16px; content:""; position: absolute; top: .85rem; left: .75rem; background: url("../i/dccps/toggle.png") 0 0 no-repeat; }
	.nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: #006ADC; color: #fff;  }
    .nav-tabs .nav-link.active::before { background-position: 0 -106px; }
	
	.nav-pills .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-pills .nav-link.active:after { border-top-color: #fff; left: 1rem; top: 50%; margin-left: 0; margin-top: -3px; }
	.nav-pills .nav-link { padding-left: 2rem; }
}

/* ==================================================
	Flickity v2.1.2 (News Archives Slider)
================================================== */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }

/* draggable */
.flickity-enabled.is-draggable { user-select: none; }
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* flickity-button */
.flickity-button { position: absolute; background: #14315c /*cc*/; border: none; color: #fff; }
.flickity-button:hover { opacity: .75; cursor: pointer; }
.flickity-button:focus { outline: none; box-shadow: 0 0 0 2px #19F; }
.flickity-button:active { opacity: 0.6; }
.flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; }
.flickity-button-icon { fill: #fff; }

/* previous/next buttons */
.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; }
.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; }
.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

/* page dots */
.flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; }
.flickity-page-dots .dot.is-selected { opacity: 1; }