@import 'https://fonts.googleapis.com/css?family=Lily+Script+One';

.card {
  position: absolute;
  bottom: 25px;
  /*top: 50%;*/
  left: 0;
  right:0;
  width: 300px;
  height: 218px;
  margin:  auto;
  float: left;
  overflow:hidden;
  perspective: 500px;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;


  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}

.front,
.back {
	padding-top:17%;
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  color: #3c3c3c;
  text-align: center;
  font-size: 14px;
  backface-visibility: hidden;
}

.back {
	 display: flex
;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    color: #0083ca;
    font-weight:bold;
    transform: rotateY( 180deg );
}