:root {
	--sans: 'Lab Grotesque', 'LabGrotesque', 'LabGrotIns', sans-serif;
	--serif: TiemposTextWeb, Georgia, Times, serif;
	--mono: Menlo, Consolas, Monaco, 'Courier New', monospace;

	--z-bottom: -100;
	--z-middle: 0;
	--z-top: 100;
	--z-overlay: 1000;

	/*https://tbimedia.s3.us-east-1.amazonaws.com/bistudios/_00/dev_edit/graphics/tools/colors.svg*/
	--black: #000;
	--offblack: #222;
	--gray4: #bcbcbc;
	--gray3: #d3d3d3;
	--gray2: #e8e8e8;
	--gray1: #f8f8f8;
	--white: #fff;
	--blue4: #00007c;
	--blue3: #007eff;
	--blue2: #2eb8ff;
	--blue1: #aef7ff;
	--red3: #930000;
	--red2: #e62828;
	--red1: #e62828;
	--green3: #00896a;
	--green2: #33ba98;
	--green1: #a0f2b8;
	--purple3: #5700d3;
	--purple2: #8d45ff;
	--purple1: #baa4ff;
	--yellow3: #e0b500;
	--yellow2: #ffdc31;
	--yellow1: #fff92e;
	--pink3: #bf005b;
	--pink2: #ff57a7;
	--pink1: #ffbdef;
	--orange3: #db5e00;
	--orange2: #f37d00;
	--orange1: #ffb0b0;

	/* water.css */
	--body-font: var(--sans);
}

html {
	font-size: 14px;
}
body {
	-webkit-font-smoothing: antialiased;
	padding: 12px;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
}

.content-well {
	max-width: 640px;
	margin: 0 auto;
}

.typography {
	font-size: 1.25rem;
	line-height: 1.8;
	color: #111;
}
.typography p {
	margin: 2.15rem 0;
	font-weight: 400;
	font-style: normal;
	font-family: var(--serif);
}
@media (min-width: 960px) {
	html {
		font-size: 16px;
	}
	.typography {
		line-height: 1.65;
	}
}

svg.user {
	width: 100%;
}

svg.user .fill {
	transition: fill .4s ease-out, opacity .4s ease-out;
}

svg.step-0 .fill {
	opacity: 1!important;
}

.low-opacity {
	opacity: .4;
}

.hide  .fill {
	opacity: .75;
	fill: var(--gray2)!important;
}

svg.intro  .fill{
	fill: var(--gray2);
}
svg.establishment  .fill, svg.built-something-new  .fill {
	fill: #6aa84f;
}
svg.politics  .fill, svg.still-in-government  .fill {
	fill: #e06666;
}
svg.media  .fill, svg.anti-trump  .fill{
	fill: #9fc5e8;
}
svg.low-profile  .fill, svg.off-the-grid  .fill {
	fill: #E0A45E;
}

.intro {
	color: var(--gray2);
}
.emphasis-green {
	color: #6aa84f!important;
}
.emphasis-blue {
	color: #9fc5e8!important;
}
.emphasis-red {
	color: #e06666!important;
}
.emphasis-orange  {
	color: #E0A45E!important;
}


.background-grid {
	display: grid;
	grid-gap: 4px;
	max-height: 100vh;
	grid-auto-rows: minmax(min-content, max-content);
	overflow: hidden;
}

svg.user {
	width: 100%;
}

@supports (width: min(1px, 100%)) {
  .background-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(15px, 1.35vh, 100%), 1fr));
  }
}

@media screen and (max-height: 750px) {
	.background-grid {
		grid-gap: 4px;
	}
	@supports (width: min(1px, 100%)) {
		.background-grid {
			grid-template-columns: repeat(auto-fit, minmax(min(13px, 1.5vh, 100%), 1fr));
		}
	}
}

@media screen and (max-width: 600px) {
	.background-grid {
		grid-gap: 4px;
	}
	@supports (width: min(1px, 100%)) {
		.background-grid {
			grid-template-columns: repeat(auto-fit, minmax(min(13px, 1.15vh, 100%), 1fr));
		}
	}
}