/* layout for midcrop
<div class="blog-header-img" style="height: 220px; max-width: 350px;" >
                            
                            <div class="background-img-midcrop">
                              <img id="imagePreviewInFeed" src=""  data-image=""  alt="pic" style="opacity:1;"  >
                            </div>
                            </div>*/



@media (max-width:768px) and (min-width:480px) {
		
		.background-img-midcrop  {
			max-height: 320px;} 
                .blog-header-img{
                    max-height: 290px;
                }
	}



.background-img-midcrop  {
		max-height: 160px;
		overflow: hidden;
	}
.background-img-midcrop img {
		position: absolute;
		top: -100%;
		bottom: -100%;
		right: -100%;
		left: -100%;
		margin: auto;
		min-width: 100%;
		min-height: 100%;
		opacity: 0.3;
		/*max-height: 320px;*/
		max-width: 140%;
		width: inherit !important;
	}
	
	
	
        
        

       
 

.blog-header-img {
  height: 220px;
  max-height: 380px;
  overflow: hidden;
  position: relative;
  border-radius: 4px 4px 0 0;
}
.blog-header-img img {
  width: 100%;
  min-height: 100%;
}


.blog-header-img:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  
  background: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
}