.flip-card-widget {
  width: 555px;
  height: 100%;
  position: relative;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px; }
  .flip-card-widget .flip-card {
    width: 100%;
    height: 100%;
    background: #000;
    border: none;
    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; }
    .flip-card-widget .flip-card figure {
      margin: 0;
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden; }
      .flip-card-widget .flip-card figure img {
        width: 100%;
        height: auto;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden; }
    .flip-card-widget .flip-card .back {
      	/*
        -webkit-transform: rotateY( 180deg );
        -moz-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
        -webkit-transform: rotateY( 180deg ) translateZ(0);
        -moz-transform: rotateY( 180deg ) translateZ(0);
        -o-transform: rotateY( 180deg ) translateZ(0);
        transform: rotateY( 180deg ) translateZ(0);
        */
      -webkit-transform: rotateY(180deg) translate3d(0px, 0px, 0px);
      -moz-transform: rotateY(180deg) translate3d(0px, 0px, 0px);
      -o-transform: rotateY(180deg) translate3d(0px, 0px, 0px);
      transform: rotateY(180deg) translate3d(0px, 0px, 0px); }
    .flip-card-widget .flip-card.flipped {
      -webkit-transform: rotateY(180deg) translate3d(0px, 0px, 1px);
      -moz-transform: rotateY(180deg) translate3d(0px, 0px, 1px);
      -o-transform: rotateY(180deg) translate3d(0px, 0px, 1px);
      transform: rotateY(180deg) translate3d(0px, 0px, 1px); }

@media (min-width: 992px) and (max-width: 1199px) {
  .flip-card-widget {
    width: 555px;
    height: 370px; } }
@media (min-width: 768px) and (max-width: 991px) {
  .flip-card-widget {
    width: 407.5px;
    height: 271px; } }
@media (max-width: 768px) {
  .flip-card-widget {
    width: 100%;
    height: 370px; }
    .flip-card-widget .flip-card figure {
      text-align: center; }
      .flip-card-widget .flip-card figure img {
        max-height: 370px;
        width: auto; } }
@media (max-width: 500px) {
  .flip-card-widget {
    width: 100%;
    height: 246px; }
    .flip-card-widget .flip-card figure {
      text-align: center; }
      .flip-card-widget .flip-card figure img {
        width: auto;
        max-height: 246px; } }