h1 {
	margin-bottom: .5em; padding: 0;
}

.summary {padding: 0; background: transparent; border: none;}

header {
	background: #00223c url(/coronavirus/img/virus-bg.png) top right no-repeat;
	/* background-size: cover; */
	margin-bottom: 2em;
}

header.subpage {background-position: 100% 28%;}
header.subpage .signature-summary {display: none;}
.logo {margin-left: 0;}
.logo-img {width: 10em; margin-bottom: 2em;}


.subpage .logo-img {width: 8em; margin-bottom: 1em;}
.subpage {margin-bottom: 1em}

.header-container form::before, .header-container:before, .header-container::after {background: transparent;}
	
.signature-summary {color: #fff; font-size: 1.25em;}
.signature-summary .site-title {color: #fff; font-size: 1.75em;}
.subpage .signature-summary {font-size: 1em;}
.signature-summary p {}

.signature-page-summary {font-size: 1.35em; margin-bottom: 1.5em;}

.logo + div:not(.search-box) {
    display: block;
}

.navigation {
	background: #00223c;
}
.navigation::before, .navigation::after {background: #00223c;}
.navigation {background: #00223c;}
.navigation .menu li a {background: #00223c;}
.navigation .menu li a:active span, .navigation .menu li a.active-trail span, .navigation .menu li a.active-trail.first:active span {color: #fff;}
.navigation .menu li a:active:after, .navigation .menu li a.active-trail:after, .navigation .menu li a.active-trail.first:active:after {background: #5BB2D1;}

@media only screen and (max-width: 768px) {
	
	.header:after {background: #5BB2D1;}
}

@media only screen and (min-width: 768px) {
	.navigation {
		background: #00223c;
	}
	.navigation::before, .navigation::after {background: transparent;}
	.navigation {background: transparent;}
	.navigation .menu li a {background: #03446d;}
	.navigation .menu li a:active span, .navigation .menu li a.active-trail span, .navigation .menu li a.active-trail.first:active span {color: #fff;}
	.navigation .menu li a:active:after, .navigation .menu li a.active-trail:after, .navigation .menu li a.active-trail.first:active:after {background: #f6a602;}
}

.mobile .menu__first-of-type > li a {color: #fff;}
.mobile.is-open {padding-top: 70px;}
.mobile.is-open .language-switcher-locale-session li a {margin-top: 20px; background: transparent;}
.mobile.is-open .LanguageLinks {right: auto;}

.footer {background-image: none; background: #00223c;}

main .LanguageLinks {display: none;}
.LanguageLinks {position: absolute; top: 0px; right: 10px; font-size: .9em;}
.LanguageLinks ul {margin: 0; padding: 0; text-align: right; border: 1px #ccc solid;}
.LanguageLinks li {list-style: none; display: inline-block;}
.LanguageLinks li.currentLang {display: none;}


.secondary-content {
    background-color: #f1f1f0;
    margin: 0 0 1.6875em 0;
	padding: .5em 1.5em 1.5em 1.5em;
	border-radius: 6px;
	font-size: 14px;}
	
	.secondary-content.blue {background-color: #ceeef8;}

.small {font-size: .8em;}

.icon-circle a {background: #00223c; border-radius: 6px; width: 100%; padding: .75em 5em; margin: 0; display: block;}
.icon-circle a:hover, .icon-circle a:active {background: #014070;}
.topic-title h2 {margin: 1em auto; font-size: 1.25em; text-align: center;}
/* .icon-circle a {background: #00223c; border-radius: 100%; padding: 1em; margin: .5em; display: block;} */

.content-section {border-color: #fff; padding-top: 0;}
.content-chunk h2 {font-size: 1.5em;}

.livestream-ribbon {background: #a0d3e6; padding: .75em; text-align: center; color: #000; margin-top: -2em; margin-bottom: 1.5em;}

.language-switcher-locale-session li a::before {background: #a0d3e6;}
.language-switcher-locale-session li a {background: transparent;color: #000; z-index: 1; margin-top: 0; padding-top: 0}
@media only screen and (max-width: 768px) {
header {background-position: 160% 0;}
.signature-summary {margin-left: 12px;}
.logo-img {margin-left: 12px;}
.language-switcher-locale-session li a { padding: 0 1.5em .25em 1.5em; position: relative; margin-top: .01em;}
.language-switcher-locale-session li a::before {
	content: '';
	background: #a0d3e6;
	position: absolute;
	z-index: -1;
	right: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: skewX(-30deg);
	-ms-transform: skewX(-30deg);
	-o-transform: skewX(-30deg);
	transform: skewX(-30deg);
	}
}

/* .safety-alert {background: #f8d44c; border: 1px solid #f6a602; border-width: 0 3px 0 6px; padding: 1em; color: #000; margin-bottom: 1.5em;}
.safety-alert h2 {color: #000;} */

.safety-alert {background: #ff7458; border: 1px solid #ff7458; border-width: 0 3px 0 6px; padding: 1em; color: #000; margin-bottom: 1.5em;}
.safety-alert h2 {color: #000;}

.subtopic-list {margin-top: -1em; padding-top: 0;}
.subtopic-list li {margin-bottom: .75em;}

/* signature-breadcrumb requires <li class="first"> on every item except the last … 🤡 */
.signature-breadcrumb ol {list-style: none; margin: 0; padding: 0; font-size: .85em;}
.signature-breadcrumb ol li {display: inline-block; margin: 0; padding: 0;}
.signature-breadcrumb ol li.first::after {text-decoration: none; color: #555; content: " » ";}
/* Let's impove things with signature-breadcrumbs. no class="first" or any other classes required. */
.signature-breadcrumbs ol {list-style: none; margin: 0; padding: 0; font-size: .85em;}
.signature-breadcrumbs ol li {display: inline-block; margin: 0; padding: 0;}
.signature-breadcrumbs ol li + li::before {text-decoration: none; color: #555; content: " » ";}


ul.icon-list li.podcast a::before {content: '\f028';}

/* ul.checklist {list-style: none; }
ul.checklist li:before {content: '\f00c'; font-family: 'font-awesome';} */

.news-card-grid {grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); background: transparent;}

.topic-grid {
	display: grid;
	grid-template-columns: 80px 1fr;
	grid-template-rows: repeat(7, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 10px;
	margin-bottom: 2em;
}

.topic-grid-two {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px; 
}

.topic-flex-grid { 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}
.card {
	margin: 5px;
	width: 300px;
}

@media only screen and (max-width: 560px) {
	/* .card {width: 400px;}
	.card .icon-circle {padding: 1em 10em;} */
}

.content-chunk {background: #d4e7f0; border-radius: 6px; padding: 1.5em; margin-bottom: 1.5em; color: #333; z-index: 2; position: relative;}
.secondary-content {border-radius: 6px;}


.top-link {text-align: right; position: fixed; bottom: 0; right: 30px; z-index: 1; display: none;}
.top-link a {border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 1em 30px 1em 20px; background: #a0d3e6; color: #00223c; display: inline-block; font-weight: bold;}
.top-link a:hover, .top-link a:focus {background: #00223c; color: #fff; }

.footer {z-index: 2;}


.secondary-content.section-nav {background: #00223c; color: #fff; font-size: 1em;}
.section-nav a {color: #fff; display: block; padding: 0.25em 0.5em 0.25em 1em;}
.section-nav h2 {color: #fff;}
.section-nav .active-trail ul li a {color: #fff;}
/*.section-nav .active-trail > a,*/
.section-nav .active-trail ul li.active a {color: #f8d44c;}
/*.section-nav .active {background: #014070; border-radius: 6px;}*/
.section-nav .active > a {color: #f8d44c; background: #014070; border-radius: 6px;}
.section-nav ul {margin-left: 0; padding-left: 0;}
.section-nav ul ul {margin-left: 1em; padding-left: 0; display: none;}
.section-nav ul li.active-trail ul {display: block;}
.section-nav li {padding: 0; list-style: none; position: relative;}
.section-nav li::before {content: "›"; position: absolute; top: 0.25em; left: 0.25em;}
/*.section-nav li:hover, .section-nav li:focus {background: #014070; border-radius: 6px;}*/
.section-nav li a:hover, .section-nav li a:focus {background: #014070;}
.section-nav li:focus-within {z-index: 1;}