#memorygame
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 777;
	width: 100%;
	height: 100%;
	/*pointer-events: none;*/
	-moz-user-select: auto;
	-webkit-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
}

/** GAME MODES */
#memorygame[data-gamemode="AWAITING"],
#memorygame[data-gamemode="GAME_OVER"]
{
	/** Allow clicktag from none-game-item */
	pointer-events: none;
}

/** PIZZA SETUP */
#memorygame .pizza.clonenode
{
	display: none;
}
#memorygame .pizza
{
	flex-shrink: 0;
	flex-grow: 0;

	position: relative;
	margin: 0 4px 5px 4px; /** Afstand mellem hver pizza */
	width: 74px; /** Størrelse på hver pizza */
	height: 75px; /** Størrelse på hver pizza */
	overflow: hidden;
	cursor: pointer;

	perspective: 1000px;
}
#memorygame .pizza .pizza-inner
{
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
	transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);;
	transform-style: preserve-3d;
}
#memorygame .pizza .pizza-inner .front,
#memorygame .pizza .pizza-inner .back
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 111;
	width: 100%;
	height: 100%;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#memorygame .pizza .pizza-inner .front
{
	z-index: 222;
	background: #e3000b url("MemoryGame-front.png") no-repeat 50% 50%;
	background-size: cover;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#memorygame .pizza .pizza-inner .back
{
	border: 2px solid #FFF;
	-webkit-transform: translate3d(0,0,0) rotateY(180deg);
	transform: translate3d(0,0,0) rotateY(180deg);
}
#memorygame .pizza .pizza-inner .front img,
#memorygame .pizza .pizza-inner .back img
{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/** PIZZA js-states */
#memorygame .pizza.js-revealed
{
	pointer-events: none;
}
#memorygame .pizza.js-revealed .pizza-inner
{
	-webkit-transform: translate3d(0,0,0) rotateY(180deg);
	transform: translate3d(0,0,0) rotateY(180deg);
}
#memorygame .pizza.js-matched
{
	pointer-events: none;

	-webkit-animation: hooray .3s linear 2 .25s;
	animation: hooray .3s linear 2 .25s;
}
@-webkit-keyframes hooray {
	0% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
	50%	{
		-webkit-transform: translate3d(0,0,0) scale(1.05);
		transform: translate3d(0,0,0) scale(1.05);
	}
	100% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
}
@keyframes hooray {
	0% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
	50%	{
		-webkit-transform: translate3d(0,0,0) scale(1.05);
		transform: translate3d(0,0,0) scale(1.05);
	}
	100% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
}

/** BUTTONS */
#memorygame #start-btn,
#memorygame #restart-btn
{
	position: absolute;
	left: 399px;
	bottom: 26px;
	z-index: 99999;
	cursor: pointer;

	opacity: 0;
	pointer-events: auto;
}
#memorygame #restart-btn
{
	bottom: 15px;
}
#memorygame #start-btn[data-state="pulsate"] img,
#memorygame #restart-btn[data-state="pulsate"] img
{
	-webkit-animation: pulsate .3s linear 3;
	animation: pulsate .3s linear 3;
}

@-webkit-keyframes pulsate {
	0% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
	50%	{
		-webkit-transform: translate3d(0,0,0) scale(1.2);
		transform: translate3d(0,0,0) scale(1.2);
	}
	100% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
}
@keyframes pulsate {
	0% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
	50%	{
		-webkit-transform: translate3d(0,0,0) scale(1.2);
		transform: translate3d(0,0,0) scale(1.2);
	}
	100% {
		-webkit-transform: translate3d(0,0,0) scale(1);
		transform: translate3d(0,0,0) scale(1);
	}
}

/** INTRO AREA */
#memorygame .intro-area
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 333;
	width: 100%;
	height: 100%;

	visibility: hidden;
}
#memorygame .intro-area .pizzas
{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-end;

	position: absolute;
	top: 0;
	left: 0;
	z-index: 222;
	padding: 0 14px 2px 14px; /** Padding for den container, der indeholder alle pizzaer */
	width: 100%;
	height: 100%;
}
#memorygame .intro-area .pizza
{
	/** Sæt styles som den enkelte pizza skal transition fra, når spillet går igang */
	opacity: 0;
	-webkit-transform: translate3d(0,200px,0);
	transform: translate3d(0,200px,0);
}
#memorygame .intro-area .pizzas .pizza:nth-child(5)
{
	margin-left: 250px; /** Dette skubber pizza #5, og de efterfølgende pizzaer, til højre  */
}

/** INTRO AREA (REVEALED) */
#memorygame .intro-area.js-revealed
{
	visibility: visible;
}
#memorygame .intro-area.js-revealed .pizza
{
	opacity: 1;

	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	-webkit-transition: -webkit-transform .6s ease-out, opacity .2s ease-out;
	transition: transform .6s ease-out, opacity .2s ease-out;
}
#memorygame .intro-area.js-revealed #start-btn
{
	opacity: 1;

	-webkit-transition: opacity .3s ease-out .5s;
	transition: opacity .3s ease-out .5s;
}

/** INTRO AREA (CONCEALED) */
#memorygame .intro-area.js-concealed
{
	pointer-events: none;
	opacity: 0;

	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);

	-webkit-transition: -webkit-transform .3s ease-out, opacity .3s ease-out;
	transition: transform .3s ease-out, opacity .3s ease-out;
}
#memorygame .intro-area.js-concealed #start-btn
{
	pointer-events: none !important;
}

/** GAME AREA */
#memorygame .game-area
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 222;
	width: 100%;
	height: 100%;

	visibility: hidden;
}
#memorygame .game-area .pizzas
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;

	position: absolute;
	top: 0;
	left: 0;
	z-index: 222;
	padding: 18px 14px 0 14px; /** Padding for den container, der indeholder alle pizzaer */
	width: 100%;
	height: 100%;
}
#memorygame .game-area .pizza
{
	/** Sæt styles som den enkelte pizza skal transition fra, når spillet går igang */
	opacity: 0;
	-webkit-transform: translate3d(0,200px,0);
	transform: translate3d(0,200px,0);
}

/** GAME AREA (REVEALED) */
#memorygame .game-area.js-revealed
{
	visibility: visible;
}
#memorygame .game-area.js-revealed .pizza
{
	opacity: 1;

	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	-webkit-transition: -webkit-transform .4s ease-out, opacity .2s ease-out;
	transition: transform .4s ease-out, opacity .2s ease-out;
}
#memorygame .game-area.js-revealed #restart-btn
{
	pointer-events: none;
	visibility: hidden;
	/** Herfra starter re-start knappen sin animation */
	opacity: 0;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

/** GAME AREA (CONCEALED) */
#memorygame .game-area.js-concealed
{
	visibility: visible;
}
#memorygame .game-area.js-concealed .pizza
{
	opacity: 0;

	-webkit-transform: translate3d(0,200px,0);
	transform: translate3d(0,200px,0);

	-webkit-transition: transform .1s ease-out 2s, opacity .3s ease-out 1s !important;
	transition: transform .1s ease-out 2s, opacity .3s ease-out 1s !important;
}
#memorygame .game-area.js-concealed #restart-btn
{
	pointer-events: auto;
	visibility: visible;
	opacity: 1;

	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	-webkit-transition: -webkit-transform .3s ease-out 1.5s, opacity .3s ease-out 1.5s, visibility .1s linear 1.4s;
	transition: transform .3s ease-out 1.5s, opacity .3s ease-out 1.5s, visibility .1s linear 1.4s;
}