html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-ms-content-zooming: none;
    -ms-scroll-limit: 0px;
	-ms-touch-action: none;
	touch-action: none;
}

h1 {
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: 16px;
	left: 16px;
	width: 300px;
}

h1 img {
	width: 300px;
}

h2 {
	margin: 0px;
	padding: 0px;
	font-family: sans-serif;
	color: #333333;
	font-size: 24px;
}

#wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

#mainArea {
    grid-row: 1;
    overflow: hidden;
    position: relative;
}

.mainSection {
    display: none;
}

.titleShowing #titleScreen {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    display: block;
}

#titleTopBar, #titleBottomBar, #careerTopBar, #careerBottomBar {
	position: absolute;
	height: 40px;
	width: 100%;
	left: 0px;
}

#titleTopBar, #careerTopBar {
	top: 0px;
}

#titleBottomBar, #careerBottomBar {
	bottom: 0px;
}

#titleBigChef {
	background-image: url('images/green_chef.png');
	background-size: contain;
	position: absolute;
	top: 0px;
	right: 0px;
    height: 100vh;
    width: 100vh;
}

#titleModeSelect {
	position: absolute;
	left: 20px;
    width: 33vw;
    min-width: 240px;
    top: 50%;
    transform: translateY(-50%);
}

#titleModeSelect img {
	cursor: pointer;
	display: block;
	width: 100%;
	margin: 6px;
}

#titleBadgeMenu {
	position: absolute;
	bottom: 16px;
	left: 16px;
    height: 40px;
	width: 40px;
    cursor: pointer;
}

#featuredApp {
    position: absolute;
	bottom: 8px;
	right: 8px;
    cursor: pointer;
    border-style: none;
}

#featuredApp img {
    height: 54px;
	width: 54px;
}

.careerShowing #careerScreen {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

#careerHolder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	width: 96%;
	max-width: 900px;
}

#page {
	margin: 12px;
	background-color: #ffffff;
	border-color: #eeeeee;
	border-width: 1px;
	border-style: solid;
	padding: 12px;
	box-shadow: 0px 4px 12px rgba(0,0,0,.6);
	border-radius: 6px;
	min-height: 120px;
	position: relative;
}

.playShowing #playScreen {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

#rankPic {
	height: 90%;
	position: absolute;
	top: 6px;
	right: 6px;
}

#menuOptions {
	text-align: center;
	margin: 12px;
}

#menuOptions img {
	cursor: pointer;
	display: block;
	margin: 0px auto;
	max-width: 70%;
}

#canvasMain {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

#tabletopDiv {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 120px;
	background-color: #DBDBDB;
	background-image: -ms-linear-gradient(top, #DBDBDB 0%, #737373 100%);
	background-image: -moz-linear-gradient(top, #DBDBDB 0%, #737373 100%);
	background-image: -o-linear-gradient(top, #DBDBDB 0%, #737373 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DBDBDB), color-stop(1, #737373));
	background-image: -webkit-linear-gradient(top, #DBDBDB 0%, #737373 100%);
	background-image: linear-gradient(to bottom, #DBDBDB 0%, #737373 100%);
}

#tablefrontDiv {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 120px;
	background-color: #757572;
	background-image: -ms-linear-gradient(top, #757572 0%, #2D2E2E 100%);
	background-image: -moz-linear-gradient(top, #757572 0%, #2D2E2E 100%);
	background-image: -o-linear-gradient(top, #757572 0%, #2D2E2E 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #757572), color-stop(1, #2D2E2E));
	background-image: -webkit-linear-gradient(top, #757572 0%, #2D2E2E 100%);
	background-image: linear-gradient(to bottom, #757572 0%, #2D2E2E 100%);
}

#freeBadges {
	width: 100%;
	position: absolute;
	z-index: 1;
	top: 6px;
	left: 0;
	height: 48px;
	text-align: center;
}

.taking-screenshot #freeBadges {
    display: none;
}

#freeBadges img {
	height: 48px;
	width: 48px;
	cursor: pointer;
}

#mainBack {
	z-index: 1;
	position: absolute;
	left: 6px;
	top: 50px;
	height: 48px;
	width: 48px;
	cursor: pointer;
}

#loadingDiv {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	background: #000000;
	color: #ffffff;
}

#adUnit {
    grid-row: 2;
}

.taking-screenshot #adUnit {
    display: none;
}

@media (max-width: 500px) {
    h1 {
		left: calc(50% - 168px);
	}

    h1 img {
		width: 85%;
	}

    h2 {
		font-size: 16px;
	}

	#titleBigChef {
		right: -30%;
	}

    #titleModeSelect {
		padding-top: 90px;
		left: 10px;
	}

    #page {
		padding: 6px;
	}
}

@media (min-width: 1000px) {
	
    h2 {
		font-size: 32px;
	}
    
    #page {
		padding: 20px;
	}

	#rankPic {
		top: 12px;
		right: 12px;
	}
}

@media (min-width: 1400px) {
	h2 {
		font-size: 42px;
	}
    
    #page {
		padding: 24px;
	}

	#rankPic {
		top: 18px;
		right: 18px;
	}
}

@media (min-width: 1800px) {
	h2 {
		font-size: 56px;
	}
    
    #page {
		padding: 32px;
	}

	#rankPic {
		top: 24px;
		right: 24px;
	}
}