/* BASE STYLES - Use locally for demo purposes only. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

.body-container {
	max-width: 1200px;
	margin: auto;
	font-family: 'Proxima-Nova';
	margin-bottom: 100px;
}

.body-container h1 {
	font-size: 2.75rem;
}

.body-container h2 {
	font-size: 2.25rem;
	margin-top: 70px;
	margin-bottom: 30px;
	border-top: 1px solid #DFDFDF;
	padding-top: 12px;
}

.body-container h3 {
	font-size: 1.625rem;
	margin-top: 70px;
	margin-bottom: 30px;
}

.body-container p {
	line-height: unset;
}

.body-container hr {
	padding: unset;
}

ul, li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 300;
    list-style-type: square;
}

/* TEMPLATE GRIDS - Global layout classes. */

.grid-container {
	display: grid;
	grid-gap: 30px;
	margin: 0 20px;
}

.grid-container.one {
	grid-template-columns: 1fr;
}

.grid-container.two {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/*	grid-auto-rows: minmax(260px, auto);  */
}

.grid-container.three {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	/*	grid-auto-rows: minmax(260px, auto);  */
}

.grid-container.four {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	/*	grid-auto-rows: minmax(260px, auto);  */
}

.grid-container.five {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	/*	grid-auto-rows: minmax(260px, auto);  */
}

.grid-container.forty-sixty {
	grid-template-columns: 2fr 3fr;
}

.grid-container.sixty-forty {
	grid-template-columns: 3fr 2fr;
}

.grid-container>.grid-container {
	/*  Eliminates unwanted margin when a grid container is used within a grid container as a sub-grid. */
	margin: 0;
}

/* Grid Layouts for Bar Charts */

.grid-container.single-bar-chart {
	grid-template-columns: minmax(0, 1fr) minmax(0, 6fr);
	grid-gap: 10px 20px;
	margin: 0;
}

table.grid-container.double-bar-chart {
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 3fr);
	grid-gap: 10px 10px;
	margin: 0;
	grid-auto-flow: dense;
}

table.grid-container.single-bar-chart caption {
	grid-column: span 2;
	text-align: left;
}

table.grid-container.single-bar-chart thead,
table.grid-container.single-bar-chart tbody,
table.grid-container.single-bar-chart thead tr,
table.grid-container.single-bar-chart tbody tr {
	display: contents;
}

table.grid-container.double-bar-chart caption {
	grid-column: span 3;
	text-align: left;
}

table.grid-container.double-bar-chart thead,
table.grid-container.double-bar-chart tbody,
table.grid-container.double-bar-chart thead tr,
table.grid-container.double-bar-chart tbody tr {
	display: contents;
}

/* Grid Media Queries for Small Screens */

@media screen and (max-width: 980px) {

	.grid-container.four,
	.grid-container.five {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media screen and (max-width: 720px) {

	.grid-container.three,
	.grid-container.four,
	.grid-container.five,	
	.grid-container.forty-sixty,
	.grid-container.sixty-forty  {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.responsive-fit {
		/* Overrides other grid settings for grid-within-grid scenarios */
		grid-template-columns: 1fr !important;
	}
}

@media screen and (max-width: 500px) {

	.grid-container.two,
	.grid-container.three,
	.grid-container.forty-sixty,
	.grid-container.sixty-forty {
		grid-template-columns: 1fr;
	}

	.grid-container.double-bar-chart {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 2fr);
		column-gap: 5px;
	}
}

/* INFOGRAPHIC STYLES */

.infographic {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-self: stretch;
}

p.data-value {
	font-size: 4rem;
	position: absolute;
	align-self: center;
	font-weight: 700;
	color: #333;
	margin: 0;
}

.infographic-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
}

.pie {
	width: 100%;
	height: auto;
	border-radius: 50%;
	background-image: conic-gradient(#fb0 calc(3.6deg * var(--segment1, 100)),
		#fc3 0 calc(3.6deg * var(--segment2, 100)),
		#fb0 0);
	background-origin: border-box;
	box-shadow: 0 0.075em 0.2em 0.0em rgba(0, 0, 0, .25);
	background-color: #fb0;
}

.pie::before {
	content: '';
	display: block;
	padding-bottom: 100%;
}

p.infographic-item-heading {
	justify-content: center;
	display: flex;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.25rem;
	margin: 30px 0;
}

p.infographic-item-subheading {
	text-align: center;
	font-weight: 300;
}

.copy-chunk {
	font-size: 1.8rem;
	font-weight: 300;
	text-transform: uppercase;
	align-self: center;
}

/* Multi-Column Bulleted Lists */

.two-column-list {
	columns: 2;
	padding-right: 15px;
	margin-bottom: 15px;	
}

.three-column-list {
	columns: 3;
	padding-right: 15px;
	margin-bottom: 15px;	
}

.two-column-list li, .three-column-list li {
	padding-right: 15px;
	margin-bottom: 15px;
	margin-right: 10px;
}

.data-block ul li::marker {
	color: #FB0;
}

@media screen and (max-width: 980px) {
.three-column-list {
	columns: 2;
	}
}	

@media screen and (max-width: 500px) {
.two-column-list, .three-column-list {
	columns: 1;
	}
}

/* Mini-Grid */

.grid-container.mini {
	grid-gap: 10px;
}

.mini .data-block {
	padding: 10px 5px;
}

.mini .data-block p.infographic-item-heading {
	font-size: 1.0625rem;
	font-weight: 400;
	margin: 10px 0 5px;
}

.mini .data-block p.data-value {
	font-size: 4rem;
	font-family: 'Kandal';
	font-weight: 500;
}

/* DONUT - COMPLEX PIE */

.donut {
	width: 100%;
	background-image: conic-gradient(
		#fb0 0 calc(3.6deg * var(--segment1, 100)),
		#ddd 0 calc(3.6deg * var(--segment2, 100)),
		#3c3c3c 0 calc(3.6deg * var(--segment3, 100)),
		#fc6 0 calc(3.6deg * var(--segment4, 100)),
		#666 0 calc(3.6deg * var(--segment5, 100)),
		#999 0 calc(3.6deg * var(--segment6, 100)),
		#ffffcc 0 calc(3.6deg * var(--segment7, 100)),
		#fb0 0);
	border: 1px solid #fff; /* a hack to prevent 1px lines that bisect pie charts in chrome -- only helps a little */
}

.donut:after {
	content: '';
	width: 65%;
	height: 65%;
	background-color: #FFF;
	border-radius: 50%;
}

.pie-key {
	grid-template-columns: 1fr 3fr;
	grid-auto-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 0;
}

.pie-key-container {
	display: flex;
	flex-direction: column;
	align-self: center;
}

.pie-key p {
	padding: 10px;
	margin: 5px;
}

p.key-color-segment1 {
	background-color: #fb0;
	text-align: center;
	font-weight: 600;
}

p.key-color-segment2 {
	background-color: #ddd;
	text-align: center;
	font-weight: 600;
}

p.key-color-segment3 {
	background-color: #3c3c3c;
	color: #fff;		
	text-align: center;
	font-weight: 600;
}

p.key-color-segment4 {
	background-color: #fc6;
	text-align: center;
	font-weight: 600;
}

p.key-color-segment5 {
	background-color: #666;
	color: #fff;	
	text-align: center;
	font-weight: 600;
}

p.key-color-segment6 {
	background-color: #999;
	color: #000;	
	text-align: center;
	font-weight: 600;
}

p.key-color-segment7 {
	background-color: #ffffcc;
	text-align: center;
	font-weight: 600;
}

/* PROGRESS LIST */

.simple-progress-list {
	grid-gap: 10px;
}

.progress-list-item {
	border-bottom: 1px solid #ccc;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.progress-icon-wrap {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	padding-left: 15px;
}

.progress-icon-wrap p {
	margin: 7px auto;
	text-transform: uppercase;
	font-size: .875rem;
	text-align: center;
}

.progress-icon-wrap i.icon {
	align-self: center;
	font-size: 1.75rem;
	color: #fb0;
}

/* ICONS */

.infographic-container {
	align-items: baseline;
}

.infographic-container a {
	color: inherit;
	text-decoration: inherit;
	transition: all .2s ease-in-out;
}

.infographic-container a:hover {
	outline: solid 1px #FB0;
	outline-offset: 10px;
	transform: scale(1.04);	
}

.infographic-icon {
	color: #fb0;
	font-size: 12rem;
}

.infographic-icon:before {
    vertical-align: middle;
}

.infographic-container.smaller .infographic-icon { /* use with 4-up or 5-up  size */
	font-size: 5rem;	
}

/* Font Awesome Stacked Icon Overrides -- modifies the default placement of FA icon stacks so they work in our layout*/

.fa-stack {
	height: 1em;
	line-height: 1em;
}

.fa-stack-1x {
	position: absolute;
	font-size: .6em;
}

.fa-stack-2x {
	position: relative;
	font-size: 1em;
	opacity: .4;
}

.fa-stack-offset {		/* Allows a stacked icon with top-right offset effect*/
	left: 30px;
    top: -20px;
}

/* DATA BLOCKS */

.data-block {
	display: flex;
	flex-direction: column;
    justify-content: space-around;	
	padding: 20px 10px;
}

.data-block p {
	position: relative;
}

.data-block p.data-value {
	font-size: 4rem;
	font-weight: 600;
	line-height: normal;		
}

.data-block .copy-chunk p {
	padding-left: 15px;
	padding-right: 10px;
}

.data-block h3 {
	margin-top: 10px;
}

/* BAR CHART STYLES */

/* These styles override table styles with CSS grid. */

table {
	min-width: 280px;
	width: 100%;
}

tr td {
	padding: 15px 10px;
}


/* Variables to Calculate Graph Lengths*/

table,
.grid-container.single-bar-chart td,
.grid-container.double-bar-chart td {
	--scale-calc: calc(var(--this-value) / var(--scale));
	--scale-output: calc(var(--scale-calc) * 100%);
}

/* Single Bar */

/* Header Row */

.grid-container.single-bar-chart th:nth-child(2n-1) {
	grid-column-start: 1;
	text-align: right;
	padding-right: 0;
}

.grid-container.single-bar-chart th:nth-child(2n-0) {
	grid-column-start: 2;
	text-align: left;
	padding-left: 0;
}

/* Data Rows */

.grid-container.single-bar-chart td:nth-child(2n-1) {
	grid-column-start: 1;
	text-align: right;
	font-weight: 700;
	padding-right: 0;
}

.grid-container.single-bar-chart td:nth-child(2n-0) {
	grid-column-start: 2;
	text-align: left;
	font-weight: 300;
	background: linear-gradient(to right, rgb(225, 225, 225) 0, rgb(235, 235, 235) var(--scale-output), rgba(255, 255, 255, 0) var(--scale-output));
}

/* Optionally highlight data in gold */

.single-bar-chart tr.gold td:nth-child(2n) {
	grid-column-start: 2;
	text-align: left;
	background: linear-gradient(to right, rgb(255, 187, 0) var(--scale-output), rgba(255, 255, 255, 0) var(--scale-output));
}

/* Double Bar */

/* Header Row */

.grid-container.double-bar-chart th {
	padding-bottom: 10px;
}

.grid-container.double-bar-chart th:nth-child(3n-2) {
	grid-column-start: 2;
	text-align: center;
}

.grid-container.double-bar-chart th:nth-child(3n-1) {
	grid-column-start: 1;
	text-align: right;
}

.grid-container.double-bar-chart th:nth-child(3n-0) {
	grid-column-start: 3;
	text-align: left;
}

/* Data Rows */

.grid-container.double-bar-chart td:nth-child(3n-2) {
	grid-column-start: 2;
	text-align: center;
	font-weight: 700;
	padding: 15px 3px;
}

.grid-container.double-bar-chart td:nth-child(3n-1) {
	grid-column-start: 1;
	text-align: right;
	font-weight: 300;
	background: linear-gradient(to left, rgb(225, 225, 225) 0, rgb(235, 235, 235) var(--scale-output), rgba(255, 255, 255, 0) var(--scale-output));
	/*	filter: drop-shadow(-1px 1px 3px #BBB);*/
}

.grid-container.double-bar-chart td:nth-child(3n-0) {
	grid-column-start: 3;
	text-align: left;
	font-weight: 300;
	background: linear-gradient(to right, rgb(225, 225, 225) 0, rgb(235, 235, 235) var(--scale-output), rgba(255, 255, 255, 0) var(--scale-output));
	/*filter: drop-shadow(1px 1px 3px #BBB);*/
}

/* Optionally highlight data in gold */

.grid-container.double-bar-chart tr.gold td:nth-child(3n-1) {
	background: linear-gradient(to left, rgb(255, 187, 0) var(--scale-output), rgba(255, 255, 255, 0) var(--scale-output));
}

.grid-container.double-bar-chart tr.gold td:nth-child(3n-0) {
	background: linear-gradient(to right, rgb(255, 187, 0) var(--scale-output), rgba(255, 255, 255, 0) var(--scale-output));
}

/* UTILITIES */

hr.infographic-separator {
    margin: 40px 20px 0;
    padding: unset;
    border-top: 2px solid #fb0;
    width: calc(100% - 40px);
    height: 2px;
}

.card {
	padding: 20px;
	background: #f7f7f7;
	box-shadow: 10px 10px 20px 0 rgb(0 0 0 / 20%);
}

.cards > div {
	padding: 20px;
	background: #f7f7f7;
	box-shadow: 10px 10px 20px 0 rgb(0 0 0 / 20%);
}

.bordered {
	border: solid 1px #333;
}

.flex-vertical {
	flex-direction: column;
}

/* Dark and Gold Variants */

.pie.dark {
	background-image: conic-gradient(
		#151500 calc(3.6deg * var(--segment1, 100)),
		#3C3C3C 0 calc(3.6deg * var(--segment2, 100)),
		#3C3C3C 0);
	background-color: #3C3C3C;
}

.dark .data-block,.dark .copy-chunk, .dark .infographic-item-heading, .infographic-item.dark>.infographic-icon {
	color: #fff;
}

.dark .infographic-icon {
	color: #777;
}

.dark .data-value, .infographic-item.dark>.data-value {
	color: #FB0;
}

.dark {
	background: #3c3c3c;
}

.gold {
	background: #FB0;
}

.gold-tigertooth {
	background-image: linear-gradient(#FB0,#ffc832);
	position: relative;
}

.gold-tigertooth:before {
    background-image: url(/_resources/images/reskin/white-tiger-tooth-pattern.png);
	position: relative;
    opacity: .2;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position-y: 20%;
    background-size: 70%; 	
}

.data-block.dark {
	background: #3C3C3C;
}

.data-block.dark p {
	color: #FB0;
}

.pie.dark>p.data-value {
	color: #fb0;
}

.timeline .timeline-item.dark .content h2,
.timeline .timeline-item.dark .content p {
	color: #FFF;
}

.timeline .timeline-item.dark .content {
	background: #3C3C3C;
}

/* header and border */

	/* USAGE:  Apply to a heading immediately before a grid container. The grid container will also receive a border */

h3.heading-banner {
	background: #EEE;
	padding: 10px;
	margin: 30px 20px 0;
	text-align: center;
}

h3.heading-banner + .grid-container {
	border: 2px solid #EEE;
}

/* Grid Span */

.column-span {
	grid-column: 1 / span 2;
	flex-direction: row;
	margin: 0 auto;
}

.column-span > p {
	padding: 20px;
}

@media screen and (max-width: 499px) { 
	.column-span {
	    flex-direction: column;
	}
}

/* Striped Backgrounds*/

.stripe.gold {
	background-image: linear-gradient(-45deg, #ffbb00 25%, #f5b800 25%, #f5b800 50%, #ffbb00 50%, #ffbb00 75%, #f5b800 75%, #f5b800 100%);
	background-size: 42.43px 42.43px;	
}

.stripe.dark {
	background-image: linear-gradient(-45deg, #3c3c3c 25%, #383838 25%, #383838 50%, #3c3c3c 50%, #3c3c3c 75%, #383838 75%, #383838 100%);
	background-size: 42.43px 42.43px;
}

/* Reverse */

.bottom-label p.data-value:first-child {		/* Use this class when a the label needs to display below the value. Row-reverse CSS property is not accessible. */
    margin-top: 30px;
}

/* Size */

table.double-bar-chart.dense td {
	padding: 10px !important;
}

table.double-bar-chart.dense {
	grid-row-gap: 5px;
}

/* Fancy Bar - Single */

table.single-bar-chart.fancy td {
	padding: 30px 0 30px 10px !important;
	font-size: 1.25rem;
}

table.single-bar-chart.fancy td:nth-child(2n) {
	font-weight: 700;
}

table.single-bar-chart.fancy tr:not(.gold) td:nth-child(2n) {
	background: linear-gradient(to right, rgb(30, 30, 30) var(--scale-output), rgba(255, 255, 255, 0) var(--scale-output));
	color: #FFF;
}

table.single-bar-chart.fancy td:nth-child(2n-1) {
	font-weight: 300;
}

/* RESPONSIVE ICONS AND FONTS */

@media screen and (max-width: 980px) {
	.infographic-icon {
		font-size: 10rem !important;
	}

	.infographic-container.smaller .infographic-icon {
		font-size: 5rem !important;
	}	

	.data-block p.data-value {
		font-size: 4rem !important;
	}

	.pie-label {
		font-size: 1.4rem !important;
	}
}

@media screen and (max-width: 720px) {
	.infographic-icon {
		font-size: 8rem !important;
	}
}

@media screen and (max-width: 980px) and (min-width: 500px) {
	.copy-chunk {
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 500px) {
	/*	tr {
		font-size: .8rem !important;
	}*/

	.single-bar-chart {
		column-gap: 10px;
		grid-template-columns: 1fr 3fr !important;
	}

	.double-bar-chart {
		column-gap: 10px;
		grid-template-columns: 2fr 1.25fr 2fr !important;
	}

	.infographic-container.smaller .infographic-icon {
		font-size: 4rem !important;
	}

	.infographic-container p.infographic-item-heading {
		font-size: 1rem;
		font-weight: 500;
	}
}

/* TIMELINE */

.timeline {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.timeline::after {
	content: '';
	position: absolute;
	width: 2px;
	background: #FB0;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -1px;
}

.timeline-item {
	padding: 15px 30px;
	position: relative;
	background: inherit;
	width: 50%;
}

.timeline-item:not(:first-child) {
	margin-top: -40px;
}

.timeline-item:nth-child(2n-1) {
	left: 0;
}

.timeline-item:nth-child(2n) {
	left: 50%;
}

.timeline-item::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: calc(50% - 8px);
	right: -8px;
	background: #FFF;
	border: 2px solid #3C3C3C;
	border-radius: 16px;
	z-index: 1;
}

.timeline-item:nth-child(2n)::after {
	left: -8px;
}

.timeline-item::before {
	content: '';
	position: absolute;
	width: 50px;
	height: 2px;
	top: calc(50% - 1px);
	right: 8px;
	background: #3C3C3C;
	z-index: 1;
}

.timeline-item:nth-child(2n)::before {
	left: 8px;
}

.timeline.no-icons .icon,
.timeline.no-icons .timeline-item::before,
.timeline.no-dates .date {
	display: none;
}

.timeline-item .date {
	position: absolute;
	display: inline-block;
	top: calc(50% - 8px);
	width: 100%;
	font-size: 14px;
	font-weight: bold;
	color: #6B6B6B;
	text-transform: uppercase;
	letter-spacing: 1px;
	z-index: 1;
}

.timeline-item:nth-child(2n-1) .date {
	left: 100%;
	text-align: left;
	padding-left: 20px;
}

.timeline-item:nth-child(2n) .date {
	right: 100%;
	text-align: right;
	padding-right: 20px;
}

.timeline-item .icon {
	position: absolute;
	display: inline-block;
	width: 47px;
	height: 47px;
	padding: 9px 0;
	top: calc(50% - 25px);
	background: #FB0;
	border: 2px solid #3C3C3C;
	border-radius: 50%;
	text-align: center;
	font-size: 24px;
	color: #3C3C3C;
	z-index: 1;
}

.timeline-item:nth-child(2n-1) .icon {
	right: 56px;
}

.timeline-item:nth-child(2n) .icon {
	left: 56px;
}

.timeline-item .content {
	padding: 30px 90px 30px 30px;
	position: relative;
	border-radius: 10px;
	box-shadow: 7px 7px 20px #CCC;
}

.timeline-item:nth-child(2n) .content {
	padding: 30px 30px 30px 90px;
	border-radius: 10px;
}

.timeline-item .content h2,
.timeline-item .content h3 {
	margin: 0 0 10px 0;
    padding-top: 12px;		
	font-size: 1.5rem;
	font-weight: 600;
	color: #3C3C3C;
	border: unset;
}

.timeline-item .content p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5rem;
	color: #575757;
}

@media (max-width: 720px) {
	.timeline::after {
		left: 15px;
	}

	.timeline-item {
		width: 100%;
		padding-left: 40px;
		padding-right: 10px;
	}

	.timeline-item:not(:first-child) {
		margin-top: 0px;
	}

	.timeline-item:nth-child(1n) {
		left: 0%;
	}

	.timeline-item:nth-child(1n)::after {
		left: 7px;
	}

	.timeline-item:nth-child(1n)::before {
		left: 23px;
		border-color: transparent #3C3C3C transparent transparent;
	}

	.timeline-item .icon:nth-child(1n) {
		width: 38px;
		height: 38px;
		padding: 7px 0;
		top: calc(50% - 20px);
		font-size: 18px;
		left: 55px;
	}

	.timeline-item:nth-child(1n) .date {
		right: auto;
		left: 110px;
		top: 30px;
		padding-left: 0;
		width: unset;
	}

	.timeline-item:nth-child(1n) .content {
		padding: 30px 20px 30px 70px;
		border-radius: 10px;
	}
}

/* Screen Readers */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}