mau-mau/dist/browser/card.min.css

Card game for 2 or more players, popular in Czech Republic, Germany and other lands

.card, .card .flipper,
.card .front, .card .back {
  box-sizing: border-box; }

.card {
  position: absolute;
  width: 102px;
  height: 167px;
  z-index: 1;
  -webkit-perspective: 306px;
          perspective: 306px;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0); }

.card .inside {
  width: 100px;
  height: 165px; }

.human .card:hover .inside, .drawing-stack .card:hover .inside,
.card.selected .inside {
  background-color: darkcyan;
  opacity: 0.4; }

.hand .card:nth-child(1) {
  left: 0px;
  top: 0px;
  -webkit-transform: rotateZ(-80deg);
          transform: rotateZ(-80deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.hand .card:nth-child(2) {
  left: 11.2px;
  top: 11.2px;
  -webkit-transform: rotateZ(-60deg);
          transform: rotateZ(-60deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.hand .card:nth-child(3) {
  left: 22.4px;
  top: 22.4px;
  -webkit-transform: rotateZ(-40deg);
          transform: rotateZ(-40deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.hand .card:nth-child(4) {
  left: 33.6px;
  top: 33.6px;
  -webkit-transform: rotateZ(-20deg);
          transform: rotateZ(-20deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.hand .card:nth-child(5) {
  left: 44.8px;
  top: 44.8px;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.hand .card:nth-child(6) {
  left: 56px;
  top: 56px;
  -webkit-transform: rotateZ(20deg);
          transform: rotateZ(20deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.hand .card:nth-child(7) {
  left: 67.2px;
  top: 67.2px;
  -webkit-transform: rotateZ(40deg);
          transform: rotateZ(40deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.hand .card:nth-child(8) {
  left: 78.4px;
  top: 78.4px;
  -webkit-transform: rotateZ(60deg);
          transform: rotateZ(60deg);
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom; }

.drawing-stack .card:nth-child(1),
.playing-stack .card:nth-child(1) {
  left: 0px;
  top: -2px;
  -webkit-transform: rotateZ(-5deg);
          transform: rotateZ(-5deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(2),
.playing-stack .card:nth-child(2) {
  left: 0px;
  top: -4px;
  -webkit-transform: rotateZ(-5deg);
          transform: rotateZ(-5deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(3),
.playing-stack .card:nth-child(3) {
  left: -4px;
  top: -5px;
  -webkit-transform: rotateZ(-4deg);
          transform: rotateZ(-4deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(4),
.playing-stack .card:nth-child(4) {
  left: -4px;
  top: 2px;
  -webkit-transform: rotateZ(-1deg);
          transform: rotateZ(-1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(5),
.playing-stack .card:nth-child(5) {
  left: -4px;
  top: 3px;
  -webkit-transform: rotateZ(-1deg);
          transform: rotateZ(-1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(6),
.playing-stack .card:nth-child(6) {
  left: 1px;
  top: 0px;
  -webkit-transform: rotateZ(2deg);
          transform: rotateZ(2deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(7),
.playing-stack .card:nth-child(7) {
  left: 3px;
  top: -5px;
  -webkit-transform: rotateZ(-3deg);
          transform: rotateZ(-3deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(8),
.playing-stack .card:nth-child(8) {
  left: 1px;
  top: 1px;
  -webkit-transform: rotateZ(3deg);
          transform: rotateZ(3deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(9),
.playing-stack .card:nth-child(9) {
  left: 0px;
  top: -3px;
  -webkit-transform: rotateZ(-5deg);
          transform: rotateZ(-5deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(10),
.playing-stack .card:nth-child(10) {
  left: -2px;
  top: -4px;
  -webkit-transform: rotateZ(-1deg);
          transform: rotateZ(-1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(11),
.playing-stack .card:nth-child(11) {
  left: -5px;
  top: 1px;
  -webkit-transform: rotateZ(-1deg);
          transform: rotateZ(-1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(12),
.playing-stack .card:nth-child(12) {
  left: -3px;
  top: 2px;
  -webkit-transform: rotateZ(1deg);
          transform: rotateZ(1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(13),
.playing-stack .card:nth-child(13) {
  left: 0px;
  top: -2px;
  -webkit-transform: rotateZ(-3deg);
          transform: rotateZ(-3deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(14),
.playing-stack .card:nth-child(14) {
  left: -2px;
  top: -1px;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(15),
.playing-stack .card:nth-child(15) {
  left: -3px;
  top: -5px;
  -webkit-transform: rotateZ(2deg);
          transform: rotateZ(2deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(16),
.playing-stack .card:nth-child(16) {
  left: 1px;
  top: -5px;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(17),
.playing-stack .card:nth-child(17) {
  left: 0px;
  top: -4px;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(18),
.playing-stack .card:nth-child(18) {
  left: -1px;
  top: 1px;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(19),
.playing-stack .card:nth-child(19) {
  left: 1px;
  top: -1px;
  -webkit-transform: rotateZ(1deg);
          transform: rotateZ(1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(20),
.playing-stack .card:nth-child(20) {
  left: -3px;
  top: -2px;
  -webkit-transform: rotateZ(1deg);
          transform: rotateZ(1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(21),
.playing-stack .card:nth-child(21) {
  left: -1px;
  top: -2px;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(22),
.playing-stack .card:nth-child(22) {
  left: 0px;
  top: -5px;
  -webkit-transform: rotateZ(1deg);
          transform: rotateZ(1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(23),
.playing-stack .card:nth-child(23) {
  left: 3px;
  top: -4px;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(24),
.playing-stack .card:nth-child(24) {
  left: -2px;
  top: -3px;
  -webkit-transform: rotateZ(1deg);
          transform: rotateZ(1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(25),
.playing-stack .card:nth-child(25) {
  left: -4px;
  top: 0px;
  -webkit-transform: rotateZ(-4deg);
          transform: rotateZ(-4deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(26),
.playing-stack .card:nth-child(26) {
  left: 3px;
  top: 2px;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(27),
.playing-stack .card:nth-child(27) {
  left: -3px;
  top: -1px;
  -webkit-transform: rotateZ(1deg);
          transform: rotateZ(1deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(28),
.playing-stack .card:nth-child(28) {
  left: -3px;
  top: 0px;
  -webkit-transform: rotateZ(-4deg);
          transform: rotateZ(-4deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(29),
.playing-stack .card:nth-child(29) {
  left: 1px;
  top: 2px;
  -webkit-transform: rotateZ(2deg);
          transform: rotateZ(2deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(30),
.playing-stack .card:nth-child(30) {
  left: -4px;
  top: -4px;
  -webkit-transform: rotateZ(3deg);
          transform: rotateZ(3deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(31),
.playing-stack .card:nth-child(31) {
  left: 3px;
  top: -4px;
  -webkit-transform: rotateZ(-2deg);
          transform: rotateZ(-2deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.drawing-stack .card:nth-child(32),
.playing-stack .card:nth-child(32) {
  left: 2px;
  top: 3px;
  -webkit-transform: rotateZ(3deg);
          transform: rotateZ(3deg);
  -webkit-transform-origin: center center;
          transform-origin: center center; }

.card .flipper {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: right center;
          transform-origin: right center; }

.card.flipped .flipper {
  -webkit-transform: translateX(-100%) rotateY(-180deg);
          transform: translateX(-100%) rotateY(-180deg); }

.card .front, .card .back {
  position: absolute;
  width: 100px;
  height: 165px;
  border: 1px solid grey;
  border-radius: 10.2px;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.card .front {
  background-image: url(../../img/cards-czech-single-headed.jpg); }

.card.hearts.ace .front {
  background-position: -4px -1px; }

.card.hearts.king .front {
  background-position: -103.5px -1px; }

.card.hearts.queen .front {
  background-position: -203px -1px; }

.card.hearts.jack .front {
  background-position: -302.5px -1px; }

.card.hearts.ten .front {
  background-position: -402px -1px; }

.card.hearts.nine .front {
  background-position: -501.5px -1px; }

.card.hearts.eight .front {
  background-position: -601px -1px; }

.card.hearts.seven .front {
  background-position: -700.5px -1px; }

.card.bells.ace .front {
  background-position: -4px -166px; }

.card.bells.king .front {
  background-position: -103.5px -166px; }

.card.bells.queen .front {
  background-position: -203px -166px; }

.card.bells.jack .front {
  background-position: -302.5px -166px; }

.card.bells.ten .front {
  background-position: -402px -166px; }

.card.bells.nine .front {
  background-position: -501.5px -166px; }

.card.bells.eight .front {
  background-position: -601px -166px; }

.card.bells.seven .front {
  background-position: -700.5px -166px; }

.card.leaves.ace .front {
  background-position: -4px -331px; }

.card.leaves.king .front {
  background-position: -103.5px -331px; }

.card.leaves.queen .front {
  background-position: -203px -331px; }

.card.leaves.jack .front {
  background-position: -302.5px -331px; }

.card.leaves.ten .front {
  background-position: -402px -331px; }

.card.leaves.nine .front {
  background-position: -501.5px -331px; }

.card.leaves.eight .front {
  background-position: -601px -331px; }

.card.leaves.seven .front {
  background-position: -700.5px -331px; }

.card.acorns.ace .front {
  background-position: -4px -496px; }

.card.acorns.king .front {
  background-position: -103.5px -496px; }

.card.acorns.queen .front {
  background-position: -203px -496px; }

.card.acorns.jack .front {
  background-position: -302.5px -496px; }

.card.acorns.ten .front {
  background-position: -402px -496px; }

.card.acorns.nine .front {
  background-position: -501.5px -496px; }

.card.acorns.eight .front {
  background-position: -601px -496px; }

.card.acorns.seven .front {
  background-position: -700.5px -496px; }

.card .back {
  background-image: url(../../img/card-back.jpg);
  background-size: cover;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

/*# sourceMappingURL=card.min.css.map */