*{
margin: 0;
padding: 0}

body  
{  
    font-family: "lucida grande", tahoma, verdana, arial, sans-serif;  
	background-color:#D3D6DB;
}  

#intro{
	display: block;
	margin: auto;
	max-width: 320px;
	margin-top: 15px;
	text-align: center;
	margin-bottom: 20px;
}

.gift{
	width: 64px;
	vertical-align: middle;
}

.playField{
	max-width:100%;
	margin: auto;
  height: 325px;
}

.playCard{
	width:163px;
}

.card {
  position: relative;
  float: left;
  padding-bottom: 25%;
  width: 33%;
  text-align: center;
  perspective: 1000;
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__front {
}

.card__back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card.effect__click.flipped1 .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped1 .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}


@media(max-width: 670px){

.playField {
    max-width: 320px;
    margin: auto;
    height: 225px;
}

.playCard {
    width: 100px;
}

.card{
		padding-bottom: 27%;
		width: 33%;
  display: inline-block;
  float: initial;
    margin-left: 25px;
}

}