#faces_container {
	clear : both ; 
	padding : 0px 20px ;
}

#faces_container h2 {
	font-weight : bold ;
	text-transform : uppercase ;
	text-align : center ;
}

#faces_container h2 span#faces_container_of {
	color : #909090 ; 
	font-weight : bold ;
	font-family : cursive ; 
	text-transform : lowercase ;
}

#faces_container_content a, #faces_container p {
	box-sizing : border-box ;
}

#faces_container_content div.screen {
	background-image : linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,.25), rgba(0,0,0,.75), rgba(0,0,0,.85), rgba(0,0,0,1));
	border : 1px solid transparent;
	border-bottom: none;
	height: 500px;
	overflow: hidden;
	position: relative;
	transition: all .5s ease;
	z-index: 10;
	}
#faces_container_content:not(:hover) div#home_page_faces_Center .screen,
	#faces_container_content div.face:hover .screen{
		height: 650px;
}

#faces_container_content:not(:hover) div#home_page_faces_Center div.screen,
#faces_container_content div.face:hover div.screen {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.1), rgba(255,255,255,.25), rgba(255,255,255,.75), rgba(255,255,255,.85), rgba(255,255,255,1));
}

#faces_container_content div.face {
	border : 0px solid;
	margin-bottom: 0;
	display : block;
	position: relative;
	text-decoration: none;
}

#faces_container_content div.face > .face-bg {
	background-repeat : no-repeat;
	background-size : cover;
	background-position: top center;
	height: 500px;
	display : block;
	width: 100%;
	transition: all .5s ease;
	z-index: 1;
}

#faces_container_content:not(:hover) div#home_page_faces_Center .face-bg,
	#faces_container_content div.face:hover .face-bg{
	height: 100%;
}

#faces_container_content div.face div.face_content {
	box-sizing : border-box ;
	padding : 20px ;
	width : 100% ;
}

#faces_container_content div.face h3.face_name, #faces_container div.face h4.face_title {
	color : #fff;
	font-family: 'GT America Condensed Medium';
	font-weight : bold;
}

#faces_container_content div.face h3.face_name {
	/* margin-left : 26px; */
	font-family: 'GT America Bold';
	font-size: 2em;
	line-height: 1;
	position: relative;
	padding-left: 40px;
	transition: all .5s ease;
	/* text-shadow: 0 1px white !important; */
}

	#faces_container_content div.face h3.face_name > a {
		border-bottom: 1px solid rgba(0,0,0,0);
		color: inherit;
		display: inline-block;
		padding-bottom: 5px;
		text-decoration: none;
	}
	
	#faces_container_content div.face h3.face_name:hover > a {
		border-bottom: 1px solid rgba(0,0,0,1);
	}

	#faces_container_content div.face h3.face_name:hover::before {
		transform: rotate(45deg) !important;
	}

#faces_container_content div.face:hover h3.face_name {
	color : #000;
	transition : all .75s ease-in-out;
	/* background-color : #fff ; */
}

#faces_container_content:not(:hover) div#home_page_faces_Center h3.face_name {
	transition : all .75s ease-in-out;
	color : #000 ;
}

#faces_container_content div.face h4.face_title {
	color: #9c9ea1;
	padding-left: 40px;
	font-size: 1.75em;
	font-weight : normal;
	text-transform : uppercase;
	/* text-shadow: 0 2px black !important; */
}
	
#faces_container_content div.face p.face_text {
	color: #000;
	font-family: 'GT America Condensed Medium' !important;
	font-size: 1.6em;
	padding-left: 40px;
	/* margin-right : 20px; */
	/* text-shadow: 0 2px 0 black; */
}

#faces_container_content:not(:hover) div#home_page_faces_Center h3.face_name::before,
#faces_container_content div.face:hover h3.face_name:before{
	transform : rotate(90deg) ;
	transition : all .75s ease-in-out ;
	color : #000 ;
	filter: invert(0%);
}


#faces_container_content div.face h3.face_name::before {
	background-image: url(images/chunky-arrow.svg);
	background-repeat: no-repeat;
	content: "";
	font-size : .8em;
	display : inline-block;
	position: absolute;
	left: 0;
	top: calc(50% - 13px);
	transform : rotate(0deg);
	transition : all .75s ease-in-out;
	color : #fff;
	height: 24px;
	width: 24px;
	filter: invert(100%);
}

@media (min-width: 800px) {		

/* static styles */

	#faces_container {
		margin : 100px auto;
		max-width: 1430px;
	}
	
	#faces_container #faces_container_content {
		display : flex ;
		height : 650px ; 
	}

	#faces_container_content div.face {
		transition : all .75s ease-in-out;
		transition-delay : .1s;
		height: 100%;
		width : 25%;
		overflow : hidden;
		filter: grayscale(1);
	}

	#faces_container_content div.face div.face_content {
		padding: 0 20px 0 10px;
		width : 100% !important;
		overflow : hidden;
		height: auto;
		position: absolute;
		top: calc(100% - 90px);
		transition: all .5s ease;
	}

	#faces_container_content:not(:hover) div#home_page_faces_Center div.face_content,
	#faces_container_content div.face:hover div.face_content {
		top: calc(100% - 240px);
	}

	#faces_container_content div#home_page_faces_Center {
		height : 650px ;
		transition : all .75s ease-in-out ;
	}
	
	#faces_container_content div.face h3.face_name, #faces_container div.face h4.face_title {
		margin : 0px 0px 5px 0px;
		width: 100%;
		overflow : hidden;
		white-space : nowrap;
	}
	
	#faces_container_content div.face h4.face_title {
		margin-left: 0;
		margin-bottom: 20px;
		white-space : nowrap;
		overflow : hidden;
		transition: all .5s ease;
		color: #999;
		text-transform: uppercase;
	}

	#faces_container_content:not(:hover) div#home_page_faces_Center h4.face_title, 
	#faces_container_content div.face:hover h4.face_title {
		margin-bottom: 5px
	}


/* motion styles */

	#faces_container_content div.face:hover {
		width : 50%;
		height : 650px;
		transition : all .75s ease-in-out;
		filter: grayscale(0);
	}
	
	#faces_container_content div.face:hover h3.face_name, #faces_container_content div.face:hover h4.face_title {
		white-space : normal ;
	} 
	
	#faces_container_content div#home_page_faces_Center:not(:hover)  {
		height: 650px !important;
		transition : all .75s ease-in-out;
		width : 25%;
	}
		
	#faces_container_content:not(:hover) div#home_page_faces_Center {
		transition : all .75s ease-in-out;
		height : 650px !important;
		width : 50%;
		filter: grayscale(0);
	}
	
	#faces_container_content div.face:hover h3.face_name::before {
		transform : rotate(90deg) ;
		transition : all .75s ease-in-out ;
		color : #000 ;
	}

	#faces_container_content:not(:hover) div#home_page_faces_Center h3.face_name > a {
		color: inherit;
	}


	#faces_container_content:not(:hover) div#home_page_faces_Center h4.face_title,
	#faces_container_content div.face:hover h4.face_title{
		color: #000;
	}

}		


/* Mobile Fixes */
@media (max-width: 1000px) {
	#faces_container_content div.face > .face-bg {
		height: 100%;
	}
	#faces_container #faces_container_content {
		display: block;
		height: auto;
		width: 93%;
		margin: 0 auto;
	}
	#faces_container_content:not(:hover) div#home_page_faces_Center,
	#faces_container_content div#home_page_faces_Center:not(:hover),
	#faces_container_content div.face,
	#faces_container_content div.face:hover {
		filter: grayscale(0);
		margin-bottom: 20px;
		min-height: 420px !important;
		height: auto !important;
		width: 50%;
		overflow: visible;
	}
	#faces_container_content:not(:hover) div#home_page_faces_Center div.screen, 
	#faces_container_content div.face:hover div.screen,
	#faces_container_content div.screen {
		background-image: none;
		background-color: #000;
		display: flex;
		height: 100%;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: absolute;
		top: 0;
	}
	#faces_container_content > div:nth-child(odd) div.screen {
		right: -100%;
	}
	#faces_container_content > div:nth-child(even) {
		left: 50%
	}
	#faces_container_content > div:nth-child(even) div.screen {
		left: -100%;
	}
	#faces_container_content:not(:hover) div#home_page_faces_Center div.face_content,
	#faces_container_content div.face:hover div.face_content,
	#faces_container_content div.face div.face_content {
		top: 0;
		position: relative;
	}
	#faces_container_content div.face h3.face_name,
	#faces_container_content div.face h4.face_title {
		color: #fff !important;
		margin-bottom: 10px !important;
		font-size: 1.25em;
	}
	#faces_container_content div.face h3.face_name {
		font-size: 1.6em;
		word-break: normal;
	}
	#faces_container_content div.face h3.face_name > a {
		border-bottom: 1px solid rgba(255,255,255,1);
		padding-bottom: 10px
	}
	#faces_container_content div.face h3.face_name:before{
		content: '';
		transform : rotate(45deg) !important;
		filter: invert(100%) !important;
		width: 15px;
		left: 7px;
	}
	#faces_container_content div.face p.face_text {
		font-size: 1em;
		color: #fff;
	}
	#faces_container_content div.face:hover h3.face_name, #faces_container_content div.face:hover h4.face_title {
		white-space: inherit !important;
		text-shadow: none !important;
	}
}

@media (max-width: 750px) {
	#faces_container_content:not(:hover) div#home_page_faces_Center, #faces_container_content div#home_page_faces_Center:not(:hover), #faces_container_content div.face, #faces_container_content div.face:hover {
		width: 100%;
		display: inline-flex;
		min-height: auto !important;
		background-size: 100% auto;
	}
	#faces_container_content > a:nth-child(odd) div.screen {
		right: 0;	
	}
	#faces_container_content > a:nth-child(even),
	#faces_container_content > a:nth-child(even) div.screen {
		left: 0;	
	}
	#faces_container_content div.screen {
		left: 0 !important;
		position: relative !important;
		margin-top: 0;
	}
	#faces_container_content div.face {
		display: block !important;
	}
	#faces_container_content > div:nth-child(even) {
		left: 0;
	}
	#faces_container_content div.face > .face-bg {
		height: 250px !important;
		position: relative;
			right: auto !important;
			left: 0 !important;
		width: 100%;
	}
}