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

#profilesBox {
	height: 100%;
	width: 100%;
	display: table;
	overflow: scroll;
}
#profilesMarginsBox {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	overflow: visible;
	padding: 0.5rem;
}
#profilesInner {
	display: inline-block;
	max-width: 84rem;
	margin: 0.5rem auto;
}
@media all and (min-width: 1728px) {
#profilesInner {
	display: inline-block;
	max-width: 84rem;
	margin: 0.5rem auto;
}
}
@media all and (min-width: 1376px) and (max-width: 1727px) {
#profilesInner {
	display: inline-block;
	max-width: 63.5rem;
	margin: 0.5rem auto;
}
}
@media all and (min-width: 1024px) and (max-width: 1375px) {
#profilesInner {
	display: inline-block;
	max-width: 42rem;
	margin: 0.5rem auto;
}
}
@media all and (min-width: 0px) and (max-width: 1023px) {
#profilesInner {
	display: inline-block;
	max-width: 21rem;
	margin: 0.5rem auto;
}
}
.profileBox {
	padding: 0.5rem;
	float: left;
	height: 11rem;
	width: 19rem;
	position: relative;
	overflow: visible;
	background-color: rgba(0,0,0,0.2);
	margin: 0.5rem;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.profileBox:hover {
	background: linear-gradient(-135deg, rgba(0,0,0,0.6), rgba(64,64,64,0.4));
	background-size: 400% 400%;
	-webkit-animation: profileBoxGrad 5s ease-in-out infinite;
	-moz-animation: profileBoxGrad 5s ease-in-out infinite;
	animation: profileBoxGrad 5s ease-in-out infinite;
}
@-webkit-keyframes profileBoxGrad {
 0% {
background-position:0% 50%
}
 50% {
background-position:100% 50%
}
 100% {
background-position:0% 50%
}
}
@-moz-keyframes profileBoxGrad {
 0% {
background-position:0% 50%
}
 50% {
background-position:100% 50%
}
 100% {
background-position:0% 50%
}
}
@keyframes profileBoxGrad {
 0% {
background-position:0% 50%
}
 50% {
background-position:100% 50%
}
 100% {
background-position:0% 50%
}
}
.portraitBox {
	height: 10rem;
	margin: 0.5rem;
	width: 7.5rem;
	float: left;
	background-color: rgba(0,0,0,1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	-webkit-transition: all 0.4s ease-in-out 0s;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.profileBox:hover > .portraitBox {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
.detailsBox {
	width: 9.5rem;
	margin: 0.5rem;
	float: left;
	height: 10rem;
	display: table;
}
.profileName {
	height: 4.75rem;
	width: 9.5rem;
	margin-bottom: 0.5rem;
	text-align: center;
	vertical-align: bottom;
	display: compact;
	position: relative;
}
.profilePosition {
	height: 4.75rem;
	width: 9.5rem;
	margin-top: 0.5rem;
	text-align: center;
	vertical-align: top;
	display: compact;
	position: relative;
}
.profileBox .detailsBox .profileName div {
	bottom: 0;
	position: absolute;
	text-align: center;
	width: 100%;
	font-family: "Futura W01", "PMN Caecilia eText W01", "Courier New", Courier, "Times New Roman", Times, serif;
	color: rgba(255,255,255,1);
	font-weight: 400;
	font-size: 1rem;
}
.profileBox .detailsBox .profilePosition div {
	top: 0;
	position: absolute;
	text-align: center;
	width: 100%;
	font-family: "Futura W01", "PMN Caecilia eText W01", "Courier New", Courier, "Times New Roman", Times, serif;
	color: rgba(255,255,255,1);
	font-weight: 200;
	font-size: 0.75rem;
}
/* CSS Document */

#CozzupoliFrank {
	background-image: url(../images/staff/Frank-Cozzupoli.jpg);
}
#WintonAdriaan {
	background-image: url(../images/staff/Adriaan-Winton.jpg);
}
#TrinhMichael {
	background-image: url(../images/staff/Michael-Trinh.jpg);
}
#JanssenJake {
	background-image: url(../images/staff/Jake-Janssen.jpg);
}
#NguyenCharlee {
	background-image: url(../images/staff/Charlee-Nguyen.jpg);
}
#ChalabiDany {
	background-image: url(../images/staff/Dany-Chalabi.jpg);
}
#GibsonStuart {
	background-image: url(../images/staff/Stuart-Gibson.jpg);
}
#GhassibeTom {
	background-image: url(../images/staff/Tom-Ghassibe.jpg);
}
#BarakatDanny {
	background-image: url(../images/staff/Danny-Barakat.jpg);
}
#KhudurEnas {
	background-image: url(../images/staff/Enas-Khudur.jpg);
}
#BhundiaDhiren {
	background-image: url(../images/staff/Dhiren-Bhundia.jpg);
}
#EllisJoey {
	background-image: url(../images/staff/Joey-Ellis.jpg);
}
#RevollarPierre {
	background-image: url(../images/staff/Pierre-Revollar.jpg);
}
#StefanacKathy {
	background-image: url(../images/staff/Kathy-Stefanac.jpg);
}
#CharbellaNdaira {
	background-image: url(../images/staff/Charbella-Ndaira.jpg);
}
#DandanNada {
	background-image: url(../images/staff/Nada-Dandan.jpg);
}
#NaderRania {
	background-image: url(../images/staff/Rania-Nader.jpg);
}