.flip-box {

    background-color: transparent;

    width: 100%;

    /*height: 100%;*/

    perspective: 1000px;

  }

  

  .flip-box-inner {

    position: relative;

    width: 100%;

    /*height: 100%;*/

    text-align: center;

    transition: transform 0.8s;

    transform-style: preserve-3d;

  }

  

  .flip-box:hover .flip-box-inner {

    transform: rotateY(180deg);

  }

  

  .flip-box-front, .flip-box-back, .pink-flip-box-back, .cyan-flip-box-back {

    position: absolute;

    width: 100%;

    /*height: 100%;*/

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

  }

  

  .flip-box-back {

    background-color: #9ccd64;

    color: white;

    transform: rotateY(180deg);

  }

  .pink-flip-box-back {

    background-color: #e57373;

    color: white;

    transform: rotateY(180deg);

    position: inherit;

  }

  .cyan-flip-box-back {

    background-color: #4db7ad;

    color: white;

    transform: rotateY(180deg);

    position: inherit;

  }