our team member

<div class="sin-team col-md-3 col-sm-6 col-xs-12">  <div class="team-wrap">  <div class="team-image"><img src="../img/team/1.jpg" alt="" /></div>  <div class="team-details">          <h3>BILLY CASTRO</h3>       <h4>MANAGER</h4>    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, seddiam euismod tincidunt</p>          <div class="team-social">               <a class="facebook" href="#"><i class="zmdi zmdi-facebook"></i></a>             <a class="twitter" href="#"><i class="zmdi zmdi-twitter"></i></a>               <a class="vimeo" href="#"><i class="zmdi zmdi-vimeo"></i></a>           <a class="google-plus" href="#"><i class="zmdi zmdi-google-plus"></i></a>               <a class="tumblr" href="#"><i class="zmdi zmdi-tumblr"></i></a>         <a class="pinterest" href="#"><i class="zmdi zmdi-pinterest"></i></a>     </div>  </div>  </div></div><div class="sin-team col-md-3 col-sm-6 col-xs-12">  <div class="team-wrap">   <div class="team-image"><img src="../img/team/2.jpg" alt="" /></div>  <div class="team-details">          <h3>BILLY CASTRO</h3>       <h4>MANAGER</h4>    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, seddiam euismod tincidunt</p>          <div class="team-social">               <a class="facebook" href="#"><i class="zmdi zmdi-facebook"></i></a>             <a class="twitter" href="#"><i class="zmdi zmdi-twitter"></i></a>               <a class="vimeo" href="#"><i class="zmdi zmdi-vimeo"></i></a>           <a class="google-plus" href="#"><i class="zmdi zmdi-google-plus"></i></a>               <a class="tumblr" href="#"><i class="zmdi zmdi-tumblr"></i></a>         <a class="pinterest" href="#"><i class="zmdi zmdi-pinterest"></i></a>     </div>  </div>  </div></div><div class="sin-team col-md-3 col-sm-6 col-xs-12">  <div class="team-wrap">   <div class="team-image"><img src="../img/team/3.jpg" alt="" /></div>  <div class="team-details">          <h3>BILLY CASTRO</h3>       <h4>MANAGER</h4>    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, seddiam euismod tincidunt</p>          <div class="team-social">               <a class="facebook" href="#"><i class="zmdi zmdi-facebook"></i></a>             <a class="twitter" href="#"><i class="zmdi zmdi-twitter"></i></a>               <a class="vimeo" href="#"><i class="zmdi zmdi-vimeo"></i></a>           <a class="google-plus" href="#"><i class="zmdi zmdi-google-plus"></i></a>               <a class="tumblr" href="#"><i class="zmdi zmdi-tumblr"></i></a>         <a class="pinterest" href="#"><i class="zmdi zmdi-pinterest"></i></a>     </div>  </div>  </div></div><div class="sin-team col-md-3 col-sm-6 col-xs-12">  <div class="team-wrap">   <div class="team-image"><img src="../img/team/4.jpg" alt="" /></div>  <div class="team-details">          <h3>BILLY CASTRO</h3>       <h4>MANAGER</h4>    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, seddiam euismod tincidunt</p>          <div class="team-social">               <a class="facebook" href="#"><i class="zmdi zmdi-facebook"></i></a>             <a class="twitter" href="#"><i class="zmdi zmdi-twitter"></i></a>               <a class="vimeo" href="#"><i class="zmdi zmdi-vimeo"></i></a>           <a class="google-plus" href="#"><i class="zmdi zmdi-google-plus"></i></a>               <a class="tumblr" href="#"><i class="zmdi zmdi-tumblr"></i></a>         <a class="pinterest" href="#"><i class="zmdi zmdi-pinterest"></i></a>     </div>  </div>  </div></div>

/* Team Style */.sin-team{}.team-wrap {  border: 2px solid #eee;  position: relative;}.team-image {  position: relative;}.team-image::before {  background: #f05a66 none repeat scroll 0 0;  position: absolute;  left: 0;  right: 0;  bottom: 0;  top: 0;  opacity: 0;  content: "";}.sin-team:hover .team-image::before {  opacity: .8;}.team-image img {  width: 100%;}.team-details {  bottom: 0px;  left: 0;  opacity: 0;  padding: 0 15px;  position: absolute;  right: 0;  text-align: center;}.sin-team:hover .team-details {  bottom: 30px;  opacity: 1;}.team-details h3 {  color: #fff;  font-size: 18px;  font-weight: 500;  line-height: 14px;  margin: 0 0 10px;}.team-details h4 {  color: #fff;  font-size: 14px;  font-weight: 400;  line-height: 12px;  margin: 0 0 18px;}.team-details p {  color: #fff;  font-weight: 300;  line-height: 23px;  margin-bottom: 25px;}.team-social{}.team-social a {  color: #fff;  display: inline-block;  font-size: 20px;  height: 30px;  line-height: 30px;  text-align: center;  width: 30px;}.team-social a i {  display: block;  line-height: 30px;}.team-social a.facebook:hover {  color: #3B5998;}.team-social a.twitter:hover {  color: #55ACEE;}.team-social a.vimeo:hover {  color: #52b8ea;}.team-social a.google-plus:hover {  color: #DC473A;}.team-social a.tumblr:hover {  color: #36465D;}.team-social a.pinterest:hover {  color: #BD081C;}