.memRow{
margin-top: 15px; margin-bottom: 15px; margin-left: -15px; margin-right: -15px; min-width: 1200px; }
.mid{
margin-left: auto; margin-right: auto; position: relative; float: none; clear: both; padding:0;
} .mid:after {
display: block; content: ' '; clear: both;
} .people{
background-size: 100% 100%; background-repeat: no-repeat; min-height: 300px; max-height: 300px; float: left;
} .peoplebox{
padding: 30px; background: rgba(0,0,0,0.71); color: white; height: 300px; overflow: hidden; text-align: justify; position: absolute; visibility: hidden; display: none;
} .show .peoplebox {
visibility: visible; display: block; /*animation:show .5s ease; -webkit-animation:show .5s ease; animation-iteration-count:1; -webkit-animation-iteration-count:1;*/ top: 0;
} /*@keyframes show{
from{top: 300px;} to{top: 0px;}
}*/ .peoplename{
font-size: 35px; margin: 0; line-height: 0; text-shadow: 0 0 6px black; padding-top: 0px; position: relative; top: 5px;
} .peoplejob{
color: #79acdd; font-size: 20px; line-height: 0; position: relative; top: 12px;
} .peopleword{
position: relative; top: 12px; font-size: 15px; line-height: 1px;
} .col-md-3 .people, .col-md-3 .peoplebox{
width: 100%;
} .col-md-6 .people, .col-md-6 .peoplebox{
width: 50%;
} .col-md-9 .people, .col-md-9 .peoplebox{
width: 33.33%;
} .col-md-12 .people, .col-md-12 .peoplebox{
width: 25%;
} .membericon{
width: 50px; height: 50px; background:url(); position: absolute; bottom: 4%; left: 50%; margin-left: -25px; background-repeat: no-repeat; background-size: 100% 100%;
} .membericon:hover{
animation: micon 0.5s ease; animation-iteration-count: 5;
} @keyframes micon{
0%{bottom: 4%} 50%{bottom: 0} 100%{bottom: 4%}
} @media(max-width: 767px){
.peoplebox{ position: relative; } .people{ width: 100% !important; } .memRow{ min-width: 0; margin-top: 0; margin-bottom: 0; }
}