* {
	margin: 0; padding: 0;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
html { width: 100%; height: 100%; }

body {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #000000;
	font-family: helvetica;
	font-size: 1em;
}

*[unselectable=on] {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#mainCon {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: none;
	background-color: #cbd7a9;
}
#limitCon {
	position: relative;
	margin: 0 auto;
	width: 640px;
	height: 940px;
	overflow: none;
	background-color: #cbd7a9;
}
#canvasCon {
	position: absolute;
	left: 0;
	top: 0;
	width: 640px;
	height: 940px;
	overflow: none;
	background-color: #cbd7a9;
	background-size: contain;
	background-position: center top;
}
#gameCanvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
/*	background-color: #ded895;*/
}
#touchOverlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#transitionOverlay.fadeToBlack {
	background-color: rgba(0, 0, 0, 0.0);
	transition: background-color 500ms linear;
	-webkit-transition: background-color 500ms linear;
	-moz-transition: background-color 500ms linear;
	-o-transition: background-color 500ms linear;
	-ms-transition: background-color 500ms linear;
}
#transitionOverlay.fadeToBlack.activate {
	background-color: rgba(0, 0, 0, 1.0);
}
#transitionOverlay.flashWhite {
	background-color: rgba(255, 255, 255, 1.0);
	transition: background-color 500ms linear;
	-webkit-transition: background-color 500ms linear;
	-moz-transition: background-color 500ms linear;
	-o-transition: background-color 500ms linear;
	-ms-transition: background-color 500ms linear;
}
#transitionOverlay.flashWhite.activate {
	background-color: rgba(255, 255, 255, 0.0);
}

.screen {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	overflow: hidden;
}

.screen.show {
	display:  block;
}

.screenContentWrapper {
	display: table;
	text-align: center;
	vertical-align: middle;
	height: 100%;
	width: 100%;
}
.screenContent {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#loadingContent {
	width: 600px;
}
#progressPercent {
	height: 50px;
}
#progressBar {
-moz-border-radius: 50px;
border-radius: 50px;
	background-color: #000000;
	width: 70%;
	height: 10%;
	margin: 0% auto 0;
}
#progressLoad {
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000000;
background: #736552; /* Old browsers */
width: 0%;
height: 100%;

}

.playButton {
	display: inline-block;
	width: 40%;
}
.playButton img {
	width: 100%;
}

#startScreen {
	text-align: center;
}
#flappyLivesTitle {
	width: 80%;
	margin: 40% auto 0;
}
#flappyLivesTitle img {
	width: 100%;
}

#startPlayButton {
	margin-top: 31%;
}

#instructionsScreen {
	display: block;
	opacity: 0.0;
	transition: opacity 500ms linear;
	-webkit-transition: opacity 500ms linear;
	-moz-transition: opacity 500ms linear;
	-o-transition: opacity 500ms linear;
	-ms-transition: opacity 500ms linear;
}
#instructionsScreen.show {
	display: block;
	opacity: 1.0;
}

#getReadyText {
	width: 80%;
	margin: 0 auto;
}
#getReadyText img {
	width: 100%;
}
#flappyBW {
	width: 12%;
	margin: 2% auto 0;
}
#flappyBW img {
	width: 100%;
}
#flappyUp {
	width: 5%;
	margin: 2% auto 0;
}
#flappyUp img {
	width: 100%;
}
#tapDirections {
	width: 100%;
	text-align: center;
}
#tapLeft {
	display: inline-block;
	width: 15%;
	margin-top: 2%;
}
#tapLeft img {
	width: 100%;
	display: block;
}
#tapHand {
	display: inline-block;
	width: 9%;
	vertical-align: top;
}
#tapHand img {
	width: 100%;
	display: block;
}
#tapRight {
	display: inline-block;
	width: 15%;
	margin-top: 2%;
}
#tapRight img {
	width: 100%;
	display: block;
	vertical-align: text-top;
}

#endScreen {
}
#endScreen.show {
}

#gameOverText {
	width: 80%;
	margin: 0 auto;
	opacity: 0;
}
#gameOverText img {
	width: 100%;
}
#gameOverText.show {
	animation: gameover-text-anim 250ms ease forwards;
	-webkit-animation: gameover-text-anim 250ms ease forwards;
	-moz-animation: gameover-text-anim 250ms ease forwards;
	-o-animation: gameover-text-anim 250ms ease forwards;
	-ms-animation: gameover-text-anim 250ms ease forwards;
}
#gameOverBoard {
	position: relative;
	margin: 5% auto 0;
	width: 90%;
	opacity: 0;
	transform: translateY(1000px);
	-webkit-transform: translateY(1000px);
	-moz-transform: translateY(1000px);
	-o-transform: translateY(1000px);
	-ms-transform: translateY(1000px);
}
#gameOverBoard.show {
	animation: gameover-board-anim 750ms ease-out forwards;
	-webkit-animation: gameover-board-anim 750ms ease-out forwards;
	-moz-animation: gameover-board-anim 750ms ease-out forwards;
	-o-animation: gameover-board-anim 750ms ease-out forwards;
	-ms-animation: gameover-board-anim 750ms ease-out forwards;
}
#gameOverBg {
	width: 100%;
}
#gameOverBg img {
	width: 100%;
}
#gameOverMedal {
	position: absolute;
	left: 11%;
	top: 36%;
	width: 29%;
	height: 40%;
	background-size: contain;
	background-repeat: no-repeat;
}
#gameOverMedal.bronze {
	background-image: url('../imgs/medal_bronze.png');
}
#gameOverMedal.silver {
	background-image: url('../imgs/medal_silver.png');
}
#gameOverMedal.gold {
	background-image: url('../imgs/medal_gold.png');
}
#gameOverScoreCon {
	position: absolute;
	right: 8%;
	top: 27%;
	height: 20%;
	width: 50%;
}
#gameOverScore {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: right;
}
#gameOverScore img {
	display: inline-block;
	width: 10%;
}
#gameOverBestCon {
	position: absolute;
	right: 8%;
	top: 65%;
	height: 20%;
	width: 50%;
}
#gameOverBest {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: right;
}
#gameOverBest img {
	display: inline-block;
	width: 10%;
}
#gameOverScore img.num-1, #gameOverBest img.num-1 {
	width: 5.3%;
}
#gameOverNew {
	display: none;
	position: absolute;
	right: 26%;
	top: 51%;
	width: 11%;
}
#gameOverNew.show {
	display: block;
}
#gameOverNew img {
	width: 100%;
}

#gameOverButtons {
	opacity: 0;
	margin-top: 40px;
}
#gameOverButtons.show {
	animation: gameover-buttons-anim 500ms linear forwards;
	-webkit-animation: gameover-buttons-anim 500ms linear forwards;
	-moz-animation: gameover-buttons-anim 500ms linear forwards;
	-o-animation: gameover-buttons-anim 500ms linear forwards;
	-ms-animation: gameover-buttons-anim 500ms linear forwards;
}

.ui-share-buttons{

	width:100%;
	font-size: medium;	
	width: 100%;
	margin: 40% auto 0;
  
}
	

@keyframes gameover-text-anim {
	0% {
		transform: translateY(0px);
		opacity: 0;
	}
	50% {
		transform: translateY(-10px);
		opacity: 0.5;
	}
	100% {
		transform: translateY(0px);
		opacity: 1.0;
	}
}
@-webkit-keyframes gameover-text-anim {
	0% {
		-webkit-transform: translateY(0px);
		opacity: 0;
	}
	50% {
		-webkit-transform: translateY(-10px);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateY(0px);
		opacity: 1.0;
	}
}
@-moz-keyframes gameover-text-anim {
	0% {
		-moz-transform: translateY(0px);
		opacity: 0;
	}
	50% {
		-moz-transform: translateY(-10px);
		opacity: 0.5;
	}
	100% {
		-moz-transform: translateY(0px);
		opacity: 1.0;
	}
}
@-o-keyframes gameover-text-anim {
	0% {
		-o-transform: translateY(0px);
		opacity: 0;
	}
	50% {
		-o-transform: translateY(-10px);
		opacity: 0.5;
	}
	100% {
		-o-transform: translateY(0px);
		opacity: 1.0;
	}
}
@-ms-keyframes gameover-text-anim {
	0% {
		-ms-transform: translateY(0px);
		opacity: 0;
	}
	50% {
		-ms-transform: translateY(-10px);
		opacity: 0.5;
	}
	100% {
		-ms-transform: translateY(0px);
		opacity: 1.0;
	}
}

@keyframes gameover-board-anim {
	0% {
		transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 1.0;
	}
}
@-webkit-keyframes gameover-board-anim {
	0% {
		-webkit-transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0px);
		opacity: 1.0;
	}
}
@-moz-keyframes gameover-board-anim {
	0% {
		-moz-transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		-moz-transform: translateY(0px);
		opacity: 1.0;
	}
}
@-o-keyframes gameover-board-anim {
	0% {
		-o-transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		-o-transform: translateY(0px);
		opacity: 1.0;
	}
}
@-ms-keyframes gameover-board-anim {
	0% {
		-ms-transform: translateY(1000px);
		opacity: 0;
	}
	100% {
		-ms-transform: translateY(0px);
		opacity: 1.0;
	}
}

@keyframes gameover-buttons-anim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes gameover-buttons-anim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes gameover-buttons-anim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes gameover-buttons-anim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes gameover-buttons-anim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}