.wrap {position: relative;height: 100%;min-height: 500px;padding-bottom: 20px;}
.flipcard .card {width: 24%;max-width: 100px;height: 125px;padding: 5px;margin-bottom: 5px;text-align: center;perspective: 500px;position: relative;cursor: pointer;z-index: 50;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
@media (max-width: 767px) { .flipcard .card {width: 24%; max-width: 80px;height: 100px;} .flipcard{ max-width:320px;}}
.card .inside {width: 100%;height: 100%;display: block;transform-style: preserve-3d;transition: 0.4s ease-in-out;background: white;border-radius: .65rem;}
.card .inside.picked, .card .inside.matched {transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);}
.card .inside.matched img {opacity: .6;border-color: #3ec0e9;}
.card .inside.matched .card-back img {opacity: 0; -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -o-transition: opacity 1s ease-out; transition: opacity 1s ease-out;}
.card .front, .card .card-back {backface-visibility: hidden; -webkit-backface-visibility:hidden; border-radius: .65rem;position: absolute;top: 0;left:0;width: 100%;height: 100%;}
.card .front img, .card .card-back img {width: 100%;display: block;margin: 0 auto;height: 100%;border: 2px solid #01719e;border-radius: .65rem;}
.break {clear: both;}
.card .front {transform: rotateY(-180deg);}
.card .card-back {transform: rotateX(0);}
.flipcard{ width: 100%; justify-content: space-around; margin: 0 auto; max-width: 410px; display: flex; flex-wrap: wrap; transform-style: preserve-3d; perspective: 500px; min-height: 100%; height: 100%;}
@media (max-width: 767px) { .flipcard{ max-width:320px;} }