#SD .SDblock.displayProjects
{
	padding: 0px 0px calc(var(--defaultInterval)* 1) 0px;
	margin-top: calc(var(--defaultInterval)*2);
}
#SD .SDblock.displayProjects h3.header
{
	font-size:var(--h2Size);
	font-family:var(--accentFontFamily);
	font-weight: 300;
	text-transform: uppercase;
	color:var(--colDdark);
}
#SD .displayPosts.boxedWidth h3.header
{
	font-size:var(--h2Size);
}
.SDblock.displayProjects .secondary
{
	display: grid;
	/*grid-template-columns: repeat(auto-fill, 320px);*/
	/*grid-template-columns:repeat( auto-fit, minmax(350px, 1fr) );;*/
	/*grid-template-columns:repeat( auto-fit, minmax(var(--defaultInterval)*10), 1fr) );;*/
	grid-template-columns:repeat( auto-fit, minmax(var(--defaultInterval), 1fr) );
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--defaultInterval)*15), 1fr));
	grid-gap: calc(var(--defaultInterval)* .5);
	margin-top: calc(var(--defaultInterval)* .5);
}
.displayProjects .projects .project
{
	background-color: gray;
	position: relative;
}
.displayProjects .projects .project .inner
{
	position: absolute;
	width: 100%;
	height: 100%;
	filter: brightness(50%);
	z-index: 100;
	background-position: center;
	background-size: cover;
}
#SD .displayProjects .project .injection .title
{
	color: white;
	font-family:var(--accentFontFamily);
	font-weight: 500;
	text-transform: uppercase;
	font-size:var(--h1Size);
}
.displayProjects .projects .project .injection
{
	position: relative;
	z-index: 200;
	display: grid;
	grid-template-columns: calc(var(--defaultInterval)* 5) 1fr;
	grid-template-areas: ". tags" "actionNeeded title" ". highlight" ". more";
	grid-template-areas: ". tags" ". title" "actionNeeded  highlight" ". more";
}
.SDblock.displayProjects .SDImageWrapper div.photoSource
{
	position: absolute;
	border: 0;
	bottom: 0;
	z-index: 1000;
	right: 0;
	background-color: rgba(255, 255, 255, 0.655);
	font-size: small;
	padding: calc(var(--defaultInterval)* .25);
	border-top-left-radius:var(--defaultBorderRadius);
}
.SDblock.displayProjects .secondary .SDImageWrapper div.photoSource
{
	position: absolute;
	border: 0;
	bottom: 0;
	z-index: 1000;
	background-color: rgba(255, 255, 255, 0.855);
	font-size:var(--vsmall);
	padding: calc(var(--defaultInterval)* .25);
	border-top-right-radius:var(--defaultBorderRadius);
	border-top-left-radius: 0;
	left: 0;
	right: auto;
}
.displayProjects .projects.secondary .project .injection
{
	grid-template-areas: "tags. " "title ." "highlight. " "more actionNeeded";
	margin-left: calc(var(--defaultInterval)* 2);
	grid-template-columns: 1fr calc(var(--defaultInterval)* 2);
	/*align-content: end !important;*/
	/*justify-content: end !important;*/
	/*align-items: end !important;*/
	/*grid-template-rows:min (var(--defaultInterval)*2)) auto 1fr  auto;*/
	/*grid-template-rows: minmax(100px, 1fr) auto 1fr auto;*/
	/*grid-template-rows: minmax(min-content, 100px) auto 1fr min-content;*/
	grid-template-rows: minmax(min-content, 100px) auto min-content 1fr;
	/*grid-template-rows: minmax(min-content, 100px) min-content minmax(min-content, 250px) 1fr;*/
	min-height: 500px;
	align-content: start;
	align-items: start;
	margin-bottom: 0;
	padding-bottom: calc(var(--defaultInterval)* 1.5);
	align-content: end;
	position: ;
}
.displayProjects .project .injection
{
	grid-template-rows: auto calc(var(--defaultInterval)* 15) auto;
	grid-template-rows:minmax(min-content, var(--defaultInterval)*5) auto 1fr min-content;
}
.displayProjects .project.primary .injection
{
	grid-template-rows: auto calc(var(--defaultInterval)* 15) auto;
	grid-template-rows:minmax(min-content, var(--defaultInterval)*5) auto 1fr min-content;
}
.SDblock.displayProjects .projects.primary .project .injection
{
	min-height: calc(var(--defaultInterval)* 25);
	align-content: end;
	grid-template-rows: minmax(min-content, 100px) 1fr auto min-content;
}
.displayProjects .project .injection .title
{
	align-self: end;
}
#SD .displayProjects .projects .project .injection .tags
{
	display: flex;
	list-style: none;
	margin: calc(var(--defaultInterval)*.5) 0px 0px;
	grid-area: tags;
}
.displayProjects .projects .project .injection .tags li
{
	display: flex;
	list-style: none;
	margin-right: calc(var(--defaultInterval)*1);
	text-transform: uppercase;
	font-size:var(--small);
}
#SD .displayProjects .projects .project .injection .tags
{
	display: flex;
	flex-wrap: wrap;
}
#SD .displayProjects .projects .project .injection .tags li a
{
	color: white;
}
#SD .displayProjects .projects .project .injection .tags li a:hover
{
	color:var(--colD);
}
#SD .displayProjects .projects .project .injection .title
{
	grid-area: title;
	font-weight: 400;
	color: white;
}
#SD .displayProjects .projects .project .injection .highlight
{
	grid-area: highlight;
	font-weight: bold;
	color: white;
	margin-bottom: calc(var(--defaultInterval)*.5);
	overflow-y: auto;
	padding-right: calc(var(--defaultInterval)*.5);
}
#SD .displayProjects .projects .project .injection .more
{
	grid-area: more;
}
#SD .displayProjects .projects .project .injection a.more
{
	color: white;
	color:var(--colD);
	font-family:var(--accentFontFamily);
	text-transform: uppercase;
	font-size:var(--h3Size);
	margin-bottom: calc(var(--defaultInterval)*.5);
	font-weight: 400;
}
.projects .project.hasActions .injection .actionNeededGraphic
{
	position: absolute;
	height: calc(var(--defaultInterval)*5);
	width: calc(var(--defaultInterval)*5);
	transform: rotate(15deg);
	grid-area: actionNeeded;
	margin-right: 0px;
	right: calc(var(--defaultInterval)*1);
}
.projects.secondary .project.hasActions .injection .actionNeededGraphic
{
	margin-right: 0px;
	right: calc(var(--defaultInterval)*-.5);
	/*bottom: calc(var(--defaultInterval)*-1);*/
}
.projects .project.hasActions .injection .actionNeededGraphic .background
{
	fill:var(--colD);
	transition:var(--defaultTransition);
}
.projects .project.hasActions .injection .actionNeededGraphic:hover .background
{
	fill:var(--colA);
}
.projects .project.hasActions .injection .actionNeededGraphic .text, .projects .project.hasActions .injection .actionNeededGraphic .rectangle
{
	fill:var(--colB);
	transition:var(--defaultTransition);
}
.projects .project.hasActions .injection .actionNeededGraphic:hover .text, .projects .project.hasActions .injection .actionNeededGraphic:hover .rectangle
{
	fill:white;
}
#SD .displayProjects .projects .project .injection a.more:hover
{
	color: white;
}