#face-container{float:right; position:relative;opacity:0; -webkit-transition:opacity .5s ease; transition:opacity .5s ease; text-align:left; width:100%; max-width:100%;}
#face-container-overlay{display:none;width:0;height:0; -webkit-transition:all .5s ease; transition:all .5s ease;}
.face{max-width: calc(100% / 12); height:auto; max-height:150px; min-height:150px;  width:100%; float:right; position:relative;}
.face-img-container { width: 100%; overflow:hidden;  max-height:150px; min-height:150px; }
.face img{max-width: 100%; width:100%;float:right; -webkit-transition:all .5s ease; transition: all .5s ease;-webkit-filter: grayscale(100%); filter: grayscale(100%); opacity:0.7;}
.face.show  img{-webkit-filter: grayscale(0%);
	filter: grayscale(0%); opacity:1;}
.face img.wait-to-fade{opacity:0;}
.face-hidden-content{ position:absolute; opacity:0; top:0; min-height:136px; height:100%; width:0px; background-color:#fff;  overflow:hidden; -webkit-transition:all .5s ease; transition:all .5s ease; padding: 0 2px;}
.face-hidden-content-inner.fade{opacity:0;}
.face-hidden-content-inner {height:100%; max-width:100%; width:100%; -webkit-transition:opacity .5s ease; transition: opacity .5s ease; padding: 20px 0 30px 0;}
.face-hidden-content {direction: ltr; text-align: left;}
.face-border-right .face-hidden-content{border-right:4px solid #f57a28;}
.face-border-left .face-hidden-content{border-left:4px solid #f57a28;}
.face-hidden-content.hebrew {text-align: right; direction: rtl;}
.face-hidden-content:after{content:' ';position:absolute; width:14px; height:14px; top:calc(50% - 7px ) ; background-color:#f57a28;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.face-border-right .face-hidden-content:after{right:-10px;  }
.face-border-left .face-hidden-content:after{left:-10px;  }
.show .face-hidden-content {opacity:1;z-index:3; width:calc(100% * 3); padding: 34px 32px 20px 30px; border-bottom: 1px solid #ebebeb;}
.face-overlay {width:100%;height:100%; background-color:#1c6083; position:absolute;opacity:.7; z-index:2; -webkit-transition:opacity .5s ease; transition: opacity .5s ease;}
.face-hidden-content-belongs-to { margin: 0 0 8px 0; font-size: 0.8125em; color:#f57a28; font-weight:700;}
.face-hidden-content-quote {font-size: 0.875em;}
.show .face-overlay{opacity:0;}
.face.active{cursor:pointer;}
.face-content-inner{float:right;}
.face-close {position:absolute;bottom:0; right:0; width:28px; height:28px;line-height: 35px; text-align: center;}
.hebrew .face-close {left:0; right: unset;}
.face-close i {background-image : url('../../images/icon-close.png'); background-repeat: no-repeat;background-position:center center;display:inline-block;width:12px; height:16px;}
.face.not-in-row{display:none;}
.face-hidden-content-info {font-weight:bold; padding:0 0 0 0;  position:absolute; top:10px;left:30px; color:#555;}
.hebrew  .face-hidden-content-info {right:32px;}
.hebrew .jspScrollable + .face-hidden-content-info { right: 51px; }
.hebrew .face-hidden-content-quote {direction:rtl; text-align:right;}
@media screen and (min-width: 731px) and (max-width:1024px) {
	.face-img-container{max-height: 140px; min-height: 140px;}
	.face{min-height: 140px; max-height: 140px;}
}
@media screen and (max-width: 730px) {
.face-hidden-content-quote {}
.show .face-hidden-content {padding-top:105px;}
.face {}
.face .face-overlay {}
.face-hidden-content {left:0 !important; right:0 !important; max-width:100%; height:100%; width:100%; position:fixed; opacity:0; -webkit-transition:opacity .5s ease; transition: opacity .5s ease;}
.face .face-hidden-content {top: -99999px;}
.show .face-hidden-content {opacity:1;left:0;top:0;}
.face-hidden-content-inner{position:relative; height:100%;}
#face-container-overlay{display:block; width:100%; height:100%; background-color:#0ff;opacity:.6;position: absolute;z-index: 2;}
.face-hidden-content-info {top :77px; }
.face-hidden-content {min-height: 126px;}
.face-img-container{max-height: 126px; min-height: 126px;}
.face{min-height: 126px; max-height: 126px;}
.face-close{bottom: auto; top:65px;}




/**/
}




/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
	background: #fff;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: #fff;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #fff;
	position: relative;
}

.jspDrag
{
	background: #cecece;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	width: 5px;
    border-radius: 3px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}