/* open-sans-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/open-sans-v40-latin-regular.8655d20bbcc8.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/open-sans-v40-latin-500.d26a2372aa87.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/open-sans-v40-latin-700.36f81686bbf9.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
body { font-family: 'Open Sans', Arial, sans-serif; color: #000; background: #eee url("../i/background.9fdd5f807338.png") no-repeat; background-size: 100%; font-weight: 400; }
.container { width: 98%; max-width: 1480px; }

.whiteWrap { padding: 1.5rem 2rem; background: #fff; }
.purpWrap { padding: .5rem .5rem; background: #5b3e57; }
.well { padding: 1rem; background: #e7efe9; margin-bottom: 1rem; }
@media (max-width: 47.99em) {
	.whiteWrap { padding: 1rem; }
}

/* Rural urban tag for the top of the table */

.title-tag {
	background: #fee5d9;
	color: #a50f15;
	border: 1px solid #eed1c2;
  }
  


/* ==================================================
	Typography
================================================== */
h1, .h1 { font-size: 26px; padding: 0; margin: 0 0 1rem 0; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; margin-bottom: .25em; }
h1, h2, h3, h4, h4, h6 { color:#000; margin-top: 0; }
@media (max-width: 47.99em) {
	h1, .h1 { font-size: 24px; }
	h2 { font-size: 22px; }
	h3 { font-size: 18px; }
	h4 { font-size: 16px; }
}

label { margin-bottom: .25rem; font-weight: bold; }
label[for] { cursor: default; }

.lead { font-size: 1.125rem; }

.h-accent { border-bottom: 1px solid #ccc; position: relative; padding-bottom: .5rem; display: block; }
.h-accent:after { position: absolute; left: 0; bottom: -3px; content: ""; width: 33%; height: 6px; background: #b9d3bf/*f5db74*/; }
/* data viz titles */
.h-accent small { font-size: 1rem; }


.btn-pulse { background: #6e4f6a; border-color: #6e4f6a; }
.btn-pulse:active, .btn-pulse:hover, .btn-pulse:focus { background: #4c3645!important; border-color: #4c3645!important; }

a { color: #07458A /*305d83*/; }
a:hover, a:focus { color: #032141; }
main a { text-decoration: underline; }
a.btn { text-decoration: none; }
.extlink { margin-left: .2em; }

/* ==================================================
	Header
================================================== */
header { background: #fff; }

/* set up general layout and spacing styles for the USA gov banner */
.usa-banner { background: #f0f0f0; }
.usa-banner__header-flag { margin: 0 8px 3px 0; }
.usa-banner__content { padding-top: 1rem; display: flex; flex-direction: column; }
.usa-banner__guidance { display: flex; }
.usa-banner__guidance:first-of-type { margin-right: 2rem; }
.usa-banner__icon { margin-right: 1rem; }
.usa-banner__text { color: #000; font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.4; margin: 0 auto; max-width: 1460px; padding: .5rem 0; width: 96%; }  

/* move focus/hover effects to the span that looks like a link */
summary { cursor: default; display: inline-block; }
summary:focus { outline: none; }
summary:focus span { outline: 2px solid #2f70a8; border-radius: 1px; }
summary span { cursor: pointer; color: #345d96; text-decoration: underline; padding: 0 3px; display: inline-block; }
summary span:hover { color: #2f4668; }

/* get rid of default list style arrow, add custom carat to the right */
details:last-of-type summary { list-style: none; }
details:last-of-type summary::after { content: "‹"; color: #345d96; font-size: 1.2rem; display: inline-block; transform: rotate(-90deg); vertical-align: middle; margin-left: -2px; }
details:last-of-type[open] summary::after { transform: rotate(-90deg); content: "›"; }    
details:last-of-type summary::-webkit-details-marker { display: none; }

@media (min-width: 768px) {
    .usa-banner__content { flex-direction: row; }
    .usa-banner__guidance { width: 28rem; }
}

.siteLogo img { max-height: 54px; max-width: 432px; margin: 23px 0; }

.socialMedia { position: relative; height: 77px; font-size: .875rem; }
.socialMedia a { text-decoration: none; background: #07458a; color: #fff; border-radius: 50%; height: 1.65rem; width: 1.65rem; text-align: center; display: inline-block; padding: 3px; }
.socialMedia a:hover, .socialMedia a:focus { text-decoration: underline; color: #fff; }
.socialMedia ul { position: absolute; bottom: 0; right: 15px; margin: 0; padding: 0; list-style: none; }
.socialMedia li { display: inline-block; margin: 0 .2em; }
@media (max-width: 47.99em) {
	.socialMedia { display: none; }
}

.ribbon-bar { background-color: #f1cc3f; background-attachment: fixed; background-size: cover; padding: 1rem 0; background-image: url("../i/ribbon_background.f8612556c692.svg"); }
.logo { display: inline-block; margin-right: .75rem; }
.ribbon-bar p { margin: 0; padding: 1rem 0 0 .75rem; display: inline-block; font-size: 1.125rem; font-weight: 500; color: #000; vertical-align: bottom; line-height: 1; border-left: 1px solid #f0c003; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.75); letter-spacing: -.02rem; }


@media (max-width: 48.99em) {
	.ribbon-bar { display: table; width: 100%; }
	.logo a { display: table-cell; padding: 0; margin-left: 0; margin-bottom: .5rem; }
	.ribbon-bar p { display: table-cell; vertical-align: middle; line-height: 1.1; padding: .5rem 0 0 0; border-left: none; box-shadow: none; }
}
@media (max-width: 34.99em) {
	.ribbon-bar p { font-size: 1em; }
}


/* ==================================================
	Main Nav
================================================== */
/* Smart Menus Overwrites */
/* mobile first */
.sm-clean { border-radius: 0; padding: 1rem 0 0 0; background: #6e4f64; display: none; }
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active { font-family: inherit; color: #fff; font-size: 0.9375rem; border-radius: 0!important; }
/* desktop */

@media (min-width: 768px) {
	.sm-clean { display: flex!important; padding: 0; }
	.sm-clean > li { text-align: center; width: 20%; }
	.sm-clean > li > a { border-right: 1px solid rgba(255,255,255,.4); }
		.sm-clean > li:first-child > a { border-left: 1px solid rgba(255,255,255,.4); }
	.sm-clean > li > a:hover, .sm-clean > li > a:focus, .sm-clean > li > a:active, .sm-clean > li > a.highlighted { background: #4c3645; }
	
	.sm-clean ul { width: 100%!important; margin-top: 0!important; border: none!important; border-radius: 0!important; }
	.sm-clean ul:before, .sm-clean ul:after { display: none; }
	.sm-clean a span.sub-arrow { border-top-color: #fff; }
	.sm-clean a:focus span.sub-arrow, .sm-clean a:hover span.sub-arrow, .sm-clean .highlighted span.sub-arrow { border-top-color: #333; }
	.sm-clean ul a { color: #5b3e57; }
	.sm-clean ul a:hover, .sm-clean ul a:focus { background: #4c3645; }
	
	.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted { background: #4c3645; }
	.sm-clean span.scroll-up:hover span.scroll-up-arrow, .sm-clean span.scroll-up:hover span.scroll-down-arrow { border-color: transparent transparent #0000EE transparent; }
	.sm-clean span.scroll-down:hover span.scroll-down-arrow { border-color: #0000EE transparent transparent transparent; }
}

/* active menu item */
.home #main-menu .home, .data #main-menu .data, .interventions #main-menu .interventions, .about #main-menu .about, .help #main-menu .help { background: #4c3645; }
@media (max-width: 47.99em) {
	.home #main-menu .home, .data #main-menu .data, .interventions #main-menu .interventions, .about #main-menu .about, .help #main-menu .help { background: #7d5e73; border-left: 1px solid #fff; }
}

/* more mobile CSS */
.navBar { position: relative; background: #6e4f64; }
#menu-button { display: none; }
.js .mobileState { display: block; }
@media (max-width: 47.99em) {
	.navBar { padding: .5em 0; margin-bottom: .5em; }
	/* only show the toggle and hide the menu if JS is enabled */
	.js #menu-button { display: block; width: 100%; text-align: left; padding: .5rem 1rem; font-size: 1.125rem; box-shadow: inset 0 -1em 10px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.45); text-shadow: 0 1px 0 rgba(0,0,0,.6); background: #3c0535; border-color: #3c0535; font-variant: all-small-caps; line-height: 1.25; }
	#menu-button:hover, #menu-button:focus, #menu-button:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
	.js .mobileState { display: none; }	
	
	.js #menu-button svg { float: right; }
	.line { fill: none; stroke: #fff; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
	.line1 { stroke-dasharray: 60 207; stroke-width: 6; }
	.line2 { stroke-dasharray: 60 60; stroke-width: 6; }
	.line3 { stroke-dasharray: 60 207; stroke-width: 6; }
	.js #menu-button[aria-expanded="true"] .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
	.js #menu-button[aria-expanded="true"] .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; }
	.js #menu-button[aria-expanded="true"] .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
}

/* Breadcrumbs */
.crumbs { padding: 1rem 0; font-weight: 500; font-size: .875rem; }
.crumbs a { text-decoration: none; }
.default .crumbs { display: none; } /* body class for loner pagers to supress crumbing */ 
@media (max-width: 47.99em) {
	.crumbs { padding-top: .75em; }
}


/* ==================================================
	Footer
================================================== */
.stayConnected h2 { margin: 0 0 0 1rem; font-size: 1.35rem; }
.stayConnected ul { list-style: none; margin: 1rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; }
.stayConnected li { flex-basis: 33%; padding: 0; margin: .75rem 0; }
.stayConnected a { color: #07458a; display: flex; align-items: center; padding-right: .5rem; }
.stayConnected li svg { align-self: flex-start; background: #53585a; border-radius: 50%; padding: .4rem; height: .975rem; width: .975rem!important; margin-right: .2rem; }
.stayConnected a:hover, .stayConnected a:focus { color: #0670c9; }
@media (max-width: 1199px) {
	.stayConnected li { flex-basis: 50%; }
}
@media (max-width: 767px) {
	.stayConnected { padding: 1rem; }
	.stayConnected li { flex-basis: 33%; }
	.connected-img { width: 50px; }
}
@media (max-width: 459px) {
	.stayConnected li { flex-basis: 50%; }
}

footer { color: #fff; font-size: .875rem; }
footer a { color: #fff; text-decoration: none; }
	footer a:hover, footer a:focus { color: #fff; text-decoration: underline; }
ul.inline-links { list-style: none; margin: 0; padding: 0; }
ul.inline-links li { margin: 0; padding: 0; display: inline-block; }

.btm-nav ul { list-style: none; margin: 0 0 0 2rem ; padding: 1rem 0; }
.btm-nav ul a { background: url("../i/footer-arrow-right.cf4a7ca097e3.png") right center no-repeat; padding-right: 1rem; }
@media (max-width: 47.99em) {
	.btm-nav ul { margin-left: 1rem; }
}

/* 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 #07458a; border-radius: 50%; margin-top: 8px; padding: 5px; height: 34px; width: 34px; }
.returntop svg path { fill: #07458a; }
.returntop:hover, .returntop:focus { background: #07458a; }
.returntop:hover svg, .returntop:focus svg { border-color: #fff; }
.returntop:hover svg path, .returntop:focus svg path { fill: #fff; }


/* ==================================================
	Toggles
================================================== */
.general-toggles { background: rgba(255,255,255,.85); font-size: 1rem; }
.general-toggles .toggleWrap { background: #e7efe9; }
.general-toggles .toggleWrap > [data-toggle="collapse"] { text-decoration: none; display: block; font-weight: 500; }

/* show icon depending on aria state of parent */
.toggleWrap [aria-expanded="true"] [class*="plus"], .toggleWrap [aria-expanded="true"] [class*="right"], .toggleWrap [aria-expanded="false"] [class*="minus"], .toggleWrap [aria-expanded="false"] [class*="down"] { display: none; }
.toggleWrap svg { margin-right: .5rem; }


/* ==================================================
	Home
================================================== */
/* Home Tiles */
.cards .whiteWrap { padding: .35rem; }
.portalCard { display: block; padding-top: 34%; text-decoration: none; }
.cardData { background: url("../i/dataportal-sm.14e0aab5913c.jpg") top center no-repeat; background-size: contain; }
.cardInter { background: url("../i/dataportal2-sm.675f01f497fb.jpg") top center no-repeat; background-size: contain; position: relative; }
/*.cardReg { background: url("../i/dataportal3-sm.a1d8ab85117a.jpg") top center no-repeat; background-size: contain; position: relative; }*/
.portalCard h2 { background: #342431; color: #fff; font-size: 1.4rem; border: none; padding: .5rem 1rem; margin: 0; letter-spacing: .05rem; }
.portalCard .content { padding: .1rem 1rem 1rem 1rem; font-size: 1rem; background: #fff; }
.portalCard .content p { margin: .5rem 0; }
.soon { position: absolute; top: 7px; left: -9px; background: #f0cb3e; padding: 7px 25px 5px; border-radius: 0 3px 3px 0; color: #4c3645; font-size: 1rem; box-shadow: 2px 2px 4px rgba(0,0,0,.3); }
.soon:after { content: ""; position: absolute; bottom: -6px; left: 3px; height: 0; width: 0; border: 6px solid transparent; border-left-color: #ddb92f; transform: rotate(-45deg); }

/* Definition Area */
.people-bg { padding: 1em; background: #e6e6ee; }
@media (min-width: 1200px) {
	.people-bg { padding-right: 35%; }
}	
@media (min-width: 768px) {
	.people-bg { padding: 1em 45% 1em 1em; background: #e9e9f1 url("../i/def-bg.1dd06b40f9bd.jpg") right top no-repeat; }
}


/* ==================================================
	Data Portal Landing
================================================== */
.topic-col { background: #f7f7f7; }
/*.topic-col .h-accent:after { background: #6e4f64; }*/

a.thumb { background: #fff; border: 6px solid #fff; display: flex; margin-bottom: 1rem; align-items: stretch; text-decoration: none; font-weight: 500; font-size: 1.125rem; }
					
a.thumb div { width: 90px; height: 45px; margin-right: 1px; filter: grayscale(100%); transition: all 0.3s ease; border: 1px solid #eee; position: relative; }
a.thumb.th-trend div { background: url("../i/thumb-trend.8107b71afb51.jpg"); background-position: center -20px; }
a.thumb.th-year div { background: url("../i/thumb-year.e5de3d268016.jpg"); background-position: -47px -36px; }
a.thumb.th-compare div { background: url("../i/thumb-compare.6a4a3f4f955f.jpg"); background-position: center -15px; } 

a.thumb span { display: flex; align-items: center; padding: 0 1rem; flex: 1 1 auto; line-height: 1.1; transition: all 0.3s ease; }
a.thumb span+span { padding: 0 .75rem; flex: 0 0 auto; border-left: 1px solid #eee; transition: all 0.3s ease; }

a.thumb:hover, a.thumb:focus { text-decoration: none; }
a.thumb:hover div, a.thumb:focus div { filter: none; transition: all 0.3s ease; }
a.thumb:hover span, a.thumb:focus span { background: #eee8ef; transition: all 0.3s ease; }
a.thumb:hover span+span, a.thumb:focus span+span { transition: all 0.3s ease; padding: 0 .55rem; border-left: 1px solid #fff; }


/* ==================================================
	Quick Profiles
================================================== */
/* Map */
.mapWrap { position: relative; }
#map svg { width: 100%!important; }

.mapWrap .legend ul { list-style: none; padding: 0; margin: 0 0 4.5rem 0; display: flex; }
.mapWrap .legend li { margin: 0; padding: 0; height: 1rem; width: 20%; position: relative; }
.mapWrap .legend li:nth-of-type(1) { background: #fee5d9; }
.mapWrap .legend li:nth-of-type(2) { background: #fcae91; }
.mapWrap .legend li:nth-of-type(3) { background: #fb6a4a; }
.mapWrap .legend li:nth-of-type(4) { background: #de2d26; }
.mapWrap .legend li:nth-of-type(5) { background: #a50f15; }
.mapWrap .legend p { position: relative; top: 115%; font-size: .875rem; line-height: 1; }
.mapWrap .legend p em { font-variant: all-small-caps; }

#clicked-state { display: none; position: absolute; top: 2.5rem; left: 50%; margin: 0 0 0 -125px; width: 250px; text-align: center; background: #fff; padding: 0 1em; color: #000; font-weight: bold; font-size: 1.25rem; border-bottom: 2px solid #b9d3bf; }
	#clicked-state:after { content: ''; height: 0; position: absolute; width: 0; border: 7px solid transparent; border-top-color: #b9d3bf; top:100%; left: 50%; margin-left: -7px; }
/* hide the error initially */
.mapWrap .alert { display: none; }

/* QP landing page styles */
.profiles .mapWrap { background: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; padding: 1em 1em 0 1em; }
.profiles #clicked-state { top: .5em; }

@media (max-width: 37.49em) {
	.statePicker select { margin-bottom: .5em; }
}


.qp-table { font-size: .875rem; margin-bottom: 3rem; }
.qp-table thead tr th:first-child { width: 35%; }
.qp-table td { vertical-align: middle; }
/* make sure the table dropdowns have enough z-index to get over the main nav @9999 */
.qp-table .dropdown-menu { font-size: .875rem; z-index: 10000; }
.qp-table .dropdown-header { color: #000; font-weight: 700; padding-top: .25rem; padding-bottom: .25rem; }
.qp-table .dropdown-item { padding-top: .2rem; padding-bottom: .2rem; }
.qp-table a { text-decoration: none; }
.qp-table.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0,0,0,.025); }
@media (max-width: 767px) {
	.qp-table tr *:nth-child(3), .qp-table .dropdown button span { display: none; }
}

/* ==================================================
	About
================================================== */
/* Pull Quote */
.pullQuote { margin: 1rem 5% 2rem; border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; padding: 1rem 0 1.5rem 0; position: relative; }
.pullQuote::before { content: "//"; background: #fff; color: #f5db74; display: inline-block; font-style: italic; font-weight: bold; font-size: 1em; height: 20px; padding: 0 0.25rem; position: absolute; bottom: -9px; width: 25px; left: 50%; margin-left: -18px; text-align: center; }
.pullQuote p { font-style: italic; margin: 0; }

hr.carat-divide { position: relative; margin-bottom: 2.5rem; overflow: visible; }
hr.carat-divide::before { content: ""; height: 0; width: 0; border: 20px solid transparent; border-top-color: #111; left: 50%; position: absolute; margin-left: -40px; border-left-width: 40px; border-right-width: 40px; }
hr.carat-divide::after { content: ""; height: 0; width: 0; border: 20px solid transparent; border-top-color: #fff; left: 50%; position: absolute; margin-left: -40px; top: -1px; border-left-width: 40px; border-right-width: 40px; }

/* Revisions/Releases date items */
.update-item { border-left: 1px solid #ccc; padding: .5rem 0 .5rem 1.5rem; margin: 0 1rem; }
.update-item:last-of-type { margin-bottom: 1.5rem; }
.update-item :last-child { margin-bottom: 0; padding-bottom: 0; }
.update-item strong { font-weight: 700; }
.update-item__title { position: relative; color: #08685F; padding-top: .5rem; }
.update-item__title:after { content: ""; width: 11px; height: 11px; position: absolute; top: .85rem; left: -1.85rem; border: 2px solid #f0cb3e; background: #fff; border-radius: 50%; }
@media (max-width: 649px) {
    .update-item { border-left: none; padding: 0 0 .5rem 0; margin: 0; }
    .update-item__title:after { display: none; }
}

/* ==================================================
	Help Page
================================================== */
.tileWrap { display: flex; flex-wrap: wrap; }
.tile-item { flex: 1 1 23%; background: #fff; margin: .5rem; padding: 2rem; text-align: center; text-decoration: none; transition: all .2s linear; }
.tile-item:hover, .tile-item:focus { text-decoration: none; transition: all .2s linear; }
.tile-item:hover .tile-title, .tile-item:focus .tile-title { border-bottom-color: #f5db74; transition: all .2s linear; }
.tile-item:hover > *, .tile-item:focus > * { transform: translateY(-3px); transition: all .2s linear; }
.tile-icon { margin-bottom: .5rem; transition: all .2s linear; }
.tile-title { display: block; font-weight: 700; border-bottom: 2px solid #eee; margin-bottom: .5rem; transition: all .2s linear; }
.tile-text { display: block; color: #000; transition: all .2s linear; }
@media (max-width: 1199px) {
	.tile-item { flex: 1 1 47%; }
}
@media (max-width: 649px) {
	.tile-item { text-align: left; flex: 1 1 100%; position: relative; padding: 1rem 1rem 1rem 3rem; }
	.tile-icon {  position: absolute; top: 1.1rem; left: 1.1rem; line-height: 0; }
	.tile-icon svg { font-size: 1.25rem;  }
}

#resource-tabs { display: flex; }
#resource-tabs .tabWrap { flex: 0 0 300px; font-size: .9375rem; font-weight: 500; padding-right: 2rem; }
#resource-tabs .tab-pane { border: none; border-left: 1px solid #ccc; padding: 0 0 0 2rem; box-shadow: none; }
#resource-tabs .tab-pane h3 { color: #212529; font-weight: bold; font-size: 1.1875rem; }
#resource-tabs .nav-pills .nav-link.active { background-color: #117c96; }
#resource-tabs .cat-label { display: block; padding: .25rem 1rem; background: #e7efe9; position: relative; }
#resource-tabs .cat-label:after { position: absolute; top: 100%; left: 1rem; content: ""; width: 0; height: 0; border: 8px solid transparent; border-top-color: #e7efe9; }
@media (max-width: 1023px) {
	#resource-tabs { display: block; }
	#resource-tabs .tab-pane { border-left: none; border-top: 1px solid #ccc; padding: 1rem 0 0 0; margin-top: 1rem; }
	#resource-tabs .nav-link svg { display: none; }
}

/* ==================================================
	Data Registry Landing Page (dev only)
================================================== */
.widthReset { margin: 0 -2em 0 -2em; padding: 2em 1em; }
.bg-lightgray { background: #eff5f1 url("../i/bg-registry-2.a0d7ad06896b.jpg") -10% top no-repeat; }
.bg-lightprimary { background: #eee8ef url("../i/bg-registry-1.d2d2f816ad53.jpg") right center no-repeat; background-size: contain; }
@media (max-width: 992px) {
	.bg-lightgray { background-position: -50% 0 ;}
}
@media (max-width: 768px) {
	.widthReset { margin: 0 -7px 0 -7px; padding: 2em 1em; }
	.bg-lightprimary { background: #eee8ef; }
	.bg-lightgray { background: #eff5f1; }
}

.started { position: relative; border-top: 3px solid #f1cc3f; margin-top: 1em; margin-bottom: 2em; padding: .75em 1em 1em 3em; }
.offsetIcon { position: absolute; display: block; top: .75em; left: -1.5em; border-radius: 50%; background: #5d3f59; padding: .5em; }
.offsetIcon svg { width: 2em; height: 2em; fill: #fff; }
.started h2 { border-bottom: none; margin-bottom: .2em; font-size: 1.4em; }
.started p { margin: 0 0 .75em 0; font-size: 1.15em; }
.started .btn-primary { display: inline-block; background: #6e4f64; width: auto; padding: .5em 1em; text-decoration: none; border: 1px solid #5d3f59; }
.started .btn-primary:hover, .started .btn-primary:focus { background: #5d3f59; color: #fff; }
@media (max-width: 768px) {
	.started { margin-left: 2em; }
}
@media (max-width: 420px) {
	.started { margin-left: 0; padding-left: 1em; }
	.offsetIcon { display: none; }
}

.widthReset li { margin-bottom: .3em; }
.widthReset .question span { color: #000; }
.widthReset .question a:hover { text-decoration: none; }
.widthReset .question a:hover strong { text-decoration: underline; }
.widthReset .toggleReveal { padding: 1em 1.7em; }
.widthReset .criteria { font-size: 15px; border-top: 1px dotted #ccc; margin-bottom: .5em; margin-top: 0; padding-top: .5em; }


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

/* the SVG icons below are encoded so background image with an SVG works in IE 11 */
/* fill%3D%22%23fff is the string to change the color hex code, fff at the end is white, edit that for new color */
/* future encoding: http://pressbin.com/tools/urlencode_urldecode/, encodeURIComponent() */

/* tabs with tabs-lg class will go full width at the lg breakpoint */
@media screen and (max-width: 1200px) {
    .nav-tabs.tabs-lg { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-lg .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-lg .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-lg .nav-link::after { display: none; }
    .nav-tabs.tabs-lg .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("../i/nav_link_before.c04a2e54e925.svg"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs.tabs-lg .nav-link.active, .nav-tabs.tabs-lg .nav-link:focus, .nav-tabs.tabs-lg .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs.tabs-lg .nav-link.active::before { background-image: url("../i/nav_link_active_before.32397d5f3745.svg"); }
}

/* tabs with tabs-md class will go full width at this breakpoint */
@media screen and (max-width: 992px) {
	.nav-tabs.tabs-md { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-md .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-md .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-md .nav-link::after { display: none; }
    .nav-tabs.tabs-md .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("../i/nav_link_before.c04a2e54e925.svg"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs.tabs-md .nav-link.active, .nav-tabs.tabs-md .nav-link:focus, .nav-tabs.tabs-md .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs.tabs-md .nav-link.active::before { background-image: url("../i/nav_link_active_before.32397d5f3745.svg"); }
}

/* tabs with tabs-sm class will go full width at this breakpoint */
@media screen and (max-width: 768px) {
	.nav-tabs.tabs-sm { margin-bottom: 0; background: none; }
	.nav-tabs.tabs-sm .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs.tabs-sm .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; font-weight: 700; border-radius: 4px;  }
    .nav-tabs.tabs-sm .nav-link::after { display: none; }
    .nav-tabs.tabs-sm .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("../i/nav_link_before.c04a2e54e925.svg"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs.tabs-sm .nav-link.active, .nav-tabs.tabs-sm .nav-link:focus, .nav-tabs.tabs-sm .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs.tabs-sm .nav-link.active::before { background-image: url("../i/nav_link_active_before.32397d5f3745.svg"); }
}

/* tabs will go full width at this breakpoint (default) */
@media screen and (max-width: 576px) {
	.nav-tabs { margin-bottom: 0; background: none; }
	.nav-tabs .nav-item { display: block; width: 100%; margin-bottom: .35rem; }
	.nav-tabs .nav-link { display: block; border: none; background: #f2f2f2; padding: .5rem 1rem .5rem 3.5rem; box-shadow: inset 6rem 0 0 -3.5rem #6e4f64; border-radius: 4px;  }
    .nav-tabs .nav-link::after { display: none; }
    .nav-tabs .nav-link::before { display: block; width: 1rem; height: 1rem; content:""; position: absolute; top: .85rem; left: .75rem; background-image: url("../i/nav_link_before.c04a2e54e925.svg"); background-repeat: no-repeat; background-size: 1rem 1rem; }
	.nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: #6e4f64; color: #fff; }
    .nav-tabs .nav-link.active::before { background-image: url("../i/nav_link_active_before.32397d5f3745.svg"); }
}


/* ==================================================
	Old Tabs
================================================== */
.js-tablist { margin: 2em 0 0 0; padding: 0; border-bottom: 1px solid #ccc; line-height: 2.7; background-color: #e7efe9; border-radius: 3px 3px 0 0; }
	.about-tabs { line-height: 2.6; }
.js-tablist__item { display: inline-block; margin: 0; list-style: none; background-color: #e7efe9; }
.js-tablist__link { display: ineline-block; padding: .75em 1em; text-decoration: none; font-weight: bold; }
	.js-tablist__link:hover { cursor: pointer; }
.js-tablist__link[aria-selected=true] { color: #000; background-color: white; border-radius: 4px 4px 0 0; border: 1px solid #ccc; border-bottom: 1px solid #fff; margin-bottom: -1px; }

.js-tabcontent { background-color: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; padding: 15px; }
.js-tabcontent[aria-hidden=true] { display: none; }

@media (max-width: 43.99em) {
	.js-tablist { margin-top: 0; }
	.js-tablist__item { display: block; }	
	.js-tablist__link { display: block; padding: 0 1em; }
	.js-tablist__link[aria-selected=true] { background: #e7efe9; border-radius: 0; border: none; margin: 0; }
	.js-tablist__link[aria-selected=true] span { background: url("../i/toggle-rad.815c48c395b7.png") 6px 12px no-repeat; }
}


/* ==================================================
	Data Viz Page
================================================== */
/* overwrite vue stuff */
#app { text-align: inherit!important; font-family: inherit!important; }

.colWrap { display: flex; }
.viz .colWrap { overflow: hidden; } /* only for viz page left col hide */
.leftCol { flex: 0 0 300px; background: #f7f7f7; font-size: .875rem; transition: all .1s ease-in-out; visibility: visible; margin-right: 1rem; }
.rightCol { flex-grow: 1; }	
.slideHide { margin-left: -300px; transition: all .1s ease-in-out; visibility: hidden; margin-right: 0; }


/* data topic left nav */
.qpWrap { border-bottom: 5px solid #fff; }
.qpWrap a { box-shadow: 0 1px 2px rgba(0,0,0,.2); font-weight: bold; }

.btn-topic { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); font-weight: bold; }
.topicWrap a { text-decoration: none; }

.toggleWrap .topics-nav { box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* pseudo header for the other 4 */
.topic-divide { position: relative; margin-top: 1.75rem;  }
.topic-divide:before { position: absolute; bottom: 100%; left: 1rem; right: 1rem; content: "Health Determinants"; font-size: 1rem; font-variant: all-small-caps; font-weight: bold; color: #000; border-bottom: 1px dashed #333; }

.optionWrap { padding: 0 .5rem .5rem; border-top: 20px solid #fff; }
.optionWrap .form-group { margin-bottom: .5rem; }
.optionWrap label { margin-bottom: .1rem; }
.optionWrap .heading { font-size: 1.125rem; font-variant: all-small-caps; color: #643355; background: #f0ecee; padding: .5rem; margin: 1.5rem -.5rem .75rem; position: relative; font-weight: bold; border-bottom: 1px solid #ddc9d5; box-shadow: 0 2px 0 #fff; }
.optionWrap .heading:after { width: 0; height: 0; position: absolute; content: ""; bottom: -12px; right: .5rem; border: 6px solid transparent; border-top-color: #f0ecee; }
.optionWrap .heading:before { width: 0; height: 0; position: absolute; content: ""; bottom: -13px; right: .5rem; border: 6px solid transparent; border-top-color: #d0b0c5; }
.optionWrap .heading:first-child { margin-top: 0; }


@media (max-width: 992px) {
	.btn-toggler { font-size: .875rem; color: #07458a; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
	.btn-toggler span { line-height: 1.75rem; }
	.btn-toggler .line { fill: none; stroke: #07458a; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
	.btn-toggler .line1 { stroke-dasharray: 60 207; stroke-width: 6; }
	.btn-toggler .line2 { stroke-dasharray: 60 60; stroke-width: 6; }
	.btn-toggler .line3 { stroke-dasharray: 60 207; stroke-width: 6; }
	
	.js .btn-toggler[aria-expanded="true"] .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
	.js .btn-toggler[aria-expanded="true"] .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; }
	.js .btn-toggler[aria-expanded="true"] .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
}

.map-responsive { overflow-x: auto; }
#legend_disclaimer, #no_graph {	padding-bottom: 2rem; }

@media (max-width: 1399px) {
	/* data viz columns stack early */
	#data-app .colWrap { flex-direction: column; }
	#data-app .leftCol { flex-basis: auto; margin-right: 0; }
	#data-app .rightCol { margin-top: 1rem; }
	.hideleftCol { display: none; }
	.formWrap { display: flex; flex-wrap: wrap; }
	.formWrap > * { flex-basis: 30%; }
	#userInputForm .formWrap > .form-group { margin-right: 3.33%; }
	.optionWrap .heading:first-child { flex-basis: calc(100% + 1rem); }
	
}
@media (max-width: 1024px) {
	.colWrap { flex-direction: column; }
	.leftCol { flex-basis: auto; margin-right: 0; }
	.rightCol { margin-top: 1rem; }
	.formWrap > * { flex-basis: 45%; }
	#userInputForm .formWrap > .form-group { margin-right: 5%; }
}
@media (max-width: 767px) {
	.formWrap > * { flex-basis: 100%; }
	#userInputForm .formWrap > .form-group { margin-right: 0; }
}


/* ==================================================
	Repsonsive Table w/Scroll Shadow
	(save for now, maybe integrate later)
================================================== */
/*@media (max-width: 53.99em) {
	.respTable { display: inline-block; vertical-align: top; max-width: 100%; overflow-x: auto; margin: 0 0 2em 0; -webkit-overflow-scrolling: touch; background-attachment: scroll, scroll; background-image: radial-gradient(ellipse at left center , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%), radial-gradient(ellipse at right center , rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%); background-position: 0 center, 100% center; background-repeat: no-repeat; background-size: 10px 100%, 10px 100%; }*/
	
	/* change these gradients from white to your background colour if it differs. Gradient on the first cells to hide the left shadow 
	.respTable td:first-child { background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-repeat: no-repeat; background-size: 20px 100%; }*/
	
	/* gradient on the last cells to hide the right shadow 
	.respTable td:last-child { background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%); background-repeat: no-repeat; background-position: 100% 0; background-size: 20px 100%; }*/
	
	/*.demoTable th { min-width: 190px; }
}
@media (max-width: 43.99em) {
	.demoTable th { min-width: 150px; }
}*/


/* ==================================================
	Tables
================================================== */
/* overwrite BS caption positioning */
.fs-14 { font-size: .875rem; }

caption { caption-side: top; color: #000; font-weight: 700; font-size: 1rem; text-align: center; }

.rtcomparison th { border: 1px solid #ccc; background-color: #eee;  font-weight: bold; text-align: center; }
.rtcomparison td { vertical-align: top; border: 1px solid #ccc; text-align: center; min-width: 200px; }

.table .thead-pulse th { background: #f0ecee; color: #000; border-color: #e6d8e0; line-height: 1.2; }
.sortWrap { display: flex; flex-direction: column; align-items: center; }
.sort-neutral { color: #ddc9d5; }
.sort-active { color: #643355; }

/* Tables */
table.revisions th, table.revisions td { text-align: left; }
div.tableFootnotes { background: #e7efe9; border: 1px solid #c8c8c8; }

/* Colors for the rising/stable/falling fonts */
.rising , .badcolor { color: #BD0026!important; }  /* Was 640000 but that wasn't passing contrast tests #CB181D; */
.stable { color: blue!important; } /* This is fine for contrast - against both white and #e7efe9 */
.falling , .goodcolor { color: #006D2C!important; } /* also was #006400; at one point and then green. Green didn't pass contrast tests */
.blackcolor { color: #000!important; }
.suppressed { color: gray!important;} 
.rising, .badcolor, .stable, .falling, .goodcolor, .blackcolor, .suppressed { padding: 0!important; border: none!important; background: none!important; box-shadow: none!important; }

/* ==================================================
	AMCharts
================================================== */
.amchart__footnotes { font-size: .875rem; }
#amchart-footnotes, #amchart-footnotes__html, .amchart__footnotes--inner-wrapper, #amchart-footnotes-export { overflow: hidden; }

/* Graph on Historical Trends */
#histTrendsChart { width: 97%; margin-left: 3%; margin-top: 1rem; min-height: 475px; height: 55vh; font-weight: 500; }

/* Loading Animation */
.loading { background: #fff; background: rgba(255,255,255,.8); text-align: center; font-size: 1.2em; letter-spacing: .05em; display: block; padding: 25vh 0; }
.loading span { display: inline-block; color: #000; margin-top: 1rem; }

.sk-cube-grid { width: 60px; height: 60px; margin: 0 auto; }

.sk-cube-grid .sk-cube { width: 33%; height: 33%; background-color: #07458a; float: left; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
.sk-cube-grid .sk-cube1 { animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 { animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 { animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 { animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 { animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 { animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 { animation-delay: 0s; }
.sk-cube-grid .sk-cube8 { animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 { animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% { transform: scale3D(1, 1, 1); }
  35% { transform: scale3D(0, 0, 1); }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% { transform: scale3D(1, 1, 1); }
  35% { transform: scale3D(0, 0, 1); } 
}