.container-card {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  /*border: 1px solid #CCC;*/
  /*-webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;*/


  perspective: 1000;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#card.flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

#card figure {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

#card .front {
  /*border: 1px solid black;*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

#card .back {
 /*background: blue;*/
 /*border: 1px solid rgb(227,138,48);*/
 -webkit-transform: rotateY( 180deg );
 -moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
 transform: rotateY( 180deg );
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -o-backface-visibility: hidden;
 backface-visibility: hidden;
}
#flip{
  background-color: rgb(227,138,48);
  color: white;
}