div.content > h2{
	text-align: center;
	font-size: 1.25rem;
	margin-top: 40px;
}


/* selects a row if it immediately follows a category title */
/* that is, there isn't s descriptive paragraph between the category title and block of videos */
div.content > h2 + div.row{
	margin-top: 27px; /* the reported height of a single line descriptive paragraph */
										/* remember, this is being added to the row of videos, not to the h2 element */
										/* this is more important on small screens when the thumbnails are taken away */
}



div.content > p.video-section-description{
	margin-bottom: 0;
}


div.content > div.row > div.video-index-list{
	position: relative;
	left: 0; top: 0;
	padding: 20px 10px 45px;
}


div.content > div.row > div.video-index-list img{
	border: 1px black solid;
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 5px;
}


div.content > div.row > div.video-index-list > div.video-index-caption{
	position: absolute;
	left: 0;
	width: 100%;
}


div.content > div.row > div.video-index-list > div.video-index-caption > p{
	font-size: .875rem;
	text-align: center;
	margin: 0 10px;
}


div.content > div.row > div.video-index-list > div.video-index-caption > p > a{
	color: #5b6065;
}





/* turn off the video graphics and turn the captions into a list */
/* Won't help with bandwidth, but at least they won't have to scroll forever */

@media screen and (max-width: 780px) {

	div.content > p.video-section-description{
		margin-bottom: 20px;
	}


  div.video-index-list > a.video-image-link {display: none;}
  
  div.content > div.row > div.video-index-list > div.video-index-caption{
  	position: static;
  }
  
  div.content > div.row > div.video-index-list{
		float: none;
  	padding: 0;
  }
	
	div.content > div.row > div.video-index-list > div.video-index-caption > p{
  	text-align: left;
  	font-size: 1.2rem;
  	display: list-item;
		list-style-position: outside;
		margin-left: 30px;
		margin-bottom: 10px;
	}

	div.content > div.row > div.video-index-list > div.video-index-caption > p > a{
		color: #ac172b;
	}


}