.grid-tile-container{margin:0 auto;height:400px;width:400px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);grid-gap:3px}.grid-tile{color:#fff;position:relative}.tile-front{position:absolute;width:100%;height:100%;background-color:#ee5253;backface-visibility:hidden;transform:perspective(600px) rotateY(0deg)}.tile-back{font-family:Arial,sans-serif;font-weight:700;font-size:18px;color:#000;position:absolute;display:flex;align-items:center;justify-content:center;height:100%;width:100%;background-color:#2ed573;backface-visibility:hidden;transform:perspective(600px) rotateY(180deg)}.grid-tile:hover .tile-front{animation:tileStay 2s 1}.grid-tile:hover .tile-back{animation:tileStay 2s 1}.front1{animation:tileFlipFront1 4s ease infinite;background-image:url(../img/fpic/flip17.png);background-size:cover;background-repeat:no-repeat}.back1{animation:tileFlipBack1 4s ease infinite}.front2{animation:tileFlipFrontX 4s ease infinite;background-image:url(../img/fpic/flip18.png);background-size:cover;background-repeat:no-repeat}.back2{background-color:#FF5E87;color:#fff;animation:tileFlipBackX 4s ease infinite}.front3{animation:tileFlipFront1 4s ease infinite;background-image:url(../img/fpic/flip9.png);background-size:cover;background-repeat:no-repeat}.back3{background-color:#cb3dff;color:#fff;animation:tileFlipBack1 4s ease infinite}.front4{animation:tileFlipFront1 4s ease infinite;background-image:url(../img/fpic/flip6.png);background-size:cover;background-repeat:no-repeat}.back4{background-color:#8503ff;color:#fff;animation:tileFlipBack1 4s ease infinite}.front5{animation:tileFlipFrontX 4s ease infinite;background-image:url(../img/fpic/flip11.png);background-size:cover;background-repeat:no-repeat}.back5{background-color:#ff02d5;color:#fff;animation:tileFlipBackX 4s ease infinite}.front6{animation:tileFlipFrontX 4s ease infinite;background-image:url(../img/fpic/flip4.png);background-size:cover;background-repeat:no-repeat}.back6{background-color:#35cdff;animation:tileFlipBackX 4s ease infinite}.front7{animation:tileFlipFront1 4s ease infinite;background-image:url(../img/fpic/flip10.png);background-size:cover;background-repeat:no-repeat}.back7{background-color:#01CEFF;animation:tileFlipBack1 4s ease infinite}.front8{animation:tileFlipFront1 4s ease infinite;background-image:url(../img/fpic/flip13.png);background-size:cover;background-repeat:no-repeat}.back8{background-color:#FFB522;animation:tileFlipBack1 4s ease infinite}.front9{animation:tileFlipFrontX 4s ease infinite;background-image:url(../img/fpic/flip14.png);background-size:cover;background-repeat:no-repeat}.back9{background-color:#ff622d;animation:tileFlipBackX 4s ease infinite}.front10{animation:tileFlipFront1 4s ease infinite;background-image:url(../img/fpic/flip2.png);background-size:cover;background-repeat:no-repeat}.back10{background-color:#33FF7B;animation:tileFlipBack1 4s ease infinite}.small{grid-column:span 2}.tile1{grid-column:2/4}.tile9{grid-column:2/4}.pause{-webkit-animation-play-state:paused;animation-play-state:paused}@keyframes tileFlipFront1{0%{transform:perspective(600px) rotateY(0deg)}50%{transform:perspective(600px) rotateY(-180deg)}100%{transform:perspective(600px) rotateY(0deg)}}@keyframes tileFlipBack1{0%{transform:perspective(600px) rotateY(180deg)}50%{transform:perspective(600px) rotateY(0deg)}100%{transform:perspective(600px) rotateY(180deg)}}@keyframes tileFlipFrontX{0%{transform:perspective(600px) rotateX(0deg)}50%{transform:perspective(600px) rotateX(-180deg)}100%{transform:perspective(600px) rotateX(0deg)}}@keyframes tileFlipBackX{0%{transform:perspective(600px) rotateX(180deg)}50%{transform:perspective(600px) rotateX(0deg)}100%{transform:perspective(600px) rotateX(180deg)}}@keyframes tileStay{0%{transform:perspective(600px) rotateY(0deg) rotateX(0deg)}100%{transform:perspective(600px) rotateY(0deg) rotateX(0deg)}}@media (max-width:493px){.grid-tile-container{width:300px;height:300px}}@media (max-width:367px){.grid-tile-container{width:200px;height:200px}}@media (max-width:257px){.grid-tile-container{width:150px;height:150px}}@media (max-width:205px){.grid-tiles{display:none}}