body {
	font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
	color: rgb(119, 110, 101);
	margin: auto;
	background: #FAF8EF;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow-y: visible;
	overflow-x: hidden;
}
a {
	color: #776e65;
}

/*Header*/

.heading {
	width: 600px;
	height: 100px;
	margin: auto;
}

.heading:after {
	content: "";
	display: block;
	clear: both;
}

.title {
	font-size: 81px;
	font-weight: bold;
	margin: 0;
	display: block;
	float: left;
}

.scores-container {
	height: 55px;
	float: right;
	text-align: right;
	margin-top: 20px;
}

.score,
.top {
	display: inline-block;
	background: #bbada0;
	padding: 15px 25px;
	font-size: 25px;
	height: 25px;
	line-height: 47px;
	font-weight: bold;
	border-radius: 3px;
	color: white;
	text-align: center;
	position: relative;
	vertical-align: bottom;
}

.score:after,
.top:after {
	position: absolute;
	width: 100%;
	top: 10px;
	left: 0;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 13px;
	text-align: center;
	color: #eee4da;
}

.score:after {
	content: "Score";
}

.top:after {
	content: "Top";
}

.pause {
	display: inline-block;
	background: rgb(119, 110, 101);
	padding: 15px 15px;
	font-size: 25px;
	height: 25px;
	font-weight: bold;
	border-radius: 3px;
	color: white;
	text-align: center;
	position: relative;
	cursor: pointer;
	vertical-align: bottom;
}

.help {
	display: inline-block;
	background: rgb(119, 110, 101);
	padding: 15px 15px;
	font-size: 25px;
	height: 25px;
	font-weight: bold;
	border-radius: 3px;
	color: white;
	text-align: center;
	position: relative;
	cursor: pointer;
	vertical-align: bottom;
}

/*Playing Field*/

#left {
	width: 600px;
	margin: auto;
}

.box {
	position: relative;
	width: 600px;
	margin: auto;
}

.box:before {
	content: "";
	display: block;
	padding-top: 100%;
	/* initial ratio of 1:1*/
}

.grid-container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 13px;
	background: #CDC1B4;
	border-radius: 3%;
}

.grid-row {
	height: 46px;
}

.chunk {
	width: 46px;
	height: 46px;
	background: rgba(238, 228, 218, 0.35);
	border-radius: 20%;
	float: left;
	margin-right: 2px;
	margin-bottom: 2px;
	animation-name: fadeIn;
	animation-duration: 1s;
	-webkit-animation-name: fadeIn;
	-webkit-animation-duration: 1s;
	-moz-animation-name: fadeIn;
	-moz-animation-duration: 1s;
	-o-animation-name: fadeIn;
	-o-animation-duration: 1s;
}

.chunk:last-child {
	margin-right: 0;
}

/*Below Game*/

.below-game {
	width: 600px;
	height: 50px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 100px;
}
.below-game:after {
	content: "";
	display: block;
	clear: both;
}
.below-game p {
	font-size: 18px;
	line-height: 27.5px;
}

.below-game span {
	-webkit-animation: anti-text 2s;
	-moz-animation: anti-text 2s;
	-o-animation: anti-text 2s;
	animation: anti-text 2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.tweet-button, .facebook-button, .paypal-button {
	display: inline-block;
	background: rgb(119, 110, 101);
	font-size: 20px;
	border-radius: 5px;
	padding: 0 20px;
	text-decoration: none;
	color: #f9f6f2;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	border: 0;
	margin-top:5px;
}
.paypal-form {
	display: inline-block;
}

#more_games_image {
	width: 200px;
}

/* Overlays */

.hidden {
	display: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.heading{
	margin-top: 5px;
}

.overlay {
	width: 600px;
	height: 600px;
	position: absolute;
	background-color: rgba(230, 217, 204, 0.8);
	border-radius: 3%;
	text-align: center;
	top: 105px;
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}

.game-over p {
	font-size: 60px;
	font-weight: bold;
	height: 60px;
	line-height: 60px;
	margin-top: 222px;
}

.high-score p {
	font-size: 60px;
	font-weight: bold;
	height: 60px;
	line-height: 60px;
	margin-top: 160px;
	-webkit-animation: anti-text 2s;
	-moz-animation: anti-text 2s;
	-o-animation: anti-text 2s;
	animation: anti-text 2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.high-score span {
	font-size: 30px;
}

.button {
	display: inline-block;
	background: rgb(119, 110, 101);
	font-size: 20px;
	border-radius: 5px;
	padding: 0 20px;
	text-decoration: none;
	color: #f9f6f2;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
}

.paused .keep-playing {
	margin-top: 150px;
}
.paused .reset-topscore {
	display: inline-block;
	background: rgb(119, 110, 101);
	border-radius: 3px;
	padding: 0 10px;
	text-decoration: none;
	color: #f9f6f2;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
}
.tutorial h1 {
	margin-top: 60px;
}
.tutorial p {
	display: inline-block;
	width: 540px;
	font-size: 20px;
}

/*Pieces spawn area*/

.pieces-container {
	width: 600px;
	height: 200px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background: #CDC1B4;
	border-radius: 20px;
}

.slot {
	width: 30%;
	height: 90%;
	margin-top: 1.75%;
	margin-left: 2.5%;
	float: left;
	border-radius: 10%;
	background: rgba(238, 228, 218, 0.35);
}

.drag-container {
	height: 100%;
	width: 100%;
}

/*Piece generics*/

.placeholder {
	background: inherit !important;
}

.anti-chunk {
	/*Keyframes for anti animation are generated on the fly based on colors of pieces*/
	-webkit-animation: anti 2s;
	-moz-animation: anti 2s;
	-o-animation: anti 2s;
	animation: anti 2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.piece {
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}


/*Big Screens Horizontal*/

@media screen and (min-width: 820px) and (orientation: landscape) {

	body{
		/* background-color: blue;*/
	}

	.heading {
		width: 820px;
		height: 100px;
		margin: auto;
		margin-top: 5px;
	}
	.game-container {
		width: 820px;
		height: 600px;
		margin: auto;
	}
	#left {
		float: left;
		width: 600px;
	}
	#right {
		float: left;
		width: 220px;
	}
	.box {
		position: relative;
		width: 600px;
		margin: auto;
		float: right;
	}
	.pieces-container {
		width: 200px;
		height: 600px;
		margin: auto;
		background: #CDC1B4;
		border-radius: 20px;
		float: left;
		margin-left: 20px;
		margin-right: 20px;
	}
	.slot {
		width: 90%;
		height: 30%;
		margin-top: 15px;
		margin-left: 10px;
		border-radius: 10%;
		background: rgba(238, 228, 218, 0.35);
	}
	.below-game {
		width: 820px;
		height: 50px;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 100px;
	}
	.overlay{
		position: absolute;
		top: 105px;
	}
}


/*Small Screens Vertical*/

@media screen and (max-width: 600px) and (orientation: portrait) {

	body{
		/* background-color: green; */
	}

	.heading {
		width: 300px;
		height: 50px;
		margin: auto;
		margin-top: 25px;
	}
	.title {
		font-size: 41px;
		font-weight: bold;
		margin: 0;
		display: block;
		float: left;
	}
	.scores-container {
		height: 50px;
		float: right;
		text-align: right;
		margin-top: 7.5px;
	}
	.score,
	.top {
		display: inline-block;
		background: #bbada0;
		padding: 10px 15px;
		font-size: 15px;
		height: 15px;
		line-height: 25px;
		font-weight: bold;
		border-radius: 3px;
		color: white;
		text-align: center;
		vertical-align: bottom;
	}
	.score:after,
	.top:after {
		position: absolute;
		width: 100%;
		top: 5px;
		left: 0;
		text-transform: uppercase;
		font-size: 10px;
		line-height: 10px;
		text-align: center;
		color: #eee4da;
	}
	.pause {
		display: inline-block;
		background: rgb(119, 110, 101);
		font-size: 15px;
		padding: 10px 10px;
		height: 15px;
		border-radius: 3px;
		color: white;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
		vertical-align: bottom;
	}
	.help {
		display: inline-block;
		background: rgb(119, 110, 101);
		font-size: 15px;
		padding: 10px 10px;
		height: 15px;
		border-radius: 3px;
		color: white;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
		vertical-align: bottom;
	}
	#left {
		width: 300px;
		margin: auto;
	}
	.overlay {
		width: 300px;
		height: 300px;
		position: absolute;
		background-color: rgba(205, 193, 180, 0.8);
		border-radius: 3%;
		text-align: center;
		top: 74px;
		margin: auto;
		transition: opacity 1s;
		-webkit-transition: opacity 1s;
	}
	.game-over p {
		font-size: 30px;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		margin-top: 111px;
	}
	.high-score p {
		font-size: 30px;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		margin-top: 80px;
	}
	.high-score span {
		font-size: 15px;
	}
	.paused .keep-playing {
		margin-top: 60px;
	}
	.tutorial h1 {
		margin-top: 30px;
		font-size: 18px;
	}
	.tutorial p {
		display: inline-block;
		width: 270px;
		font-size: 12px;
		margin-top: 0.5em;
		margin-bottom:0.5em;
	}
	.box {
		position: relative;
		width: 300px;
		/* desired width */
		margin: auto;
	}
	.grid-container {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 6px;
		background: #CDC1B4;
		border-radius: 3%;
	}
	.grid-row {
		height: 23px;
	}
	.chunk {
		width: 23px;
		height: 23px;
		background: rgba(238, 228, 218, 0.35);
		border-radius: 20%;
		float: left;
		margin-right: 1px;
		margin-bottom: 1px;
	}
	.pieces-container {
		width: 300px;
		height: 100px;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 10px;
		background: #CDC1B4;
		border-radius: 10px;
	}
	.below-game {
		width: 300px;
		height: 25px;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 50px;
	}
	.below-game p {
		font-size: 15px;
		line-height: 22.5px;
	}
	#more_games_image {
		width: 128px;
	}
	.button {
		display: inline-block;
		background: rgb(119, 110, 101);
		font-size: 15px;
		border-radius: 5px;
		padding: 0 15px;
		text-decoration: none;
		color: #f9f6f2;
		height: 30px;
		line-height: 30px;
		cursor: pointer;
	}
}

/*Small Screens Horizontal*/

@media screen and (max-width: 820px) and (orientation: landscape) {

	body{
		/* background-color: red; */
	}


	.heading {
		width: 410px;
		height: 50px;
		margin: auto;
		/*margin-top: 50px; */
	}
	.title {
		font-size: 41px;
		font-weight: bold;
		margin: 0;
		display: block;
		float: left;
	}
	.scores-container {
		height: 50px;
		float: right;
		text-align: right;
		margin-top: 7.5px;
	}
	.score,
	.top {
		display: inline-block;
		background: #bbada0;
		padding: 10px 15px;
		font-size: 15px;
		height: 15px;
		line-height: 25px;
		font-weight: bold;
		border-radius: 3px;
		color: white;
		text-align: center;
		vertical-align: bottom;
	}
	.score:after,
	.top:after {
		position: absolute;
		width: 100%;
		top: 5px;
		left: 0;
		text-transform: uppercase;
		font-size: 10px;
		line-height: 10px;
		text-align: center;
		color: #eee4da;
	}
	.pause {
		display: inline-block;
		background: rgb(119, 110, 101);
		font-size: 15px;
		padding: 10px 10px;
		height: 15px;
		border-radius: 3px;
		color: white;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
		vertical-align: bottom;
	}
	.help {
		display: inline-block;
		background: rgb(119, 110, 101);
		font-size: 15px;
		padding: 10px 10px;
		height: 15px;
		border-radius: 3px;
		color: white;
		font-weight: bold;
		text-align: center;
		cursor: pointer;
		vertical-align: bottom;
	}
	.game-container {
		width: 410px;
		height: 300px;
		margin: auto;
	}
	#left {
		float: left;
		width: 300px;
	}
	#right {
		float: left;
		width: 110px;
	}
	.overlay {
		width: 300px;
		height: 300px;
		position: absolute;
		background-color: rgba(205, 193, 180, 0.8);
		border-radius: 3%;
		text-align: center;
		top:57px;
		transition: opacity 1s;
		-webkit-transition: opacity 1s;
	}
	.game-over p {
		font-size: 30px;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		margin-top: 111px;
	}
	.high-score p {
		font-size: 30px;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		margin-top: 80px;
	}
	.high-score span {
		font-size: 15px;
	}
	.paused .keep-playing {
		margin-top: 60px;
	}
	.tutorial h1 {
		margin-top: 30px;
		font-size: 18px;
	}
	.tutorial p {
		display: inline-block;
		width: 270px;
		font-size: 12px;
		margin-top: 0.5em;
		margin-bottom:0.5em;
	}
	.box {
		position: relative;
		width: 300px;
		/* desired width */
		margin: auto;
	}
	.grid-container {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 6px;
		background: #CDC1B4;
		border-radius: 3%;
	}
	.grid-row {
		height: 23px;
	}
	.chunk {
		width: 23px;
		height: 23px;
		background: rgba(238, 228, 218, 0.35);
		border-radius: 20%;
		float: left;
		margin-right: 1px;
		margin-bottom: 1px;
	}
	.pieces-container {
		width: 100px;
		height: 300px;
		margin: auto;
		background: #CDC1B4;
		border-radius: 10px;
		margin-left: 10px;
	}
	.slot {
		width: 90%;
		height: 30%;
		margin-top: 8px;
		margin-left: 5px;
		border-radius: 10%;
		background: rgba(238, 228, 218, 0.35);
	}

	.below-game {
		width: 410px;
		height: 25px;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 50px;
	}
	.below-game p {
		font-size: 15px;
		line-height: 22.5px;
	}
	#more_games_image {
		width: 128px;
		margin-top: 1em;
	}
	.button {
		display: inline-block;
		background: rgb(119, 110, 101);
		font-size: 15px;
		border-radius: 5px;
		padding: 0 15px;
		text-decoration: none;
		color: #f9f6f2;
		height: 30px;
		line-height: 30px;
		cursor: pointer;
	}
}