@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic);

* {
	margin: 0;
	padding: 0;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

html, body {
	width: 100%;
	height: 100%;
	background: #eee;
	font-family: "Source Sans Pro", Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
	}

#holder {
	width: 480px;
	height: 480px;
	position: relative;
	background: #4c4340;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	margin: 0 auto;
	margin-top: -240px;
	top: 50%;
	}

#grid {
	width: 440px;
	height: 440px;
//	background: #6e615c;
	position: relative;
	margin-left: 20px;
	top: 20px;
	}

#holder {
	background: #614d39; /* #f65e3b red */
	}

#grid {
//	background: #6cf;
	}

#holder, #grid {
	border-radius: 6px;
	}

.tile.one {
	border-radius: 6px 0 0 0;
	}

.tile.four {
	border-radius: 0 6px 0 0;
	}

.tile.thirteen {
	border-radius: 0 0 0 6px;
	}

.tile.sixteen {
	border-radius: 0 0 6px 0;
	}


.tile {
	width: 25%;
	height: 25%;
	background: #6cf;
	float: left;
	box-sizing: border-box;
	border: 3px solid #614d39;
	cursor: pointer;

	-webkit-transition: -webkit-transform .1s ease, background .2s ease;
	}

.tile.pop {
	-webkit-transform: scale(1.12);
	}

.tile span {
	width: 90%;
	position: relative;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	display: block;
	overflow: hidden;
	margin-top: -19px;
	top: 50%; left: 5%;
	}