.col-st{width:31.3%;}
.marg0{margin:0;}
.t1{background:#dbdbdb;float:left;border-radius:10px;text-align:center;margin:0 1%;padding:1rem;border:1px solid #bbb;}
@media(max-width:540px){.col-st{width:260px;float:none;margin:1rem auto;}}
.img1{width:100%;background:#fff;border-radius:15px;padding:.5rem;height:200px;}
.header1{position:relative;}
.header1>a{position:absolute;top:0;font-weight:500;width:100%;height:200px;transition:all .3s ease-in-out;display:block;border-radius:15px;padding-top:1.5rem;}
.header1>a:hover{background:rgba(0,0,0,.5);box-shadow:0 0 5px 0 rgba(0,0,0,.3);}
.header1>a>p{display:none;transition:all .3s ease-in-out;color:#fff;margin:.5rem 0;font-weight:bold;}
.footer1{width: 100%;display: block;border-radius: 10px;padding: .7rem;transition: all .3s ease-in-out;font-weight: bold;font-size: 1.6rem;border: 1px solid #aaa;}
.bga{background:#0f0;margin-bottom:.5rem;}
.bga:hover{background:#0ff;color:#000;box-shadow:0 0 5px 0 rgba(0,0,0,.5);}
.bgw{background:#e807cf;margin:0;cursor:default;color:#fff;}
.header1>a:hover p{
animation:tempalte 2s;
animation-iteration-count:1;
animation-direction:alternate;
display:block;
}
@keyframes tempalte{
from{opacity:.0;margin-bottom:-50px;}
to{opacity:1;margin-bottom:.5rem;}
}