@charset "utf-8";
/* CSS Document */

body::before {
	position: absolute;
    top: -500000px;
    left: -500000px;
	width: 0px;
	height: 0px;
	visibility: hidden;
	content: url("../images/article1.jpg")			url("../images/article2.jpg")			url("../images/bws1.jpg")				url("../images/bws2.jpg")
			 url("../images/bws3.jpg")				url("../images/bws4.jpg")				url("../images/bws5.jpg")				url("../images/courthouse.jpg")
			 url("../images/decay1.jpg")			url("../images/decay2.jpg")				url("../images/destruction1.jpg")		url("../images/destruction2.jpg")
			 url("../images/destruction3.jpg")		url("../images/destruction4.jpg")   	url("../images/destruction5.jpg")		url("../images/destruction6.jpg")
			 url("../images/destruction7.jpg")		url("../images/destruction8.jpg")		url("../images/destruction10.jpg")		url("../images/destruction11.jpg")
			 url("../images/drexel.jpg")			url("../images/erased.jpg")				url("../images/highway1.jpg")			url("../images/highway2.jpg")
			 url("../images/homeless.jpg")			url("../images/housing.jpg")			url("../images/hrw.jpg")				url("../images/integration.jpg")
			 url("../images/internment3.jpg")		url("../images/internment4.jpg")		url("../images/internment5.jpg")		url("../images/internment6.jpg")
			 url("../images/internment-map.jpg")	url("../images/internment-map2.jpg")	url("../images/kkk.jpg")				url("../images/lawsuit.jpg")
			 url("../images/looting1.jpg")			url("../images/looting2.jpg")			url("../images/looting3.jpg")			url("../images/looting4.jpg")
			 url("../images/loss1.jpg")				url("../images/loss2.jpg")				url("../images/loss3.jpg")				url("../images/loss4.jpg")
			 url("../images/mob.jpg")				url("../images/ng.jpg")					url("../images/ng2.jpg")				url("../images/postcard.jpg")
			 url("../images/postcard2.jpg")			url("../images/postcard3.jpg")			url("../images/rebuilt.jpg")			url("../images/rebuilt2.jpg")
			 url("../images/reconstruction1.jpg")	url("../images/reconstruction2.jpg")	url("../images/reconstruction3.jpg")	url("../images/reconstruction4.jpg")
			 url("../images/renewal1.jpg")			url("../images/renewal2.jpg")			url("../images/retreat.jpg")			url("../images/tent.jpg")
			 url("../images/thriving.jpg")			url("../images/pbs.png")				url("../images/reparations.png")
}

body {
	background-color: black;
	margin-top: 20px;
	margin-bottom: 0px;
	margin-left: 0;
	margin-right: 0;
	z-index: 0;
}

a {
	cursor: pointer;
	border: none;
}

img {
	border: none;
	animation: images ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes images {
 	0% {opacity: 0}
    100% {opacity: 1}
}

/* Top Menu */
.menu-anchor {
	position: absolute;
   	top: 0px;
   	left: 50%;
	margin-left: -360px;
}

.menu {
	background-color: antiquewhite;
	filter: brightness(0.2);
	width: 30px;
	height: 6px;
	animation: top-menu ease 0.01s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
	vertical-align: top;
	position: relative;
	top: 0px;
}

@keyframes top-menu {
 	0% {opacity: 0}
    100% {opacity: 1}
}

.menu:hover {
	background-color: brown;
	filter: brightness(0.75);
	height: 8px;
}

.menu-on {
	background-color: brown;
	filter: brightness(0.75);
	width: 30px;
	height: 8px;
	vertical-align: top;
	position: relative;
	top: 0px;
}

.menu-update {
	background-color: olivedrab;
	filter: brightness(0.75);
	width: 30px;
	height: 8px;
	vertical-align: top;
	position: relative;
	top: 0px;
}


.menu-adjust {
	position: relative;
	top: -20px;
}

/* Header */
.anchor {
	position: absolute;
	top: 50%;
	margin-top: -100px;
	right: 50%;
	margin-right: -110px;
	animation: anchor ease 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes anchor {
	0% {opacity: 0}
    100% {opacity: 1}
}

.timeline {
	font-family: Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 20px;
	font-weight: bold;
	color: antiquewhite;
}

.greenwood {
	font-family: Impact, Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 45px;
	font-weight: normal;
	font-style: normal;
	color: olivedrab;
}

.subdued {
	font-family: Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 17px;
	font-weight: bold;
	font-style: italic;
	color: antiquewhite;
	opacity: 0.35;
}

.date {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 17px;
	font-style: normal;
	color: darkred;
	font-weight: bold;
	filter: contrast(3.0);
}

.reference {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 17px;
	font-style: normal;
	color: antiquewhite;
	font-weight: bold;
	opacity: 0.85;
}

.error {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 17px;
	font-style: normal;
	color: darkred;
	font-weight: bold;
	filter: contrast(3.0);
}

.enter {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	color: antiquewhite;
	opacity: 0.5;
	text-decoration: none;
}

.enter:hover {
	font-size: 14px;
}

.mask {
	width: 222px;
	height: 100px;
	position: relative;
	top: -206px;
}


.launch {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 12px;
	color: antiquewhite;
}

/* Narratives */
.title {
	font-family: Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 20px;
	font-weight: bold;
	color: antiquewhite;
	opacity: 0.75;
	filter: contrast(1.0);
}

.summary {
	font-family: Arial, Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 17px;
	font-weight: normal;
	position: relative;
	top: 5px;
	color: antiquewhite;
	opacity: 0.6;
	filter: contrast(1.25);
	animation: summary ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.summary1 {
	font-family: Arial, Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 16.5px;
	font-weight: normal;
	position: relative;
	top: 5px;
	color: antiquewhite;
	opacity: 0.6;
	filter: contrast(1.25);
	animation: summary ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes summary {
	0% {opacity: 0}
    100% {opacity: 0.6}
}

.summary-date {
	font-size: 15px;
	color: red;
}

.position {
	position: relative;
	top: -5px;
}

.orb {
	width: 18px;
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 18px;
	font-weight: bold;
	color: antiquewhite;
	opacity: 0.6;
	vertical-align: top;
}

.summary2 {
	font-family: Arial, Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 16px;
	font-weight: normal;
	position: relative;
	top: 3px;
	color: antiquewhite;
	opacity: 0.6;
	filter: contrast(1.25);
	animation: summary ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.cash {
	position: relative;
	top: 3px;
	font-family: Arial, Verdana, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 16px;
	font-weight: bold;
	color: antiquewhite;
	opacity: 0.75;
	filter: contrast(1.0);
}

.link {
	font-size: 16px;
	font-weight: normal;
	color: olivedrab;
	text-decoration: none;
	filter: brightness(1.25);
}

.link:hover {
	text-decoration: underline;
}

/* Imagery */
.bws1 {
	width: 500px;
}

.bws {
	width: 550px;
}

.bws2 {
	width: 530px;
}

.internment {
	position: relative;
	top: 125px;
	right: 260px;
	width: 225px;
	border: solid;
	border-width: thin;
}

.courthouse {
	width: 598px;
}

.mob {
	width: 250px;
	position: relative;
	top: 40px;
	left: 0px;
}

.ng {
	position: relative;
	top: 18px;
	right: 0px;
	width: 225px;
	border: none;
	border-width: thin;
}

.kkk {
	width: 550px;
}

.drexel {
	width: 475px;
}

.article1 {
	width: 450px;
}

.article2 {
	width: 450px;
	height: 287px;
}

.looting {
	width: 300px;
	position: relative;
	top: 49px;
}

.decay {
	width: 270px;
	position: relative;
	top: 30px;
}

.renewal1 {
	width: 500px;
}

.renewal2 {
	width: 275px;
	position: relative;
	top: 30px;
}

.radar {
	position: relative;
	top: 84px;
	left: -280px;
	width: 250px;
	border: solid;
	border-width: thin;
}

.highway {
	width: 275px;
	position: relative;
	top: 58px;
}

.tent {
	width: 220px;
	position: relative;
	top: 35px;
}

.rebuilt {
	width: 550px;
}

.rebuilt2 {
	width: 250px;
	position: relative;
	top: 20px;
}

.housing {
	width: 550px;
}

.reconstruction {
	width: 550px;
}

.hrw {
	width: 550px;
}

.thriving {
	width: 550px;
}

.integration {
	width: 550px;
	height: 350px;
}

.lawsuit {
	width: 455px;
}

/* Navigation Configuration */
.navigation {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 17px;
	font-weight: bold;
	color: antiquewhite;
	text-decoration: none;
	opacity: 0.5;
}

.navigation:hover {
	color: brown;
	opacity: 0.75;
	font-size: 17px;
}

.navigation-off {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 16px;
	font-weight: bold;
	color: antiquewhite;
	opacity: 0.3;
	text-decoration: none;
}

.dot {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 18px;
	color: black;
	opacity: 0.75;
}

.divider {
	font-family: Verdana, Arial, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 18px;
	color: brown;
	opacity: 0.75;
	font-weight: bolder;
}

/* Spacer */
.spacer {
	height: 10px;
}

/* Sources Configuration */
.sources {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 17px;
	color: olivedrab;
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
	cursor: pointer;
	opacity: 0.6;
}

.active, .sources:hover {
	font-style: normal;
	font-size: 18.5px;
	opacity: 0.85;
}

.content {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
 	font-size: 16px;
	color: antiquewhite;
	opacity: 0.5;
	text-decoration: none;
  	overflow: hidden;
	position: relative;
	top: 10px;
	transition: max-height 0.2s ease-out;
	max-height: 0px;
}

.links {
	color: olivedrab;
	text-decoration: none;
	filter: brightness(1.5);
}

.links:hover {
	text-decoration: underline;
}

.pbs {
	width: 60px;
	filter: brightness(1.0) contrast(1.5);
}

.pbs:hover {
	width: 56px;
}