/* ==================================================
	Color Variables
================================================== */
:root {
	
	/*NCI*/

	--nci-link:#2e6ab3;

	/*base*/
	--bg-grey-cool-5:#F0F0F0;
	--bg-grey-cool-10:#DFE1E2;
	--bg-grey-cool-30:#A9AEB1;
	--bg-grey-cool-50:#71767A;
	--bg-grey-cool-60:#565C65;
	--bg-grey-cool-70:#3D4551;
	--bg-grey-cool-90:#1B1B1B;

	/*primary*/
	--bg-cerulean-20:#99CAE4;
	--bg-cerulean-40:#3395CA;
	--bg-cerulean-50:#007BBD;
	--bg-cerulean-50v:#067CBC;
	--bg-cerulean-70:#004971;
	--bg-cerulean-80:#00314B;

	/*secondary*/
	--bg-teal-20:#BEEBEE;
	--bg-teal-30:#4BBFC6;
	--bg-teal-40:#3C989E;
	--bg-teal-50v:#338084;
	--bg-teal-60:#338084;
	--bg-teal-70:#1E4C4F;

	/*accent-cool*/
	--navy-10:#D7E5F4;
	--navy-10:#92A9C8;
	--navy-10:#5478AB;
	--navy-10:#284976;
	--navy-10:#06162D;

	/*accent-warm*/
	--golden-5:#FDF2BF;
	--golden-10:#FEE685;
	--golden-20:#FACE00;
	--golden-30:#DDAA01;
	--golden-40:#B38C00;

  }


/* ==================================================
	additional changes to base.css
================================================== */
a {text-decoration: none;}
a:hover {text-decoration: underline;}


.btn-info:active, .btn-info:focus { color:#fff}

.alert-info {
    --bs-alert-color:#07323c;
    --bs-alert-bg: #cfe5ea;
    --bs-alert-border-color: #a0cbd5;
    --bs-alert-link-color: #07323c;
}

/* left nav */


/* return to top */
.returntop { position: fixed; bottom: 1rem; right: 1rem; display: none; z-index: 99; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 8px rgba(0,0,0,.2); text-align: center; background: #fff; }
.returntop span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.returntop svg { border: 1px solid #2F70A8; /*cc*/ border-radius: 50%; margin-top: 8px; padding: 5px; height: 35px; width: 35px; }
.returntop svg path { fill: #2F70A8; /*cc*/ }
.returntop:hover, .returntop:focus { background: #2F70A8; /*cc*/ }
.returntop:hover svg, .returntop:focus svg { border-color: #fff; }
.returntop:hover svg path, .returntop:focus svg path { fill: #fff; }

@media (max-width: 991px) {
	.returntop { display: inline-block; position: relative; width: auto; background: none; padding: 0; height: auto; border-radius: 0; bottom: 0; right: 0; box-shadow: none; margin: 1.5rem 0 0 1rem; }
	.returntop:hover, .returntop:focus { background: none; text-decoration: none; }
	.returntop span { display: inline-block; position: relative; width: auto; margin: 0 auto; height: auto; overflow: auto; clip: auto; white-space: normal; }
	.returntop svg path { fill: #fff;  }
	.returntop svg { height: 28px; width: 28px; margin:-18px 5px 0 0; padding: 2px; vertical-align: middle; border: 1px solid #fff; }
	.returntop:hover svg, .returntop:focus svg { background: none;  border-color: #fff;  }
}

/* improve nested toggles so colors/backgrounds work */
.tog-content .tog-control button { background: #f2f2f2; }
.tog-content .tog-control button:hover, .tog-content .tog-control button[aria-expanded="true"] { background: #f2f2f2; color:#212529}
.tog-content .tog-content { background: #fff; }
/* account for a nested toggle ina  child element with a white background (expand agenda, table with white background, then a toggle again for example) */
.bg-white .tog-content .tog-control button, .bg-white .tog-content .tog-content { background: #f2f2f2; color:#212529}

/* change padding due to returntop link living down here now (footer.html changed as well) */
.links { padding-top: 0; }

/* external links on cards (also edited base.css gray feature card because of image css */
.ext { position: relative; }
.card-extlink { position: absolute; padding: .5rem; bottom: 0; right: 0; background: rgba(0,0,0,.05); display: inline-block; line-height: 0; }

/* add shadow */
.box-shadow { box-shadow: 0 3px 3px rgba(0,0,0,0.18); }

/* helper class for long buttons that need to wrap */
.text-wrap { white-space: normal; }

/* hide annoying external link icon from template */
.supp-ext .extlink { display: none; }

/* h1 is too big on mobile, won't wrap long words, remove bottom margin */
h1 { margin-bottom: 0; }
@media (max-width: 991px) {
	h1 { font-size: 1.5rem; }
}

/* modal trigger fix for li elements */
.modalItem { vertical-align: top; }

/* just hide to avoid FOC */
.modalItem-content { display: none; }

/* External Links in Left Nav */
.subNav .extlink { background: none; display: inline-block; padding: 0; border: none; transition: none; }
.subNav .extlink:hover { background: none; }
.subNav-extlink { position: absolute; padding: .5rem; top: 7px; right: 0; display: inline-block; line-height: 0; }

/*Justify text*/
.text-justify {
    text-align: justify;
    text-justify: inter-word;
}

/* Tables */
table { 
	line-height: 1.3;
	caption-side: top;
}



/* ==================================================
	Color Overrides for base.css
================================================== */
/* backgrounds */

.bg-darkprimary { background-color: #1F496F /*cc*/; }

/* modal title head */
.modal-header { background: #1F496F /*cc*/; }

/* BS form elements */
.form-control:focus { border-color: #2F70A8  /*cc*/; box-shadow: 0 0 0 .2rem rgba(19, 31, 50, 0.25) /*cc*/; }

/* header search */
.searchForm button:hover, .searchWrap button:focus { background: #e9f4f6; }

/* ribbon */
.ribbon { background: #ddaa01 /*cc*/; color: #000; }

/* menu and search toggles for mobile */
#menu-button, #search-tog { color: #fff; }
#menu-button[aria-expanded="true"], #search-tog[aria-expanded="true"] { background: #2F70A8 ; border-color: #2F70A8  ; }
@media (max-width: 992px) {
	.navBar { padding: 0rem 0; }
	#menu-button, #search-tog { display: block; width: auto; font-weight: 700; background: #2F70A8; box-shadow: none; border: none; color: #fff ; }
	#menu-button[aria-expanded="true"], #search-tog[aria-expanded="true"] { background: #2F70A8 ; color: #fff; border-color:transparent ; }
	#search-tog { top: 1rem; }
	#main-search.mobileState { max-height: 0; visibility: hidden; overflow: hidden; transition: all .5s ease-out; }
}

/* left nav toggle on mobile */
.togSubNav { background: #2F70A8 /*cc*/;  }
.togSubNav:hover, .togSubNav:focus { background: #2F70A8 /*cc*/; }

/* slider buttons */
.flickity-button { background: #1F496F /*cc*/; }

/* tabs */
.nav-tabs .nav-link::after { background: #1F496F /*cc*/; }

/* tabs with tabs-lg class will go full width at the lg breakpoint */
@media screen and (max-width: 1200px) {
	.nav-tabs.tabs-lg .nav-link { box-shadow: inset 6rem 0 0 -3.5rem #2F70A8 /*cc*/; }
	.nav-tabs.tabs-lg .nav-link.active, .nav-tabs.tabs-lg .nav-link:focus, .nav-tabs.tabs-lg .nav-link:hover { background: #2F70A8 /*cc*/; color: #fff;  }   
}
/* tabs with tabs-md class will go full width at this breakpoint */
@media screen and (max-width: 991px) {
	.nav-tabs.tabs-md .nav-link { box-shadow: inset 6rem 0 0 -3.5rem #2F70A8 /*cc*/; }
	.nav-tabs.tabs-md .nav-link.active, .nav-tabs.tabs-md .nav-link:focus, .nav-tabs.tabs-md .nav-link:hover { background: #2F70A8/*cc*/; color: #fff;  }
}
/* tabs with tabs-sm class will go full width at this breakpoint */
@media screen and (max-width: 767px) {
	.nav-tabs.tabs-sm .nav-link { box-shadow: inset 6rem 0 0 -3.5rem #2F70A8 /*cc*/; }
	.nav-tabs.tabs-sm .nav-link.active, .nav-tabs.tabs-sm .nav-link:focus, .nav-tabs.tabs-sm .nav-link:hover { background: #2F70A8/*cc*/; color: #fff;  }
}
/* tabs will go full width at this breakpoint (default) */
@media screen and (max-width: 575px) {
	.nav-tabs .nav-link { box-shadow: inset 6rem 0 0 -3.5rem #484068 /*cc*/; }
	.nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: #2F70A8 /*cc*/; color: #fff;  }
}


/* white w/icon, title, desc. */
.card-white:hover, .card-white:focus { box-shadow: 0 3px 6px rgba(34, 48, 80, 0.5) /*cc*/; }
.card-head img { background: #1F496F /*cc*/; }
.card-white .card-title { color: #1F496F /*cc*/; }

/* white with dark head */
.card-dark:hover, .card-dark:focus { box-shadow: 0 3px 6px rgba(34, 48, 80, 0.5) /*cc*/; }
.card-dark > .card-title { background: #1F496F /*cc*/; }

/* news/funding Cards */
.card-accent { border-left: 50px solid #1F496F /*cc*/; }
/* clickable version */
a.card-accent:hover, a.card-accent:focus { box-shadow: 0 3px 6px rgba(34, 48, 80, 0.5) /*cc*/; border-left-color: #000f11; /*cc*/ }
/* darken the accent on dark background */
.bg-darkprimary .card-accent { border-left-color:  #11293D /*cc*/; }

/* event card */
.card-event { border-top: 3px solid #1F496F /*cc*/; }


.bg-lightprimary {
	background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23CECECE' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23FFFFFF' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fefefe' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23fdfdfd' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23fdfdfd' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23fcfcfc' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23fbfbfb' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23fafafa' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23fafafa' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23f9f9f9' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23f8f8f8' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23f7f7f7' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23f7f7f7' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%23f6f6f6' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23f5f5f5' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23f4f4f4' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23f4f4f4' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23f3f3f3' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23F2F2F2' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
.bg-purple { background: #f2f2f2; }



/* Custom Main Nav styling for Bootstrap */
.navbar-nci .offcanvas.offcanvas-start { width:95%; }
.navbar-nci .offcanvas-header { padding: 1.5rem 1rem 2.5rem; }
.navbar-nci .navbar-nav { border-bottom: 1px solid var(--bg-grey-cool-5); }
.navbar-nci .navbar-nav .nav-item { border-top: 1px solid var(--bg-grey-cool-5); }
.navbar-nci .navbar-nav .nav-link { background: #fff; color: var(--nci-base-dark); display: block; padding: .65rem 1rem; line-height: 1.2; transition: all .1s linear; text-decoration: none;}

.navbar-nci .navbar-nav .nav-link:hover, .navbar-nci .navbar-nav .nav-link:focus, .navbar-nci .navbar-nav .nav-item.is-hover > a { background: #f9f9f7; text-decoration: none;}

.navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); top: .5rem; right: .2rem; }
.navbar-nci .navbar-nav .dropdown-menu { border: none; padding: 0; margin: 0; }
.navbar-nci .navbar-nav .dropdown-item { padding: .5rem .5rem .5rem 2rem; border-top: 1px solid var(--bg-grey-cool-5); color: var(--nci-base-dark); font-weight:300; }
.navbar-nci .navbar-nav .dropdown-item:hover, .navbar-nci .navbar-nav .dropdown-item:focus { background-color: #f9f9f7; text-decoration: none;}

.navbar-nci .navbar-nav .nav-link.active { font-weight: 600; color: var(--nci-link-color); }
.navbar-nci .navbar-nav .nav-link.active::after { background-color: var(--nci-link-color); border-radius: 99rem; bottom: .25rem; content: ""; display: block; left: 0; position: absolute; top: .25rem; width: .25rem; }


@media (min-width: 576px) {
    .navbar-nci .offcanvas.offcanvas-start { width: 85%; }
}
@media (min-width: 992px) {
	.navbar {position:static;}
/*mega-menu styles*/
.dropdown.mega-menu, 
.dropleft.mega-menu, 
.dropright.mega-menu, 
.dropup.mega-menu {
    position: static;
}

	.mega-menu .dropdown-menu {left: 0;right: 0;margin-top: -1px;}
	.mega {background-color: #2F70A8;}
	.mega-menu-container {min-width:700px; max-width:900px; margin:auto; display:flex; justify-content:left; font-size: 1rem; gap:3rem;}
	.mega-menu-heading {padding:1.25rem 0rem .5rem 0rem;}
	.mega-menu-heading .dropdown-item {font-weight:700!important;}
	.mega-menu-container:last-child {padding-bottom:1.5rem;}
	
    .navbar-nci { margin-left: -1rem; padding: 0; }
    .navbar-nci .navbar-nav { border-bottom: none; }
    .navbar-nci .navbar-nav .nav-item { border-top: none; margin-bottom: 0; }
	.navbar-nci .navbar-nav .nav-link { background:none; color: #fff; display: block; padding: .65rem 1rem; line-height: 1.2; transition: all .1s linear; text-decoration: none; }
    .navbar-nci .navbar-nav > .nav-item > .nav-link { font-weight: 300; padding: 1rem; line-height: 1; }
   
    .navbar-nci .navbar-nav .nav-link:hover, .navbar-nci .navbar-nav .nav-link:focus, .navbar-nci .navbar-nav .nav-item.is-hover > a { background: #2F70A8; transition: none; color:#fff; }
    .navbar-nci .navbar-nav .nav-link:hover span, .navbar-nci .navbar-nav .nav-link:focus span, .navbar-nci .navbar-nav .nav-item.is-hover > a span { background-color: #2F70A8; }
    .navbar-nci .navbar-nav .nav-link.dropdown-toggle span { padding-right: .8rem; }
   
    .navbar-nci .navbar-nav .dropdown-toggle { transition: none; }
    .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"] { background:#2F70A8; color: #fff; transition: none; }
    .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"] span { border: none; }

    .navbar-nci .navbar-nav .dropdown-menu { background:none; border-radius: 0; }
    .navbar-nci .navbar-nav .dropdown-item { padding: .35rem 0rem; border-top: none; color: #fff; }
    .navbar-nci .navbar-nav .dropdown-item:hover, .navbar-nci .navbar-nav .dropdown-item:focus { background: none; text-decoration: underline!important; }
	
}


/* ==================================================
	Misc
================================================== */
/* context message for archived content */
/* banner archive */
body.archived .context-banner { background-color: #fbffdb;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23ffffec' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23ffffec' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
	 margin-bottom: 1rem; padding-bottom: 1rem; border-top: 1px solid #f0eeb5; border-bottom: 1px solid #f0eeb5; }
body.archived .context-banner .container::after { font-weight: 400; content: "The information on this page is archived and provided for reference purposes only."; padding-left: 1.5rem; background: url("../i/icn-archive-alert.png") left 3px no-repeat; }
body.archived .context-banner .breadcrumb { margin-bottom: 0; }

@media (max-width: 767px) {
	body.archived .context-banner { padding-top: 1rem; }
}

/* footer archive */
body.archived .context-footer { background-color: #fbffdb;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23ffffec' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23ffffec' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
	 padding-top: 1rem; border-top: 1px solid #f0eeb5; }
body.archived .context-footer::before { display: block; font-weight: 400; content: "The information on this page is archived and provided for reference purposes only."; padding-left: calc(1.5rem + 15px); padding-right: 15px; background: url("../i/icn-archive-alert.png") 15px 5px no-repeat; margin: 0 auto 1rem; width: 98%; max-width: 1200px; }

/* archive icon */
.archive { padding-right: 1.75rem; background: url("../i/cobweb-sm.jpg") right center no-repeat; }

.font-16 { font-size: 1rem; }
.font-8 {font-size: .875rem; }

.grow { max-width: none; width: 100%; }
@media (min-width: 991px) { .grow-lg { max-width: none; width: 100%; } }
@media (min-width: 767px) { .grow-md { max-width: none; width: 100%; } }

/* reset BS width helper classes at small breakpoints because they don't allow it */
@media (min-width: 992px) { .w-reset-lg { width: 100%!important; } }
@media (max-width: 767px) { .w-reset-md { width: 100%!important; } }

/* Show More Reveal */
.showMore { display: none; }
.js .showMore { display: inline-block; margin-left: 2.5rem; margin-top: .5rem; }
.js .showMoreWrap[aria-hidden="true"] { display: none; }

/* TableSorter Styles (/cohort-consortium/) */
th.tableHeader { vertical-align: middle!important; }
th.tableHeader a { display: inline-block; width: 100%; background: url("/i/tablesorter/bkgd-wh.gif") right center no-repeat; padding-right: 20px; text-decoration: none; color: #fff; }
th.headerSortDown a { background: url("/i/tablesorter/desc-wh.gif") right center no-repeat; }
th.headerSortUp a {	background: url("/i/tablesorter/asc-wh.gif") right center no-repeat; }

.text-wrap-pretty {
	text-wrap: pretty;
}

/* ==================================================
	Home
================================================== */
/* .hero { background: url("../i/bg-hero.jpg") center no-repeat; background-size: cover; padding: .1rem 0; }
@media (max-width: 1023px) {
	.hero { background: url("../i/bg-hero-md.jpg") center no-repeat; background-size: cover; }
}
@media (max-width: 719px) {
	.hero { background: radial-gradient( at top left, rgba(231, 228, 11, 0.5), transparent 400px ), radial-gradient( at top right, rgba(49, 156, 228, 0.3), transparent 400px ), radial-gradient( at bottom left, rgba(108, 14, 185, 0.3), transparent 400px ), radial-gradient( at bottom right, rgba(19, 211, 131, 0.3), transparent 400px );
		background-color: #008391; }
}

.hero .lead { display: block; margin: 5rem 0; width: 70%; padding: 1.5rem; background: #fff; color: #333; position: relative; line-height: 1.2; outline: 10px solid rgba(0,0,0,.15); font-weight: 400; font-size: 1.5rem; }
.hero .lead:after { content: ''; display: block; height: 0; width: 0; border: 20px solid transparent; position: absolute; left: 1.25rem; bottom: -1.25rem; border-left-color: #fff; }
.hero .lead:before { content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 6px; background-image: linear-gradient(to right, #946cb3 25%, #6fafe1 50%, #64c9ab 75%, #d5da42 100%); background-size: 100%; }

@media (max-width: 1240px) {
	.hero .lead { font-size: 1.375rem; margin: 3.5rem 0; }
}
@media (max-width: 991px) {
	.hero .lead { margin: 2rem 0; width: 75%; }
}
@media (max-width: 767px) {
	.hero { padding-bottom: 1rem; }
	.hero .lead:after { display: none; }
	.hero .lead { width: 100%; font-size: 1.2rem; line-height: 1.3; margin: 1.5rem 0 .5rem 0; font-weight: 300; }
} */

.hero {background-color: #14315c;} /*This blue is only for hero and footer*/

.hero .lead {
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "sans-serif";
	padding: 75px 20px 75px 0px; 
	min-height: 475px;
	font-size: 22px;
    font-weight: 300;
    line-height: 1.636;
    margin-top: 0px;
    margin-bottom: 5px;
}
.hero p {color: #fff /*cc*/;}
.hero hr {
	border-top: 4px solid #ddaa01;
	opacity: 1;
	width: 33%;
	margin-right: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}
.hero .connect-linkedin {
    margin-top: 1em;
	display: flex;
    align-items: center;
}
.hero .connect-linkedin a.linkedin-icon {
    width: 38px;
    height: 38px;
    display: inline-block;
    margin-right: 15px;
    transition: all 0.2s ease-in-out;
}
.hero .connect-linkedin img {
    height:32px;
	margin-left: 2.5px;
	margin-bottom: 1.5px;
}
.hero .connect-linkedin p {
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
}
.hero .connect-linkedin a {color: #fff;}

.hero .connect-linkedin .extlink {
	display: none;
}

.hero-bg-image-wrapper {
	display: none;
	text-align: center;
}

.hero-bg-image-wrapper img {
	
    overflow: hidden;
    top: 0;
    right: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	
	
}

.hero-bg-image-wrapper img:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 415px;
    height: 100%;
    transform: scaleX(-1);
}


@media (max-width: 991px) {
	.hero .lead {
		min-height: inherit;
		padding: 20px 0;
	}
}


@media (min-width: 768px) {

    .hero-bg-image-wrapper {
        display: inline-flex;
        min-height: 415px;
        padding: 30px 0;
        background-image: linear-gradient(to right, transparent 10%, rgba(221,170,1, 1) 10%, rgba(221,170,88, 1) 90%, transparent 90%);
    }
}


.fun-opp { display: flex; align-items: baseline; border-bottom: 1px solid #ccc; margin-bottom: 1rem; }
.fun-details { font-size: 1rem; line-height: 1.3; padding-right: 1rem; flex-grow: 1; }
.fun-date { min-width: 85px; text-align: center; padding: .5rem 0; border-radius: 0 0 4px 4px; position: relative; top: .5rem; margin-bottom: 1rem; background: #fefefe; border-top: 1px solid #fbac1b; }
.fun-date * { display: block; line-height: 1; }
.fun-date strong { font-size: 0.875rem; font-weight: 700; }
.fun-date abbr { text-transform: uppercase; text-decoration: none; font-size: 0.9375rem; }
.fun-date span:nth-child(2) { font-size: 3rem; }
@media (max-width: 1199px) {
	.fun-details { font-size: 1.125rem; line-height: 1.4; }
	.fun-opp { border-bottom: none; }
}
@media (max-width: 991px) { 
	.fun-opp { display: block; padding-bottom: .25rem; }
	.fun-opp p { margin-bottom: .25rem; }
	.fun-date { min-width: 0; display: inline-block; padding: .25rem 1rem; }
	.fun-date * { display: inline-block; line-height: 1; }
	.fun-date strong, .fun-date abbr, .fun-date span:nth-child(2) { font-size: 1rem; text-transform: none; }
}
@media (max-width: 767px) { 
	.fun-opp { border-bottom: 1px solid #ccc; }
}

.twitWrap { overflow-y: scroll; max-height: 21em; }
@media (max-width: 991px) {
	.twitWrap { max-height: 43rem; }
}


/* ==================================================
	Research Areas
================================================== */
.card-branch { display: block; width: 100%; background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); color: #333; position: relative; top: 0; transition: all .3s ease-in-out; text-decoration: none!important; }
.card-branch:hover, .card-branch:focus { color: #333; text-decoration: none; top: -.35rem; box-shadow: 0 3px 6px rgba(34, 48, 80, 0.5) /*cc*/; transition: all .3s ease-in-out; }
.card-image { height: 7rem; }
	.card-image.cteb { background: url("../i/card-cteb.jpg") center no-repeat; background-size: cover; }
	.card-image.eeb { background: url("../i/card-eeb.jpg") center no-repeat; background-size: cover; }
	.card-image.geb { background: url("../i/card-geb.jpg") center no-repeat; background-size: cover; }
	.card-image.mtb { background: url("../i/card-mtb.jpg") center no-repeat; background-size: cover; }
	.card-image.rfab { background: url("../i/card-rfab.jpg") top no-repeat; background-size: cover; }
.card-branch > img { height: 100px; background: #ccc; display: block; }
.card-branch > .card-head { padding: 1rem 1rem .5rem 1rem; margin: 0; }
.card-branch .card-title { font-size: 1.25rem; line-height: 1.1; margin: 0; padding: 0; color: #352d57 /*cc*/; }
.card-branch > .card-content { font-size: 1.125rem; padding: 0 1rem 1rem 2rem; }
.card-branch strong { text-transform: uppercase; font-weight: 700; font-size: 0.9375rem; line-height: 1; display: inline-block; }
.card-branch ul { padding-left: 1.5rem; }

/* shared research areas tagged cards */
.taggedCards > [class*="card-"]	{ flex-direction: column; }
.taggedCards .card-dark { flex: 1 1 auto; }


/* ==================================================
	Events
================================================== */
.card-upcoming { display: flex; }
.card-upcoming > .img { flex: 0 0 140px; height: 140px; }
.card-upcoming > .img > img { border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,.2); }
.card-upcoming .title { font-size: 1.125rem; margin: 0; position: relative; padding-top: .5rem; border-top: 1px solid #ccc; }
.card-upcoming .title:after { content:''; position: absolute; display: block; height: 10px; width: 75%; top: -5px; left: 0; background-image: linear-gradient(to right, #946cb3 25%, #6fafe1 50%, #64c9ab 75%, #fbac1b 100%); background-size: 100%; }
.card-upcoming .title:after { content:''; position: absolute; display: block; height: 10px; width: 75%; top: -5px; left: 0; background-image: linear-gradient(to right, #e1af0d 5%, #379dc4 35%, #2c7c74 55%, #12375f 100%); background-size: 100%; }
.card-upcoming p { font-size: 1rem; }

.chat-icon { display: flex; }
.chat-icon svg { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; background: #eee; padding: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.3); margin-right: .4em; border-radius: 50%; border: 2px solid #fff; }
.chat-icon svg path, .chat-icon svg polygon, .chat-icon svg rect { fill: #333; }
.chat-icon svg circle { stroke: #333; stroke-width: 1; }
.chat-icon strong { align-self: center; line-height: 1.2; }

@media (max-width: 575px) {
	.card-upcoming .img { display: none; }
}

/* DataTables Past Events */
.indicate { margin-bottom: .5rem; }
img[src*="icn-video.svg"] { max-width: 1.25rem; max-height: 1.25rem; vertical-align: text-bottom; margin-right: .25rem; }
#past-events .dataTable { width: 100%!important; }
#past-events .dataTable, #past-events .dataTable th, #past-events .dataTable td { box-sizing: border-box; }
#past-events .controlWrap { background: #f8f8f8; padding: 1em; border: 1px solid #ccc; border-bottom: none; }
#past-events #catSel, #past-events #recSel { display: inline-block; margin-right: 1em; }
#past-events #catSel select { max-width: 100%; }
#past-events .controlWrap label { font-weight: bold; text-align: left; margin-bottom: .25rem; display: block; }
#past-events .controlWrap .dataTables_filter { display: inline-block; float: none; text-align: left; }
#past-events .controlWrap .dataTables_filter input { margin: .25em 0 0 0; }
@media (max-width: 991px) {
	#past-events #catSel, #past-events #recSel { width: 49%; margin-right: 2%; }
	#past-events #recSel { margin-right: 0; }
	#past-events .controlWrap .dataTables_filter { display: block; margin: .5em 0 0 0; }
	#past-events .controlWrap .dataTables_filter input { width: 100%; }	
}
@media screen and (max-width: 47.99em) {
	#past-events #catSel, #past-events #recSel { float: none; margin-bottom: .75em; margin-right: 0; width: 100%; }
}

/* shadows on responsive tables */
/* https://codepen.io/hawcubite/pen/GZXLBR */
.widetable { max-width: 100%; overflow: auto; position: relative; }
.table-inner-wrapper { position: relative; overflow: auto; max-width: 100%; }
.table-shadow { position: absolute; top: 0; bottom: 0; height: 100%; width: 1rem; z-index: 1; pointer-events: none; opacity: 0; }
.shadow-left { left: 0; background-image: linear-gradient( to left, rgba(0,0,0,0), rgba(0,0,0,.15) ); }
.shadow-right { right: 0; background-image: linear-gradient( to right, rgba(0,0,0,0), rgba(0,0,0,.15) ); }
.widetable table { min-width: 520px; margin-bottom: 0; }
	
.fl-scrolls{bottom:0;height:35px;overflow:auto;position:fixed}.fl-scrolls div{height:1px;overflow:hidden;pointer-events:none}.fl-scrolls div:before{content:"\A0"}.fl-scrolls,.fl-scrolls div{font-size:1px;line-height:0;margin:0;padding:0}.fl-scrolls-hidden{bottom:9999px}.fl-scrolls-hidden div:before{content:"\A0\A0"}.fl-scrolls-viewport{position:relative}.fl-scrolls-body{overflow:auto}.fl-scrolls-viewport .fl-scrolls{left:0;position:absolute}.fl-scrolls-hoverable .fl-scrolls{opacity:0;transition:opacity .5s ease .3s}.fl-scrolls-hoverable:hover .fl-scrolls{opacity:1}

/* ==================================================
	News
================================================== */
.subscribeWrap h3 { padding-top: 0; margin-top: 2rem; }
@media (max-width: 991px) {
    .subscribeWrap { background: url("../i/newsletter.png") right center no-repeat; background-size: contain; padding-right: 250px; }
}
@media (max-width: 767px) {
    .subscribeWrap { background: none; padding-right: 0; }
}

.newsBranding { padding: 1rem 10rem 1rem 4%; background: #008391 url("../i/logo-dccps.png") right 4% top no-repeat; color: #fff; display: block; border-radius: 6px 6px 0 0; font-weight: 800; line-height: 1.2; }
.newsBanner { margin: 0 0 2rem 0; color: #fff; font-weight: normal; background: #31366b url("/i/newsletter-banner.jpg") right center no-repeat; font-size: 2.375rem; padding: 4% 0 4% 4%; border-radius: 0 0 6px 6px; }
.newsSubHead { color: #DA3D16; font-size: 1.5rem; }
@media screen and (max-width: 61.99em) { .newsBanner { font-size: 30px; padding: 3% 0 3% 3%; } .newsBranding { padding: 1rem 10rem 1rem 3%; font-weight: normal; } }
@media screen and (max-width: 47.99em) { .newsBanner { font-size: 26px; background-position: 130% center; background-size: cover; } }
@media screen and (max-width: 34.99em) { .newsBanner { font-size: 20px; padding-right: 15%; } }

.newsTitle { background: #31366b url("../i/newsletter-banner.jpg") right center no-repeat; color: #fff; padding: .5rem 1rem; margin: 0; font-weight: normal; border-radius: 3px 3px 0 0; font-size: 1.25rem; }
@media (max-width: 767px) {
	.newsTitle { background-position: left 75% center; }
}


/* ==================================================
	About
================================================== */
.mmmpie { width: 100%; max-width: 400px; padding-top: 1.875rem; }

hr.modern { border-top: 1px solid #c6c6c6; margin: 3rem 0; color: #c6c6c6; text-align: center; overflow: visible; }
hr.modern:after { content: "//"; display: inline-block; width: 35px; height: 35px; position: relative; top: -0.9em; font-size: 1.3em; padding: 0 0.25em; background: #fff; color: #6254a3; }

.cycleWrap { position: relative; overflow: hidden; }
.cycle { position: absolute; left: 0; top: 0; width: 50%; }
.cycle img { position: absolute; z-index: 1; }
.cycle img.active { z-index: 3; }

.btn-branch { display: inline-block; position: relative; padding: .5rem 1rem .5rem 3rem; margin-bottom: .5rem; font-weight: 700; text-decoration: none!important; }
.btn-branch img { width: 2.5rem; position: absolute; left: 0; top: 50%; margin-top: -18px; border-radius: 50%; }

@media (max-width: 1565px) { .cycle { top: 7%; } }
	
.btn-list { list-style: none; margin: 0; padding: 0; }
.btn-list li { display: inline-block; margin: 0 .2rem 1rem 0; }


/* ==================================================
	Org Chart
================================================== */
ol.organizational-chart, ol.organizational-chart ol, ol.organizational-chart li, ol.organizational-chart li > div { position: relative; }
ol.organizational-chart, ol.organizational-chart ol { list-style: none; margin: 0; padding: 0; }
ol.organizational-chart { text-align: center; }
ol.organizational-chart ol { padding-top: 1em; }
ol.organizational-chart h3, ol.organizational-chart h4 { padding: 0; margin: 0; }
ol.organizational-chart h4 { font-weight: 700; font-size: 1rem; }
ol.organizational-chart a.branch { text-decoration: none; display: flex; flex: 1; width: 100%; align-items: center; position: relative; overflow: hidden; padding: 1rem 1rem 1rem 4rem; text-align: left; }

ol.organizational-chart a.oad { text-align: left; display: block; text-decoration: none; padding: 1rem .5rem; border-radius: 4px; box-shadow: 0 3px 3px rgba(0,0,0,0.18); background: #ece8fb; border: 1px solid #d1caed; }
ol.organizational-chart a.oad span { position: relative; display: inline-block; padding-left: 3rem; }
ol.organizational-chart a.oad span:after { position: absolute; top: 50%; left: 0; margin-top: -20px; display: block; width: 40px; height: 40px; content: ''; border-radius: 50%; opacity: .9; transition: all .2s ease-in-out; background-size: cover!important; background: #fff url("../i/icn-oad.png") center no-repeat; filter: hue-rotate(324.1deg) brightness(1.5); }
ol.organizational-chart a.oad:hover span:after, ol.organizational-chart a.oad:focus span:after { opacity: 1; transform: scale(1.1); transition: all .2s ease-in-out; }

ol.organizational-chart a:after { position: absolute; top: 50%; left: .75rem; margin-top: -20px; display: block; width: 40px; height: 40px; content: ''; border-radius: 50%; opacity: .9; transition: all .2s ease-in-out; background-size: cover!important; }
	ol.organizational-chart ol li:nth-child(1) a:after { background: #fff url("../i/icn-cteb.png") center no-repeat;filter: hue-rotate(324.1deg) brightness(1.5); }
	ol.organizational-chart ol li:nth-child(2) a:after { background: #fff url("../i/icn-eeb.png") center no-repeat; filter: hue-rotate(324.1deg) brightness(1.5);}
	ol.organizational-chart ol li:nth-child(3) a:after { background: #fff url("../i/icn-geb.png") center no-repeat; filter: hue-rotate(324.1deg) brightness(1.5);}
	ol.organizational-chart ol li:nth-child(4) a:after { background: #fff url("../i/icn-mtb.png") center no-repeat; filter: hue-rotate(324.1deg) brightness(1.5);}
	ol.organizational-chart ol li:nth-child(5) a:after { background: #fff url("../i/icn-rfab.png") center no-repeat; filter: hue-rotate(324.1deg) brightness(1.5);}
ol.organizational-chart a.branch:hover:after, ol.organizational-chart a.branch:focus:after { opacity: 1; transform: scale(1.1); transition: all .2s ease-in-out; }

/* lines */
ol.organizational-chart ol:before, ol.organizational-chart ol:after, ol.organizational-chart li:before, ol.organizational-chart li:after, ol.organizational-chart > li > div:before, ol.organizational-chart > li > div:after { background-color: #ccc; content: ''; position: absolute; }
ol.organizational-chart ol > li { padding: 1em 0 0 1em; flex: 1; }
ol.organizational-chart > li ol:before { height: 1em; left: 50%; top: 0; width: 3px; }
ol.organizational-chart > li ol:after { height: 3px; left: 3px; top: 1em; width: 50%; }
ol.organizational-chart > li ol > li:not(:last-of-type):before { height: 3px; left: 0; top: 2em; width: 1em; }
ol.organizational-chart > li ol > li:not(:last-of-type):after { height: 100%; left: 0; top: 0; width: 3px; }
ol.organizational-chart > li ol > li:last-of-type:before { height: 3px; left: 0; top: 2em; width: 1em; }
ol.organizational-chart > li ol > li:last-of-type:after { height: 2em; left: 0; top: 0; width: 3px; }

/* boxes */
ol.organizational-chart li > div { background-color: #fff; border-radius: 4px; border-color:black; min-height: 2em; color: #fff; }

/*** PRIMARY ***/
ol.organizational-chart > li > div { margin-right: 1em; }
ol.organizational-chart > li > div:before { bottom: 2em; height: 3px; right: -1em; width: 1em; }
ol.organizational-chart > li > div:first-of-type:after { bottom: 0; height: 2em; right: -1em; width: 3px; }
ol.organizational-chart > li > div + div { margin-top: 1em; }
ol.organizational-chart > li > div + div:after { height: calc(100% + 1em); right: -1em; top: -1em; width: 3px; }

/*** SECONDARY ***/
ol.organizational-chart > li > ol:before { left: inherit; right: 0; }
ol.organizational-chart > li > ol:after { left: 0; width: 100%; }
ol.organizational-chart > li > ol > li > div { background-color: #ece8fb; box-shadow: 0 3px 3px rgba(0,0,0,0.18); border: 1px solid #d1caed; }

/*** TERTIARY ***/
ol.organizational-chart > li > ol > li > ol > li > div { background-color: #fd6470; }

/*** QUATERNARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > div { background-color: #fca858; }

/*** QUINARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > ol > li > div { background-color: #fddc32; }

@media only screen and ( min-width: 64em ) {
	ol.organizational-chart { margin-left: -1em; margin-right: -1em; }
	ol.organizational-chart a.branch { padding: 5.75rem .25rem 1rem .25rem; text-align: center; }
	ol.organizational-chart a.branch:after { top: 2rem; left: 50%; margin-left: -37px; width: 74px; height: 74px; border: 5px solid #fff; }
	ol.organizational-chart a.oad { text-align: center; padding-left: 5.5rem; }
	ol.organizational-chart a.oad span { padding: 1rem 5.5rem; }
	ol.organizational-chart a.oad span:after { width: 74px; height: 74px; margin-top: -37px; border: 5px solid #fff; }

	/* PRIMARY */
	ol.organizational-chart > li > div { display: inline-block; float: none; margin: 0 1em 1em 1em; vertical-align: bottom; }
	ol.organizational-chart > li > div:only-of-type { margin-bottom: 0; width: calc((100% / 1) - 2em - 4px); }
	ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2), ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div { width: calc((100% / 2) - 2em - 4px); }
	ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3), ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div { width: calc((100% / 3) - 2em - 4px); }
	ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4), ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div { width: calc((100% / 4) - 2em - 4px); }
	ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5), ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div { width: calc((100% / 5) - 2em - 4px); }
	ol.organizational-chart > li > div:before, ol.organizational-chart > li > div:after { bottom: -1em!important; top: inherit!important; }
	ol.organizational-chart > li > div:before { height: 1em!important; left: 50%!important; width: 3px!important; }
	ol.organizational-chart > li > div:only-of-type:after { display: none; }
	ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after, ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after { bottom: -1em; height: 3px; width: calc(50% + 1em + 3px); }
	ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after { left: calc(50% + 3px); }
	ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after { left: calc(-1em - 3px); }
	ol.organizational-chart > li > div + div:not(:last-of-type):after { height: 3px; left: -2em; width: calc(100% + 4em); }

	/* SECONDARY */
	ol.organizational-chart > li > ol { display: flex; flex-wrap: nowrap; }
	ol.organizational-chart > li > ol:before, ol.organizational-chart > li > ol > li:before { height: 1em!important; left: 50%!important; top: 0!important; width: 3px!important; }
	ol.organizational-chart > li > ol:after { display: none; }
	ol.organizational-chart > li > ol > li { flex-grow: 1; padding-left: .5em; padding-right: .5em; padding-top: 1em; }
	ol.organizational-chart > li > ol > li:only-of-type { padding-top: 0; }
	ol.organizational-chart > li > ol > li:only-of-type:before, ol.organizational-chart > li > ol > li:only-of-type:after { display: none; }
	ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after, ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after { height: 3px;
	top: 0; width: 50%; }
	ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after { left: 50%; }
	ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after { left: 0; }
	ol.organizational-chart > li > ol > li + li:not(:last-of-type):after { height: 3px; left: 0; top: 0; width: 100%; }
}


/* ==================================================
	Branch Pages
================================================== */
.branch-pad { padding-top: 2rem; }
@media (min-width: 768px) {
	.branch-pull { margin-top: calc(-1em + -31px); background-position: right -8em center; background-repeat: no-repeat; background-size: cover;  }
		.hero-cteb { background-image: url("../i/bg-cteb.jpg"); }
		.hero-mtb { background-image: url("../i/bg-mtb.jpg"); }	
		.hero-geb { background-image: url("../i/bg-geb.jpg"); }
		.hero-eeb { background-image: url("../i/bg-eeb.jpg"); }
		.hero-rfab { background-image: url("../i/bg-rfab.jpg"); background-position: center top; }
	.branch-pad { padding-top: calc(1em + 31px); }
}
@media (min-width: 992px) {
	.branch-pull { background-position: right center; }
	.hero-rfab { background-position: center top; }
}

.jump-down { text-decoration: none!important; padding-right: 1rem; background: url("../i/arrow-down-yellow.png") right 8px no-repeat; }

.discover { padding-right: 1rem; position: relative; }
.discover:after { content: ""; position: absolute; top: 50%; margin-top: -1.5px; right: 0; height: 5px; width: 9px; background: url("../i/arrow-down-yellow.png") center no-repeat; transform: rotate(-90deg); }
.branchNav { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
@media (max-width: 991px) {
	.discover { display: inline-block; }
	.discover:after { transform: rotate(0deg); }
	.branchNav { padding-bottom: 1rem; }
}
@media (max-width: 576px) {
	.branchNav li, .branchNav a { width: 100%; }
}

/* ==================================================
	Staff/Contact Us Modal
================================================== */
.staff-modal { display: flex; align-items: center; }
.staff-modal .img { flex: 0 0 80px; height: 112px; align-self: flex-start; }
.staff-modal .img img { border: 5px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.staff-modal p { margin-bottom: 0; }
@media (max-width: 576px) {
	.staff-modal .img { display: none; }
}


/* ==================================================
	Staff List
================================================== */
.staff-filters { font-size: 1rem; }
.staff-filters legend { font-size: 1.125rem; font-weight: 700; margin-bottom: .2rem; }
.radio-group { margin-bottom: 1rem; }
.radio-group label { display: block; margin-bottom: .25rem; }
.radio-group input { margin-right: .15rem; }

.keyword label { margin: 0 .25rem 0 0; font-weight: 700; font-size: 1.125rem; }

.keyword input:not(:placeholder-shown) + .reset { display: inline-block; }
.keyword input:placeholder-shown + .reset { display: none; }
	
.card-staff { background: #f2f2f2; padding: 1rem; font-size: 1.0625rem; line-height: 1.3; margin-bottom: .25rem; width: 100%; }

.staff-image { float: left; width: 13%; }
.staff-image img { border-radius: 4px; }
.staff-details { float: left; width: 42%; padding-right: 3.5%; padding-left: 2%; }
.staff-areas { float: left; width: 45%; padding-left: 3.5%; border-left: 1px solid #ccc; }
.staff-areas strong { padding: .05rem 0 .05rem 1.85rem; display: block;  position: relative; }
.staff-areas strong:before { display: block; content: ''; width: 1.5rem; height: 1.5rem; background: url("../i/dccps/icn-chat.svg") left center no-repeat; position: absolute; top: 0; left: 0; }
.staff-areas ul { margin-left: .5rem; }
@media (max-width: 767px) {
	.card-staff { font-size: 1rem; }
	.staff-image {  width: 13%; }
	.staff-details { width: 42%; padding-right: 3.5%; padding-left: 2%; }
	.staff-areas { width: 45%; padding-left: 3.5%; border-left: 1px solid #ccc; }
}
@media (max-width: 575px) {
	.card-staff > * { float: none; }
	.staff-image { float: right; width: 25%; }
	.staff-details, .staff-areas { width: 100%; padding: 0; margin: 0; border: none; }
	.staff-areas { margin-top: 1rem; }
}

/* modify the staff cards we pull in for the Org Structure and OAD page - different responsiveness and removing interest areas */
.feature-staff .card-staff { background: #fff; box-shadow: 0 3px 3px rgba(0,0,0,0.18); font-size: 1.125rem; }
.feature-staff .staff-image { width: auto; margin-bottom: .5rem; }
.feature-staff .staff-details { padding-left: 1rem; width: calc(100% - 100px); }
.feature-staff .staff-areas { display: none; }

@media (max-width: 1199px) {
	.feature-staff .staff-image, .feature-staff .staff-details { width: auto; float: none; }
}
@media (max-width: 767px) {
	.feature-staff .staff-image { width: auto; float: left; }
	.feature-staff .staff-details { padding-left: 1rem; width: calc(100% - 100px); float: left; }
}
@media (max-width: 575px) {
	.feature-staff .staff-image, .feature-staff .staff-details { width: auto; float: none; }
}

/* ==================================================
	Staff Page
================================================== */
.staff-summary { font-size: 1rem; border-top: 1px solid #fbac1b; padding: 1rem .25rem .25rem; background: #f2f2f2; border-radius: 0 0 4px 4px; }
.staff-titles { float: left; width: calc(100% - 134px); line-height: 1.35; }
@media (max-width: 1199px) { .staff-degrees { margin-left: 8.35rem; } }
@media (max-width: 575px) {
	.staff-summary { padding: .75rem; }
	.staff-titles { float: none; width: 100%; }
	.staff-degrees { margin-left: 0; }
	.staff-summary img { max-width: 75px; }
}
	
.styled-list { font-size: 1rem; max-width: 20rem; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.list-title { display: block; border-radius: 4px 4px 0 0; border: 1px solid #ccc; padding: .5rem 1rem; background: #f2f2f2; font-size: 1.125rem; }
.styled-list > ul { list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; border-top: none; }
.styled-list > ul > li { border-bottom: 1px solid #ccc; padding: .5rem 1rem; margin: 0; }
.styled-list > ul > li:last-child { border-bottom: none; }
@media (max-width: 767px) {
	.styled-list { max-width: none; }
}


/* ==================================================
	Flickity v2.1.2
================================================== */
/* Funding Page Image Slider */
.funding .flickity-button { background: rgba(0,0,0,.15); }
.funding .carousel-cell { width: 100%; display: none; } /* hide all cells on page load */
.funding .carousel-cell:first-child { display: block; } /* unhide first cell on page load */
.funding .flickity-enabled .carousel-cell { display: block; } /* show all cells when plugin is loaded */
.funding .carousel-cell img { border-radius: 4px; }

/* Branch Funding Slider */
.branch-fund .flickity-prev-next-button.previous { display: none; }
.branch-fund .carousel-cell { width: 100%; display: none; padding-right: 4rem; line-height: 1.175; } /* hide all cells on page load */
.branch-fund .carousel-cell:first-child { display: block; } /* unhide first cell on page load */
.branch-fund.flickity-enabled .carousel-cell { display: block; } /* show all cells when plugin is loaded */
.branch-fund .flickity-page-dots { position: relative; padding: .5rem 0 0; bottom: auto; margin-left: -2rem; margin-top: .5rem; border-top: 1px dotted #ccc; }
.branch-fund .arrow { position: relative; padding-left: 1rem; }
.branch-fund .arrow:after { position: absolute; top: 1px; left: 0; content: ""; width: 17px; height: 17px; background: url("/i/arrow-down-yellow.png") center no-repeat; transform: rotate(270deg); }
@media (max-width: 575px) {
	.branch-fund .flickity-page-dots { margin-left: 0; }
}

/* Home Funding Slider */
.home-fund .flickity-button { background: #2F70A8; }
.home-fund .flickity-prev-next-button { top: 92.5%; height: 24px; width: 24px; z-index: 10; padding: 0; margin: 0; display: inline-block; }
.home-fund .flickity-prev-next-button.next { right: 0; }
.home-fund .flickity-prev-next-button.previous { left: 0; }
.home-fund .carousel-cell { width: 100%; display: none; line-height: 1.175; } /* hide all cells on page load */
.home-fund .carousel-cell:first-child { display: block; } /* unhide first cell on page load */
.home-fund.flickity-enabled .carousel-cell { display: block; } /* show all cells when plugin is loaded */
.home-fund .flickity-page-dots { position: relative; padding: .75rem 1rem 0; bottom: auto; margin-top: .5rem; border-top: 1px dotted #ccc; margin-bottom: 1rem; }
.home-fund em.arrow { position: relative; padding-left: 1rem; }
.home-fund em.arrow:after { position: absolute; top: 1px; left: 0; content: ""; width: 17px; height: 17px; background: url("/i/arrow-down-yellow.png") center no-repeat; transform: rotate(270deg); }
@media (max-width: 575px) {
	.home-fund .flickity-page-dots { margin-left: 0; }
}

/* Home Slider */
.general .card-accent { border-left-color: #183A57; font-size: 1rem; }
.general .card-accent .card-title, .general .card-accent .card-content { line-height: 1.1; }
.general .card-accent:hover .card-title, .general .card-accent:focus .card-title, .general .card-accent:hover .card-content, .general .card-accent:focus .card-content { color: #11293d; }

.general .flickity-enabled { padding: 0 4rem; }
.general .flickity-button { background: rgba(0,0,0,.6); }
.general .flickity-prev-next-button { height: calc(100% - 2rem); border-radius: 0; }
.general .flickity-prev-next-button.previous { left: 0; border-radius: 0 4px 4px 0; }
.general .flickity-prev-next-button.next { right: 0; border-radius: 4px 0 0 4px; }
.general .carousel-cell { width: 33.333%; display: none; padding: 0 1rem; line-height: 1.2; font-size: 1rem; margin: 1rem 1px; } /* hide all cells on page load */
.general .carousel-cell:first-child { display: block; } /* unhide first cell on page load */
.general .flickity-enabled .carousel-cell { display: block; } /* show all cells when plugin is loaded */

/* change cell widths down to mobile to show less cards in slider */
@media (max-width: 1199px) { .general .carousel-cell { width: 50%; } }
@media (max-width: 899px) {	.general .carousel-cell { width: 100%; } }
@media (max-width: 575px) {
	/* reduce button size, expand single card */
	.general .flickity-enabled { padding: 0 1rem; }
	.general .flickity-prev-next-button { width: 24px; }
	/* remove accent and icon to maximize space for content on mobile */
	.general .flickity-enabled .card-accent { border-left: none; }
	.general .flickity-enabled .card-accent:before { display: none; }
}


/* ==================================================
	EGRP Webinar Series
================================================== */
.webinar { display: flex; align-items: baseline; }
.web-details { flex-grow: 1; }
.web-speaker { line-height: 1.2; }
.web-title { font-size: 1.375rem; margin: 0; padding: 0; font-weight: 700; }
.web-time { display: inline-block; padding-left: 2rem; position: relative; margin-top: .2rem; }
.web-time:before { display: block; content: ''; left: 0; top: .2rem; position: absolute; background: url("/i/icn-clock.svg") left center no-repeat; height: 1.5rem; width: 1.5rem; background-size: contain; }
.web-date { min-width: 85px; background:#f2f2f2; padding: .5rem 0; text-align: center; border-radius: 4px; margin-right: 2rem; border-top: 1px solid #fbac1b; line-height: 1; position: relative; top: .5rem; }
.web-date * { display: block; }
.web-date abbr { text-decoration: none; text-transform: uppercase; }
.web-date strong { font-size: 2.75rem; font-weight: 700; }

.tog-content .web-date { background:#f2f2f2;}


@media (max-width: 767px) {
	.webinar { display: block; border: none; }
	.web-details { padding: 0 1rem; }
	.web-details .btn { margin-top: .5rem; }
	.web-date { display: block; min-width: 0; text-align: left; margin: 0; line-height: inherit; top: 0; padding: .25rem 1rem; font-weight: 400; margin-bottom: .5rem; }
	.web-date * { display: inline-block; margin-right: .15rem; }
	.web-date abbr { text-transform: none; }
	.web-date abbr:after { content:'.'; display: inline-block; }
	.web-date strong { font-size: 1.125rem; font-weight: 400; }
	.web-date strong:after { content:','; display: inline-block; }
}

/* ==================================================
	Consortia
================================================== */
.multiple .state, .multiple button:hover, .multiple button[aria-expanded="true"] { background-color: #1F496F; }

/* ==================================================
	HEI
================================================== */
/* HEI Slider */
.hei-carousel .flickity-viewport { max-height: 40rem; font-size: 1rem; }
.hei-carousel .flickity-button { background: rgba(0,0,0,.8); }
.hei-carousel .carousel-cell { width: 100%; display: none; text-align: center; padding: 0 6.5rem; } /* hide all cells on page load */
.hei-carousel .carousel-cell:first-child { display: block; } /* unhide first cell on page load */
.hei-carousel .flickity-enabled .carousel-cell { display: block; } /* show all cells when plugin is loaded */
.hei-carousel .carousel-cell img { margin: 0 auto; }
/* modify dots to show number count */
.hei-carousel .flickity-page-dots .dot { border-radius: 3px; height: 20px; width: 45px; opacity: 1; background: #eee; }
.hei-carousel .flickity-page-dots .dot.is-selected { background: #333; }
.hei-carousel .flickity-page-dots .dot:after { content:attr(aria-label); display: block; color: #000; }
.hei-carousel .flickity-page-dots .dot.is-selected:after { color: #fff; }
@media (max-width: 767px) {
	.hei-carousel .flickity-prev-next-button { top: 7%; }
	.hei-carousel .carousel-cell { padding: 0; } 
}

/* Flowchart on /hei/tools.html */
.flowchart-wrap { position: relative; }
.flow-item { position: absolute; height: 68px; width: 138px; background: #fff; border-radius: 3px; opacity: 0; transition: opacity .2s linear; }
.flow-item:hover, .flow-item:focus { opacity: .25; transition: opacity .2s linear; }
.flow1 { top: 119px; left: 18px; }
.flow2 { top: 234px; left: 18px; }
.flow3 { top: 316px; left: 18px; }
.flow4 { top: 87px; left: 336px; }
.flow5 { top: 160px; left: 336px; }
.flow6 { top: 234px; left: 336px; }
.flow7 { top: 316px; left: 336px; }
.flow8 { top: 87px; left: 547px; }
.flow9 { top: 160px; left: 547px; }
.flow10 { top: 234px; left: 547px; }
.flow11 { top: 316px; left: 547px; height: 25px; }
.flow12 { top: 344px; left: 547px; height: 40px; }

/* ==================================================
	Lazy-load Videos
================================================== */
/* basic placeholder styling */
.lazy-video { background-color: #000; cursor: pointer; }
	
/* youtube thumbnail image used for background */
.lazy-video img { width: 100%; top: -16.84%; left: 0; opacity: 0.7; }

/* bs5 youtube thumbnail image used for background */
.lazy-video img { width: 100%; top: -0%; left: 0; opacity: 0.7; }

	
/* custom background to match EGRP for vBrick */
.lazy-brick { background-color: #008391; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23FFFDB9'/%3E%3Cstop offset='1' stop-color='%23008391'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%2380c0a5'/%3E%3Cstop offset='1' stop-color='%23008391'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.88' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: cover; }

/* ASA24 Demo Video English BG */
.lazy-asa24 { background: url("../i/asa24/asa24-video-bg.gif"); }

/* ASA24 Demo Video Spanish BG */
.lazy-asa24-sp { background: url("../i/asa24/asa24-video-sp-bg.jpg"); }

/* play button */
.lazy-video .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px; }
.lazy-video .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff; }
.lazy-video img, .lazy-video .play-button { cursor: pointer; }
.lazy-video img, .lazy-video .play-button, .lazy-video .play-button:before { position: absolute; }
.lazy-video .play-button, .lazy-video .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 ); }

/* ==================================================
	Video Archive
================================================== */
.playlistWrap { background: #f8f8f8; padding: 1rem; }
.playlistWrap .title { display: none; padding: 1rem; background: #eef3fb; border: 1px solid #ccc; }
	.js .playlistWrap .title { display: block; }
	.playlistWrap .title span { font-style: italic; }
.playlist { border: 1px solid #ccc!important; }
.playlist td { padding: 0; background: #fff; }
.playlist a { display: block; background: #fff; padding: .65rem 1rem; color: #333!important; }
.playlist .vidTitle { font-size: 1.075rem; }
.playlist .vidTitle span { color: #777; font-size: .94rem; }
.playlist .time { text-align: right; }
.playlist .extlink { display: none; }
.playlist .odd, .playlist .even { background: none!important; }

.filterWrap { display: flex; padding: 1rem; background: #eef3fb; margin: 0; border: 1px solid #dee2e6; border-bottom: none; align-items: center;}
.filterWrap label, .filterWrap input { margin-bottom: 0; }
.filterWrap span { margin-right: 2rem; }
.filterWrap h2 { font-size: 1.2rem; }
.playlistWrap .dataTables_filter { margin-left: auto; }
.playlistWrap .dataTables_filter label { display: flex; align-items: center; }
.playlistWrap .dataTables_filter input { margin-left: .25rem; width: auto; }

.player { display: none; margin: 0 auto; text-align: center; margin-bottom: 1rem; position: relative; padding-bottom: 56%; height: 0; border: 1px solid #ccc; }
.player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ccc; }

/* if JS is on, enhance */
.js .player { display: block; }
.js .playlist a { padding-left: 4rem; background: url("/i/play_sprite_bw.png") 13px -158px no-repeat; text-decoration: none; }
.js .playlist a.non-yt { background-image: url("/i/play_ext_sprite_bw.png"); }
.js .playlist a:hover, .js .playlist a:focus { background-position: 13px 13px; }

@media screen and (max-width: 47.99em) {
	.playlist .time { text-align: left; }
	.filterWrap { display: block;}
	.playlistWrap .dataTables_filter { padding-top: .5rem; margin-top: .5rem; border-top: 1px dotted #ccc; }
}

/* ==================================================
	Diet/Usual Intakes
================================================== */
/* details.html arrow flow */
@media screen and (max-width: 1199px) {
	.estArrow { transform: rotate(324.1deg); }
}

/* /diet/shortreg/instruments/ yellow arrows in toggle */
.includes { padding-left: .75rem; position: relative; color: #333; transition: color .2s ease-in-out; }
.includes:after { content: ""; position: absolute; top: 50%; margin-top: -2px; left: 0; height: 5px; width: 9px; background: url("/i/arrow-down-yellow.png") center no-repeat; transform: rotate(-90deg); }
/* handle text color change for toggle hover/active */
.tog-control button:hover .includes, .tog-control button[aria-expanded="true"] .includes { color: #fff; transition: color .2s ease-in-out; }

/* ==================================================
	WCRF/AICR Score
================================================== */
/* /wcrf-aicr-score/details.html image map */
@media screen and (max-width: 767px) {
	  img#components {display: none;}
}

/* ==================================================
	HEI
================================================== */
/* /hei/ image map */
.imagemap {position: relative;}
.imagemap img {display: block;}
.imagemap .area {display: block; position: absolute; border-radius: 3px; transition: box-shadow 0.15s ease-in-out; border: 1px solid #617dae; box-shadow: inset 0 7px 7px -3px rgba(255,255,255,.4), inset 0 -7px 7px -3px rgba(0,0,0,.2), 0 3px 0 #1f4384; }
.imagemap .area:hover { box-shadow: inset 0 9px 9px -3px rgba(255,255,255,.4), inset 0 -7px 7px -3px rgba(0,0,0,.1), 0 2px 0 #1f4384; }
/* hide on mobile */
img#heicomponents, .imagemap { display: none; }

@media screen and (min-width: 768px) {
    div.graphiclink { display: none; }
	img#heicomponents, .imagemap { display: block; }
}



/* ==================================================
	Print Styles
================================================== */
@media print {
	@page { margin: 40px; }
	* { background: none!important; color: #000!important; }
	
	.container { width: 100%!important; max-width: none!important; padding: 0!important; }
	.eqHeight { height: auto!important; }
	img { width: auto!important; }

	/* typography */
	h1, h2, h3, h4 { padding: 0!important; margin: 0 0 1rem 0!important; font-weight: 700!important; }
	h1 { font-size: 32px!important; margin-top: 10px!important; }
	h2 { font-size: 26px!important; margin-top: 1.5rem!important; }
	h3 { font-size: 20px!important; }
	h4 { font-size: 16px!important; }

	p, h2 , h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }

	main abbr[title]:after { content: " (" attr(title) ")"; }

	pre { white-space: pre-wrap !important; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

	table { page-break-before: avoid; }

	/* url printing */
	/* print URLs from the main element only */
	main a[href]:after { content: " (" attr(href) ")"; }
	main a[href^="/"]:after { content: " (https://epi.grants.cancer.gov" attr(href) ") " !important;}
	/* but don't print internal links or larger table column header links */
	main a[href^="#"]:after, main a.extlink:after, table thead th a:after { display: none; }
	main a { word-wrap: anywhere; color: #000!important; }

	/* header */
	.nciLogo svg { margin: 0 0 .5rem 0; }
	.ribbon { border-bottom: 1px solid #ccc; }
	.ribbon span { padding-left: 0; }

	/* stop flex columns in print since it can cause issues */
	[class*="col"] { flex-basis: 100%!important; max-width: 100%!important; width: 100%!important; padding-left: 0; padding-right: 0; }
	/* change flexbox to address Firefox printing */
	[class*="d-flex"], [class*="row"], [class*="offset-"] { display: block!important; margin-left: 0; margin-right: 0; }
	/* stop floats */
	[class*="float"] { float: none!important; }
	/* show items that are hidden by default (toggled content, modals, etc.) */
	[aria-hidden="true"], .modalItem-content { display: block!important; }
	.text-white { color: #000!important; }
	.text-center, .text-lg-center, .text-md-center, .text-sm-center, .btn { text-align: left!important; }
	[class*="p-"] { padding-left: 0!important; padding-right: 0!important; padding-top: 0!important; }
	.mb-5, .mb-4 { margin-bottom: 1rem!important; }
	.pt-5.mt-5, .mt-5 { margin-top: 1rem!important; padding-top: 0!important; }
	
	.tog-content { border: none!important; padding-top: 0; }

	/* some things we can hide in print */
	.searchWrap, .navBar, .subNav-wrap, footer, [role="tablist"], .modalItem-trigger, .tog-control .state, .togSubNav, .tog-all-expand, .tog-all-collapse { display: none!important; }

	/* home */
	.hero { padding: 0; background: none; }
	.hero .lead { margin: 1rem 0; padding: 0; outline: none; width: 100%; }
	.hero .lead:after, .hero .lead:before { display: none; }

	.cardWrap [class*="card-"] { width: 100%; }
	.card-dark > .card-content, .card-white { padding: 0; }
	.home .card-dark > .card-content img { display: none; }
	.card-accent { border-left: none!important; padding: 0; }

	[class*="icon-header-"] { padding-left: 0!important; margin: 0!important; }

	.flickity-viewport { height: auto!important; }
	.flickity-slider { position: relative!important; }
	.carousel-cell { position: relative!important; left: auto!important; margin-bottom: .5rem; }

	.general .flickity-enabled { padding: 0!important; }
	.general .carousel-cell { width: 100%!important; padding: 0!important; }

	.home-accents .card-content img, .flickity-button, .flickity-page-dots, *:before { display: none!important; }

	/* branches */
	.branch-pad { padding-top: 1rem; }
	.card-image { display: none; }

	.cycle, .btn-branch img, .btn-branch + hr, .modern { display: none!important; }
	.cycleWrap .offset-lg-6.ps-5 { padding-left: 0!important; }
	.btn-branch { margin-bottom: .5rem!important; padding-left: 1rem!important; }
	.col-lg-6.ps-lg-5 { padding-left: 0!important; }

	/* about */
	.organizational-chart { padding: 0 3rem!important; }
	.organizational-chart *::after, .staff-filters, .keyword { display: none!important; }
	ol.organizational-chart ol > li, ol.organizational-chart ol { padding-top: .25rem!important; }
	.organizational-chart h3, .organizational-chart h4 { margin-bottom: 0!important; }
	.feature-staff .staff-details, ol.organizational-chart a.oad span { padding-left: 0!important; }
	.card-staff { padding: 0; position: relative!important; top: auto!important; left: auto!important; }
	a.oad, a.branch { padding: .25rem .5rem!important; }

	/* news */
	.newsBranding, .newsBanner { display: none!important; }

	/* research resources */
	.card-head img { display: none!important; }

	/* events */
	.webinar { display: block; }
	.web-date { min-width: auto!important; text-align: left; border-top: none!important; top: auto; }
	.web-date * { display: inline-block; }
	.web-date abbr { text-transform: none; }
	.web-date strong { font-size: 1.1rem; font-weight: lighter; }
	.webinar .tog-content { padding-left: 0; }
	.webinar .tog-control, .modalItem { display: none; }
}	
/* ==================================================
	NCI Govt Header
================================================== */
section#usa-banner {margin-bottom: 0; background: #f0f0f0;}
.usa-banner__header-text {font-size: 12px; font-weight: 400; line-height: 1.2; margin: 0;}
.usa-banner__header-text img {vertical-align: baseline;}

/* translate logo */
.translate-logo {
	transform: translateY(80px);
}
.logo-background {
	background-color: #fff;
}


/* ==================================================
	DCCPS Design Changes
================================================== */
.btn-info {
background-color: #2F70A8;
}

.btn-info:hover, .btn-info:focus {
    background-color: #183a57 !important; 
    border-color: transparent !important;
	color:#fff;
}

.icon-recolor {
	filter: hue-rotate(324.1deg) brightness(1.5);
}

ol.organizational-chart > li > ol > li > div { box-shadow: 0 3px 3px rgba(0,0,0,0.18); background: #f2f2f2; border: 1px solid #e8e8e8;

}

ol.organizational-chart a.oad { box-shadow: 0 3px 3px rgba(0,0,0,0.18); background: #f2f2f2; border: 1px solid #e8e8e8; }

/* .icon-border { border: 5px solid #cde1ff;}

.card-icon > img { position: absolute; top: 1rem; left: -50px; width: 100px; height: 100px; border-radius: 50%; filter: grayscale(1) brightness(.85) contrast(1.2) drop-shadow(2px 3px 4px rgb(20, 49, 92, .75));} */


/* backgrounds (https://www.svgbackgrounds.com/) */
/* Rainbow Vortex = EDD8EE, CBEEFF, CCBACD */
/* .bg-lightprimary {background-color: #dae2ef;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23CDE1FF' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23F8F8F8' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23f8f8f8' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f7f7f7' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23f7f7f7' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23f7f7f7' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23f6f6f6' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23f6f6f6' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23f6f6f6' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23f5f5f5' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23f5f5f5' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23f4f4f4' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23f4f4f4' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%23f4f4f4' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%23f3f3f3' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23f3f3f3' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23f3f3f3' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%23f2f2f2' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23F2F2F2' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	background-size: cover; } */
	
	/* .bg-purple { background: #683793; } */
	.bg-resources { background: #f2f2f2; }
	@media (min-width: 1024px) {
		.bg-resources { background: #fff url("../i/bg-resources-new-gray.jpg") center no-repeat; background-size: cover;}
	}

	.newsBranding { padding: 1rem 10rem 1rem 4%; background: #1F496F url("../i/logo-dccps.png") right 4% top no-repeat; color: #fff; display: block; border-radius: 6px 6px 0 0; font-weight: 800; line-height: 1.2; }
.newsBanner { margin: 0 0 2rem 0; color: #fff; font-weight: normal; text-shadow: 1px 1px 2px #000f11; background: #31366b url("/i/newsletter-banner.png") right center no-repeat; font-size: 2.375rem; padding: 4% 0 4% 4%; border-radius: 0 0 6px 6px; }
.newsSubHead { color: #2F70A8 ; font-size: 1.5rem; }
@media screen and (max-width: 61.99em) { .newsBanner { font-size: 30px; padding: 3% 0 3% 3%; } .newsBranding { padding: 1rem 10rem 1rem 3%; font-weight: normal; } }
@media screen and (max-width: 47.99em) { .newsBanner { font-size: 26px; background-position: 130% center; background-size: cover; } }
@media screen and (max-width: 34.99em) { .newsBanner { font-size: 20px; padding-right: 15%; } }

.newsTitle { background: #1F496F url("../i/news-title-bg.png") right center no-repeat; color: #fff; padding: .5rem 1rem; margin: 0; font-weight: normal; border-radius: 3px 3px 0 0; font-size: 1.25rem; }
@media (max-width: 767px) {
	.newsTitle { background-position: left 75% center; }
}

/* ======================================================
	Dietary Assessment Primer Glossary and Popover Styles
========================================================= */
.glossary_link {
  text-decoration: underline dashed 1px;
}
.popover-header .closePOButton {
  position: absolute;
  right: 4px;
  top: 4px;
  cursor: pointer;
  border: 1px dotted;
}

/* "GLOSSARY:  visually hidden" -- use to hide content from sighted users but keep it accessible to users of screenreaders or other accessibility technology */
.vis-hid { 
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}