body{
padding-top:70px;
}

a:link{
color:#FF3366;

}

 a:visited{
color:#DB0037;
}

.life{
font-size:24px;
text-align:center;
color:#333;
margin-top:0px;
padding-bottom:10px;
font-family:Georgia, "Times New Roman", Times, serif;
}

#top_banner svg{
width:100%;
opacity:0;
}

.flex_box{
display: flex;
flex-wrap:wrap;
 justify-content:space-between;
 align-items: stretch;
}

.ma {
 flex-direction: column;
width:280px;
height:280px;
overflow:hidden;
background-color:#FFFFFF;
border:1px solid #ddd;
border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-bottom:30px;
  transition: .9s;
  opacity: 1;
}


.ma  img{
object-fit: cover;
  width: 100%;
  height: 150px;
  border:none;
border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}



div.ma > div.text_area > a > span.btn{

display:inline-block;
font-size:16px;
font-weight:bold;
padding:0 1em;
margin:-280px auto 0 auto;
margin-left:1em;
opacity:0.9;
color:#FFFFFF;
}

.ma h2{
font-size:16px;
padding:0 1em ;
margin-top:0;
max-height:2.2em;
overflow:hidden;
font-weight:bold;
}

.ma > a > h2 > span{
padding-left:0;
}




.ma p{
font-size:11px;
padding:0 1.5em ;
color:#666666;
height:30px;
overflow:hidden;
}

.hi{
margin-top: auto;
text-align:right;
font-size:9px;
color:#666666;
padding-right:10px;
}
@media (max-width: 629px)  { 
body{
padding-top:100px;
}


.life,#top_banner svg{
display:none;
}

.ma {
width:100%;
  height: auto;
  padding-bottom:0em;
}

.ma  img{
object-fit: cover;
  width: 100px;
  height: 150px;
  border:none;
  float:left;
  border-top-left-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 4px;
}


}

@media (min-width: 576px) and (max-width: 929px) { 
.flex_box{
 justify-content:center;
}



}