.flipcard {
  min-height: 420px;
  max-width: 300px;
  margin: 0 auto 40px auto;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  perspective: 600px;
  transition: 0.5s; 
  position: relative;
  display: block;
}

#views-bootstrap-sca-team-block-3 .flipcard {
  min-height: 350px;
}

.flipcard:hover .card-front {
  transform: rotateY(180deg);
  overflow: visible;
}

.flipcard:hover .card-back {
  transform: rotateY(0deg);
  transition-delay: .1s;
  overflow: visible;
}

.card-front {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #DCDDDE;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: all 0.5s ease-in-out;
  border-radius: 5px;
  overflow: hidden;
  z-index: 10;
}

.bio-image {
  position: relative;
  margin-bottom: 15px;
  top:0;
  height:auto;
  overflow: hidden;
}

.bio-info {
  padding: 0px 10px 20px 10px;
  position:relative;
}

.bio-info h4 {
  margin-bottom:5px;
  padding-bottom: 0;
  color: #333 !important;
}
.bio-info p {
  font-size: 14px;
  line-height: 1.5;
}

.card-back {
  height: 100%;
  width: 100%;
  display:block;
  padding:15px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(-180deg);
  transition: all 0.5s ease-in-out;
  font-size: 16px;
  color: #fff;
  text-align: left;
  border-radius: 5px;
  overflow: hidden;
  z-index: 10;
}

.card-back h2 {
  margin: 20% auto 5% auto;
  font-size: 26px;
}
.card-back h2 span {
  font-size: 20px;
}
.card-back a.views-more-link {
  display:block;
  margin:10px auto 10px auto;
  text-align: center;
  padding:12px 16px;
  font-weight:700;
  font-size:16px;
  text-decoration: none;
  line-height:1.0;
  color: #fff;
  background-color: #D63B28;
  border-color: #D63B28;
  border-radius: 0;
  transition: all 0.2s linear;
}
.card-back a.views-more-link:hover {
  color: #fff;
  background-color: #DCDDDE;
  border-color: #DCDDDE;
  text-decoration:none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0;
}

@media all and (max-width:992px) {

  .flipcard,
  #views-bootstrap-sca-team-block-3 .flipcard {
    min-height: 440px;
  }

}