.item {
	height:290px;
	margin:5px;	
}


.item:hover, .item:focus, .item.active{
	font-weight: bold;
}

.item .desc{
	border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #d3d9e0;
    padding: 10px;
	background-color: rgb(247, 247, 247);
    box-shadow: 0 2px 5px #d3d9e0;
    height: 49%;
    padding-top: 57px;
    margin-top: -43px;
    text-align: center;
}

.item .img{
	margin: 0 auto;
	width: 120px;
	background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: center center;
	height: 120px;
	border-radius: 50%;
	position: relative;
	cursor: default;
	/*box-shadow: 
		inset 0 0 0 0 rgba(235, 143, 0, 0.58),   inset 0 0 0 5px #456b8e,   0 1px 2px rgba(249, 138, 22, 0.23);*/
	transition: all 0.4s ease-in-out;
	cursor:pointer;
}

.item:hover .img, .item.active .img{
	box-shadow: 
		inset 0 0 0 110px rgba(235, 143, 0, 0.42),   inset 0 0 0 5px #f98a16,   0 1px 2px rgba(249, 138, 22, 0.18);
}

.item .caption {
	width:160px;
	height:150px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	/* fix it at the bottom */
	position:absolute;
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption p {
	
	margin:30% 30%;
	font-size:12px;
	font-weight:bold;
	color:red;
}


.clear {
	clear:both;	
}