body {
	height: 100vh;
	background: url(../img/table-bg.jpg) no-repeat;
	background-size: cover;
	margin: 0;
}

.header {
	width: 100%;
	height: 10%;
}

.footer {
	position: fixed;
	text-align: center;
	background-color: green;
	width: 100%;
	height: 35px;
	left: 0;
	bottom: 0;
	color: white;
	font-size: 20px;
	padding: 5px;
}

.logocontainer {
	width: 1000px;
	height: 100%;
	margin: auto;
}

.container {
	width: 1000px;
	height: 790px;
	margin: auto;
}

.gif {
	width: 100%;
	margin-bottom: 25px;
}

.img-container { text-align: center; }

.tall-img { height: 600px; }

.wide-img { width: 600px; }

p.category label { width: 50px; }

/* ----- card css ----- */

.flip {
  width: 20%;
  height: 24%;
	float: left;
	padding-bottom: 1%;
}

.flip .card.flipped, .flip .card .front {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
}

.flip .card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: 2s;
  -webkit-transition: 2s;
}

.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 11px;
  color: #000;
	text-align: center;
}

.flip .card .front {
	background: url(../img/card-front.png) center center no-repeat;
	background-size: contain;
}

.flip .card .front img {
	height: 176px;
	width: 118px;
	padding-top: 2%;
	border-radius: 7px;
}

.flip .card .back {
	background: url(../img/card-back.png) center center no-repeat;
	background-size: contain;
}