@font-face {
	font-family: "AlphaLight";
	src: url(../fonts/Alpha-Light.woff);
	font-weight: normal;
	font-style: normal;
}
#alt-matter {
	font-family: "AlphaLight", sans-serif !important;
	color: rgb(0, 0, 0);
	padding: 1rem;
	height: 50vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	font-weight: 200;
	box-shadow: inset 0 0 10px 0 rgb(0 0 0 / 10%);
}
#alt-matter .small {
      height: calc(50vh - 2rem);
      object-fit: contain;
      max-width: calc(1024px - 2rem);
      width: 100%;
      object-position: left;
      margin:0 auto;
}
#alt-matter .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	object-fit: cover;
	z-index: -1;
}
#alt-matter .bgsmall {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50vh;
	opacity: 1;
	object-fit: cover;
	z-index: -1;
}
#alt-matter #header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: 0;
	user-select: none;
	text-transform: uppercase;
}
#alt-matter #header h1 {
	margin: 0;
	margin-top: 0.6rem;
	line-height: 1;
}
#alt-matter #images {
	display: none;
	padding: 0;
	justify-content: center;
	height: 20rem;
	max-width: 1024px;
	margin: 2rem auto;
}
#alt-matter img {
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}
#alt-matter #text {
	display: none;
	max-width: 1024px;
	margin: 2rem auto;
	padding: 0 1rem;
}
#alt-matter.active {
	height: auto;
}
#alt-matter.active #header {
	cursor: default;
}
#alt-matter.active #images {
	display: flex;
}
#alt-matter.active .hide {
	display: none;
}
#alt-matter .show {
	display: none;
}
#alt-matter.active .show {
	display: block;
	cursor: pointer;
}
#alt-matter.active #text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2rem;
}
#alt-matter #text .span {
	grid-column: span 2;
}
#alt-matter > #text ul {
	list-style: disc !important;
	display: block !important;
}
#alt-matter ul > li {
	padding: 0;
	float: none;
	padding-left: 1rem;
}
figcaption {
	font-size: 0.75rem;
}
#alt-matter li:before {
	content: "–";
	position: absolute;
	top: 0;
	left: 0;
}
@media only screen and (max-width: 1024px) {
	#alt-matter.active #images {
		flex-direction: column;
		height: auto;
	}
}
@media only screen and (max-width: 768px) {
	#alt-matter.active #text {
		grid-template-columns: 1fr;
            padding:0;
	}
	#alt-matter #text .span {
		grid-column: span 1;
	}
}