@import url('https://fonts.googleapis.com/css?family=Montserrat');
body{
  background:#2d98da;
  font-family: 'Montserrat', sans-serif;
}

.card{
  position:absolute;
  display: -webkit-flex; /* Safari */
  -webkit-align-items: center; /* Safari 7.0+ */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  width:400px;
  border-radius:5px;
  
  animation-name:drop-fade;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity:0;
}

@keyframes drop-fade{
  0%{
    filter:blur(5px);
    opacity:0;
    transform:scale(2) translate(-50%,-50px);
    box-shadow:0px 0px 100px rgba(0,0,0,1);
  }
  100%{
    filter:blur(0px);
    opacity:1;
    transform:scale(1) translate(-50%,-50%);
    box-shadow:0px 40px 70px -15px rgba(0,0,0,0.3);
  }
}

.card .head{
  flex:1;
  padding:20px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.card .head .avatar{
  overflow:hidden;
  height:120px;
  width:120px;
  border-radius:60px;
  box-shadow:0px 20px 30px -10px rgba(0,0,0,0.5);
}

.card .head .avatar img{
  height:100%;
}

.card .head .name{
  margin:20px 0px 5px 0px;
}

.card .head .position{
  margin: 5px 0px 0px 0px;
  color:#456;
}

.card .body{
  padding:0px 10px 20px 10px;
}

.card .body .social{
  margin:0px;
  padding:0px;
  list-style:none;
}

.card .body .social > li{
  display:inline-block;
  margin:0px 5px;
}

.card .body .social > li > a{
  display:block;
  height:40px;
  width:40px;
  border:1px solid #dfdfdf;
  border-radius:40px;
  text-align:center;
}

.card .body .social > li > a > i{
  line-height:40px;
}

.card .body .social > li > a{
  text-decoration:none;
  color:#aaa;
  transition-duration:0.2s;
}

.card .body .social > li > a:hover{
  color:#fff;
}

.card .body .social > li > a.fb:hover{
  background:#3B5998;
  border-color:#3B5998 ;
}

.card .body .social > li > a.tw:hover{
  background:#0084b4;
  border-color:#0084b4 ;
}

.card .body .social > li > a.in:hover{
  background:#0077B5;
  border-color:#0077B5 ;
}

.card .body .social > li > a.em:hover{
  background:#f39c12;
  border-color:#f39c12 ;
}

.card .body .social > li > a.ig:hover{
  background:#e95950;
  border-color:#e95950 ;
}

.card .body .social > li > a.wb:hover{
  background:#212121;
  border-color:#212121 ;
}
.card .body .social > li > a.wp:hover{
  background:#25D366;
  border-color:#25D366 ;
}