@keyframes fadeIn {
    from	{	opacity: 	0;
				visibility:	hidden;}
    to		{	opacity: 	1;
				visibility:	visible;}
}
@keyframes fadeOut {
    from	{	opacity: 	1;
				visibility:	visible;}
    to		{	opacity: 0;
				visibility:	hidden;}
}
@keyframes age {
    from	{filter: saturate(100%);	-webkit-filter: saturate(100%);}
    to		{filter: saturate(0%);		-webkit-filter: saturate(0%);}
}
@keyframes dim {
    from	{opacity: 1;}
    to		{opacity: 0.5;}
}
@keyframes shrink {
    from	{background-size: 75%;}
    to		{background-size: 0%;}
}
@keyframes zoomIn {
    from	{	opacity: 1;
				-webkit-transform: scale(1,1); }
    to		{	opacity: 0;
				-webkit-transform: scale(4,4); }
}
.fadeIn {
	-webkit-animation-name: 	fadeIn; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; 	/* Safari 4.0 - 8.0 */
    animation-name: 			fadeIn;
    animation-duration: 		4s;
	opacity:					1;
	visibility:					visible;
}
.fadeOut {
	-webkit-animation-name: 	fadeOut; 	/* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; 		/* Safari 4.0 - 8.0 */
    animation-name: 			fadeOut;
    animation-duration: 		4s;
	opacity:					0;
	visibility:					hidden;
}
.age {
	-webkit-animation-name: 	age; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; 	/* Safari 4.0 - 8.0 */
    animation-name: 			age;
    animation-duration: 		4s;
	filter:						saturate(0%);
	-webkit-filter:				saturate(0%);
}
.dim {
	-webkit-animation-name: 	dim; 	/* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2s; 	/* Safari 4.0 - 8.0 */
    animation-name: 			dim;
    animation-duration: 		2s;
	opacity:					0.5;
}
.fadeInFast {
	-webkit-animation-name: 	fadeIn; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; 	/* Safari 4.0 - 8.0 */
    animation-name: 			fadeIn;
    animation-duration: 		1s;
	opacity:					1;
	visibility:					visible;
}
.fadeOutFast {
	-webkit-animation-name: 	fadeOut; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; 	/* Safari 4.0 - 8.0 */
    animation-name: 			fadeOut;
    animation-duration: 		1s;
	opacity:					0;
	visibility:					hidden;
}
.zoomIn {
	-webkit-animation-name: 	zoomIn; 	/* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; 	/* Safari 4.0 - 8.0 */
    animation-name: 			zoomIn;
    animation-duration: 		4s;
	opacity:					0;
	-webkit-transform: 			scale(4,4);
}

body {
	margin:				0px;
	-ms-touch-action:	none;
}

body, html {
    height: 100%;
	width: 100%;
	overflow: hidden;
	
	-webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

#fullPage {
	height: 				100%;
	background-image:		url("../../images/background_portrait.jpg");
	background-position: 	center;
    background-repeat: 		no-repeat;
    background-size: 		cover;
	
	-webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.gameField {
	/* Set width and height from javaScript to TileSize */
	width:				50px;
	height: 			50px;
	display: 			table;
	color: 				#ffa500;
	text-shadow: 		2px 2px 3px #000000;
	font-family: 		Calibri, Cochin, sans-serif;
	font-weight: 		bold;
	font-size: 			1.5em;
	float: 				left;
	position:			relative;
	/* background-image: 	url("../../images/tile_base.png"); */
	/* background-size: 	contain; */
}

.gameField.clickable {
	cursor: pointer;
}

.gameField.clickable .tileBase {
	transition: filter 0.25s ease;
}

.gameField.clickable:hover .tileBase {
	filter: hue-rotate(var(--level-hue, 0deg)) brightness(1.6) drop-shadow(0 0 8px rgba(255, 210, 80, 0.9));
	transition: filter 0.12s ease;
}


.tileBase {
	position:						absolute;
	width: 							100%;
	height: 						100%;
	background-image: 				url("../../images/tile_base.png");
	background-size: 				contain;
	background-repeat: 				no-repeat;
	background-position: 			center center;
	filter:							hue-rotate(var(--level-hue, 0deg));
	/* Below is to trigger graphics acceleration on iPhones */
	-webkit-transform: 				translateZ(0);
	-webkit-perspective: 			1000;
	-webkit-backface-visibility: 	hidden;
}

.tileGrad {
	width: 							100%;
	height: 						100%;
	position: 						absolute;
	/* Below is to trigger graphics acceleration on iPhones */
	-webkit-transform: 				translateZ(0);
	-webkit-perspective: 			1000;
	-webkit-backface-visibility: 	hidden;
}

.tileFrame {
	width: 					100%;
	height: 				100%;
	position:				relative;
	display: 				block;
	background-image: 		url("../../images/tile_frame.png");
	background-size: 		contain;
	background-repeat: 		no-repeat;
	background-position: 	center center;
}

.fieldType {
	position: 		relative;
	width: 			100%;
	height: 		100%;
	text-align:		center;
	vertical-align: middle;
}

.special {
	color:					transparent;
	text-shadow: 			none;
	background-size: 		75%;
	background-repeat:		no-repeat;
	background-position:	center;
}
.visited {
	-webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
	
	color: 					inherit;
	text-shadow: 			inherit;
	-webkit-animation-name: 	shrink; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; 	/* Safari 4.0 - 8.0 */
    animation-name: 			shrink;
    animation-duration: 		1s;
	background-size: 		0%;
}

.fieldType10 { background-image: 	url("../../images/tile_trap.png"); }
.fieldType11 { background-image: 	url("../../images/tile_minus.png"); }
.fieldType12 { background-image: 	url("../../images/tile_plus.png"); }
.fieldType13 { background-image: 	url("../../images/tile_bomb.png"); }
.fieldType14 { background-image: 	url("../../images/tile_cheese.png"); }
.fieldType15 { background-image: 	url("../../images/tile_fridge.png"); }

#gameBoardFrame, #headsUp {
	box-shadow:				inset 0px 0px 5em 2em rgba(0,0,0,0.8);
	float:					left;
	
	-webkit-transition: 	opacity 1s linear;
    -moz-transition: 		opacity 1s linear;
    -o-transition: 			opacity 1s linear;
    transition: 			opacity 1s linear;
}

#gameBoard, #headsUp {
	padding:				1em;
	
	-webkit-transition: 	opacity 1s linear;
    -moz-transition: 		opacity 1s linear;
    -o-transition: 			opacity 1s linear;
    transition: 			opacity 1s linear;
}

.character {
	position: 	absolute;
	top:		0;
	left:		0;
}

#macko {
	background-image:		url("../../images/rat_sprites_uni.png");
    background-repeat: 		no-repeat;
    background-size: 		604.516% 806.977%;

	-webkit-transition: 	top 0.2s linear, left 0.2s linear, opacity 1s linear;
    -moz-transition: 		top 0.2s linear, left 0.2s linear, opacity 1s linear;
    -o-transition: 			top 0.2s linear, left 0.2s linear, opacity 1s linear;
    transition: 			top 0.2s linear, left 0.2s linear, opacity 1s linear;
}

#messageTable {
	position:		absolute;
	display: 		table;
	left:			0px;
	top:			0px;
	width:			inherit;
	height:			inherit;
	text-align:		center;
	pointer-events:	none;
	z-index:		0;
}
#messageTable.active {
	pointer-events:	auto;
	z-index:		10;
}
#messageRow {
	display: 		table-row;
}
#messageCell {
	display: 		table-cell;
	color: 			#ffa500;
	text-shadow: 	2px 2px 3px #000000;
	font-family: 	Calibri, Cochin, sans-serif;
	font-weight: 	bold;
	vertical-align: middle;
	overflow:		hidden;
	opacity:		1;
	zoom: 			100%;
}

#headsUp {
	color: 				#ffa500;
	text-shadow: 		2px 2px 3px #000000;
	font-family: 		Calibri, Cochin, sans-serif;
	font-weight: 		bold;
	font-size: 			1.5em;
	text-align:			center;
	vertical-align:		middle;
	float:				left;
	display:			flex;
	align-items:		center;
	justify-content:	center;
}

#scorePanel {
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
	align-items:		center;
}

#debugInfo {
	color: 				#ffa500;
	text-shadow: 		2px 2px 3px #000000;
	font-family: 		Calibri, Cochin, sans-serif;
	font-weight: 		bold;
	font-size: 			0.5em;
	text-align:			left;
	vertical-align:		middle;
	height:				100%;
	float:				left;
	overflow-x:			hidden;
	overflow-y:			auto;
}

.flyingNumber {
	position:		fixed;
	pointer-events:	none;
	color:			#ffa500;
	text-shadow:	1px 1px 3px #000000;
	font-family:	Calibri, Cochin, sans-serif;
	font-weight:	bold;
	transform:		translate(-50%, -50%);
	z-index:		100;
	opacity:		1;
	transition:		left 1.2s ease-in, top 1.2s ease-in, opacity 2.4s ease-in;
}

.is-loading, .hidden {
	opacity: 0;
}

body.no-animations * {
	animation-duration:		0s !important;
	transition-duration:	0s !important;
}

#musicControl {
	flex:			0 0 auto;
	margin:			0.5em;
	text-align:		center;
	position:		relative;
	width:			200px;
	height:			113px;
	margin-left:	auto;
	margin-right:	auto;
}

#musicToggle {
	position:		absolute;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
	background:		rgba(0,0,0,0.5);
	color:			#ffa500;
	border:			2px solid #ffa500;
	font-family:	Calibri, Cochin, sans-serif;
	font-weight:	bold;
	font-size:		0.8em;
	cursor:			pointer;
	z-index:		1;
	box-sizing:		border-box;
}

#musicToggle:hover {
	background:		rgba(255,165,0,0.2);
}

#ytPlayerWrap {
	position:		absolute;
	top:			0;
	left:			0;
	width:			200px;
	height:			113px;
	overflow:		hidden;
	border:			1px solid #ffa500;
}