/**
 * The cards
 *
 * Each card plays home to a front and back. I've set them up as squares here
 * by using the padding technique, but you may set them up in any dimensions
 * you like based on your site design.
 */
 .vcenter {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 80px;
  color: #000000;
  font-family: "Roboto Slab", serif;
  font-size: 80px;
  line-height: 80px;
 }
 
 
.card__text {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 20px;
  color: #000000;
  font-family: "Roboto Slab", serif;
  line-height: 20px;
}
 
.card {
  position: relative;
  float: left;
  width: 14%;
  padding-top: 10%;
  padding-bottom: 10%;
  text-align: center;
  cursor: pointer;
}

.cardr {
  position: relative;
  width: 40%;
  padding-top: 28%; /*4 x card.padding top*/
  padding-bottom: 28%;
  text-align: center;
}

.carda {
  position: absolute;
  width: 8%;
  /*padding-top: 6%; /*card.padding top/1,25
  padding-bottom: 6%;*/
  text-align: center;
}

.btn {
  cursor: pointer;
}


/* card fronts and backs */
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 100%;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__front {
  /*background-color: #ff5078;*/
}

.card__back {
  z-index: 10;
  /*background-color: #1e1e1e;*/
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

/* click effect */
.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}