html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0;
	font-family: verdana;
	-ms-touch-action:none;
}

body {
	background: #f5f5f5;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.bubble-wrapper {
	text-align: center;
	position: relative;
	z-index: 3;
}
.bubble {
	padding: 10px;
	display: inline-block;
	background: #c9a9a9;
	color: #fff;
	border-radius: 6px;
	border: #ac9191;
	top: 46px;
	position: relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height: 64px;
	vertical-align: top;
	font-size: 24px;
}
.score-bubble {
	width: auto;
	height: auto;
}
.share-bubble {
	visibility: hidden;
	padding-top: 8px;
	background: #A3C5CA;
}

.share {
	width: 200px;
	height: 24px;
	white-space: nowrap;
}
.kik-share {
	color: #fff;
	text-decoration: none;
}
.kik-share img {
	height: 1em;
	margin-right: 10px;
	vertical-align: middle;
}
.kik-share span {
	vertical-align: bottom;
}

#progress-bar {
	background: -webkit-gradient(linear, left top, right top, color-stop(0.125, #78c5d5), color-stop(0.125, #78c5d5), color-stop(0.125, #459ba8), color-stop(0.25, #459ba8), color-stop(0.25, #79c268), color-stop(0.375, #79c268), color-stop(0.375, #c5d747), color-stop(0.5, #c5d747), color-stop(0.5, #f5d63d), color-stop(0.625, #f5d63d), color-stop(0.625, #f18c32), color-stop(0.75, #f18c32), color-stop(0.75, #e868a1), color-stop(0.875, #e868a1), color-stop(1, #bf63a6));
	background: -webkit-linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	background: -ms-linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	background: -moz-linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	background: linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	width: 100%;
	height: 64px;
	position: absolute;
	top: 0;
	left: 0;
}
#progress-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.7);
	transition: width 0.5s;
	-webkit-transition: width 0.5s;
}
.progress-1 {
	width: 87.5% !important;
}
.progress-2 {
	width: 75% !important;
}
.progress-3 {
	width: 62.5% !important;
}
.progress-4 {
	width: 50% !important;
}
.progress-5 {
	width: 37.5% !important;
}
.progress-6 {
	width: 25% !important;
}
.progress-7 {
	width: 12.5% !important;
}
.progress-8 {
	width: 0% !important;
}

#info-screen {
	width: 100%;
	height: 100%;
	pointer-events: none;
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	text-align: center;
	display: table;
	background: rgba(255,255,255,0.8);
	-webkit-animation: showTitle 2s;
	animation: showTitle 2s;
	opacity: 0;
	-webkit-transition: opacity: 0.5s;
	transition: opacity: 0.5s;
}
.show { /* for when we show the game over screen */
	opacity: 1 !important;
	-webkit-transition: opacity: 0.5s;
	transition: opacity: 0.5s;
}
.hide {
	visibility: hidden;
	opacity: 0;
}
.info {
	display: table-cell;
	vertical-align: middle;
}
.info h1, .info h2 {
	font-size: 5em;
	margin: 0.125em 0;
	display: inline-block;
	background: -webkit-linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.info h2 {
	font-size: 2em;
	margin: 0 0 0.5em 0;
}

#game-over-box {
	display: none;
}
#game-over-box .bubble {
	top: 0;
}

.more-games-button-wrapper {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 10%;
	text-align: center;
	z-index: 4;

}

#more-games-button {
	position: relative;
	top: 10%;
	height: 80%;
	width: auto;
}

.more-games-buttons {
	height: auto;
	width: 20%;
	min-width: 150px;
	-webkit-border-radius: 0;
	border-radius: 0;
	border: none;
	position: fixed;
	cursor: pointer;
	pointer-events: auto;
	display: block;
	left: 1em;
	bottom: 1em;
}


button {
	font-family: verdana;
	font-size: 2em;
	padding: 10px;
	-webkit-border-radius: 0;
	border-radius: 0;
	border: none;
	border-bottom: 4px solid rgba(0, 0, 0, 0.1);
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
	position: relative;
	background: #79c268;
	color: white;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	pointer-events: auto;
	display: block;
	margin: 0.5em auto;
}
button:active:after {
	background: rgba(0, 0, 0, 0.1);
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}
.play-again {
	background: #459ba8;
}

.grid-outer {
	position: absolute;
	width: 100%;
	height: 100%;
	display: table;
	top: 0;
	left: 0;
	padding: 100px 3% 50px 3%; /* change js in sizing() if 3% is changed */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.grid-inner {
	display: table-cell;
	vertical-align: middle;
}

.grid-background, .grid {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	visibility: hidden;
	pointer-events: none;
}
.grid-background {
	background: rgba(255, 255, 255, 0.5);
	position: relative;
}

.grid-row {
	height: 25%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.grid-cell {
	border: 2px solid rgba(0, 0, 0, 0.1);
	width: 25%;
	height: 100%;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.grid {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

}
.tile {
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
	position: absolute;
	width: 25%;
	height: 25%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-animation: spawnTile 0.5s;
	animation: spawnTile 0.5s;
}
.slow .tile { /* less animation on slower devices */
	/*-webkit-animation: none;*/
	animation: none;
	padding: 3%;
}
.tile-inner {
	transition: background-color 1s;
	-webkit-transition: background-color 1s;
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(0.85); /* alternatively can do padding on parent ele, but when we scale up/down it doesn't fit the full space */
	border-radius: 10px;
}
.slow .tile-inner { /* less animation on slower devices */
	-webkit-transform: none;
	border-radius: 0;
	border: 1px solid #aaa;
}
.tile-inner:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	border: 5px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.slow .tile-inner:after { /* less animation on slower devices */
	border-radius: 0;
	border: none;
	display: none;
}
.tile-phase-0 .tile-inner {
	background: #ddd;
	z-index: 1;
}
.tile-phase-1 .tile-inner {
	background: #78c5d5;
	-webkit-animation: mergeAnimation1 0.5s;
	animation: mergeAnimation1 0.5s;
	z-index: 2;
}
.tile-phase-2 .tile-inner {
	background: #459ba8;
	-webkit-animation: mergeAnimation2 0.5s;
	animation: mergeAnimation2 0.5s;
	z-index: 3;
}
.tile-phase-3 .tile-inner {
	background: #79c268;
	-webkit-animation: mergeAnimation3 0.5s;
	animation: mergeAnimation3 0.5s;
	z-index: 4;
}
.tile-phase-4 .tile-inner {
	background: #c5d747;
	-webkit-animation: mergeAnimation4 0.5s;
	animation: mergeAnimation4 0.5s;
	z-index: 5;
}
.tile-phase-5 .tile-inner {
	background: #f5d63d;
	-webkit-animation: mergeAnimation5 0.5s;
	animation: mergeAnimation5 0.5s;
	z-index: 6;
}
.tile-phase-6 .tile-inner {
	background: #f18c32;
	-webkit-animation: mergeAnimation6 0.5s;
	animation: mergeAnimation6 0.5s;
	z-index: 7;
}
.tile-phase-7 .tile-inner {
	background: #e868a1;
	-webkit-animation: mergeAnimation7 0.5s;
	animation: mergeAnimation7 0.5s;
	z-index: 8;
}
.tile-phase-8 .tile-inner {
	background: #bf63a6;
	-webkit-animation: mergeAnimation8 0.5s;
	animation: mergeAnimation28 0.5s;
	z-index: 9;
}
.tile-phase-9 .tile-inner {
	background: -webkit-gradient(linear, left top, right top, color-stop(0.125, #78c5d5), color-stop(0.125, #78c5d5), color-stop(0.125, #459ba8), color-stop(0.25, #459ba8), color-stop(0.25, #79c268), color-stop(0.375, #79c268), color-stop(0.375, #c5d747), color-stop(0.5, #c5d747), color-stop(0.5, #f5d63d), color-stop(0.625, #f5d63d), color-stop(0.625, #f18c32), color-stop(0.75, #f18c32), color-stop(0.75, #e868a1), color-stop(0.875, #e868a1), color-stop(1, #bf63a6));
	background: -webkit-linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	background: -ms-linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	background: -moz-linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	background: linear-gradient(left, #78c5d5 12.5%, #78c5d5 12.5%, #459ba8 12.5%, #459ba8 25%, #79c268 25%, #79c268 37.5%, #c5d747 37.5%, #c5d747 50%, #f5d63d 50%, #f5d63d 62.5%, #f18c32 62.5%, #f18c32 75%, #e868a1 75%, #e868a1 87.5%, #bf63a6 87.5%);
	-webkit-animation: mergeAnimation9 0.5s;
	animation: mergeAnimation9 0.5s;
	z-index: 10;
}
.slow .tile-inner { /* less animation on slower devices */
	-webkit-animation: none !important;
	animation: none !important;
}

.tile-0-0 {
	top: 0;
	left: 0;
}
.tile-0-1 {
	top: 0;
	left: 25%;
}
.tile-0-2 {
	top: 0;
	left: 50%;
}
.tile-0-3 {
	top: 0;
	left: 75%;
}
.tile-1-0 {
	top: 25%;
	left: 0;
}
.tile-1-1 {
	top: 25%;
	left: 25%;
}
.tile-1-2 {
	top: 25%;
	left: 50%;
}
.tile-1-3 {
	top: 25%;
	left: 75%;
}
.tile-2-0 {
	top: 50%;
	left: 0;
}
.tile-2-1 {
	top: 50%;
	left: 25%;
}
.tile-2-2 {
	top: 50%;
	left: 50%;
}
.tile-2-3 {
	top: 50%;
	left: 75%;
}
.tile-3-0 {
	top: 75%;
	left: 0;
}
.tile-3-1 {
	top: 75%;
	left: 25%;
}
.tile-3-2 {
	top: 75%;
	left: 50%;
}
.tile-3-3 {
	top: 75%;
	left: 75%;
}

/* tutorial */
#tip {
	position: absolute;
	z-index: 4;
	width: 200px;
	min-height: 30px;
	background: #fff;
	border: 2px solid #bbb;
	text-align: center;
	padding: 5px;
	font-size: 1em;
}
#tip a {
	font-size: 1em;
}
.arrow-top, .arrow-bottom, .arrow-top-border, .arrow-bottom-border {
  border-style: solid;
  border-width: 7px;
  height: 0;
  width: 0;
  position: absolute;
  cursor: pointer;
}
.arrow-top-border {
  border-color: transparent transparent #bbb transparent;
  top: -14px;
  left: 50%;
  margin-left: -14px;
}

.arrow-top {
  border-color: transparent transparent #fff transparent;
  top: -11px;
  left: 50%;
  margin-left: -14px;
}

.arrow-bottom-border {
  border-color: #bbb transparent transparent transparent;
  bottom: -14px;
  left: 50%;
  margin-left: -14px;
}

.arrow-bottom {
  border-color: #fff transparent transparent transparent;
  bottom: -11px;
  left: 50%;
  margin-left: -14px;
}

/* Ghetto, but the animations are only run once otherwise... (not for each new color combo). See http://css-tricks.com/restart-css-animation/ */
@-webkit-keyframes mergeAnimation1
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation2
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation3
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation4
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation5
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation6
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation7
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation8
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
@-webkit-keyframes mergeAnimation9
{
	0%	 { -webkit-transform: scale(0.85); }
	50%	{ -webkit-transform: scale(0.95); }
	100% { -webkit-transform: scale(0.85); }
}
/*
@keyframes mergeAnimation
{
	0%	 { transform: scale(0.85); }
	50%	{ transform: scale(0.95); }
	100% { transform: scale(0.85); }
}
*/

@-webkit-keyframes spawnTile
{
	0%	 { -webkit-transform: scale(0.8); }
	100%	 { -webkit-transform: scale(1); }
}

@-webkit-keyframes showTitle
{
	0%	 { opacity: 0; }
	25%	{ opacity: 1; }
	75%	{ opacity: 1; }
	100% { opacity: 0; }

}
@keyframes showTitle
{
	0%	 { opacity: 0; }
	25%	{ opacity: 1; }
	75%	{ opacity: 1; }
	100% { opacity: 0; }
}

@media (max-width: 400px) {
	.bubble {
		top: 32px;
		margin-bottom: 10px;
		font-size: 18px;
	}
	#tip {
		font-size: 12px;
	}
	.brand div {
		font-size: 0.7em;
	}
}