/* =Staff Page 
-------------------------------------------------------------- */

/* Safari glitch seems to be related to mousing over neighbour member before 'mouse out' animation is complete. */

/*#staff 							{ margin-top:-28px;}*/
.member 							{ width:376px; height:376px; overflow:hidden; float: left; padding: 0px; margin: 2px; background:#910708; }
.member:nth-child(odd) 		{ background-color:#FFB400;}

.member div.photo 					{ display:block; height:100%; width:100%; -moz-transition: 300ms ease; -webkit-transition: 300ms ease; transition: 300ms ease; }
.member div.photo img 				{ width:100% }
.member:hover div.photo 			{ margin-top:-376px }
.member div.bio 					{ display:block; position:relative; height:100%; width:100%; padding:5% 5% 0; color:#fff; line-height:1.125em; }
.member div.bio p 					{ text-shadow:none }
.member div.bio-box					{ height:90%; padding:5%;}

.member div.bio h3					{ font-size: 2.0em; margin-bottom: 0.5em; margin-top: 0; line-height: 1em; border-bottom: 2px dashed #fff; padding: 0px 0 10px;color: #fff; }


.member div.bio dt,
.member div.bio dd					{ font-weight: bold; margin: 0; font-size: 0.8em; line-height: 1.15em; float: right; width: 70%; padding-bottom: 7px; }
.member div.bio dt 					{ float: left; width: 25%; clear:both }
.member div.bio dd					{ float: right; width: 70%; }


@media screen and (max-width: 1199px) { 
	.member							{ width: 309px; height: 309px; }
	.member:hover div.photo			{ margin-top: -309px; }
	.member div.bio h3				{ font-size:1.5em; margin-bottom:0.5em; }
}

@media screen and (min-width: 979px) and (max-width: 1199px) { 
	.member div.bio dt,				
	.member div.bio dd				{ font-size: 0.7em; padding-bottom: 6px; }
}

@media screen and (max-width: 979px) { 
	.member							{ width: 356px; height: 356px; }
	.member:hover div.photo			{ margin-top: -356px; }
	.member div.bio h3				{ font-size:2.0em; }
}

@media screen and (max-width: 767px) { 
	#staff 							{ margin-left:-20px; margin-right:-20px;}
	.member							{ width: 320px; height: 320px; float:none; margin:2px auto }
	.member:hover div.photo			{ margin-top: -320px; }
	.member div.bio 				{ font-size:0.8em; }
	.member div.bio h3				{ font-size:1.5em; }
	.member div.bio dt,				
	.member div.bio dd				{ font-size: 0.9em; padding-bottom: 6px; }
	/*.member div.bio h3				{ font-size:2.5em; }
	.member div.bio dt				{ font-size:1.75em; }*/
}




.tint {
 position: relative;
 float: left;
 cursor: pointer;
}

.tint:before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(255,180,0, 0.125);
 -moz-transition: background .3s linear;
 -webkit-transition: background .3s linear;
 -o-transition: background .3s linear;
 transition: background .3s linear;
}

.even .tint:before {
background: rgba(173,25,26, 0.125);
}

.tint:hover:before {
 background: none;
}