#memory
{
  width: 70%;
  margin: 10px auto;
  overflow: hidden;
  clear: both;
}

#memory .newGame
{
width: 30%;
margin: 0 auto;
clear: both;
display: block;
text-align: center;
text-decoration: none;
color: #6B5E2F;
border-radius: 0 0 10px 10px;
background-image: linear-gradient(to bottom, #FFE88C, #FFDB4D);
font-size: 16px;
border-bottom: solid 2px #CCAD33;
font-weight: bold;
}

#memory .newGame:hover
{
border-top: solid 1px #FFE88C;
border-bottom: solid 1px #CCAD33;
}

#memory div
{
  box-sizing: border-box;
  cursor: pointer;
}

#memory .cell
{
  width: 20%;
  float: left;
  border: 1px solid rgb(231, 231, 231);
  background-image: linear-gradient(to right bottom, rgb(249, 249, 249), rgb(239, 239, 239));
  overflow: hidden;
}

#memory .card
{
background-size: cover;
}

#memory .visible
{
  opacity: 1;
}

#memory .hidden
{
  opacity: 0;
}

#memory .right
{
  opacity: 0.5;
  cursor: default;
}

/* Animation */

/*!
 * animate.css -http://daneden.me/animate  3.5.0
 * Copyright (c) 2016 Daniel Eden
 */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}



@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}