.m-wrap {
  position: relative;
  height: 500px;
  min-height: 500px;
  padding-bottom: 5px;
}

.m-game {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  min-height: 100%;
  height: 100%;
  max-width: 600px;
}

@-webkit-keyframes matchAnim {
  0% {
    background: #bcffcc;
  }
  0% {
    background: white;
  }
}

@keyframes matchAnim {
  0% {
    background: #bcffcc;
  }
  0% {
    background: white;
  }
}

.card {
  display:inline-block;
  width:70px;
  height:85px;
  margin:1px 2px;
  background-repeat:no-repeat;
  background-size:100%
}
@media only screen and (max-device-width:1023px),only screen and (max-width:1023px) {
  .memory-card {
    width:59.5px;
    height:72.25px
  }
}
@media only screen and (max-device-width:640px),only screen and (max-width:640px) {
  .memory-card {
    width:52.5px;
    height:63.75px
  }
}
@media only screen and (max-device-width:480px),only screen and (max-width:480px) {
  .memory-card {
    width:45.5px;
    height:55.25px
  }
}
.card .inside {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: .4s ease-in-out;
          transition: .4s ease-in-out;
}
.card .inside.picked, .card .inside.matched {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.card .front, .card .back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card .front img, .card .back img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}
.card .front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card .back {		  
 transform: rotateY(360deg);
}

@media (max-width: 800px) {
  .card .front {
    padding: 5px;
  }
}
@media (max-width: 800px) {
  .card .back {
    padding: 10px;
  }
}