/*****Theme colors****

GRAYS: 
 Main Menu: #3d4551 (ribbon) // #565c65 (nav) // #71767a (nav active link)
 Cards: #dfe1e2 (card footer) // #f0f0f0 (card gray)
PRIMARY BLUE: #00314b & rgb(0,49,75) (Primary blue) // #004971 (Primary med blue) // #0073B0 (links)
FANCONI BLUE: #004971 (Fanconi dk blue) // #d4e7f2 (Fanconi lt blue; used for prioritized cta buttons)
IBMFS TEAL: #1e4c4f (IBMFS dk teal) // #dbf2f3 (IBMFS lt teal; would be used for prioritized cta buttons)

/* ==================================================
	NCI Fonts: Open Sans and Poppins
================================================== */
/* open-sans-regular - 400 */
@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../f/open-sans-v36-latin-regular.woff2') format('woff2'); }
/* open-sans-600 - semibold */
@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../f/open-sans-v36-latin-600.woff2') format('woff2'); }
/* open-sans-700 - bold */
@font-face { font-display: swap; font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../f/open-sans-v36-latin-700.woff2') format('woff2'); }
/* poppins-300 - light */
@font-face {font-display: swap;  font-family: 'Poppins'; font-style: normal; font-weight: 300; src: url('../f/poppins-v21-latin-300.woff2') format('woff2');}
/* poppins-regular - 400 */
@font-face {font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../f/poppins-v21-latin-regular.woff2') format('woff2');}
/* poppins-500 - semibold */
@font-face {font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('../f/poppins-v21-latin-500.woff2') format('woff2');}
/* poppins-600 - semibold */
@font-face {font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('../f/poppins-v21-latin-600.woff2') format('woff2');}

/* ===================================================
	Bootstrap Overwrites/Additions/Fixes
================================================== */
[role="main"] a { text-decoration: none; }
a.btn { text-decoration: none!important; }
.container { width: 98%; max-width: 1300px; }
/* 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: #000; }
.close:focus { outline: 1px dotted #000; }
.close:focus, .close:hover { color: #000!important; }
/* BS removes vertical scrollbar and adds padding to account for that on modal. Stop that. */
body, .modal { padding-right: 0!important; } 
a {color: #0073B0;}
a:hover {color: #004971;}


/* ==================================================
	Structure
================================================== */
html {scroll-behavior: smooth;}
body {color: #222222; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"sans-serif"; font-size: 1rem; font-weight: 400; height: 100%;}
h1, h2, h3, h4 {font-family: "Poppins","Helvetica Neue",Helvetica,Arial,"sans-serif"; color:#3d4551; margin-bottom: 1rem; font-weight: 600;}
main h1 {font-size:2rem; padding: 0 0 0.25rem; margin-bottom: 1.85rem;}
main h2 {font-size: 1.5rem; }
main h3 {font-size: 1.2rem;}
header {margin-bottom: -3px;}
main .disorder-cards a, main .disorder-cards a:active {display: inline-block;}
main .disorder-cards a, main .disorder-cards a:active, body.fanconi main a, body.fanconi main a:active, body.ibmfs main a, body.ibmfs main a:active {text-decoration: none;}
main .disorder-cards a, main .disorder-cards a:active, main .disorder-cards a:hover {padding-bottom: 5px; position: relative; text-decoration: none; overflow: hidden; margin:0;}
:focus {outline: 1px auto rgba(0,49,75,0.75) !important;}
ul li {margin-bottom: .5rem;}
iframe {border: none;}

/***** Restructuring Grid for Side Nav *****/
.sideNav-col, .mainContent-col {position: relative; padding-right: 15px; padding-left: 15px; width: 100%;}

@media (min-width: 992px) {
  .sideNav-col {width: 300px;}
	.mainContent-col {width: calc(100% - 300px);}
}

/* ==================================================
	NCI Govt Header
================================================== */
.usa-banner {background-color: #f0f0f0; font-size: 1.01rem; line-height: 1.6;}
.usa-banner__header {font-size: .76rem; font-weight: 400; min-height: 3rem; padding-bottom: 0.5rem; padding-top: 0.5rem; position: relative;}
.usa-banner__content, .usa-banner__header {color: #1b1b1b;}
.usa-banner--nci-banner .usa-banner__header {margin: 0 auto; max-width: 1300px; padding: 0.5rem 1rem;}
.usa-banner__inner {align-items: flex-start; display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 1300px; padding: 0 0 1rem 0;}
.usa-banner--nci-banner .usa-banner__header .usa-banner__inner {align-items: center; display: flex; justify-content: space-between; min-height: 1.89rem; padding: 0;}
.usa-banner__header-text {font-size: .76rem; line-height: 1.2; margin-bottom: 0; margin-top: 0;}
.usa-banner--nci-banner .usa-banner__header .usa-banner__inner .usa-banner__header-text, .usa-banner--nci-banner .usa-banner__header .usa-banner__inner .usa-banner__header-text:before {display: flex; margin-right: 0.75rem;}
.usa-banner--nci-banner .usa-banner__header .usa-banner__inner .usa-banner__header-text:before {content: url("/i/usa-banner-flag-icon.png"); display: block;}
.usa-site-alert {font-size: 16px;}
.usa-alert__heading {font-size: .76rem;}

@media (min-width: 64em) {
	.usa-banner--nci-banner .usa-banner__header, .usa-banner__inner {padding-left: 2rem; padding-right: 2rem;}
}
@media (min-width: 40em) {
	.usa-banner {font-size: .82rem; padding-bottom: 0;}
	.usa-banner__header {min-height: 0; padding-bottom: 0.25rem; padding-top: 0.25rem;}
	.usa-banner__inner {align-items: center;}	
}
@media (min-width: 20em) {
	.usa-banner--nci-banner .usa-banner__header .usa-banner__inner {flex-flow: row;}	
}
/* ==================================================
	NCI Header
================================================== */
.navbar-nci .navbar-nav .dropdown-menu {border: 1px solid #bbb; padding: 5px 0; background: #fff; border-radius: 5px !important; box-shadow: 0 5px 9px rgba(0, 0, 0, .2);}
.navbar-nci .navbar-nav .dropdown-item {color: #222; border-top: 1px solid rgba(0,0,0,.05);}
.navbar-nci .navbar-nav .nav-item {margin-bottom: 0;}
.navbar-nci .navbar-nav .nav-link.dropdown-toggle, .navbar-nci .navbar-nav .dropdown-item  {white-space: normal;}

@media (min-width: 992px) {
	.navbar-nci .navbar-nav a {font-family: "Poppins", Verdana, serif; font-weight: 400!important;}
	.navbar-nci .navbar-nav .dropdown-menu {margin-top: 0px!important; border-top: none!important; border-radius: 0px!important; min-width: 20em!important; max-width: 25em!important;}
	.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 {border-bottom: 4px solid transparent;}
	.navbar-nci .navbar-nav .nav-link {background: transparent; color: #fff;}
	.navbar-nci .navbar-nav .dropdown-item:active, .navbar-nci .navbar-nav .dropdown-item:focus, .navbar-nci .navbar-nav .dropdown-item:hover {background: #eee;}.navbar-nci .navbar-nav .nav-link:hover, .navbar-nci .navbar-nav .nav-link:focus, .navbar-nci .navbar-nav .nav-item.is-hover > a {background: #71767a; color: #fff;}
	.navbar-nci .navbar-nav .dropdown-toggle::after, .navbar-nci .navbar-nav .dropdown-toggle:hover::after, .navbar-nci .navbar-nav .dropdown-toggle:focus::after, .navbar-nci .navbar-nav .dropdown-toggle[aria-expanded="true"]:hover::after {content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="%23fff"%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3Cpath d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/%3E%3C/svg%3E')}
	
	/* Active items main nav */
	.home .nav-item.home > a.nav-link, .disorders .nav-item.disorders > a.nav-link, .fanconi .nav-item.fa > a.nav-link, .ibmfs .nav-item.ibmfs > a.nav-link, .contact .nav-item.contact > a.nav-link {background: #71767a;}
}


@media (max-width: 991px) {
	.navbar-nci .navbar-nav .nav-link.dropdown-toggle span {display: inline-block; padding-inline-end: 1rem;}
	.navbar-nci .navbar-nav .dropdown-item.active, .navbar-nci .navbar-nav .dropdown-item:active, .navbar-nci .navbar-nav .dropdown-item:focus, .navbar-nci .navbar-nav .dropdown-item:hover {background-color: #f9f9f7;}
}

/* ==================================================
	Side Navigation
================================================== */
.subNav li { position: relative; border-top: 1px solid #dfe1e2; margin-bottom: 0!important; padding: .25rem 0;}
.subNav li:last-child {border-bottom: 1px solid #dfe1e2;}
.subNav li a { background: #fff; border-left: 5px solid transparent; display: block; padding: 10px 35px 10px 10px; line-height: 1.2; transition: all .1s linear; font-size: 1.2rem; color: #3d4551; font-weight: 400; }
.subNav li a:hover, .subNav li a:focus, .subNav li.is-hover > a, .subNav li a.active { border-left: 5px solid #00314b; background: #f0f0f0; color: #3d4551; text-decoration: none; transition: color .1s linear, background .1s linear, border .1s linear; }
.subNav li a.active { background: #f0f0f0; color: #3d4551; }
.subNav ul { list-style: none; margin: 0; padding: 0; }
.subNav ul ul { display: none; }
.subNav ul ul li a { padding-left: 1.5rem; }
.subNav ul ul ul li a { padding-left: 2rem; }
.subNav ul ul ul ul li a {	padding-left: 2.5rem; }
.subNav ul ul ul ul ul li a { padding-left: 3rem; }
.subNav a { padding-right: 2rem; }
.subNav .heading {display: block; margin-bottom: 0; padding: .5rem 1rem; background: #00314b; font-weight: 700;}
.subNav .heading a {color: #fff; font-size: 1.2rem; font-weight: 400; text-decoration: none;}
.subNav .heading a:hover, .subNav .heading a:focus {text-decoration: underline;}
.subNav li a.active::after {background-color: transparent;}
/* toggle button to show side nav on mobile */
.togSubNav {background: #004971; }
.togSubNav svg { fill: #fff; height: 20px; width: 26px; margin-right: .3rem; }
	.togSubNav:hover, .togSubNav:focus { cursor: pointer; background: #004971; }
.togSubNav:focus {outline: 2px solid #000!important; border: 2px solid #fff; background: #007bbd;}
@media (max-width: 61.99em) {
	/* 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; }
}

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

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

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

/* ==================================================
	HERO SECTIONS
================================================== */
.hero {background: #00314b; width: 100%; min-height: 350px; overflow: hidden; position: relative; display: flex; align-items: center;}
.hero .lead {font-size: 1.125rem;}
.overlay-left {max-width:30%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 1; width: 100%;}
.overlay-left::after {display: block; content: ''; height: 100%; position: absolute; top: 0; right: 0; width: 500px; transform: scaleX(-1); background: transparent;;}
.hero-content {position: relative; z-index: 10;}
.hero-content * {color: #fff;}
.hero-image {height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 1; width: 100%; background-size: cover; background-repeat: no-repeat;}
.hero-image::before {display: block; content: ''; width: 55%; height: 100%; background-image: linear-gradient(to right, rgba(0,49,75,1) 25%, rgba(0,49,75,0) 100%); position: relative; top: 0; bottom: 0; left: 0; right: 0;}
.hero h1 {padding-bottom: 0; color: #fff;}

.home .overlay-left {max-width:40%;}

.contact .hero-image {background-image: url('/i/contact-hero.jpg'); background-position: center top;}
.fanconi .hero-image {background-image: url('/i/fa-hero.jpg'); background-position: right bottom;}
.home .hero-image {background-image: url('/i/home-hero.jpg'); background-position: right bottom;}
.ibmfs .hero-image {background-image: url('/i/ibmfs-hero.jpg'); background-position: center;}

@media (min-width: 768px) {
	.contact .hero-image {background-image: url('/i/contact-hero-sm.jpg'); background-position: left center;}
	.fanconi .hero-image {background-image: url('/i/fa-hero-sm.jpg'); background-position: 50% bottom;}
	.home .hero-image {max-width: 60%; background-image: url('/i/home-hero-sm.jpg'); background-position: right bottom;}
	.home .hero {min-height: 400px;}
	.ibmfs .hero-image {background-image: url('/i/ibmfs-hero-sm.jpg'); background-position: 45% bottom;}
}
@media (min-width: 992px) {
	.hero-image {max-width: 70%;}
	.hero .lead {font-size: 1.25rem;}
	.contact .hero-image {background-image: url('/i/contact-hero-md.jpg'); background-position: left bottom;}
	.fanconi .hero-image {background-image: url('/i/fa-hero-md.jpg'); background-position: 80% bottom;}
	.home .hero-image {background-image: url('/i/home-hero-md.jpg'); background-position: right center;}
	.ibmfs .hero-image {background-image: url('/i/ibmfs-hero-md.jpg'); background-position: center bottom;}
}
@media (min-width: 1200px) {
	.contact .hero-image {background-image: url('/i/contact-hero-lg.jpg'); background-position: left top;}
	.fanconi .hero-image {background-image: url('/i/fa-hero-lg.jpg'); background-position: 80% bottom;}
	.home .hero-image {background-image: url('/i/home-hero-lg.jpg'); background-position: center;}
	.ibmfs .hero-image {background-image: url('/i/ibmfs-hero-lg.jpg'); background-position: right center;}
}
@media (max-width: 767px) {
	.hero {padding: 2rem 0 0; display: block; min-height: 300px;}
	.home .hero {padding-bottom: 0;}
	.contact .hero h1, .fanconi .hero h1, .ibmfs .hero h1 {margin-bottom: 0;}
	.fanconi .hero h1 {font-size: 1.75rem; padding-bottom: 1.75rem;}
	.hero .hero-image {max-width: 100%; width: 100%; height: 100%; overflow: hidden; position: relative; top: 35px; right: 0; z-index: 1; display: block;}
	.home .hero .hero-image {top: 0;}
	.hero .hero-image::before {content: ''; position: relative; top: 0; left: 0; width: 100%; height: 200px; display: block; transform: scaleY(-1); background: linear-gradient(to bottom,transparent 0%,rgba(0,49,75,0.028) 11.9%,rgba(0,49,75,0.104) 22.5%,rgba(0,49,75,0.216) 32.2%,rgba(0,49,75,0.352) 41.2%,rgba(0,49,75,0.5) 50%,rgba(0,49,75,0.648) 58.8%,rgba(0,49,75,0.784) 67.8%,rgba(0,49,75,0.896) 77.5%,rgba(0,49,75,0.972) 85.1%,#00314b 90%);}
	.hero .overlay-left {z-index: -1;}
	.contact .hero .hero-image, .ibmfs .hero .hero-image {top: 2rem; /*background-position: center;*/}
	.fanconi .hero .hero-image {top: 0; background-position: center;}
	.contact .hero .hero-image::before, .ibmfs .hero .hero-image::before {top: -60px; transform: scaleY(-0.5);}
	.fanconi .hero .hero-image::before {top: -25px; height: 275px;}
	/*.fanconi .hero-image {background-image: url('/i/fa-hero.jpg'); background-position: center bottom;}*/
	/*.home .hero .hero-image::before {height: 275px;}*/
}
@media (min-width: 768px) and (max-width: 991px){
	.home .hero {padding: 3rem 0; display: block;}
	.home .hero .hero-image::before {width: 85%; /*height: 250px;*/}
	.fanconi .hero-image::before {width: 60%; background-image: linear-gradient(to right, rgba(0,49,75,1) 75%, rgba(0,49,75,0) 100%);}
	.ibmfs .hero-image, .contact .hero-image {width: 80%;}
}
@media (min-width: 768px) and (max-width: 800px) {
	.contact .hero-image {background-image: url('/i/contact-hero-sm.jpg'); background-position: 25% center;}
}
@media (min-width: 576px) and (max-width: 767px) {
	.home .hero-image {background-position: right center;}
	.ibmfs .hero-image {background-position: right 30%;}
}

/* ==================================================
	Buttons
================================================== */
.btn-fa, .btn-ibmfs {display: inline-block!important;}
.btn-fa {background: #fff; border: 1px solid #004971; color: #004971;}
.btn-fa.btn-join, .btn-fa.btn-join:active, .btn-fa.btn-join:focus, .btn-fa.btn-join:hover {color: #004971; background: #d4e7f2;}
.btn-ibmfs{background: #fff; border: 1px solid #1e4c4f; color: #1e4c4f;}
.btn-ibmfs.btn-join {color: #1e4c4f; background: #dbf2f3;}
.btn-fa:active, .btn-fa:focus, .btn-fa:hover, .btn-ibmfs:active, .btn-ibmfs:focus, .btn-ibmfs:hover {transform: scale(1.03, 1.03); background-color: #fff;}
.btn-fa:active, .btn-fa:focus, .btn-fa:hover {border: 1px solid #004971;}
.btn-ibmfs:active, .btn-ibmfs:focus, .btn-ibmfs:hover {border: 1px solid #1e4c4f; color: #1e4c4f;}

/* ==================================================
	Cards
================================================== */
body:not(.home).card:hover {transform: scale(1.03, 1.03);}
.home .card {margin-bottom: 1.5rem; height: calc(100% - 1.5rem);}
.card-fanconi, .card-ibmfs {border: none; border-radius: 0.35rem;}
.card-fanconi .card-head, .card-ibmfs .card-head {border-radius: 0.35rem;}
.card-fanconi .card-head, .card-ibmfs .card-head, .card-fanconi .card-body, .card-ibmfs .card-body {padding: 1rem; text-align: left; color: #fff;}
.card-fanconi .card-head h3, .card-ibmfs .card-head h3 {padding-bottom:1rem; border-bottom: 1px solid rgba(255,255,255,0.25); color: #fff;}
.card-fanconi .card-foot, .card-ibmfs .card-foot {background-color: #dfe1e2; padding: 1rem; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;}
.card-fanconi .card-head, .card-fanconi .card-body, .card-fanconi .card-foot, .card-ibmfs .card-head, .card-ibmfs .card-body, .card-foot {border:1px solid rgba(0,0,0,0.5);}
.card-fanconi .card-head, .card-ibmfs .card-head {border-bottom: none;}
.card-fanconi .card-body, .card-ibmfs .card-body {border-top: none; border-bottom: none;}
.card-fanconi .card-foot, .card-ibmfs .card-foot {border-top: none; padding-bottom: 0;}
.card-fanconi .card-foot a.btn, .card-ibmfs .card-foot a.btn {width: 46.5%; margin-bottom: 1rem;}
.card-fanconi .card-foot a.btn:first-child, .card-ibmfs .card-foot a.btn:first-child {margin-right: 1rem;}
.card-fanconi a:hover, .card-fanconi a:active, .card-fanconi a:focus, .card-ibmfs a:hover, .card-ibmfs a:active, .card-ibmfs a:focus {text-decoration: none;}
.card-fanconi {background-color: #004971;}
.card-ibmfs {background-color: #1e4c4f;}
.card-news {background-color: #f7f7f7; flex-direction: row; padding: 1rem;}
.card-news .image img {margin-left: auto; align-self: flex-end; height: 150px; transform: translateY(1rem);}
.card-news .card-head, .card-news .card-foot, .card-news .main-content, .card-news .image {padding: 0;}
.card-news .card-body {padding: 0 0 0 1rem;}
.card-news .main-content .card-content {margin-bottom: 2rem;}
.card-news .main-content .card-content:last-child {margin-bottom: 0;}
.card-news h2 {margin-bottom: 0.25rem;}
.card-news h3 {margin-bottom: 0.5rem;}
.card-news .docinfo {position: relative; bottom: 0; display: inline;}
.disorder-cards .card {background: #f0f0f0; border: none; margin-bottom: 1.5rem; height: calc(100% - 1.5rem);}
.disorder-cards a::before {content: ''; position: absolute; height: 5px; width: 50px; background: #006297; bottom:0; left: 0; transition: background 0.5s ease, width 0.5s ease;}
.disorder-cards a:hover::before {background: #004971; width: 100%;}
.disorder-cards .card-head {display: flex;}
.disorder-cards .card-head img {flex: 1; width: 100%;}
.card-join, .card-nav {border-top: none; border-bottom: none; border-right: none;}
.card-join .card-body, .card-nav .card-body {padding: 0.5rem 1rem;}
.card-join ul, .card-join ul li:last-child, .card-nav ul, .card-nav ul li:last-child  {margin-bottom: 0;}
.card-join h2, .card-nav h2 {padding: 0 1rem; margin-bottom: 0; position: relative; font-size: 1.25rem;}
.card-join h2.h3, .card-nav h2.h3 {font-size: 1.2rem;}
.card-join h2 span {display: inline-block; background: #fff; padding: 0 0.5rem; position: relative;z-index:1;}
.card-join h2::before {content: ''; display: block; height: 7px; width: 16px; position: absolute; left: -3px; top: 17px; transform: skewX(45deg); background: #004971; opacity: 0.75; z-index:-1;}
.card-join h2::after {content: ''; display: block; height: 8px; width: 100%; position: absolute; left: -7px; top: 9px; background: #004971;}
.card-join .card-head {position: relative;}
body.ibmfs .card-join h2::before, body.ibmfs .card-join h2::after, .card-join.card-resources h2::before, .card-join.card-resources h2::after {background: #1e4c4f;}
.highlight-wrap {flex-direction: column; margin-bottom: 3rem;}
.card-accent {background: #f0f0f0; border: 0; margin-top: 2rem; border-radius: 0;}
.card-accent .card-head {transform: translate(1rem, -0.75rem);}
.card-accent .card-head h2 {width: auto; padding: 0.25rem 1rem 0.5rem; margin-bottom: 0; display: inline-block; background: #004971; font-size: 1.25rem; color: #fff; font-weight: 400;}
	body.fanconi .card-accent .card-head h2 {background: #004971;}
	body.ibmfs .card-accent .card-head h2 {background: #1e4c4f;} 
.card-accent .card-body {padding-top: 0;}
.card-accent .card-body>*:last-child {margin-bottom: 0; padding-bottom: 0;}
.card-accent .lead {font-weight: 400;}
.card-accent .pullout-quote {background: #fff; padding: 1.25rem!important; border: 1px solid #004971; border-left-width: 5px; border-radius: 0.5rem;}
.callout-nav {padding-right: 0; float: right; margin: 1.5rem 0; display: flex; flex-direction: column;}

.news-img {background-image: url("../i/news-reading.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; background-clip: content-box;}
.news-img p {text-wrap: pretty;}

@media (min-width:576px) and (max-width: 768px) {
	.card-news .docinfo {position: relative; top: 3px; display: block;}
}
@media (min-width: 769px) and (max-width: 992px) {
	.card-news {padding-bottom: 0;}
	.card-news .card-body {padding-bottom: 0;}
	.card-news .image img {transform: translateY(0);}
	.highlight-wrap[class*="offset"] {display: flex;}
}
@media (min-width: 769px) and (max-width: 877px) {
	.card-news {padding-bottom: 1rem;}
}
@media (max-width: 400px) {
	.card-news .docinfo {position: relative; top: 3px; display: block;}
	.card-fanconi .card-foot a.btn, .card-ibmfs .card-foot a.btn {width: 100%;}
}
@media (min-width: 768px) {
	.highlight-wrap {float: none; flex-direction: row;}
	.highlight-wrap:not(.offset-lg-1) {margin:0;}
}
@media (min-width: 992px) {
	.highlight-wrap {padding-right: 0; }
	.highlight-wrap:not(.offset-lg-1) {flex-direction: column;  float: right; padding-right: 0; margin: 0 0 1.5rem 1.5rem;}
}
@media (min-width: 992px) and (max-width: 1014px) {
	.force-padding {width: 100%; margin: 0 0 1.5rem 1.5rem; float: right;}
}
/* ==================================================
	Lists
================================================== */
.styled-list {background: #f0f0f0; border-radius: 0.25rem; overflow: hidden; border: 1px solid #dfe1e2; margin-bottom: 1rem;}
	.card-accent .styled-list {background: #fff; margin-bottom: 0;}
.styled-list p {background: #004971; padding: 0.75rem 1rem; margin-bottom: 0; color: #fff; font-size: 1.15rem;}
	body.ibmfs .styled-list p {background: #1e4c4f;}
.styled-list ul {padding-left: 0; margin-bottom: 0.5rem;}
	.card-accent .styled-list ul {margin-bottom: 1rem;}
.styled-list li {display: flex; align-items: center; padding: 0.5rem 1rem; margin-bottom: 0; border-bottom: 1px solid #dfe1e2; position: relative;}
.styled-list li svg {margin-right: 0.5rem; flex: 0 0 20px; max-width: 20px;}
.styled-list li:last-child {border-bottom: 0; padding-bottom: 0;}
.callout-nav ul {padding-left: 1.25rem;}
.resource-list li {margin-right: 55px;}
.resource-list li a:not(.extlink) {padding: 1rem 0;}
ul.circle {list-style-type: circle;}

@media screen and (min-width: 599px) {
	.resource-list li {margin-right: 0;}
}
@media screen and (min-width: 992px) {
	body.fanconi .styled-list li {align-items: flex-start;}
	body.fanconi .styled-list li svg {margin-top: 5px;}
}

/* ==================================================
	Misc
================================================== */
html { overflow-y: scroll; scroll-behavior: smooth; } /* Force scrollbar on right side to avoid viewport width change on short pages */
img, object, embed, video { max-width: 100%; height: auto; width: auto; } /* responsive media */
.extlink { display: inline-block; margin: -8px 0 0 3px; vertical-align: middle; position: relative; }
.extlink::before {content: ''; display: block; height: 10px; width: 10px; padding: 24px; position: absolute; top: -10px; left: 0;}
.extlink img {position: relative; left: 5px; top: 1px;}
/* NCI has STRICT requirements for the logo. Do not edit this CSS. Contact Stephanie Schmitt or Brian Downey for help. */
.nciLogo svg { max-height: 54px; max-width: 561px; margin: 23px 0; width: 100%; }
.pagePhoto {float: right; margin: 0 0 15px 15px; width: 35%; border: 1px solid #dfe1e2;}

/* Study Team Group Photo & Caption */
.photoBorder {border: 1px solid #dfe1e2;}
.photoCaption {font-size: .75em; margin: 0 0px -1em 15px;}

.researchPage .date {font-size: .9rem; display: block; text-align: right;}
.researchPage h2 {padding-top: 1.875rem;}
.studyteamContainer img {border: 4px solid #fff; box-shadow: 0 0 8px rgba(0,0,0,.3); max-height: 120px; width: auto; height: auto; margin: 0 auto 0.5rem;}
.mediaWrap {border: 1px solid #dfe1e2;}
.videoContainer {width: 100%; max-width:320px; padding-top: 56.25%; position: relative;}
.videoContainer iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.mediaWrap p {font-weight:700; font-size:.7rem; text-align: center; padding: 0.5rem; margin-bottom: 0;}

.docinfo {font-size: 0.8rem;}

/* ==================================================
	Header Search
================================================== */
#tstone-search .gmsl {padding-bottom: 0.5rem;}
#tstone-search input, #tstone-search .sort-by {height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);}
#tstone-search input[type="submit"], #tstone-search input#refine {color: #1b1b1b; box-shadow: none; background: #fafafa;}
#tstone-search input#refine {height: auto;}
#tstone-search .sort-by {color: #1b1b1b; background: #fafafa; border: 1px solid #ced4da; box-shadow: none;}
#tstone-search .tstonePagination {font-size: 1rem; font-weight: 400;}

/* ==================================================
	Site Ribbon
================================================== */
.ribbon  { background: #3d4551; padding:.5rem 0; line-height: 1.25;}
.ribbon a {text-decoration: none;}
.ribbon a:hover, .ribbon a:active, .ribbon a:focus {text-decoration: underline;}
.ribbon a, .ribbon a:hover, .ribbon a:active, .ribbon a:focus {color: #fff; font-size: 1.5rem;}

/* ==================================================
	Mobile Navigtaion
================================================== */
.navBar { position: relative; background: #565c65; top:-3px;}
#menu-button, #search-tog { display: none; }
#search-tog { position: absolute; right: 0; top: 0; margin-right: 1.275rem; }
.mobileState { display: block; }

@media (max-width: 991px) {
  	#logo {display: none;}
	.navBar { padding: .75rem 0; }
	/* only show the toggle and hide the menu if JS is enabled */
	#menu-button { display: block; width: 100%; background-color: var(--nci-primary); }
	#menu-button:active, #menu-button:focus, #menu-button:hover {background-color: var(--nci-primary-dark);}
	#menu-button[aria-expanded="true"] svg, #search-tog[aria-expanded="true"] svg {fill: #fff;}
	#search-tog { top: .75rem; }
	.mobileState { margin-top: 0; }	
}
@media (max-width: 375px) {
	#menu-button, #search-tog { width: 100%; }
	#search-tog {position: relative; top: 0.5rem; margin-bottom: 0.5rem;}
}

/* ==================================================
	Toggles
================================================== */
.tog-control { padding: 0; margin: 0 0 15px 0; }
.tog-control button { display: table; border: none; font-size: 1rem; margin: .5rem 0 0 0; padding: 3px 0; border-radius: 4px; font-weight: 600; text-align: left; background: #ffffff; color: #565c65; }
.tog-control button:hover { cursor: pointer; transition: all .2s ease-in-out; }
	.disorders .tog-control button {font-size: 1.2rem; padding: 2px;}
.tog-control .tog-title { display: table-cell; vertical-align: middle; padding: 0 .75rem; }
.tog-content { background: #fff; border: none; border-left: 1px solid #dfe1e2; padding: .5rem 1rem; margin: .25rem 0 1rem 2.2rem; box-shadow: inset .25rem .25rem 0 #fff, inset -.25rem -.25rem 0 #fff; border-left-color: rgba(18,78,112,0.75);}
.tog-content > :last-child { padding-bottom: 0; margin-bottom: 0; }
.tog-title p {margin-bottom: 0; padding: 3px 0 0 5px;}
.tog-title a {padding: 3px 5px;}
.state { display: table-cell; padding: 3px 0 0 5px; background: transparent; border-radius: 0; width: unset;}
	.studyteam .tog-control .state {padding: 4px 0 4px 4px;}
.disorders .state {padding: 3px 0 5px 5px;}
.state svg { padding: 4px; border-radius: 3px; height: 22px; width: 22px;background: #00314b; }
.state svg rect { fill: #fff; }
.tog-control button[aria-expanded="true"], .tog-control button:hover {background: #00314b;}
.tog-control button[aria-expanded="true"] .date {color: #fff;}
.tog-control button[aria-expanded="true"] .vert { display: none; }

.studyteam .tog-control, .studyteam .tog-control .tog-title, .studyteam .tog-content {font-size: .75em;}

/* fixed issue of width being smaller for pubs that were shorter than a line long */
.researchPage .tog-control button {width:100%;}
.researchPage .tog-control .tog-title {width:100%;}
.researchPage .tog-title .col-2 {padding-right: 5px;}

/* ==================================================
	Forms
================================================== */
.formGroup {margin-bottom: 1rem;}
#contactForm .formGroup label {font-weight: 600;}
.form-check-input {margin-top: 0.4rem;}
form strong {font-weight: 600;}

/* ==================================================
	Modal Window
================================================== */
.modalItem { display: inline-block; }
.modal-header {background: #00314b; color: #fff; padding-bottom: 1rem;}
.modal-header a {color: #fff; text-decoration: none;}
.close { opacity: 1; text-shadow: none; color: #fff; }
.close:focus { outline: 1px dotted #fff; }
.close:focus, .close:hover { color: #fff!important; }

/* 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; }

/* 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 #dfe1e2; background: #f2f2f2; }
.modalItem-title { font-size: 1.25rem; font-weight: bold; border-bottom: 1px dotted #dfe1e2; margin-bottom: 1rem; }

/* ==================================================
	Content Break Points
================================================== */
@media screen and (max-width: 991px) {
	div[class^="col-lg"] {width: 100%;}
	.mediaWrap {float: none; margin: 0 auto 1rem; max-width: 320px;}
	.videoContainer {float:none; margin: 0 auto 10px; width: 320px; height: 240px; padding-top: 0;}
	.card-accent {width: 100%;}
	.callout-nav {float: none; margin: 2rem auto 1rem;}
}
@media screen and (max-width: 565px) {
  .newsletter {float:none; margin: 0 auto 10px; display: block;}
  .pagePhoto {float:none; margin: 0 auto 10px; display:flex;}
}


/* ==================================================
	Govt Shutdown Banner/Alerts
================================================== */
@font-face{font-family:Open Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v36/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.usa-site-alert .usa-alert{color:#1b1b1b}.usa-site-alert .usa-alert .usa-alert__body{font-family:Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1.01rem;line-height:1.6;margin-left:0;margin-right:0;max-width:87.5rem;padding:1rem;position:relative}@media all and (min-width: 64em){.usa-site-alert .usa-alert .usa-alert__body{padding-left:1.8333333333rem}}.usa-site-alert .usa-alert .usa-alert__text{margin-bottom:0;margin-top:0}.usa-site-alert .usa-alert .usa-alert__text:only-child{padding-bottom:0;padding-top:0}.usa-site-alert .usa-alert>.usa-list,.usa-site-alert .usa-alert .usa-alert__body>.usa-list{padding-left:2ch}.usa-site-alert .usa-alert>.usa-list:last-child,.usa-site-alert .usa-alert .usa-alert__body>.usa-list:last-child{margin-bottom:0}.usa-site-alert--info{background-color:#d4e7f2;}.usa-site-alert--info .usa-alert .usa-alert__body{color:#1b1b1b;background-color:#d4e7f2;padding-left:2.9166666667rem}.usa-site-alert--info .usa-alert .usa-alert__body:before{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-6h2v6zm0-8h-2V7h2v2z'/%3e%3c/svg%3e") no-repeat center/contain;display:inline-block;height:2rem;width:2rem;content:"";display:block;height:4;left:.5rem;position:absolute;top:.75rem}@supports ((-webkit-mask: url()) or (mask: url())){.usa-site-alert--info .usa-alert .usa-alert__body:before{background:none;background-color:#1b1b1b;-webkit-mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-6h2v6zm0-8h-2V7h2v2z'/%3e%3c/svg%3e") no-repeat center/contain;mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-6h2v6zm0-8h-2V7h2v2z'/%3e%3c/svg%3e") no-repeat center/contain}}@media all and (min-width: 64em){.usa-site-alert--info .usa-alert .usa-alert__body:before{left:1.5rem}}@media all and (min-width: 64em){.usa-site-alert--info .usa-alert .usa-alert__body{padding-left:4rem;padding-right:4rem}}.usa-site-alert--info .usa-alert .usa-alert__body .usa-link{color:#01679d}.usa-site-alert--info .usa-alert .usa-alert__body .usa-link:visited{color:#54278f}.usa-site-alert--info .usa-alert .usa-alert__body .usa-link:hover,.usa-site-alert--info .usa-alert .usa-alert__body .usa-link:active{color:#004e7a}.usa-site-alert--emergency .usa-alert{background-color:#b60d43;border-left-color:#b60d43}.usa-site-alert--emergency .usa-alert .usa-alert__body{color:#fff;background-color:#b60d43;padding-left:2.9166666667rem}.usa-site-alert--emergency .usa-alert .usa-alert__body:before{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3e%3cpath%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20fill='%23fff'%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3e%3c/svg…") no-repeat center/contain;display:inline-block;height:2rem;width:2rem;content:"";display:block;height:4;left:.5rem;position:absolute;top:.75rem}@supports ((-webkit-mask: url()) or (mask: url())){.usa-site-alert--emergency .usa-alert .usa-alert__body:before{background:none;background-color:#fff;-webkit-mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3e%3c/svg%3e") no-repeat center/contain;mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm1%2015h-2v-2h2v2zm0-4h-2V7h2v6z'/%3e%3c/svg%3e") no-repeat center/contain}}@media all and (min-width: 64em){.usa-site-alert--emergency .usa-alert .usa-alert__body:before{left:1.5rem}}@media all and (min-width: 64em){.usa-site-alert--emergency .usa-alert .usa-alert__body{padding-left:4rem;padding-right:4rem}}.usa-site-alert--emergency .usa-alert .usa-alert__body .usa-link,.usa-site-alert--emergency .usa-alert .usa-alert__body .usa-link:visited{color:#dfe1e2}.usa-site-alert--emergency .usa-alert .usa-alert__body .usa-link:hover,.usa-site-alert--emergency .usa-alert .usa-alert__body .usa-link:active{color:#f0f0f0}.usa-site-alert--slim .usa-alert .usa-alert__body{padding-bottom:.5rem;padding-top:.5rem;padding-left:2.4166666667rem}.usa-site-alert--slim .usa-alert .usa-alert__body:before{background-size:1.5rem;height:1.5rem;top:.5rem;width:1.5rem}@supports ((-webkit-mask: url()) or (mask: url())){.usa-site-alert--slim .usa-alert .usa-alert__body:before{-webkit-mask-size:1.5rem;mask-size:1.5rem}}@media all and (min-width: 64em){.usa-site-alert--slim .usa-alert .usa-alert__body{padding-left:3.5rem}}.usa-site-alert--no-icon .usa-alert .usa-alert__body{padding-left:.5rem}.usa-site-alert--no-icon .usa-alert .usa-alert__body:before{display:none}@media all and (min-width: 64em){.usa-site-alert--no-icon .usa-alert .usa-alert__body{padding-left:1.8333333333rem}}@media all and (min-width: 64em){.usa-site-alert.shutdown .usa-alert .usa-alert__body{padding-right:2rem;padding-left:2.75rem}}@media all and (min-width: 64em){.usa-site-alert.shutdown .usa-alert .usa-alert__body:before{left:0}}.usa-site-alert.shutdown .container{background:#d4e7f2!important}