section.fallen_personnel
{
	overflow: visible !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	position: relative;

	width: 100% !important;
}

section.fallen_personnel:before
{
	background: transparent;

	border-left: rgba(255, 255, 255, 0.07000000000000001) solid 1px;
	display: block;
	margin: 0;
	position: absolute;
	 top: 0;
	 left: 50%;
	 z-index: 0;

	height: 100%;
	width: 0;

	content: "";
}

section.fallen_personnel .foreground
{
	color: #fff;

	display: flex;
	 align-items: center;
	 flex-flow: column nowrap;
	 justify-content: center;
	margin: 0 auto;
	padding-top: 90px;
	padding-bottom: 90px;
	position: relative;

	min-height: 570px;
	max-width: 1176px;
}

section.fallen_personnel .person
{
	display: flex;
	 align-items: center;
	 flex-flow: column nowrap;
	 justify-content: center;
	overflow: hidden;

	max-width: 100%;
	width: 100%;
}

section.fallen_personnel .person + .person
{
	margin-top: 80px;
}

section.fallen_personnel .person .name
{
	transition: padding 0.5s ease, font-size 0.5s ease, color 0.25s ease;

	color: #f2f2f2;
	font: normal 500 32px/1 "Barlow Condensed", sans-serif;
	letter-spacing: 0.025em;
	text-align: center;
	text-transform: uppercase;

	margin: 0;
	overflow: visible;
	padding: 0 30px;
}

section.fallen_personnel .person .name:before
{
	opacity: 0;
	transition: all .5s ease;
	transform: translate(-100%, -50%) skew(-15deg);

	border-left: #f8be21 solid 8px;
	margin-top: 2px;
	position: absolute;
	top: 50%;
	left: 0;

	height: calc(100% - 10px);
	width: 0;

	content: "";
}

section.fallen_personnel .person .name:focus
{
	box-shadow: none;

	border: 0;
	outline: 0;
}

section.fallen_personnel .person figure
{
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	flex-flow: row nowrap;
	justify-content: flex-end;
	margin: 0;
	overflow: hidden;
	padding: 100px 0 40px;
	position: relative;

	max-height: 100vmin;
	width: 100%;
}

.is-ie11 section.fallen_personnel .person figure
{
	min-widtH: 768px;
}

section.fallen_personnel .person figure .photo
{
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	flex-flow: row nowrap;
	flex: 0 1 50%;
	justify-content: flex-end;
	margin: 0;
}

section.fallen_personnel .person figure .photo.empty
{
	position: relative;
}

section.fallen_personnel .person figure .photo.empty:before
{
	background: transparent url(../../../images/wanted-poster-no-image.png) 50% 50% / contain no-repeat;

	display: block;
	position: absolute;
	top: 0;
	right: 0;

	height: 270px;
	width: 270px;

	content: "";
}

section.fallen_personnel .person figure .photo img
{
	filter: saturate(0);

	display: block;
	margin: 0;

	height: 270px;
}

.is-ie11 section.fallen_personnel .person figure .photo img
{
	transform: translateX(-1px);
}

section.fallen_personnel .person figure figcaption
{
	font-size: 16px;
	letter-spacing: .01em;
	line-height: 30px;
	text-align: left;

	box-sizing: border-box;
	display: flex;
	 align-items: flex-start;
	 flex-flow: column nowrap;
	justify-content: flex-start;
	flex: 0 1 50%;
	margin: 0;
	padding: 0 30px;
}

.is-ie11 section.fallen_personnel .person figure
{
	transform: translateX(30px);
}

section.fallen_personnel .person figure figcaption span,
section.fallen_personnel .person figure figcaption time,
section.fallen_personnel .person figure figcaption p
{
	color: #b3b3b3;

	display: inline-block;
}

section.fallen_personnel .person figure figcaption p
{
	max-width: 100%;
}

section.fallen_personnel .person figure figcaption span + span,
section.fallen_personnel .person figure figcaption time + span,
section.fallen_personnel .person figure figcaption p + span,
section.fallen_personnel .person figure figcaption span + time,
section.fallen_personnel .person figure figcaption time + time,
section.fallen_personnel .person figure figcaption p + time,
section.fallen_personnel .person figure figcaption span + p,
section.fallen_personnel .person figure figcaption time + p,
section.fallen_personnel .person figure figcaption p + p
{
	margin-top: 1em;
}

section.fallen_personnel .person figure figcaption .label:after
{
	content: ":";
}

section.fallen_personnel .person figure figcaption .memorial .label
{
	font-weight: 700;
	text-decoration: underline;
}

section.fallen_personnel .person figure figcaption .title
{
	color: #fff;
	font-weight: 600;
	letter-spacing: .025em;
}

@media (-ms-high-contrast: none)
{
	section.fallen_personnel .person .name:before
	{
		left: 7px;
	}
}

@media only screen and (max-width: 678px)
{
	section.fallen_personnel:before
	{
		display: none;

		content: none;
	}

	section.fallen_personnel .person + .person
	{
		margin-top: 12vmin;
	}

	section.fallen_personnel .person .name
	{
		font-size: 5.5vmin;
		line-height: 1;

		padding: 0 15px;
	}

	section.fallen_personnel .person .name:before
	{
		border-left-width: 4px;
		margin-top: -3px;

		height: calc(100% + 6px);
	}

	section.fallen_personnel .person figure
	{
		align-items: center;
		flex-flow: column nowrap;
		padding: 10vmin 80px;

		max-height: 120vmax;
		width: 100%;
	}

	section.fallen_personnel .person figure .photo
	{
		display: block;
		margin-bottom: 7.5vmin;
		overflow: hidden;
		position: relative;

		height: 60vmin;
		width: 60vmin;
	}

	section.fallen_personnel .person figure .photo.empty
	{
		margin-bottom: 0;
		height: 0;
	}

	section.fallen_personnel .person figure .photo img
	{
		/* margin: 0 auto; */
		max-width: 100%;
	}

	section.fallen_personnel .person figure figcaption
	{
		font-size: 15px;
		line-height: 22px;
		text-align: left;

		box-sizing: border-box;
		display: flex;
		 align-items: flex-start;
		 flex-flow: column nowrap;
		 justify-content: center;
		margin: 0;
		padding: 0;
	}

	section.fallen_personnel .person figure figcaption span,
	section.fallen_personnel .person figure figcaption time,
	section.fallen_personnel .person figure figcaption p
	{
		color: #b3b3b3;
	}

	section.fallen_personnel .person figure figcaption span + span,
	section.fallen_personnel .person figure figcaption time + span,
	section.fallen_personnel .person figure figcaption p + span,
	section.fallen_personnel .person figure figcaption span + time,
	section.fallen_personnel .person figure figcaption time + time,
	section.fallen_personnel .person figure figcaption p + time
	{
		margin-top: .5em;
	}

	section.fallen_personnel .person figure figcaption span + p,
	section.fallen_personnel .person figure figcaption time + p,
	section.fallen_personnel .person figure figcaption p + p
	{
		margin-top: 1.5em;
	}

	section.fallen_personnel .person figure figcaption .title
	{
		color: #fff;
		font-weight: 600;
		letter-spacing: .025em;
		text-transform: uppercase;
	}
}

.javascript-support section.fallen_personnel .person
{
	transition: opacity .5s ease 0s;

	display: flex;
	 align-items: center;
	 flex-flow: column nowrap;
	 justify-content: center;
}

.javascript-support section.fallen_personnel .person .name
{
	cursor: pointer;
	color: #b3b3b3;
}

.javascript-support section.fallen_personnel .person:focus .name
{
	color: #f2f2f2;
}

.javascript-support section.fallen_personnel .person figure
{
	transition: opacity 0.75s ease 0s, padding 1.25s ease 0.5s, max-height 1.25s ease 0.5s;
}

.javascript-support section.fallen_personnel .person:not(.active) figure
{
	opacity: 0;

	padding-top: 0;
	padding-bottom: 0;

	max-height: 0;
	height: auto;
}

.javascript-support section.fallen_personnel .person.active .name
{
	color: #f2f2f2;
	font-size: 54px;
	line-height: 1;
}

.javascript-support section.fallen_personnel .person.active .name:before
{
	opacity: 1;
	transform: translate(0, -50%) skew(-15deg);
	transition-delay: 1.25s;
}

.javascript-support section.fallen_personnel .person .name:focus:before,
.javascript-support section.fallen_personnel .person .name:hover:before{
	opacity:1;
}

.javascript-support section.fallen_personnel .person.active figure
{
	opacity: 1;
	transition: opacity 1s ease 0.75s, padding 1.25s ease 0s, max-height 1.25s ease 0s;
}

@media only screen and (max-width: 678px)
{
	.javascript-support section.fallen_personnel .person.active .name
	{
		color: #f2f2f2;
		font-size: 6.5vmin;
		line-height: 1;
	}

}