h2.featureheading, h3.featurecomment {margin-bottom: 6px; display:block; float: left; height: 45px; color:#fff; text-shadow:0 -1px 0 #000; text-transform: uppercase; font:normal 14px Iceland, Arial; 
		box-shadow: 0 3px 1px rgba(0,0,0,0.4); -webkit-box-shadow: 0 3px 1px rgba(0,0,0,0.4); -moz-box-shadow: 0 3px 1px rgba(0,0,0,0.4);}

h2.featureheading {margin-left:9px; width:622px; background:url(../img/feature-header-bg.png) top left no-repeat;  }
	h2.featureheading .featurecom {padding-top:16px; text-shadow:0 -1px 0 #000; display:block; margin-left:498px; width:120px; text-align:center;}


.heroinfo, .heroblurb, .heroarea h2 {transition:0.25s ease-out; -webkit-transition:0.25s ease-out;}

.heroarea {display:block; 
		overflow:hidden;
		width:620px; 
		height:350px; 
		margin-left:10px;
		margin-bottom: 24px;
		position:relative;
		
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow:0 5px 5px rgba(0,0,0,0.8);
		-moz-box-shadow:0 5px 5px rgba(0,0,0,0.8);
		-webkit-box-shadow:0 5px 5px rgba(0,0,0,0.8);
		
		}
		
.heroblock {display:block; width:620px; height: 350px; position:absolute; top:0; left:0; }
.heroinfolink {display:block; width:620px; height: 120px; position:absolute; top:0; left:0; }
		

.heroarea.exclusive .heroblock {background:url(../img/exc-feature-bg.png) 1px 6px no-repeat;}

		

.heroinfo {display:block; background: rgba(0,0,0,0.6) url(../img/heroplay-bg.png) 610px -95px no-repeat; height:60px; width: 100%; 
		position:absolute; bottom:0; left:0; padding-top:10px;}

.heroface {background:url(../img/bg-header.png) left top repeat-x; 
		padding: 4px 2px 1px 4px; float:left; display:block; width: 44px; height: 44px; margin-right:12px;
		border:1px solid #297c58; margin-left:10px;}
	.heroface img {width:40px; height:40px; }

.heroarea h2 {
	color: #fff;
	padding:0;
	margin:5px 0 0 0;
	font: 300 20px Oswald, Arial;
	display: block;
	text-transform: uppercase;
	line-height: 30px;
	bottom: 0;
	
	/* character limit using css */
				
	width: 500px;
		overflow:hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap; 
}	

.heroarea .sub_feature {
	color:#a0decd;
	margin-top:-2px;
	font: 300 11px Iceland, Arial; 
	text-transform:uppercase;
	text-shadow:0 -1px 0 #000;
}

.sub_feature a, .sub_feature a:visited {color: #0db !important;}
	.sub_feature a:hover {color: #0dd !important; text-decoration:underline;}
	
.heroblurb {color:#abb; font:11px 'Open Sans', Arial; width:380px; margin:20px 0 0 74px; 
	border-top:1px solid rgba(255,255,255,0.2); padding-top:6px; max-height:47px; overflow:hidden;}
	

.heroarea:hover .heroinfo {height:120px; background-position: 478px -35px; background-color:rgba(0,0,0,0.9)}
.heroarea:hover .heroblurb {margin-top:9px;}
.heroarea:hover h2 {width:380px;}



@media screen and (max-width:959px) and (min-width:640px) {
	h2.featureheading {margin-left:21px;}
	.heroarea {margin-left:22px;}
	
}


@media screen and (max-width:639px) {
	
	


h2.featureheading {margin-left:9px; width:285px; background:url(../img/feature-header-mob-bg.png) top left no-repeat;  }
	h2.featureheading .featurecom {display:none;}


	
	.heroarea {display:block; 
		overflow: hidden;
		width:283px; 
		height:auto; 
		margin-left:10px;
		margin-bottom: 34px;
		position:relative;
		
		background-repeat: no-repeat;
		background-size: contain;
		box-shadow:none;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		
		}
	.heroblock {margin-left:1px;width:281px; height:158px; box-shadow:0 2px 3px rgba(0,0,0,0.7);
		-moz-box-shadow:0 2px 3px rgba(0,0,0,0.7);
		-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.7);}	
	.heroarea.exclusive .heroblock {background:url(../img/exc-feature-mob-bg.png) 1px 3px no-repeat; }
	.heroinfo, .heroarea:hover .heroinfo {padding-top:10px; height:auto;background: none; position:relative; margin-top:156px;  }
	.heroface {display:none;}

		.heroarea:hover h2, .heroarea h2 {font: 500 17px Oswald, Arial; width:auto; height:auto; color:#000; margin:4px 0 0 0; white-space: normal; line-height:20px;}
		.heroarea .sub_feature {color:#aab; text-shadow:none; font-size:10px; line-height:8px;margin-top:2px; margin-left:1px;display:block; float:left; width:100%; }
				.heroarea .sub_feature a {color:#27b !important;}
		.heroblurb {display:none;}	


}