/*

navy: 	00223c
blue:	85bace
red:	ff7458
yellow:	f6a602

*/

body {background: #00223c url(../img/virus.png) top right no-repeat; background-position: 104% -3%;}
header {color: #fff; margin: 1em;}
header h1 { color: inherit; margin-right: 220px; }

.alt-lang {position: absolute; right: 1em; top: 111px;}
.alt-lang a {color:#fff;}
.alt-lang a:focus, .alt-lang a:hover {color:#333;}

section {display: flex; flex-flow: row wrap; justify-items: flex-start; flex-basis: 0; justify-content: space-around; align-content: flex-start; }

article {background: #fff; border-radius: 6px; padding: 1.5em; margin: .75em;}
	.curve-chart {flex: 1 100%;}
	.table-data {flex: 4 22em;}
	.zone-map {flex: 8 30em;}
	.by-age {flex: 2 22em;}
	.by-gender {flex: 2 22em;}


.two-up-grid {
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: 1fr;
	grid-row-gap: 0px;
}

.by-gender div {text-align: center;}
.by-gender div img {max-width: 100px;}
.by-gender div strong {display: block; font-size: 2em;}

.chart-placeholder {width: 100%; background-color: #85bace; min-height: 10em;}

/* CHARTIST SPECIFIC */


.ct-bar {
	stroke-width: 1.5vw;
}
.ct-series-a .ct-bar {
	stroke: #85bace;
	stroke-dasharray: 0px;
	stroke-linecap: none;
}

.legend li {
	float: left;
	list-style: none;
	position: relative;
	margin-right: 3em;
	background: none;
}
.legend li::before {
	content: "";
	position: absolute;
	left: -1.5em;
	top: .35em;
	height: 1em;
	width: 1em;
}
.legend li:nth-child(1)::before {
	background-color: #85bace;
}
.legend li:nth-child(2)::before {
	background-color: #00223c;
}
.legend li:nth-child(3)::before {
	background-color: #f6a602;
}

.ct-series-b .ct-bar {
	stroke: #00223c;
	stroke-dasharray: 0px;
	stroke-linecap: none;
}
.ct-series-c .ct-bar {
	stroke: #f6a602;
	stroke-dasharray: 0px;
	stroke-linecap: none;
}

.ct-series-a {color: #555;}
.ct-label {color: #555;;}
.ct-grid {stroke: #efefef; stroke-dasharray: 0;}
foreignObject {height: 5em;}

.table > tbody + tbody {
	border-top: 2.5em solid #fff;
}

.ct-chart-age .ct-series-a .ct-bar {stroke-width: .75em; stroke: #85bace;}
.ct-chart-age .ct-grid {stroke: #efefef; stroke-dasharray: 0;}

.zone-map abbr { border: none; }

.footnote {display: block;}
.zone-map .footnote {
	float: right;
	max-width: 40em;
	text-align: right;
}
#demographics .footnote {
	color: #777;
	margin-top: 1em;
	text-align: center;
}

.attribution { clear: right; display: block; color: #777; margin: 0.5em 1em; text-align: right; opacity: 0.7; }
.attribution a {color: #777;}

#footer {background: transparent; padding: 2em;}
/* #footer .container { float: left; padding: 0; width: auto; }
#footer .logo { float: right; margin: 0 2em; } */
#footer .footer-logo {text-align: center; margin: 2em auto;}

@media (min-width: 32em) {
	#footer .footer-logo  {text-align: right; margin: 0;}
}

@media (min-width: 32em) {
	.zone-map {position: relative;}
	.zone-map:lang("en") > h2 {position: absolute; margin-right: 1em;}
}

.coviz-breadcrumb ol {list-style: none; margin: 0; padding: 0; font-size: .85em;}
.coviz-breadcrumb ol li {display: inline-block; margin: 0; padding: 0;}
.coviz-breadcrumb ol li a {color: #85bace;}
.coviz-breadcrumb ol li.first::after {text-decoration: none; color: #555; content: " » ";}

.last-updated {margin-bottom: 1em;}
/* BG on element to ensure readability */
.alt-lang a {text-shadow: 2px 2px 2px #00223c;}
.alt-lang a:hover {text-shadow: none;}