li{
  font-size:22px;
}

.testFirePhoto{      /*Note this is not referring to the actual photo, but the container around it*/
	width: 100%;
	margin: 0 auto;
	display: flex;
  flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;      /*--moves flex items to middle of container*/
}






/*probably not all neeeded, just copied over from notes-css*/


h2 {
	margin: 10px;
	font-size: 35px;
}
h3 {
	margin: 0px;
	font-size: 27px;
	text-decoration: underline;
}

.notesGridContainer {
		width: 70%;
		margin: 0 auto;  /*Centers the div in middle of page*/
		display: flex;
			border: none;
			flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;      /*--moves flex items to middle of container*/
		justify-content: center;
		align-content: space-around;
}
.notesGridContainer > a, .notesGridContainer > div  {
		margin: 10px;
		padding: 10px;
		border: 2px solid #b8b8b8;
		border-radius:8px;
		text-decoration: none !important;
		display: flex;
		flex-direction: column;
		height: 250px;
		/*width: 25%;*/
		width: 300px;
		justify-content: center;
		align-items: center;
		transition: all 50ms linear;
}
.notesGridContainer > a:hover, .notesGridContainer > div:hover {
		border: 2px solid black;
}
.notesGridContainer > a:active, .notesGridContainer > div:active {
		position:relative;
		top:0.5px;
}
.notesGridContainer > a > img, .notesGridContainerPicture {
		position: relative;
		height: 180px;
		/*width: 80%;*/
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: cover !important;
		background-position: center;
		margin: 0;
		padding: 0;
		background-color: #000;
}
.notesGridContainer > a > div, .notesGridContainerContent {
		font-size: 25px;
		padding: 5px;
		background-color: white;
		color: black;
		text-align: center;
		text-decoration: none !important;
		border-bottom-style: none;
		display: inline-block;

}

.textParent {
	margin: 0 auto;
	width: 75%;                       /*set width of entire text container. Use % here */
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;      /*--moves flex items to middle of container*/

}
.textBlock {
		width: 65%;
}
.img_single {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		max-height: 400px;
		object-fit: contain;
}
/*use img_container on a div. the div then holds all of the figures. depending on how many figures, and sizes, use different figure_* atributes on figures in div */
.img_container {
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: flex-end;
}
.figure_single {
		float: center;
		width: 100%;
		text-align: center;
		font-style: italic;
		font-size: smaller;
		text-indent: 0;
		border: 0px black solid;
		border-radius: 8px;
		margin: 0.5em;
		padding: 0.5em;
}
.figure_single_full {
		float: center;
		width: 100%;
		text-align: center;
		font-style: italic;
		font-size: smaller;
		text-indent: 0;
		border: 0px black solid;
		border-radius: 8px;
		margin: 0.25em;
		padding: 0.25em;
}
.figure_double {
		float: center;
		width: 45%;
		text-align: center;
		font-style: italic;
		font-size: smaller;
		text-indent: 0;
		border: 0px black solid;
		border-radius: 8px;
		margin: 0.5em;
		padding: 0.5em;
}
figure > img {
		width: 90%;
		max-height: 500px;
		margin: 0rem;
		object-fit: contain;
}
.figure_single_full > img {
		max-height: none;
}