[html]
<style>
@import url(https://fonts.googleapis.com/css?family … italic,700);
@import url(https://fonts.googleapis.com/css?family … 00,800,900);
::selection {
  color: #fff;
  background: #2a2b39;
}

::-moz-selection {
  color: #fff;
  background: #2a2b39;
}

body, html {
  font-family: 'Raleway', sans-serif;
  background-image: url(http://imgh.us/bg_1.svg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  z-index: 9;
}

.row {
display: flex;
justify-content: center;
margin-bottom: 15px;
}

.card-wrapper {
flex: 1;
}

p {
  padding: 0;
  margin: 0;
  display: inline-block;
}

a {
  color: #2a2b39;
  text-decoration: none;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
a:hover {
  color: #6acd79;
}

.bussinesscard {
  margin-right: 10px;
  height: 320px;
/** width: 270px; **/
  overflow: hidden;
  box-shadow: 0px 0px 43px -10px black;
}

.bussinesscard .flip {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.bussinesscard .front {
  z-index: 11;
  height: 100%;
  background: #fff;
  box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.bussinesscard .front .top {
  background: #1f2c40;
}
.bussinesscard .front .top:after {
  position: absolute;
  content: '';
  pointer-events: none;
}
.bussinesscard .front .top:after {
  left: 50%;
  width: 2em;
  height: 2em;
  -moz-transform: translateX(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
  top: 145px;
  z-index: 10;
  background: inherit;
}
.bussinesscard .front .top .logo {
  display: inline-block;
  background: #929fb0;
  color: #fff;
  z-index: 11;
  padding: .16em;
  border: 8px solid #936d5e;
  position: relative;
  pointer-events: none;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  left: 50%;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  font-size: 4em;
}
.bussinesscard .front .top .logo .fat {
  font-weight: 800;
}
.bussinesscard .front .top .logo .skinny {
  font-weight: 100;
}
.bussinesscard .front .nametroduction {
  margin-top: 4.4em;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  z-index: 8;
padding: 10px;
}
.bussinesscard .front .name {
  color: #2a2b39;
  font-weight: 400;
  font-size: 2.5em;
  text-align: center;
  position: relative;
  margin-bottom: .35em;
}
.bussinesscard .front .name:after {
  content: '';
  position: absolute;
  top: 1.6em;
  width: 20%;
  left: 40%;
  right: 40%;
  height: 1px;
  background: #2a2b39;
}
.bussinesscard .front .introduction {
  text-align: center;
  color: #2a2b39;
  font-family: 'Old Standard TT', serif;
  font-style: italic;
  font-size: 1.4em;
}
.bussinesscard .front .contact {
  color: #2a2b39;
  margin-left: 1.7em;
  font-weight: 300;
  font-size: 1.6em;
  -moz-transform: translateY(400%);
  -ms-transform: translateY(400%);
  -webkit-transform: translateY(400%);
  transform: translateY(400%);
}
.bussinesscard .front .contact span {
  color: #2D3244;
  font-size: 1.7em;
  width: 1.3em;
  display: inline-block;
}
.bussinesscard .front .contact a {
  position: relative;
  bottom: .24em;
}
.bussinesscard .back {
  width: 100%;
  height: 100%;
  background: #fff;
  backface-visibility: hidden;
}

.tooltip {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: #fff;
  font-weight: 300;
  padding: .4em;
  background: #2a2b39;
}

.front .top .logo img {
  width: 100px;
  heoght: 100px;
}

/* HOVER ANIMATIONS */
.front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact, .front .top .logo img {
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.flip:hover .front .top .logo {
  margin-top: .28em;
  font-size: 1.3em;
  border: 3px solid #fff;
  margin-left: .15em;
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  left: 0;
}

.flip:hover .front .top .logo img {
  width: 30px;
  heoght: 30px;
   -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.flip:hover .front .top {
  height: 15%;
}
.flip:hover .front .top:after {
  width: 1.5em;
  height: 1.5em;
  top: 35px;
}

.flip:hover .front .nametroduction {
  -moz-transform: translateY(600%);
  -ms-transform: translateY(600%);
  -webkit-transform: translateY(600%);
  transform: translateY(600%);
}

.flip:hover .front .contact {
  -moz-transform: translateY(-52%);
  -ms-transform: translateY(-52%);
  -webkit-transform: translateY(-52%);
  transform: translateY(-52%);
     min-height: 160px;
}

.resp {
  text-align: left;
  padding-left: 0!important;
  margin: 10px!important;
}

.resp li {
  font-size: 0.7em;
  list-style: circle!important;
}

.cont-wrap {
text-align: center;
}

.cont {
  display: inline-block;
  font-size: 0.6em;
  background: #d3dce8;
  padding: 8px 12px;
  text-align: center;
  border-radius: 20px;
  margin-top:20px!important;
  margin-right:15px!important;
}
</style>

<div class="row">
<div class="card-wrapper">
<section class="bussinesscard">
    <div class="flip">
    <div class="front">       
        <div class="top">       
        <div class="logo"><img src="http://s6.uploads.ru/zI145.png"></div>       
        </div>
        <div class="nametroduction">
        <div class="name">Capt. Jack Harkness</div>
        <div class="introduction">Капитан корабля, администратор</div>
        </div>
        <div class="contact">
                                   <ul class="resp">       
               <li> пиар отдел (курирование каталогов, заключение и расторжение партнерства) </li>
                                       <li> проверка и прием анкет </li>
                                       <li> работа с организационными темами </li>
                                       <li> составление списков на удаление </li>
                                       <li> проставление нужных в таблицу форума </li>
        </ul>
                                <div class="cont-wrap">
                                        <div class="cont">
            <span class="icon"><img src="http://s3.uploads.ru/ePQmg.png"></span>
            <a href="http://timetocross.rusff.ru/profile.php?id=30">Профиль</a>
        </div>
        <div class="cont">
            <span class="icon"><img src="http://s8.uploads.ru/7auRx.png"></span>
            <a href="https://vk.com/dkernz">В контакте</a>
        </div>
                                        <div class="cont">
            <span class="icon"><img src="http://sg.uploads.ru/hlRui.png"></span>
            tenno_kami
        </div>
                                      <div class="cont">
            <span class="icon"><img src="http://s6.uploads.ru/t/z90QX.png"></span>
            @javik_thane
        </div>
                                        </div>
        </div>           
    </div>
    <div class="back"></div>
    </div>
</section>
</div>

</div>

<div class="row">

<div class="card-wrapper">
<section class="bussinesscard">
    <div class="flip">
    <div class="front">       
        <div class="top">       
        <div class="logo"><img src="https://i.imgur.com/TdxDfEx.png"></div>       
        </div>
        <div class="nametroduction">
        <div class="name">Wade Wilson</div>
        <div class="introduction">Прикрыватель капитана, модератор</div>
        </div>
        <div class="contact">           
        <ul class="resp">       
                                       <li> проверка и прием анкет </li>                                       
                                       <li> разработка и написание новостей</li>
                                       <li> работа с организационными темами </li>
                                       <li> разработка, подготовка и проведение различных игр и конкурсов по форуму</li>
        </ul>
                                <div class="cont-wrap">
                                        <div class="cont">
            <span class="icon"><img src="http://s3.uploads.ru/ePQmg.png"></span>
            <a href="http://timetocross.rusff.ru/profile.php?id=106">Профиль</a>
        </div>   
        <div class="cont">
            <span class="icon"><img src="http://s8.uploads.ru/7auRx.png"></span>
            <a href="https://vk.com/id95254858">В контракте</a>
        </div>
                                        </div>
        </div>           
    </div>
    <div class="back"></div>
    </div>
</section>
</div>

<div class="card-wrapper">
<section class="bussinesscard">
    <div class="flip">
    <div class="front">       
        <div class="top">       
        <div class="logo"><img src="http://s8.uploads.ru/S1ifZ.jpg"></div>       
        </div>
        <div class="nametroduction">
        <div class="name"> Fenris</div>
        <div class="introduction">Эльф ваших заявок и игр, администратор</div>
        </div>
        <div class="contact">           
          <ul class="resp" style="margin-top: 20px!important">       
        <li>работа с акционными блоками (поднять/убрать заявку)</li>
                                       <li>курирование эпизодов </li>
                                       <li>ответы в гостевой и в темах отсутствия </li>
                                       <li>выдача наград </li>
                                       <li>подготовка ежемесячных перекличек </li>
        </ul>
                                <div class="cont-wrap">
                                        <div class="cont">
            <span class="icon"><img src="http://s3.uploads.ru/ePQmg.png"></span>
            <a href="http://timetocross.rusff.ru/profile.php?id=63">Профиль</a>
        </div>   
        <div class="cont">
            <span class="icon"><img src="http://s8.uploads.ru/7auRx.png"></span>
            <a href="https://vk.com/id175155600">ВК</a>
        </div>
                                        </div>
        </div>           
    </div>
    <div class="back"></div>
    </div>
</section>
</div>

</div>

<div class="row">

<div class="card-wrapper">
<section class="bussinesscard">
    <div class="flip">
    <div class="front">       
        <div class="top">       
        <div class="logo"><img src="https://i.imgur.com/FP4k0zi.jpg"></div>       
        </div>
        <div class="nametroduction">
        <div class="name">Ianto Jones</div>
        <div class="introduction">Внимание к деталям, модератор</div>
        </div>
        <div class="contact">           
        <ul class="resp">       
                                       <li>Ведение паблика в ВК</li>                                       
                                       <li>работа с организационными темами </li>
                                       <li> разработка, подготовка и проведение различных игр и конкурсов по форуму</li>
                                       <li>работа с блоком банк: куда делись мои минутки?</li>
        </ul>
                                <div class="cont-wrap">
                                        <div class="cont">
            <span class="icon"><img src="http://s3.uploads.ru/ePQmg.png"></span>
            <a href="http://timetocross.rusff.ru/profile.php?id=71">Профиль</a>
        </div>   
        <div class="cont">
            <span class="icon"><img src="http://s8.uploads.ru/7auRx.png"></span>
            <a href="https://vk.com/id362286594">ВК</a>
        </div>
                                        </div>
        </div>           
    </div>
    <div class="back"></div>
    </div>
</section>
</div>

<div class="card-wrapper">
<section class="bussinesscard">
    <div class="flip">
    <div class="front">       
        <div class="top">       
        <div class="logo"><img src="https://funkyimg.com/i/2Tmks.png"></div>       
        </div>
        <div class="nametroduction">
        <div class="name">Hermann Gottlieb</div>
        <div class="introduction">K-Science lab-графики, модератор</div>
        </div>
        <div class="contact">           
          <ul class="resp">       
        <li>работа с графикой</li>                                       
                                       <li>помощь в оформлении новостей</li>
                                       <li>помощь в организационных темах</li>
                                       
        </ul>
                                <div class="cont-wrap">
                                        <div class="cont">
            <span class="icon"><img src="http://s3.uploads.ru/ePQmg.png"></span>
            <a href="http://timetocross.rusff.ru/profile.php?id=697">Профиль</a>
        </div>   
        <div class="cont">
            <span class="icon"><img src="http://s6.uploads.ru/t/z90QX.png"></span>
            @gottbleed
        </div>
                                                 
                                        </div>
        </div>           
    </div>
    <div class="back"></div>
    </div>
</section>
</div>

</div>

<div class="row">
<div class="card-wrapper">
<section class="bussinesscard">
    <div class="flip">
    <div class="front">       
        <div class="top">       
        <div class="logo"><img src="http://s3.uploads.ru/qBh2u.jpg"></div>       
        </div>
        <div class="nametroduction">
        <div class="name">Prince</div>
        <div class="introduction">Часовщик, модератор-техник</div>
        </div>
        <div class="contact">           
        <ul class="resp">       
                                       <li>решение технических проблем, исправление багов, введение новых функций</li>
        </ul>
                                <div class="cont-wrap">
                                        <div class="cont">
            <span class="icon"><img src="http://s3.uploads.ru/ePQmg.png"></span>
            <a href="http://timetocross.rusff.ru/profile.php?id=494">Профиль</a>
        </div>   
        <div class="cont">
            <span class="icon"><img src="http://sg.uploads.ru/hlRui.png"></span>
            hilda_austen
        </div>
                                        </div>
        </div>           
    </div>
    <div class="back"></div>
    </div>
</section>
</div>

[/html]