*{box-sizing:border-box}html,body{height:100%}body{min-height:100%}.wrap{height:100%;min-height:500px;padding-bottom:20px}.game-flip{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;text-align:center;min-height:415px;padding-top:35px}@keyframes matchAnim{0%{background:#bcffcc}100%{background:white}}.card{float:left;width:calc(100% / 5);margin-bottom:15px;height:265px;padding:5px;text-align:center;display:block;perspective:500px;-webkit-perspective:500px;position:relative;cursor:pointer;z-index:50;-webkit-tap-highlight-color:transparent}@media (max-width: 800px){.card{width:23%;height:16.666%}}.card .inside{width:100%;height:100%;display:block;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:.4s ease-in-out;transform:translateZ(0);-webkit-transform:translateZ(0)}.card .inside.picked,.card .inside.matched{transform:rotateY(180deg) translateZ(0);-webkit-transform:rotateY(180deg) translateZ(0)}.card .inside.matched{animation:1s matchAnim ease-in-out;animation-delay:.4s}.card .front,.card .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0)}.card .front img,.card .back img{max-width:100%;display:block;margin:0 auto;max-height:100%;cursor:pointer}.card .front{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px)}@media (max-width: 800px){.card .front{padding:5px}}@media (max-width: 800px){.card .back{padding:10px}}.modal-overlay{display:none;background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;width:100%;height:100%;z-index:99}.modal{display:none;position:relative;width:767px;height:460px;max-height:90%;max-width:90%;min-height:380px;margin:0 auto;background:white;top:50%;transform:translateY(-50%);padding:30px 10px;z-index:1000}.modal .winner{font-size:80px;text-align:center;font-family:"Arial", sans-serif;color:#4d4d4d;text-shadow:0px 3px 0 black}@media (max-width: 480px){.modal .winner{font-size:60px}}.modal .restart{font-family:"Arial", sans-serif;margin:30px auto;padding:20px 30px;display:block;font-size:30px;border:none;background:#4d4d4d;background:linear-gradient(#4d4d4d, #222);border:1px solid #222;border-radius:5px;color:white;text-shadow:0px 1px 0 black;cursor:pointer}.modal .restart:hover{background:linear-gradient(#222, black)}.card .front img,.card .back img{max-width:100%;max-height:100%;display:block;margin:0 auto;cursor:pointer;backface-visibility:hidden;-webkit-backface-visibility:hidden}