.card_wrap {width:60%;   display:flex; flex-wrap:wrap; justify-content:space-between;   box-sizing:border-box;   margin-left:20%}

 
.card-container {
  width:24%; 
  height: 180px; 
  }
.card-container:hover .card, .card-container.hover .card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card-container.static:hover .card, .card-container.static.hover .card {
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
}

/* flip the pane when hovered */
/* flip speed goes here */
.card {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
   width:100%
}

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(255,255,255,.05);
   
/*   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
   */}

/* front pane, placed above back */
.front {
  z-index: 2; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.5)
}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/*        Style*/
.card {
  background: none repeat scroll 0 0 #FFFFFF;
  border-radius: 4px;
  color: #fff;
}

.front, .back {
  width: 100%;
  height: 180px;
  border-radius: 4px;
}
  
 
.card .user img {
    width:50%; border-radius:50%; margin-left:25%; margin-top:-20%
}
.card .content {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none; padding:0 8%; box-sizing:border-box; margin-top:0;
 }
.card .content  p {font-size:1rem; font-weight:400; line-height:1.3em; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,.6) } 
 
.card .name {

  font-size: 1.5rem; letter-spacing:-1px;
  line-height: 1.3em; font-weight:600; 
   margin-bottom:10px; 
  text-align: center; 
  text-transform: capitalize;  text-shadow:2px 2px 4px rgba(0,0,0,.4)
}
.card  .card_link {width:100%; display:inline-block; text-align:center; height:100%; box-sizing:border-box; position:relative}
.card  .card_link a {width:100%; height:100%;  display:inline-block; position:relative}
.card  .card_link a span { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);   color:#fff !important; font-weight:600; font-size:1.1rem; line-height:1em}


.card h5 {
  margin: 5px 0;
  font-weight: 400;
  line-height: 20px;
}
.card .profession {
  color: #999999;
  text-align: center;
  margin-bottom: 20px;
}
.card .footer {
  border-top: 1px solid #EEEEEE;
  color: #999999;
  margin: 30px 0 0;
  padding: 10px 0 0;
  text-align: center;
}
.card .footer .social-links {
  font-size: 18px;
}
.card .footer .social-links a {
  margin: 0 7px;
}
.card .header {
  padding: 15px 20px;
  height: 90px;
}
.card .motto {
  border-bottom: 1px solid #EEEEEE;
  color: #999999;
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 10px;
  text-align: center;
}

/*      Just for presentation*/
.title {
  color: #506A85;
  text-align: center;
  font-weight: 300;
  font-size: 44px;
  margin-bottom: 90px;
  line-height: 90%;
}
.title small {
  font-size: 17px;
  color: #999;
  text-transform: uppercase;
  margin: 0;
}

.space-50 {
  height: 50px;
  display: block;
}

.space-200 {
  height: 200px;
  display: block;
}

.white-board {
  background-color: #FFFFFF;
  min-height: 200px;
  padding: 60px 60px 20px;
}

.ct-heart {
  color: #F74933;
}

pre.prettyprint {
  background-color: #ffffff;
  border: 1px solid #999;
  margin-top: 20px;
  padding: 20px;
  text-align: left;
}

.atv, .str {
  color: #05AE0E;
}

.tag, .pln, .kwd {
  color: #3472F7;
}

.atn {
  color: #2C93FF;
}

.pln {
  color: #333;
}

.com {
  color: #999;
}
.card .content {position:absolute; left:0; top:50%; width:100%;  transform: translate(0, -50%);}

 @media all and (max-width:1600px) {
 .card_wrap {width:90%; margin-left:5%}
 }


 @media all and (max-width:1300px) {
   .card .name {font-size:1.2rem}
}

 

@media all and (min-width:800px) {
.m_card  {display:none; }
 }
 @media all and (max-width:800px) {
.m_card ul {width:90%; margin-left:5%; display:flex; flex-wrap:wrap; justify-content:space-between}
.m_card ul li {width:49%; margin-bottom:2%; padding:20px; box-sizing:border-box; text-align:center; 
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.5);
border-radius:5px ; display:flex; align-items:center; justify-content:center}


 .m_card ul li a { color:#fff !important; font-weight:700 ; font-size:1.05rem; line-height:1.4em; text-shadow:2px 2px 4px rgba(0,0,0,.4);}
}