@charset "utf-8";
/* CSS Document */

.photocaption{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	width:100%;
	color: white; 
	background: rgba(0, 0, 0, 0.5);
	padding: 10px; 
 }

.naXL{
	width: 64.55%;
	float: left;
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	margin: 1%
}
		
.naStd{
	width: 31.33333333%;
	float: left;
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	margin: 1%
}
.naWide{
	width: 64.55%;
	float: left;
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	margin: 1%
}
.naHover{
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.0;
}
.naHover:hover, .naHover:focus{
	opacity: 0.3;
}

@media only screen and (max-width: 768px) {
	.naXL, .naStd, .nawide{
		width: 100%;
		height: 230px;
		margin-left: 0px;
		margin-right: 0px;
	}
}