.project-parallax-header {
  /* Full height */
  height: 48%;

  /* nav height */
  /* height: 12%; */

  /*
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, .3);
  */
}

.project-container {
  margin: 0px;
  padding: 0px;
  /* THIS MIN-WIDTH CONTAINS CONTENT AT WINDOW LEFT */
	min-width: var(--project-content-width);
  width: 100%;
  /* background-image: linear-gradient(to bottom, var(--grey2), var(--white)); */
  /* background-color: rgba(0, 255, 255, 0.5); * FPO BG COLOR CYAN */
}

.project-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* THIS MARGIN CENTERS CONTENT BUT STOPS AT WINDOW LEFT */
  margin: 0 0 0 calc((100% - var(--project-content-width)) * 0.5);
  width: var(--project-content-width);
  /* background-color: rgba(0, 255, 0, 0.5); * FPO BG COLOR GREEN */
}

.project-description {
  width: 100%;
  text-align: left;
  margin: 0 0 2rem 0;
	padding: 5rem 0 3rem 1.5rem;
	/* background-color: rgba(255, 255, 0, 0.5); * FPO BG COLOR CYAN */
}

.project-title-OG {
  width: var(--project-description-width);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: .5px;
  color: var(--grey6);
  padding: 0;
  background-color: rgba(255, 0, 255, 0.1); /* FPO BG COLOR PINK */
}

.project-subtitle-OG {
  width: var(--project-description-width);
  font-size: 1.25rem;
  letter-spacing: .5px;
  color: var(--grey5);
  margin: .75rem 0 0 0;
  /* background-color: rgba(255, 0, 255, 0.1); * FPO BG COLOR PINK */
}

.project-title {
  width: var(--project-description-width);
  font-size: .875rem;
  letter-spacing: .5px;
  color: var(--grey5);
  margin: 0;
  /* background-color: rgba(255, 0, 255, 0.1); * FPO BG COLOR PINK */
}

.project-subtitle {
  width: var(--project-description-width);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 2.75rem;
  letter-spacing: .5px;
  color: var(--grey6);
  margin: 1rem 0 0 0;
  /* background-color: rgba(255, 0, 255, 0.1); * FPO BG COLOR PINK */
}

.project-body {
  width: var(--project-description-width);
  font-size: 1rem;
  color: var(--grey5);
  margin: 4rem 0 0 0;
}

.project-body-title {
  text-transform: uppercase;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .25rem;
  color: var(--grey8);
  margin: 0;
}

.project-color-1 {
	color: var(--highlight-red);
}

.project-color-2 {
	color: var(--highlight-sky);
}

.project-color-3 {
	color: var(--highlight-gold);
}

.project-color-4 {
	color: var(--highlight-pink);
}

.project-color-5 {
	color: var(--highlight-lime);
}

.project-credits {
  width: var(--project-description-width);
  font-size: .875rem;
  line-height: 1.3rem;
  color: var(--grey3);
  padding: 0;

  transition: var(--duration-long);
}

.project-credits:hover {
  color: var(--grey5);
}

.about-image,
.project-image,
.project-video {
	width: auto;
	height: auto;
	max-width: 100%; /* calc(var(--project-content-width) * .97) */

  text-align: center;
  margin: 0 0 2rem 0;
  padding: 0 0 1.5rem 0;

  /* background-color: rgba(255, 0, 255, 0.1); * FPO BG COLOR PINK */
}

.about-image img,
.project-image img,
.project-video img {
	width: auto;
	max-width: 100%; /* calc(var(--project-content-width) * .97); */
	height: auto;
	border: none; /* 1px solid var(--grey5); */
  /* outline: 30px solid var(--grey1); BORDER IS OUTSIDE THE IMAGE, OVERLAPS CAPTIONS */

	/* THESE CENTER IMAGE IN DIV */
	display: block;
	margin: auto;
}

.about-image img {
  border: 4rem solid var(--grey1);
  /* outline: 1px solid var(--grey4); * BORDER IS OUTSIDE THE IMAGE, OVERLAPS CAPTIONS */
}

#id_photo {
	cursor: pointer;
}

.project-video video {
	width: auto;
	max-width: 100%; /* calc(var(--project-content-width) * .97); */
	height: auto;

	cursor: pointer;
	/* THESE CENTER VIDEO IN DIV */
	display: none;
	margin: auto;
}

.about-image .caption,
.project-image .caption,
.project-video .caption {
  font-size: .75rem;
  line-height: 1.3rem;
  color: var(--grey6);
  text-align: left;
  margin: 0;
  padding: .5rem 1.5rem 0 1.5rem;
  /* background-color: rgba(104, 0, 104, 0.1); * FPO BG COLOR PURPLE */
}

.video-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}

.video-responsive > iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

/* FOR SCREENS LARGER THAN PHONE */
@media screen and (min-width: 480px) {
	.project-description {
		padding: 5rem 0 5rem 1.5rem;
  }

	.about-image,
	.project-image,
	.project-video {
		width: var(--project-content-width);

		margin: 0 0 2rem 0;
		padding: 0 0 3rem 0;
	}

	.about-image img {
		width: var(--project-content-width);
		max-width: 100%;
		height: auto;
		border: 8rem solid var(--grey1);
	}

	.project-image img,
	.project-video img,
	.project-video video {
  	width: var(--project-content-width);
		max-width: 100%;
		height: auto;
	}

	.about-image .caption,
	.project-image .caption,
	.project-video .caption {
		font-size: .875rem;
	  padding: .5rem 1.5rem 0 1.5rem;
	}
}

@media screen and (min-width: 940px) {
	.about-image img {
		border: 12rem solid var(--grey1);
	}
}