/* General */
.blogpost-title{
	color:#003366;
	max-height: 50px;
}
.blogpost-subtitle{
	font-style:italic;
	color:#006F99;
}
div .blogpost-title{
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
/*Columns*/
#blog-columns li{
	position:relative;
	float:left;
	width:33%;	
}
#blog-columns .blogpost-content{
	display:block;
	position:relative;
	height:300px;
	margin:6px;
	background-color:#FFF;
	border:1px solid #CCC;
	border-top: 5px solid #63B1CE;
	background-repeat:no-repeat;
	background-size:100% auto;	
}
#blog-columns .blogpost-title-box{
	position: absolute;
	bottom: 0px;
	height:60px;
	background-color: rgba(255, 255, 255, 0.9);
	width: 90%;
	padding: 5%;
	border-top: 4px solid #84A740;
}
#blog-columns .blogpost-title{
	font-size: 100%;
}
#blog-columns .blogpost-date{
	padding:2px;
	font-style:italic;
	color:#888;	
	font-size: 90%;
}
#blog-columns .blogpost-author{
	padding-top:2px;
	font-style:italic;
	color:#888;	
}

@media only screen and (max-width: 1023px){
	#blog-columns li{
		float:none;
		width:100%
	}
}

/* LIST STYLE*/
#blog-list .blogpost{
	display:block;
	padding:4px;
	border-bottom:1px solid #EFEFEF;
}
#blog-list .blogpost-content{
	display:block;
	text-decoration:none;
	padding:10px;
	background-size:120px auto;
	background-repeat:no-repeat;
	padding-left:150px;
	background-position:left center;
}	
#blog-list .blogpost-title{
	min-height:40px;	
}
#blog-list .blogpost:hover{
	background-color:#EFEFEF;
	cursor:pointer;
}
#blog-list .blogpost-date{
	font-style:italic;
	color:#666;
}

@media only screen and (max-width: 1023px){
	#blog-list .blogpost-content{
		padding-left:0px;
		background-size:0px 0px;
	}
	#blog-list .blogpost-image img{
		width:100%;
		height:auto;
	}
}