.card-container{
  box-sizing:border-box;
  width:100%;
  margin:0 auto;
  display:flex;
  justify-content: space-between;
}
.deck{
  box-sizing:border-box;
  margin:0 auto;
  width:500px;
  height:659px;
  position:relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  cursor: pointer;
}
@media (max-width: 720px) {
.deck{
  width:400px;
  height:527px;
}
}
@media (max-width: 555px) {
.deck{
  width:300px;
  height:395px;
}
}
@media (max-width: 450px) {
.deck{
  width:250px;
  height:330px;
}
}

.card{
  box-sizing:border-box;
  width:100%;
  height:100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all .5s linear;
  transition: all .5s linear;
  border-radius:10px;
}
.face {
  box-sizing:border-box;
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius:10px;
}
.back {
  box-sizing:border-box;
  overflow:hidden;
  background-image:url('clue09-2sm.png');
  background-size: cover;
  z-index:-1;
  display: block;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  box-sizing: border-box;
  &:before{
    content: "";
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  z-index: -1;
    background-size:100% 100%;
	  -webkit-transform: rotateY(180deg);
	  -moz-transform: rotateY(180deg);
	  -ms-transform: rotateY(180deg);
	  -o-transform: rotateY(180deg);
	  transform: rotateY(180deg);
  }
}
.front, .back{
  transition: all .5s linear;
}
.front{
  box-sizing:border-box;
  background-image:url('clue09-1sm.png');
  background-size: cover;
  z-index:1;
}
.back{
  box-shadow: 0 0 0 rgba(0,0,0,0.0);
}
.flipped, .hovercard:hover{
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  .front{
    box-shadow: 0 0 0 rgba(0,0,0,0.0);
  }
  .back{
    box-shadow: 0 0 0 rgba(0,0,0,0.0);
  }
}
.front{
  h2, h3{
    text-align:center;
    color:whitesmoke;
  }
}