.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{font-family:Helvetica,Arial,sans-serif;font-size:100%;background:#269}.svgsprite{overflow:hidden;height:0;width:0}.page{position:relative;margin:0 auto;width:100%;height:100%;max-width:904px}#card_list{position:absolute;top:50%;left:50%;padding:0;width:100%;height:100%;list-style-type:none}.card{position:relative;display:inline;float:left;width:25%;height:25%;padding:10px;cursor:pointer;box-sizing:border-box;overflow:hidden;perspective:1000px;perspective-origin:50% 50%}.inner{position:absolute;top:5%;right:5%;bottom:5%;left:5%;transform-style:preserve-3d;transition:transform ease 1s}.flipped .inner{transform:rotateY(180deg)}.back,.front{box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:5px solid #fff;border-radius:5px;background:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:border ease 250ms}.card:focus svg,.card:hover svg{border-color:rgba(255,250,80,.6)}.front{padding:5%;transform:rotateY(180deg)}@keyframes FAIL-MOVE{0%{transform:translateX(0) rotateY(0)}25%{transform:translateX(10px) rotateY(0)}50%{transform:translateX(0) rotateY(0)}75%{transform:translateX(-10px) rotateY(0)}100%{transform:translateX(0) rotateY(0)}}.fail{animation-name:FAIL-MOVE;animation-duration:150ms;animation-timing-function:linear;animation-iteration-count:4}.fail svg,.fail:focus svg,.fail:hover svg{border-color:#ff5858}@keyframes WIN-MOVE{0%{transform:scale(1) rotateY(0)}50%{transform:scale(1.1) rotateY(0)}100%{transform:scale(1) rotateY(0)}}.win{animation-name:WIN-MOVE;animation-duration:.3s;animation-timing-function:linear;animation-iteration-count:1;border-color:#67d325}.win svg,.win:focus svg,.win:hover svg{border-color:#67d325}@keyframes ROTATE{0%{transform:rotate(0) rotateY(180deg)}100%{transform:rotate(360deg) rotateY(180deg)}}.rotate .card{animation-name:ROTATE;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.overlay{position:absolute;top:50%;left:50%;display:block;margin-top:-50px;margin-left:-160px;border:5px solid rgba(0,0,0,.9);border-radius:5px;padding:20px;width:270px;background-color:rgba(0,0,0,.9);color:#fff;line-height:25px;text-align:center;z-index:99;transition:border .3s;cursor:pointer}.overlay strong{font-size:25px}.overlay:hover{border:5px solid #fff}