admin-mod.css

gistfile1.txt

* {
	box-sizing: border-box;
}

.clearfix:after {
	visibility: hidden;
	display   : block;
	font-size : 0;
	content   : " ";
	clear     : both;
	height    : 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

body {
	margin : 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

p {
	margin: 0 0 20px;
}

a {
	color          : #333;
	text-decoration: none;
}

img {
	width: 100%;
}

ul {
	margin         : 0;
	padding        : 0;
	list-style-type: none;
}

body {
	color         : #333;
	gily          : "PrattRegular",Georgia,"Times New Roman",serif;
	font-size     : 16px;
	line-height   : 1.5;
	letter-spacing: 0.5px;
}
@media (min-width: 768px) {
	body {
		font-size: 18px;
	}
}

.hidden {
	display: none;
}

.disable {
	opacity: 0.5;
}

.show-banner .gi-header {
	transform: translate(0, 0);
	opacity  : 1;
}

.gi-header.active {
	transform: translateY(0px);
	opacity  : 1;
}

.gi-header {
	box-shadow     : 0 0 5px rgba(0,0,0,0.25);
	position       : fixed;
	opacity        : 0;
	top            : 0;
	transform      : translate(0, -50px);
	transition     : all 0.3s;
	z-index        : 15;
	width          : 100%;
	background     : #000;
	color          : white;
	font-family    : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform : uppercase;
	line-height    : 1;
	letter-spacing : 0.5px;
	display        : flex;
	justify-content: space-between;
	align-items    : left;
}

.gi-header__meta {
	text-align : right;
	display    : flex;
	align-items: center;
}

.gi-header__pub {
	font-size  : 10px;
	line-height: 1.5;
}

.gi-share {
	margin: 0 1rem;
}

.gi-share ul {
	display: flex;
}

.gi-share ul li {
	margin-left: 1rem;
}

.gi-series-banner {
	height: 50px;
}

.gi-series-banner img.gi-header_logo {
	width       : 50px;
	height      : 50px;
	margin-right: 10px;
	top         : 0;
	left        : 0;
}

.gi-series-banner h1.gi-series-title {
	position   : absolute;
	top        : 17px;
	left       : 60px;
	font-size  : 14px;
	font-weight: bold;
}

.gi-series-banner h1.gi-series-title span.gi-series-subtitle {
	color      : #777;
	font-size  : 12px;
	font-weight: normal;
}
@media (min-width: 768px) {
	.gi-header {
		height       : 50px;
		border-bottom: none;
	}
}

a.js-gi-share {
	color: #fff;
}

.gi-share a.gi-share_all {
	display     : inline-block;
	width       : 28px;
	height      : 28px;
	margin-right: 10px;
	padding-top : 5px;
	color       : #fff;
	text-align  : center;
}

.gi-share a.gi-share_facebook {
	background: #3b579d;
}

.gi-share a.gi-share_twitter {
	background: #2caae1;
}

.gi-share a.gi-share_email {
	background: #666;
}

footer.gi-footer {
	background-color: #eee;
}

footer.gi-footer .gi-footer__legal {
	padding    : 15px 0;
	font-size  : 12px;
	line-height: 1.4;
	text-align : center;
	border-top : 1px #ddd solid;
}

footer.gi-footer .gi-footer__legal a {
	color          : #444;
	text-decoration: none;
}

footer.gi-footer .gi-footer__legal a:hover {
	color: #CE2A23;
}

footer.gi-footer .gi-footer__legal ul {
	margin : 0 auto;
	padding: 0;
}

footer.gi-footer .gi-footer__legal li {
	font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	display    : inline-block;
	list-style : none;
	padding    : 0 6px;
}

footer.gi-footer .gi-footer__copyright {
	padding    : 14px 0;
	color      : #555;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size  : 10px;
	line-height: 1.4;
	text-align : center;
	border-top : 1px solid #ddd;
}

footer.gi-footer .gi-footer__copyright address {
	margin                : 0;
	font-style            : normal;
	font-weight           : normal;
	-webkit-font-smoothing: antialiased;
}

footer.gi-footer .gi-footer__copyright abbr {
	border: none;
}

.gi-photo {
	position   : relative;
	width      : 100%;
	margin-left: 0;
	display    : block;
	margin-top : 2rem;
}

.gi-photo h3 {
	text-align    : left;
	margin        : 0;
	padding       : 0;
	font-size     : 1.2rem;
	line-height   : 1.2;
	margin-bottom : 1rem;
	text-transform: none;
	border        : none;
}

.gi-photo h3:after {
	border: none;
}
@media (min-width: 768px) {
	.gi-photo {
		margin-top: 3rem;
	}
}

.gi-photo-caption {
	display      : inline-block;
	margin-top   : 0.8rem;
	margin-bottom: 3rem;
	color        : #777;
	font-family  : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size    : 0.8em;
	line-height  : 1.4em;
	position     : relative;
}
@media (min-width: 768px) {
	.gi-photo-caption {
		font-size: 0.7em;
	}
}

.gi-photo img {
	display   : block;
	width     : 100%;
	opacity   : 0;
	transition: opacity 1s;
}

.gi-photo img.loaded {
	opacity: 1;
}

.gi-photo--lrg {
	width      : 100%;
	margin-left: -gutter();
}

.gi-photo--sml {
	width: 100%;
}
@media (min-width: 768px) {
	.gi-photo--sml {
		float      : right;
		max-width  : 300px;
		margin-left: 2rem;
	}
}

.gi-photo--doc {
	margin-bottom: 3rem;
}

.gi-photo-quote.active {
	opacity  : 1;
	transform: translateY(0);
}
@media (min-width: 1260px) {
	.gi-photo-quote.active {
		opacity  : 1;
		transform: translateY(0);
	}
}

.gi-photo-quote {
	font-family  : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size    : 1.3rem;
	line-height  : 1.2em;
	margin-bottom: 1.2rem;
}

.gi-photo-quote.gi-photo-quote--doc {
	margin-top   : 1.2rem;
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.gi-photo-quote {
		font-size    : 1.5rem;
		line-height  : 1.2em;
		margin-bottom: 1.5rem;
	}
}
@media (min-width: 1260px) {
	.gi-photo-quote {
		opacity                   : 0;
		transform                 : translateY(1rem);
		transition                : all 0.8s;
		transition-timing-function: ease-out;
		width                     : 35%;
		float                     : right;
		margin-right              : calc(-2.2rem - 35%);
		margin-top                : 2.5rem;
		margin-bottom             : 0;
	}

	.gi-photo-quote.gi-photo-quote--left {
		float      : left;
		margin-left: calc(-2.2rem - 35%);
		text-align : right;
	}

	.gi-photo-quote.gi-photo-quote--left cite {
		text-align: right;
	}

	.gi-photo-quote.gi-photo-quote--doc {
		position  : absolute;
		top       : 0;
		margin-top: 1rem;
	}
}
@media (min-width: 1440px) {
	.gi-photo-quote {
		font-size   : 1.5rem;
		line-height : 1.15em;
		width       : 45%;
		margin-right: calc(-2.2rem - 45%);
	}

	.gi-photo-quote.gi-photo-quote--left {
		margin-left: calc(-2.2rem - 45%);
	}
}

.gi-photo-quote cite {
	display       : block;
	font-family   : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align    : left;
	font-style    : normal;
	text-transform: uppercase;
	font-size     : 0.7rem;
	line-height   : 1.1rem;
	margin-top    : 0.8rem;
}
@media (max-width: 414px) {
	.gi-photo--lrg {
		margin-left: 0;
	}
}

.gi-photo--fb {
	width      : 100vw;
	margin-left: calc( 0px - (100vw - 100%)/2);
}
@media (min-width: 768px) {
	.gi-photo--lrg {
		width      : 90vw;
		margin-left: calc( 0px - (90vw - 620px)/2);
	}
}
@media (min-width: 940px) {
	.gi-photo--lrg {
		width      : 75vw;
		margin-left: calc( 0px - (75vw - 620px)/2);
	}
}

.powa-shot-play-btn {
	width      : 70px;
	height     : 70px;
	bottom     : 20px !important;
	left       : 20px !important;
	text-indent: -1000em;
	border     : 1px solid #666;
}
@media (min-width: 768px) {
	.powa-shot-play-btn {
		width : 82px;
		height: 82px;
		bottom: 30px !important;
		left  : 30px !important;
	}
}

.powa-shot-play-btn:after {
	position    : absolute;
	content     : '';
	width       : 0;
	height      : 0;
	border-style: solid;
	border-color: transparent transparent transparent #ffffff;
	border-width: 18px 0 18px 32px;
	top         : 16px;
	left        : 20px;
}
@media (min-width: 768px) {
	.powa-shot-play-btn:after {
		top         : 18px;
		left        : 24px;
		border-width: 22px 0 22px 36px;
	}
}

.powa-shot-play-btn:hover {
	opacity: 0.9;
}

.top-grp {
	margin-top    : 0;
	position      : relative;
	margin-left   : calc( 0px - (100vw - 100%)/2);
	width         : 100vw;
	padding       : 0 1rem;
	background    : #fff;
	color         : #111;
	font-family   : "PrattRegular",Georgia,"Times New Roman",serif;
	padding-bottom: 0;
}

.top-grp .bg {
	background : #000;
	margin-left: calc( 0px - (100vw - 100%)/2);
	width      : 100vw;
	text-align : center;
}
@media (orientation: landscape) {
	.top-grp .bg {
		height    : 100vh;
		max-height: 60vh;
	}
}

.top-grp .bg-img {
	height: 100%;
	margin: auto 0;
}
@media (orientation: portrait) {
	.top-grp .bg-img {
		display: block;
		width  : 100%;
		height : auto;
	}
}
@media (orientation: landscape) {
	.top-grp .bg-img {
		width     : auto;
		max-height: 60vh;
	}
}

.top-grp .top-grp_content {
	margin       : 0 auto;
	padding-top  : 1rem;
	position     : relative;
	max-width    : 640px;
	margin-bottom: 0;
}

.top-grp .top-grp_content.top-grp_content--nophoto {
	margin-top: 4rem;
}
@media (min-width: 768px) {
	.top-grp .top-grp_content {
		margin: 2rem auto;
	}
}
@media (min-width: 768px) {
	.top-grp {
		margin: 0 auto;
	}
}

.top-grp .gi-series-subtitle {
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06rem;
	display       : inline-block;
	margin-bottom : 0.2rem;
	font-weight   : normal;
	font-size     : 1.1rem;
}

.top-grp h1 {
	position      : relative;
	font-weight   : normal;
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform: uppercase;
	letter-spacing: -0.01rem;
	font-size     : 2.3rem;
	line-height   : 0.95em;
	margin-bottom : 0.5rem;
}
@media (min-width: 400px) {
	.top-grp h1 {
		font-size: 2.3rem;
	}
}
@media (min-width: 768px) {
	.top-grp h1 {
		font-size    : 3.4rem;
		line-height  : 0.9em;
		margin-bottom: 1.2rem;
	}
}

.top-grp .deck {
	font-family   : "PrattRegular",Georgia,"Times New Roman",serif;
	text-rendering: geometricPrecision;
	font-weight   : normal;
	margin        : 0;
	line-height   : 1.4em;
}
@media (min-width: 768px) {
	.top-grp .deck {
		font-size    : 1.4rem;
		line-height  : 1.4em;
		margin-bottom: 1rem;
	}
}

.top-grp .meta {
	text-rendering: geometricPrecision;
	font-family   : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.09rem;
	line-height   : 1.6em;
}

.top-grp .meta strong {
	font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.top-grp .meta.link {
	font-family    : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-decoration: none;
	color          : #CE2A23;
	display        : block;
}

.gi-header_logo {
	width   : 50px;
	top     : 1rem;
	left    : 1rem;
	z-index : 1;
	position: absolute;
}
@media (max-width: 375px) {
	.top-grp .top-grp_content {
		margin-top: 20px;
	}
}

.top-grp-invert {
	background    : #333;
	color         : white;
	padding-bottom: 3rem;
}
@media (min-width: 768px) {
	.top-grp-invert {
		padding-bottom: 6rem;
	}
}

.top-grp-invert .top-grp_content {
	padding: 6rem 0 0;
	margin : 0 auto;
}

.top-grp-invert.top-grp-fullscreen .top-grp_content {
	padding-top: 0;
}

.top-grp-fullscreen {
	height: 100vh;
}

.top-grp-fullscreen .top-grp_content {
	width    : 70%;
	margin   : 0 auto;
	position : absolute;
	top      : 50%;
	left     : 50%;
	transform: translate(-50%, -50%);
	max-width: 640px;
}
@media (min-width: 768px) {
	.top-grp-fullscreen .top-grp_content {
		margin: 0 auto;
	}
}

.top-grp-fullscreen .bg {
	height: 100vh;
}

.top-grp-overlay .bg {
	position           : absolute;
	width              : 100vw;
	top                : 0;
	left               : 0;
	background-size    : cover;
	background-repeat  : no-repeat;
	background-position: center;
	z-index            : 0;
}

.top-grp-overlay .bg-img {
	position: absolute;
	width   : 100vw;
	top     : 0;
	left    : 0;
	z-index : 0;
}

.fb-top {
	width        : 100vw;
	margin-left  : 0;
	background   : #ddd;
	height       : 80vh;
	position     : relative;
	margin-bottom: 2rem;
}

.gi-stack div {
	position: absolute;
	top     : 0;
	left    : 0;
}

.bg-img-1 {
	width              : span(12);
	background         : #ddd;
	height             : 80vh;
	background-image   : url("http://www.theglobeandmail.com/static/interactive/angeline-pete/images/angeline_top_before.jpg");
	background-size    : cover;
	background-position: center;
	position           : relative;
}
@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.bg-scroll-trigger {
	position: absolute;
	top     : -250px;
	left    : 0;
	width   : 10px;
	height  : 1px;
	z-index : 100;
}

.banner-scroll-trigger {
	position: absolute;
	top     : 0;
	left    : 0;
	width   : 10px;
	height  : 1px;
	z-index : 100;
}

.bg-img-2 {
	width              : span(12);
	background         : #ddd;
	height             : 80vh;
	background-image   : url("http://www.theglobeandmail.com/static/interactive/angeline-pete/images/angeline_top_after.jpg");
	background-size    : cover;
	background-position: center;
	position           : relative;
	transition         : opacity 1s;
	opacity            : 1;
}

.active .bg-img-2 {
	opacity: 0;
}

.bg-cover {
	width           : span(12);
	height          : 80vh;
	background-image: linear-gradient(to left top, #000, #000);
	position        : relative;
	transition      : opacity 1s;
	opacity         : 0;
}

.active .bg-cover {
	opacity: 0.5;
}

.bg-title {
	width     : span(12);
	height    : 80vh;
	position  : relative;
	opacity   : 0;
	transition: opacity 1s;
}

.active .bg-title {
	opacity: 1;
}

.bg-title .bg-title-grp {
	text-align: center;
	top       : 80%;
	width     : 100%;
	color     : white;
	padding   : 0 1rem;
	transform : translateY(-50%);
	position  : absolute;
}

.bg-title .bg-title-grp h2 {
	line-height   : 1em;
	text-transform: uppercase;
	font-weight   : normal;
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 3rem;
}

html * {
	box-sizing: border-box;
}

body,
html {
	margin     : 0 auto;
	font-size  : 18px;
	line-height: 28px;
	overflow-x : hidden;
}
@media (min-width: 768px) {
	body,
	html {
		font-size  : 20px;
		line-height: 36px;
	}
}

b,
h1,
h2,
h3,
h4,
i,
li,
p,
strong {
	font-weight: normal;
}

.ed-note {
	margin    : 2rem 0;
	padding   : 2rem;
	border    : rebeccapurple 3px solid;
	text-align: center;
	color     : rebeccapurple;
}

.article {
	max-width: 640px;
	margin   : 2rem 1rem;
}
@media (min-width: 768px) {
	.article {
		margin: 2rem auto;
	}
}

.article-copy {
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.article-copy {
		margin-top: 4rem;
	}
}

p.gi-lead::first-letter {
	position     : relative;
	margin-top   : 14px;
	padding-right: 8px;
	float        : left;
	font-family  : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size    : 3.3rem;
	line-height  : 1.6rem;
	opacity      : 1;
	color        : #111;
}
@media (min-width: 768px) {
	p.gi-lead::first-letter {
		font-size  : 3.6rem;
		line-height: 2.2rem;
	}
}

p > a {
	text-decoration: underline;
	color          : #111;
}

p > em > a {
	text-decoration: underline;
	color          : #111;
}

.end {
	width        : 100%;
	text-align   : center;
	color        : #999;
	margin-top   : 4em;
	position     : relative;
	margin-bottom: 4em;
}

.end > div {
	display   : inline-block;
	background: white;
	padding   : 1em;
	z-index   : 10;
	position  : relative;
}

.end:after {
	content   : " ";
	width     : 100%;
	height    : 1px;
	background: #999;
	position  : absolute;
	left      : 0;
	top       : 50%;
	z-index   : 0;
}

.credits {
	font-size     : 0.6rem;
	line-height   : 1.5em;
	font-family   : 'GMSansC', Helvetica, Arial, sans-serif;
	position      : relative;
	padding-top   : 3rem;
	padding-bottom: 3rem;
	color         : #666;
	margin-bottom : 0;
}

.gi-bg_light {
	background : #efefef;
	padding-top: 2em;
}

.gi-bg_dark {
	color      : #111;
	background : #ddd;
	padding-top: 2em;
}

.txt-col {
	max-width: 640px;
	margin   : 0 auto;
}

.end {
	width        : 100%;
	text-align   : center;
	color        : #999;
	position     : relative;
	margin-top   : 2em;
	margin-bottom: 2em;
}

.end > div {
	display   : inline-block;
	background: white;
	padding   : 1em;
	z-index   : 10;
	position  : relative;
}

.end:after {
	content   : " ";
	width     : 100%;
	height    : 1px;
	background: #999;
	position  : absolute;
	left      : 0;
	top       : 50%;
	z-index   : 0;
}

p.email-tag {
	margin-bottom: 60px;
}

h2 {
	text-align    : center;
	font-weight   : normal;
	line-height   : 1.2em;
	font-size     : 2.1rem;
	position      : relative;
	margin-bottom : 2rem;
	margin-top    : 2rem;
	letter-spacing: 0;
	font-family   : "PrattRegular",Georgia,"Times New Roman",serif;
	color         : #111;
}

h2.subhead {
	margin-top    : 4rem;
	padding-bottom: 2rem;
}

h2.subhead:after {
	content      : " ";
	position     : absolute;
	width        : 200px;
	border-bottom: 2px solid #000;
	bottom       : 0;
	left         : 50%;
	transform    : translate(-50%, 0);
}

h2:after {
	content      : " ";
	position     : absolute;
	width        : 200px;
	border-bottom: 2px solid #000;
	bottom       : 0;
	left         : 50%;
	transform    : translate(-50%, 0);
}
@media (min-width: 768px) {
	h2 {
		line-height: 1.2em;
		font-size  : 2.4rem;
	}
}

h3 {
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 1.4rem;
	letter-spacing: 0.02rem;
	text-transform: uppercase;
	line-height   : 1.2em;
	margin-top    : 1rem;
	margin-bottom : 0.6rem;
}
@media (min-width: 768px) {
	h3 {
		font-size  : 30px;
		line-height: 36px;
	}
}

h4 {
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 16px;
	letter-spacing: 0.06rem;
	text-transform: uppercase;
	line-height   : 17px;
	margin-top    : 1rem;
	margin-bottom : 0;
}

.giChartEmbed {
	margin: 4rem 0;
}

em,
i {
	font-family: "PrattItalic",Georgia,"Times New Roman",serif;
	font-weight: normal;
}

.related {
	margin-top: 3rem;
	background: #ddd;
	color     : #111;
}

.related h3 {
	font-family  : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight  : regular;
	font-size    : 1.4rem;
	line-height  : 1.2;
	margin-top   : 0.6rem;
	margin-bottom: 1.4rem;
}

.related h3.subhead {
	font-size    : 1.1rem;
	margin-bottom: 0.6rem;
}
@media (min-width: 768px) {
	.related h3 {
		font-size: 1.5rem;
	}
}

.related h5 {
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight   : regular;
	margin-bottom : 0;
	text-transform: uppercase;
	font-size     : 0.8rem;
	line-height   : 1rem;
}

.related .label {
	font-size     : 0.6rem;
	line-height   : 0.8rem;
	text-transform: uppercase;
	color         : #666;
	margin        : 0.6rem 0 -0.3rem;
}

.related .pointer {
	cursor       : pointer;
	padding      : 0.8rem 0;
	border-bottom: #bbb solid 1px;
}

.related .pointer:hover .meta h4,
.related .pointer:hover .meta p {
	color: #111;
}

.related .pointer:hover .thumb {
	opacity: 0.9;
}

.related .pointer img {
	width     : 100%;
	background: #ddd;
	display   : block;
	margin-top: 0;
}

.related .pointer .thumb {
	transition    : opacity 0.5s linear;
	display       : inline-block;
	vertical-align: top;
	opacity       : 1;
	width         : 100%;
	margin-bottom : 0.2rem;
}
@media (min-width: 768px) {
	.related .pointer .thumb {
		width: 30%;
	}
}

.related .pointer .meta {
	margin-bottom : 1rem;
	margin-left   : 0;
	display       : inline-block;
	font-family   : 'GMSansC';
	margin-left   : 1rem;
	color         : #111;
	vertical-align: top;
}
@media (min-width: 768px) {
	.related .pointer .meta {
		width: calc(70% - 1rem);
	}
}

.related .pointer .meta h4 {
	font-family   : "PrattRegular",Georgia,"Times New Roman",serif;
	font-size     : 1em;
	line-height   : 1.4em;
	letter-spacing: 0.02rem;
	font-weight   : normal;
	margin        : 0.5rem 0 0;
	text-transform: none;
}

.related .pointer .meta p {
	transition : color 0.3s 0.1s linear;
	font-size  : 0.9rem;
	line-height: 1.6em;
	margin     : 0;
}

.related .note {
	font-size     : 0.6rem;
	line-height   : 0.8rem;
	margin-top    : 1rem;
	text-align    : center;
	font-family   : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform: uppercase;
	color         : #666;
}
@media (max-width: 414px) {
	.related {
		margin-top: 3em;
	}

	.txt-col {
		max-width: 320px;
	}

	.related .pointer .meta {
		margin-left: 0;
	}

	h3.subhead {
		margin-top: 2em;
	}
}
@media (max-width: 320px) {
	.txt-col {
		max-width: 280px;
	}
}

.series-pointer {
	display      : none;
	margin-top   : 2rem;
	margin-bottom: 2rem;
	border-top   : 2px solid #222;
	padding-top  : 1rem;
}

.series-pointer h2 {
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	display       : inline-block;
	margin-bottom : 0;
	font-weight   : normal;
	font-size     : 1.1rem;
	line-height   : 1.3;
	margin-top    : 0;
	margin-bottom : 1rem;
	text-align    : left;
}

.series-pointer h2:after {
	content: none;
}

.series-pointer h3 {
	font-size  : 0.8rem;
	line-height: 1rem;
}

.series-pointer p {
	font-family   : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 0.8rem;
	line-height   : 1.5;
	border-bottom : 1px solid #ddd;
	padding-bottom: 0.8rem;
}

.series-pointer a {
	display        : block;
	text-decoration: underline;
}

.series-pointer a:hover {
	color: #CE2A23;
}

.series-pointer ul {
	font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.series-pointer li {
	list-style   : none;
	margin-bottom: 0.6rem;
	font-size    : 0.65rem;
	line-height  : 1.6;
}

.series-pointer li.note {
	font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	margin-top : 1rem;
}
@media (min-width: 768px) {
	.series-pointer {
		display    : block;
		float      : right;
		max-width  : 300px;
		margin-left: 2rem;
	}
}

.series-pointer__subtitle {
	font-family   : "PrattRegular",Georgia,"Times New Roman",serif;
	text-transform: none;
}

.big-number {
	position      : relative;
	width         : 100%;
	padding-bottom: 100%;
	background    : #222;
	margin        : 2rem 0;
}
@media (min-width: 768px) {
	.big-number {
		float         : right;
		max-width     : 300px;
		padding-bottom: 300px;
		margin-left   : 2rem;
	}
}

.big-number img {
	position: absolute;
	width   : 100%;
	top     : 0;
	left    : 0;
	z-index : -1;
	display : block;
}

.big-number .content {
	top        : 50%;
	transform  : translate(-50%, -50%);
	left       : 50%;
	position   : absolute;
	padding    : 0;
	color      : white;
	text-align : center;
	font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 1em;
	width      : 80%;
}

.big-number .content .value {
	font-size    : 3rem;
	font-family  : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height  : 1em;
	margin-bottom: 1rem;
}

.big-number .content .description {
	font-size: 0.7rem;
}

.big-number .content .source {
	text-transform: uppercase;
	font-size     : 0.7rem;
	letter-spacing: 0.1rem;
	margin-top    : 1rem;
}

.pullquote {
	padding    : 4rem 0;
	margin-left: 0;
	width      : calc(100% + 0em);
}

.pullquote quote {
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 1.6rem;
	line-height   : 1.2em;
	display       : block;
	margin-bottom : 1rem;
	letter-spacing: 0;
}
@media (min-width: 768px) {
	.pullquote quote {
		font-size    : 2rem;
		margin-bottom: 1rem;
		line-height  : 1.1em;
	}
}

.pullquote cite {
	display       : block;
	font-family   : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align    : left;
	font-style    : normal;
	text-transform: uppercase;
	font-size     : 0.8rem;
	line-height   : 1.2rem;
}

.single-profile {
	text-align   : center;
	padding      : 2rem 1rem;
	margin-bottom: 2rem;
}

.single-profile h2 {
	font-family: "Permanent Marker";
	font-weight: regular;
}
@media (min-width: 768px) {
	.single-profile {
		float        : right;
		max-width    : 300px;
		margin-bottom: 0;
	}
}

.single-profile .btn {
	text-transform: uppercase;
	border        : 1px solid #111;
	padding       : 0.5rem 1.5rem;
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 0.7rem;
	border-radius : 3px;
}

.section {
	position      : relative;
	width         : 100%;
	padding-bottom: 100%;
}

.section img {
	position: absolute;
	width   : 100%;
	top     : 0;
	left    : 0;
	z-index : -1;
	display : block;
}

.section h2 {
	opacity      : 1;
	color        : white;
	top          : 50%;
	transform    : translate(-50%, -50%);
	left         : 50%;
	position     : absolute;
	padding      : 0;
	font-size    : 2rem;
	font-family  : 'Permanent Marker';
	line-height  : 1em;
	margin-bottom: 1rem;
	text-align   : center;
}
@media (min-width: 768px) {
	.section h2 {
		font-size    : 3rem;
		margin-bottom: 1rem;
	}
}

.section h2 small {
	display       : block;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 0.7rem;
}

.gi-lookup {
	border-bottom : 1px solid #ddd;
	border-left   : none;
	border-right  : none;
	padding       : 1rem;
	margin        : 0 0 2rem;
	padding-bottom: 2rem;
	text-align    : center;
}

.gi-lookup i {
	margin   : 0 auto;
	font-size: 3rem;
}

.gi-lookup h2 {
	font-family   : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size     : 1.4rem;
	letter-spacing: 0;
	text-transform: uppercase;
	line-height   : 1.2em;
	padding-bottom: 0;
	margin        : 0;
}

.gi-lookup h2:after {
	border: none;
}

.gi-lookup .btn {
	text-decoration: none;
	cursor         : pointer;
	font-family    : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform : uppercase;
	font-size      : 0.7rem;
	line-height    : 1rem;
	display        : block;
	color          : #333;
	border         : 1px solid #bbb;
	padding        : 0.7rem 1rem;
	border-radius  : 3px;
	max-width      : 280px;
	margin         : 0 auto;
	text-align     : center;
	transition     : all 0.3s;
}

.gi-lookup .btn:hover {
	background: #fdfdfd;
}

.resp-card {
	border     : 1px solid #ddd;
	padding    : 0.6rem;
	margin     : 0.5rem 0 1rem 0.6rem;
	text-align : right;
	line-height: 1rem;
	clear      : both;
	width      : 45%;
	float      : right;
}
@media (min-width: 768px) {
	.resp-card {
		width       : 30%;
		float       : right;
		margin-right: 0;
		margin-left : 2rem;
		padding     : 1rem;
	}
}
@media (min-width: 1260px) {
	.resp-card {
		border       : none;
		padding      : 0;
		width        : 28%;
		float        : left;
		margin-bottom: 1.6rem;
		margin-left  : calc(-2.2rem - 28%);
	}
}

.resp-card h2 {
	display      : inline;
	width        : 100%;
	text-align   : right;
	margin       : 0;
	padding      : 0;
	font-size    : 1rem;
	line-height  : 1.5rem;
	border-bottom: 1px solid #222;
}

.resp-card h2:after {
	border: none;
}
@media (min-width: 768px) {
	.resp-card h2 {
		font-size  : 1.2rem;
		line-height: 1.5rem;
	}
}

.resp-card h3 {
	margin-top   : 0.2rem;
	font-size    : 0.6rem;
	line-height  : 0.8rem;
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.resp-card h3 {
		font-size  : 0.7rem;
		line-height: 0.9rem;
	}
}

.resp-card .population {
	border-bottom: 1px solid #ddd;
	padding      : 0 0 0.5rem;
	margin-bottom: 0.7rem;
	margin-top   : 0.2rem;
	font-family  : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size    : 0.55rem;
	line-height  : 0.75rem;
}
@media (min-width: 768px) {
	.resp-card .population {
		font-size  : 0.6rem;
		line-height: 0.9rem;
	}
}

.resp-card .rate .big-num {
	font-family  : "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size    : 2.2rem;
	line-height  : 1.3rem;
	margin-bottom: 0.4rem;
}

.resp-card .rate .label {
	font-family: "GMSansCBold","Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 0.8rem;
	font-size  : 0.6rem;
}
@media (min-width: 768px) {
	.resp-card .rate .label {
		line-height  : 1rem;
		font-size    : 0.75rem;
		margin-bottom: 0.6rem;
	}
}
@media (min-width: 768px) {
	.resp-card .rate .label {
		font-size: 0.8rem;
	}
}

.resp-card .rate .val {
	margin-top: 0.6rem;
}

.resp-card .rate .allegations {
	font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size  : 0.55rem;
	line-height: 0.75rem;
}
@media (min-width: 768px) {
	.resp-card .rate .allegations {
		font-size  : 0.6rem;
		line-height: 0.9rem;
	}
}

.resp-card:hover h2 {
	color       : #CE2A23;
	border-color: #CE2A23;
}

.gi-data {
	display: none !important;
}

.gc-chart .gc-x-axis .tick.gc-minor line {
	visibility: hidden;
}

.gc-chart .gc-x-axis .tick text {
	visibility: hidden;
}

.gc-chart .gc-chart_title-text {
	font-size  : 1.2rem;
	line-height: 1.2;
}

.gc-chart .gc-chart_qualifier,
.gc-chart .gc-chart_qualifier.gc-chart_qualifier-bar {
	font-size  : 16px;
	line-height: 1;
	margin-top : 5px;
}

.gc-chart svg {
	margin-top: 30px;
}

.gc-chart .gc-primary.gc-type_bar .gc-series_group .gc-bar-0 rect {
	opacity: 1;
}

.gc-chart .gc-primary.gc-type_bar .gc-series_group .gc-bar-0 rect.gc-muted {
	opacity: 0.5;
}

.gc-chart .gc-y-axis .tick text {
	font-size  : 0.9rem;
	line-height: 1;
}

.gc-chart .gc-annotation {
	display: block;
	float  : left;
	margin : 0;
	padding: 0;
}

.gc-chart .gc-annotation h3 {
	font-size: 0.9rem;
}

.gc-chart .gc-bar-label.inside,
.gc-chart .gc-primary.gc-type_bar .gc-series_group .gc-series_0 .gc-bar .gc-bar-label.inside {
	color: #fff !important;
	fill : #fff !important;
}

.gc-chart .gc-annotation-line {
	stroke-width: 1px;
	stroke      : #000;
}

.gc-chart .gc-annotation-text {
	fill     : #000000;
	font-size: 12px;
}

#nat-map {
	width        : calc(100%);
	height       : 400px;
	margin-top   : 2rem;
	margin-bottom: 2rem;
}

.form-wrapper {
	margin-top : 60px;
	font-family: "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.form-wrapper h3 {
	text-transform: none;
	border-left   : 10px solid #CF2724;
	padding-left  : 20px;
}

.gi-form-section {
	display       : block;
	float         : left;
	width         : 100%;
	margin        : 0 0 40px;
	padding-bottom: 40px;
	border-bottom : 2px dotted #cccccc;
}

.gi-form-section--no-break,
.gi-form-section.gi-form-header {
	margin-top   : 20px;
	margin-bottom: 0;
	border-bottom: 0;
}

.gi-form-subsection {
	display   : block;
	float     : left;
	width     : 100%;
	margin-top: 20px;
}

.gi-form-question-desc,
.gi-form-question-text {
	display      : block;
	float        : left;
	font-family  : "GMSansC","Helvetica Neue",Helvetica,Arial,sans-serif;
	margin       : 0;
	padding      : 0;
	font-size    : 1.2rem;
	line-height  : 1.2;
	margin-bottom: 10px;
	width        : 100%;
}

.gi-form-question-desc {
	font-size: 0.8rem;
	width    : 100%;
}

.gi-label--text {
	display       : block;
	float         : left;
	width         : 100%;
	padding-bottom: 10px;
}

.gi-label--radio {
	display: block;
	float  : left;
	width  : 100%;
}

.gi-label--checkbox {
	display: block;
	float  : left;
	width  : 100%;
}

.gi-label--checkbox span,
.gi-label--radio span {
	display       : block;
	float         : right;
	width         : 90%;
	margin-bottom : 20px;
	padding       : 0;
	font-size     : 1rem;
	line-height   : 1.3;
	vertical-align:top           :
}

input:placeholder-shown {
	font-size: 0.9rem;
}

.gi-input--checkbox,
.gi-input--radio {
	margin-right: 10px;
	width       : 20px;
	height      : 20px;
	font-size   : 1.2rem;
}

.gi-input--text,
.gi-input--textarea {
	width        : 100%;
	border       : 1px solid #c9c9c9;
	border-bottom: 3px solid #c9c9c9;
	margin-bottom: 20px;
	text-align   : left;
	padding      : 5px;
	font-size    : 1.2rem;
}

.gi-input--textarea {
	min-height: 80px;
}

.qnumber {
	font-weight: bold;
}

a {
	text-decoration: underline;
}