.card-flip .square {
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: -webkit-transform 0.5s;
  -o-transition: transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%; }
  .card-flip .square > * {
    color: #333333; }
  .card-flip .square.upright {
    padding-bottom: 125%; }
  .card-flip .square .back,
  .card-flip .square .front {
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s; }
  .card-flip .square.flipped .back,
  .card-flip .square .front {
    opacity: 1;
    visibility: visible; }
  .card-flip .square.flipped .front,
  .card-flip .square .back {
    opacity: 0;
    visibility: hidden; }
  .card-flip .square.flipped,
  .card-flip .square .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); }
  @media screen and (max-width: 420px) {
    .card-flip .square .front svg {
      width: calc(100% - 65%);
      height: calc(100% - 65%); }
    .card-flip .square .front .arrow svg {
      width: calc(100% - 20%);
      height: calc(100% - 20%); } }