:root {
	--charts-background-color: #FFFFFF;
	--charts-primary-color: #000459; /* blue */
	--charts-secondary-color: #ED0678; /* pink */
	--charts-content-color: #444444;
	--charts-content-font-size: 1rem;
}

.page-charts {
	background-color: var(--charts-background-color);
}

.page-charts-wrapper {
	margin: 0 auto;
	max-width: 724px;
	padding: 2rem 1rem 4rem 1rem;
}

.page-charts-header-image {
	display: block;
	margin: 0;	
	width: 100%;
    height: auto;
}

.page-charts-heading {
	margin: 0;
	padding-bottom: 1.5rem;
	text-align: center;
	font-size: 2rem !important;
	color: var(--charts-primary-color);
}

.page-charts-tagline {
	margin: 0;
	padding-bottom: 2rem;
	text-align: center;
	font-size: 1.25rem;
	color: var(--charts-secondary-color);
}

.chart-row {
	border-top: solid var(--charts-secondary-color) 1px;
	padding-top: 2rem;
}

.chart-image {
	width: 100%;
	margin: 0;
	padding-bottom: 2rem;
}

.chart-details {
	width: 100%;	
	margin: 0;
	padding-bottom: 2rem;
}

.chart-image img {
	display: block;	
	margin: 0;
	border-radius: .25rem;
}

.chart-title {
	margin: 0;
	margin-bottom: 2rem;
	border-radius: .25rem;
	padding: 1.5rem 1rem;
	color: white;
	background-color: var(--charts-primary-color);
	font-size: 1.5rem !important;
	text-align: center;
}

.chart-content p {
	margin: 0;
	padding-bottom: 1rem;
	color: var(--charts-content-color);
	font-size: var(--charts-content-font-size);
}

.chart-button {
	display: flex;
	justify-content: center;
	padding: 1rem 0;
}

.chart-button-link {
	width: 100%;	
	margin: 0;
	border-radius: .375rem;
	padding: .75rem;
	background-color: var(--charts-secondary-color);
	color: #FFF;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
}