.main_card
    {
    
    overflow-y:hidden;
    overflow-x:hidden;
    margin-top:20px;
    margin-left:20px;  
   background-color: white;
    border-radius: 10px;
    transition:all .8s ease-in;
    width:270px;
    height:255px;
    box-shadow:0 8px 19px 0 rgba(0,0,0,0.16),0 4px 13px 0 rgba(0,0,0,0.12);
    float:left;
    cursor:pointer;
    }
        
    .caption
    {
        font-weight:bold;
        padding-top: 15px;
        padding-bottom: 15px;
        transition:all .8s ease-in;
        border-radius:10px 10px 0px 0px;
        }    
    
    .img_area
    {
    width:100%;
    transition:all .8s ease-in;
    height:200px;
   
    }
   
    .img_prod
    {
       padding: 5px;
       padding-bottom:0px;
    position: relative;
    top: 0px;
    transition: all .8s ease-in;
    border-radius: 10px;
    width: 100%;
    height: 197px;
    }    
             
    .text_heading
    {
    background-color:white ; 
    transition:all .8s ease-in;
    z-index:9;
    text-align:center;
    width:100%;
    height:105%;
    font-family: "Titillium Web", "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size:15px;
    font-weight:300;
    color:Black ;
    
    }
             
             
    .text_area
    {
    position:relative;
    opacity:0.0;
    padding: 20px 10px 0px 5px;
    z-index:9;
    height:200px;
    transition:all .8s ease-in;
    background-color:white ; 
    font-size:14px;
    font-style:italic;  
    color:Black;
    }
                 
    .text_heading:hover .text_area 
    {
        opacity:1.0;
    }     
    .text_heading:hover .img_area 
    {
    opacity:0;
    height :0px;
               
    }     
                
   
                
    .text_heading:hover .img_prod
    {
    top:-200px;     
    }
   
   
    .text_heading:hover .main_card
    {
    padding-top:0px !important;     
    
    
    }
   
   
    .text_heading:hover .caption
    {
    background-color:#2c5364;
    top:0px;
    color:white;  
    cursor:pointer;
    }