/* ===============
   RESETS AND ACCESSIBILITY
   =============== */
* {
	margin: 0;
	--aside-shadow: 0.1em 0.1em 1em rgb(10 10 10 / 35%);
}
html {
	scroll-behavior: smooth;
}
/* Disables smooth scrolling if the user has enabled reduced motion for accessibility reasons. */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
*:focus {
	/* inner indicator */
	outline: 2px #F5F5F5 solid;
	outline-offset: 0;
	/* outer indicator */
	box-shadow: 0 0 0 4px #121212;
}
.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip:focus {
  position: static;
  width: auto;
  height: auto;
  color: #121212;
  background: #F5F5F5;
  padding: .3em;
}

/* ===============
   BODY AND GENERAL
   =============== */
body {
	background-color: #F5F5F5;
	font-size: 16px;
	line-height: 1.1;
	color: #121212;
	font-family: 'Atkinson Hyperlegible';
	font-weight: 400;
	width: 100%;
	padding: 0;
	margin: 0;
}
hr {
	border-top: 1px solid #999999;
	width: 80%;
	text-align: center;
	margin: 20px auto;
}
button {
	font-weight: bold;
}

/* IMAGES */
img {
	align-self: start;
}
.news-image {
	max-width: 100%;
}
.image-right {
	float: right;
	margin-left: 20px;
	margin-bottom: 10px;
}
.video-embed {
	width: 560px;
	height: 310px;
	margin: 1em 0;
}

/* ===============
   FONT STYLES
   =============== */
.red {
	color: #D7211E;
}
.container {
	font-size: 1.25em;
	line-height: 1.3;
}
.container
.wrap-centered {
	text-align: center;
}
.wrapper p, .wrapper li, .wrapper-full p, .wrapper-full li {
	margin-bottom: .6em;
}
aside.wrapper-full p:last-child, .milestone p:last-child {
	margin-bottom: 0;
}
.indent {
	margin-left: 32px;
	margin-top: 8px;
	margin-bottom: 8px;
}
p.larger, li.larger, a.larger {
	font-size: 1.2em;
}
.action p.larger {
	font-size: 1.5em;
}
p.smaller, li.smaller {
	font-size: .8em;
}
p.centered, div.centered {
	align-items: center;
}
.container ul {
	padding-left: 1.5em;
}

.post {
	display: flex;
	flex-direction: column;

	margin: 0 5px .6em;
	padding: 20px;
	padding-bottom: 5px;
	border: 2px solid #DDDDDD;
	font-size: 20px;
	line-height: 1.1;
	color: #121212;
	font-family: 'Atkinson Hyperlegible';
	resize: none;
}

.post p:first-child {
	margin-bottom: 0;
}

.post p:nth-child(2) {
	font-size: 0.7em;
}

.post div {
	margin-top: auto;
}

.featured-columns p:first-child, #primer p, #danaher p, #twist p, #profits p, #join li {
	font-size: 1.2em;
}

/* LINKS */
a {
	color: #121212;
	font-weight: 700;
	text-decoration: underline;
	text-shadow: none;
}
a:hover, a:active, a:focus {
	color: #D7211E;
	text-shadow: none;
}

a.red:hover, a.red:active, a.red:focus {
	color: #121212;
	text-shadow: none;
}

a[target="_blank"]:not(:has(img))::after {
	position: relative;
	display: inline-block;
	content: url('../img/arrow-up-right-from-square-solid.svg');
	height: 12px;
	width: 12px;
	margin: 0 3px;
}
.smaller a[target="_blank"]:not(:has(img))::after {
	height: 10px;
	width: 10px;
	margin: 0 3px;
}
a:has(img) {
	display: inline-block;
}

/* HEADERS */
h1 {
	font-size: 3.5em;
}

h2 {
	font-size: 2.5em;
}
h3 {
	font-size: 1.8em;
}
h4 {
	font-size: 1.4em;
}
h1, h2, h3, h4 {
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0.6em;
}
.container-compact h2 {
	margin-top: .7em;
}

/* BUTTONS */

.button {
	display: inline-block;
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	padding: .6em 1em;
	text-decoration: none;
}
button {
	font-family: 'Atkinson Hyperlegible';
}

button:hover {
	cursor: pointer;
}
.return-button {
	margin: 2em 0;
}
.container .button, .container button {
	background-color: #BC1C1A;
	border: 4px solid #BC1C1A;
	color: #F5F5F5;
	margin: .5em 0;
	transition: all 0.2s ease-in-out;
	font-size: inherit;
}
.button-centered {
	text-align: center;
}
.join-right .button-centered {
	margin-left: 1em;
	width: calc(100% - 4em - 8px);
}
.button-full {
	width: 100%;
}
.container .button:hover, .container .button:active, .container .button:focus  {
	background-color: #121212;
	border-color: #121212;
}
.container .button-subtle, .container-full .button-subtle {
	background-color: transparent;
	color: #BC1C1A;
}
.container .button-subtle:hover, .container .button-subtle:active, .container .button-subtle:focus {
	background-color: #F5F5F5;
	color: #121212;
	border-color: #121212;
}
.post button, .post .button,
.post-gallery button, .post-gallery .button {
	font-size: .7em;
}
button, .button{
	line-height: 1.1;
}

/* FEATURED */

p.featured {
	display: block;
	background-color: #DDDDDD;
	text-align: center;
	padding: 10px 15px;
	margin: 0 1em .6em;
	box-shadow: var(--aside-shadow);
}

.featured-columns {
	margin-top: 2em;
	padding: 1em 2em;
	background-color: #DDDDDD;
	box-shadow: var(--aside-shadow);
}
.featured-columns .button, .featured-columns .button-subtle {
	margin: .125em .5em;
	width: 200px;
	padding: .5em .8em;
}

/* ===============
   PAGE HEADER
   =============== */
#site-head {
	position: relative;
	z-index: 10;
	width: 100%;
	background-color: #BC1C1A;
	color: #121212;
	font-size: 1em;
	font-weight: 700;
	vertical-align: middle;
	padding: 40px 0;
}
.wrapper-head {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	display: block;
}
h1.page-title {
	margin-bottom: 0;
	text-transform: uppercase;
	font-size: 3.0em;
	display: inline-block;
}
.page-title .black-highlight {
	background-color: #121212;
	padding: 0 4px;
}
.page-title a {
	text-decoration: none;
	color: #F5F5F5;
}
.page-title a:hover, .page-title a:focus, .page-title a:active {
	color: #F5F5F5;
	background-color: #121212;
}


/* LINKS */
.site-menu {
	vertical-align: middle;
	float: right;
}
.site-menu ul {
	display: inline-block;
	list-style: none;
	padding-left: .25em;
	background-color: #BC1C1A;
}
.site-menu ul li {
	float: left;
	margin-bottom: 0;
	list-style: none;
}
.site-menu a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	padding: .75em;
	transition: all 0.2s ease-in-out;
	font-size: 1.25em;
	color:#F5F5F5;
}
.site-menu a:hover, .site-menu a:focus, .site-menu a:active {
	color: #F5F5F5;
	background-color: #121212;
}
a.toggle-button {
	display: none;
}

/* FORMS */
input[type=text], input[type=email] {
	border-color: #DDDDDD;
	box-sizing: border-box;
	margin-top: 0.5em;
	box-shadow: none;
	border-style: solid;
	padding: 0.3em 0.3em;
	font-size: inherit;
	line-height: 1.1;
	color: #121212;
	font-family: 'Atkinson Hyperlegible';
}

input[type=text]:focus, input[type=email]:focus {
	border-color: #BC1C1A;
	outline: none;
	box-shadow: none;
}

input[type=checkbox] {
	box-shadow: none;
	accent-color: #BC1C1A;
}

input[type=checkbox]:focus {
	outline-offset: 1px;
	outline: 2px solid #121212;
}
.list-form {
	font-size:.9em;
}
.list-form label {
	display: inline-block;
	margin-top: .4em;
}


/* ===============
   PAGE CONTAINERS
   =============== */
.container {
	display: block;
	width: 100%;
	background-repeat: no-repeat;
}
.homepage .container {
	display: flex;
	padding: 60px 0;
	min-height: calc(100vh - 120px);
	justify-content: space-around;
	flex-direction: column;
	background-size: cover;
}
.container-full {
	padding: 60px 0px;
}
.container-compact {
	padding: 20px 0px;
}
.container-compact.title {
	display: block;
	width: 100%;
	padding: 60px 0px 20px;
	background-repeat: no-repeat;
}

/* ===============
   CONTENT WRAPPERS
   =============== */
.wrapper {
	margin: 0 auto;
	display: block;
	width: 99.9%;
	max-width: 900px;
	clear: both;
	position: relative;
	z-index: 4;
}
.wrapper-space {
	margin-bottom: 1.5em;
}
.wrapper-full {
	margin: 0 auto;
	display: block;
	width: 80%;
	max-width: 1260px;
}
.wrapper-page {
	display: block;
	width: 100%;
}
.wrapper-columns { /* auto-width column children*/
	display: flex;
	flex-direction: row;
	gap: 1em;
}
.wrapper-columns .post {
	width: 33.33%;
	/* padding-bottom: 1em; */
}
.post-gallery {
	vertical-align: top;
	margin: .5em auto 1em;

	background-color: #DDDDDD;
	padding: 10px 15px;
	margin-bottom: 0.4em;
	box-shadow: var(--aside-shadow);
}

.post-gallery div:first-child {
	display: flex;
	flex-direction: column;
	align-content: center;
	flex-wrap: wrap;
	height: 21em;
	justify-content: center;
}

.post-gallery div:nth-child(2) {
	width: 80%;
	max-width: 600px;
}

.post-gallery img {
	max-height: 20em;
	max-width: 100%;
	vertical-align: top;
	box-shadow: var(--aside-shadow);
}

aside.wrapper-full {
	margin: 30px auto;
	padding: 20px;
	background-color: #DDDDDD;
	margin-bottom: 20px;
	box-shadow: var(--aside-shadow);
}

/* TIMELINE */
.container-timeline .wrapper-full {
	display: flex;
	width: 80%;
	max-width: 1200px;
	gap: 2em;
	flex-direction: row;
}
.container-timeline .date {
	width: 20%;
	font-size: .75em;
	text-align: right;
}
.container-timeline .item {
	width: 80%;
}
.container-timeline:nth-child(even)  {
	background-color: #DDDDDD;
}
.container-timeline:nth-child(odd) .wrapper-full {
	flex-direction: row-reverse;
}
.container-timeline:nth-child(odd) .date {
	text-align: left;
}

/* ORG LOGO GRID */
.wrapper-logo-grid {
	vertical-align: top;
}
.grid-one-logo {
	padding: 1em;
	text-align: center;
	width: 250px;
	display: inline-block;
	vertical-align: top;
}
.grid-one-logo img {
	max-width: 200px;
}
.grid-one-logo p {
	font-size: 1em;
}

/* ACTIONS GRID */
.wrapper-action-grid .action {
	display: inline-block;
	width: calc(50% - 4.2em);
	margin: 1em 2em;
	vertical-align: top;
}
.action .action-icon {
	height: 1.5em;
	vertical-align: bottom;
	margin-right: .5em;
}

.newsletter-action {
	padding-bottom: 0.5em;
}

.newsletter-action-column {
	max-width: 50%;
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
}

/* Glossary */
table caption {
	text-align: inherit;
}
table th {
	color: #F5F5F5;
	background-color: #121212;
}
.glossary-list {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}
.glossary-list tr td, .glossary-list tr th {
	padding-bottom: 1em;
	padding: 0.5em 0.5em;
}

.glossary-list tr {
	vertical-align: top;
}

.glossary-list tr:nth-child(odd) {
	background: #DDDDDD;
}

/* ===============
   HOMEPAGE SECTION WRAPPERS
   =============== */
#top {
	padding: 3em 0;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}
#top h1 {
	text-transform: uppercase;
	font-size: 2.7em;
	margin-bottom: 1em;
}
#top .intro p {
	font-size: 1.5em;
	line-height: 1.3;
	margin: 0 1em;
}
@keyframes bob {
	0% {
		transform: translatey(0px);
	}

	50% {
		transform: translatey(-15px);
	}

	100% {
		transform: translatey(0px);
	}
}
#top .scroll-arrow {
	width: 28px;
	filter: contrast(0.85);
	animation: bob 3s ease-in-out infinite;
	margin-top: 10vh;
}

.expand-actions-arrow {
	height: 0.8em;
	filter: contrast(0.85);
	rotate: 180deg;
	transition: ease-in-out 0.2s all;
}

.expand-actions-arrow-up {
	rotate: 0deg;
}

.expand-actions-arrow:hover {
	cursor:pointer;
}

@keyframes slide-in {
	0% {
		margin-top: -10px;
		opacity: 0;
	}

	100% {
		margin-top: 0px;
		opacity: 1;
	}
}

@keyframes slide-out {
	0% {
		margin-top: 0px;
		opacity: 1;
	}

	100% {
		margin-top: -10px;
		opacity: 0;
	}
}

.show-actions {
	display: block;
	animation: slide-in 0.3s linear 0s;
}

.hide-actions {
	animation: slide-out 0.3s linear 0s;
	opacity: 0;
	margin-top: -10px;
}

#top .fa-arrow-down:before {
	font-size: 3.0em;
	color: #121212;
}
#top img {
	max-height: 200px;
	margin-bottom: 1em;
}
#primer {
	background-image: url('../img/red-crystal.gif');
	background-attachment: fixed;
	background-position: left center;
}
#twist {
	background-image: url('../img/crystals.gif');
	background-attachment: fixed;
	background-position: center;
}
#danaher {
	background-image: url('../img/lungs.gif');
	background-attachment: fixed;
	background-position: right center;
}
#profits {
	background-image: url('../img/money.gif');
	background-attachment: fixed;
	background-position: left center;
}

h2.action-head {
	font-size: 3.5em;
	text-transform: uppercase;
}
#join li {
	list-style-image: url(../img/check-solid.svg);
}
.join-left {
	width: 40%;
	margin-bottom: 1em;
}
.join-right {
	width: 60%;
	margin-bottom: 1em;
}
#join {
	background-image: url('../img/helix.png');
	background-attachment: fixed;
	background-position: left center;
}

/* ===============
   SITE FOOTER
   =============== */
.site-foot {
	width: calc(100% - 2em);
	color: #505050;
	background-color: #DDDDDD;
	text-align: center;
	font-size: 1em;
	padding: 1em;
}
.site-foot p {
	margin-bottom: 4px;
}
.site-foot a {
	color: #505050;
}
.site-foot a:hover, .site-foot a:active, .site-foot a:focus {
	color: #D7211E;
}
.too-small {
	font-size: 0.8em;
}
.break-anywhere {
	overflow-wrap: anywhere;
}

/* ===============
   MOBILE STYLES AND BREAKPOINTS
   =============== */

@media only screen and (max-width: 1320px) {
	.post p {
		font-size: 18px;
	}
}
@media only screen and (min-width: 993px) {
	.wrapper {
		max-width: 900px;
	}
}

@media only screen and (max-width: 992px) {
	.wrapper-action-grid .action {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: auto;
	}
	.newsletter-action-column {
		max-width: unset;
	}
	.newsletter-action {
		padding-bottom: 0.5em;
	}
	.wrapper {
		width: 90%;
	}
	.wrapper.featured-columns {
   		 width: auto;
	}
	.site-menu {
		width: 100%;
		padding: .5em;
		position: relative;
	}
	.site-menu ul.active {
		display: none;
	}
	.site-menu ul {
		width: 100%;
		position: absolute;
		top: 140%;
		left: 0;
		padding: 0.5em;
	}
	.site-menu ul li {
		margin: 5px 0;
		float: none;
		display: block;
	}
	.site-menu li a {
		display: block;
		font-size: 1.5em;
	}
	a.toggle-button {
		padding: 10px;
		float: right;
		font-size: 1.5em;
		line-height: 1;
		text-decoration: none;
		display: inline-block;
		color: #F5F5F5;
	}
	a.toggle-button::after {
		content: '\2630';
	}
	a.toggle-button.active::after {
		content: '\2716';
	}
	a.toggle-button span {
		font-size: 0;
	}

	.buttons {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.buttons .button {
		width: unset;
	}
}

@media only screen and (max-width: 900px) {
	.container-timeline .wrapper-full, .container-timeline:nth-child(odd) .wrapper-full {
		flex-direction: column;
		gap: 0em;
	}
	.container-timeline .date {
		width: 100%;
		text-align: left;
	}
	.container-timeline .item {
		width: 100%;
	}
	#top img {
		max-width: 150px;
	}
	h2 {
		font-size: 2em;
	}
	h3 {
		font-size: 1.6em;
	}
	.post-gallery img {
		max-width: 100%;
		padding: 0.33em;
	}
	.post-gallery div:nth-child(2) {
		width: 100%;
	}
	.list-form.wrapper-columns {
		flex-direction: row;
		gap: .6em;
		flex-wrap: wrap;
	}
	.list-form div {
		width: 40%;
	}
	.list-form label {
		margin-top: 0;
	}
	.list-form label span {
		display: block;
	}

	.list-form div, .list-form input, .list-form label {
		width: 100%;
	}
	.glossary-list tr td {
		display: block;
	}
	.glossary-list thead {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	body {
		font-size: 14px;
	}
	.button {
		padding: .5em .7em;
		border-width: 2px;
	}
	.join-right .button-centered {
		margin-left: 1em;
		width: calc(100% - 4em + 1px);
	}
	.image-right, .image-left {
		float:none;
		clear: both;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.about-hourglass {
		display: none;
	}
	.wrapper-columns {
		flex-direction: column;
		gap: 0;
	}

	.wrapper-columns .post {
		width: inherit;
	}
	.join-left, .join-right {
		width: 100%;
	}
	.wrapper-full {
		width: 90%;
	}
	#top img {
		align-self: center;
		max-width: 100px;
	}
	.featured-columns {
		margin-bottom: 1.5em;
	}
	.video-embed {
		width: 336px;
		height: 186px;
	}
	a[target="_blank"]:not(:has(img))::after {
		height: 8px;
		width: 8px;
	}
}

@media only screen and (max-width: 650px) {
	body {
		font-size: 12px;
	}
	h1 {
		font-size: 2.5em;
	}
	#top h1 {
		font-size: 3.0em;
		margin-bottom: 0.6em;
	}
	h2 {
		font-size: 2em;
	}
	#join li {
		font-size: 1.5em;
	}
	#join p.larger, #join li.larger {
		font-size: 1.75em;
	}
	ul {
		padding-left: 2em;
	}
	.wrapper-full {
		margin: 0 1em;
		width: auto;
	}
}

@media only screen and (max-width: 560px) {
	.list-form.wrapper-columns {
		flex-direction: column;
	}
}