.memory-container{
  width:100%;
  max-width: 449px;
  margin:0 auto;
}
.memory-container *::-moz-selection {
  background: transparent;
}
.memory-container *::selection {
  background: transparent;
}

.deck {
  background: #f3f2f0;
  border-radius: 10px;
  margin:0;
  padding: 10px;
  list-style: none;

  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.deck .card img{
  display: block;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* Netscape */
  -moz-opacity: 0;
  /* Safari 1.x */
  -khtml-opacity: 0;
  /* Good browsers */
  opacity: 0;

  transition: opacity .2s;
}
.deck .card.open img,
.deck .card.show img,
.deck .card.match img{
  display: block;
  border-radius: 8px;
}

.deck .card {
  width: calc(25% - 20px);
  background: #EB6209;
  border:2px solid #EB6209;
  margin:10px;
  border-radius: 8px;

  cursor: pointer;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
}

.deck .card.open,
.deck .card.match {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  cursor: default;
}
.deck .card.open img,
.deck .card.match img {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* IE 5-7 */
  filter: alpha(opacity=100);
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
  /* Good browsers */
  opacity: 1;
}

.deck .card.open{
  border-color: #80766F;
  background: #80766F;
}
.deck .card.match {
  border-color: #9BCB3C;
  background: #9BCB3C;
}
.deck .card.notmatch {
  border-color: #EB6209;
  background: #EB6209;
}

.deck .endStar{
  position: absolute;
  left:0;top:0;right:0;bottom:0;
  background-color: #fff;
  background-color: rgba(255,255,255,.8);

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;

  list-style: none;
  margin:0;
}
.deck .endStar i{
  color: #EB6209;
  margin:0 auto;
  font-size: 4em;
  transform: scale(1);
	animation: endgamepulse 2s;
}
@keyframes endgamepulse {
	0% {
		transform: scale(.1);
	}
	70% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

#score-panel {
  text-align: left;
  margin: 10px auto;
}
#score-panel .stars {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin: 0 5px 0 0;
}
#score-panel .stars li {
  list-style: none;
  display: inline-block;
}
#score-panel .restart {
  float: right;
  cursor: pointer;
}