/* 
Fonts Here
font-family: acumin-pro, sans-serif;
font-weight: 400;
font-weight: 800;
 */
/* Variables */

/* End Variables */
:root {
	--base: #303030;
}
/* Generic */
body {position: relative; margin: 0; font-family: acumin-pro, sans-serif; font-weight: 400; font-size: 1.3rem; line-height: 1.75; color: var(--base);}
#whole-body {overflow: hidden;}
p {margin: 0 0 3.75rem 0;}
p.empty {margin: 0 !important;}
.clear {clear: both;}
img {max-width: 100%;}
.mobile-only {display: none;}
.full {position: absolute; width: 100% !important; height: 100% !important; z-index: 1; object-fit: cover; top: 0; left: 0;}

.holder {position: relative; z-index: 1;}
h1, h2, h3, h4 {line-height: 1.1; margin: 0;}
h1 {font-size: 5rem; font-weight: 800; text-transform: uppercase; margin: 0 auto 2.5rem; width: 90%;}
h2 {font-size: 2.5rem; font-weight: 400; color: #fff; text-align: center; width: 90%; margin: 0 auto;}
h2 strong {font-weight: 800; text-transform: uppercase;}
h3 {font-size: 5rem; font-weight: 800; text-transform: uppercase; margin: 0 0 1.875rem;}
h4 {font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 1.875rem;}

#hero, #footer {position: relative;}
#top, #play {background: url("../img/blue-back.jpg") repeat center center;}
#title {background: url("../img/red-back.jpg") repeat center center; color: #fff;}
.flex-holder {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
#top .center img {border-color: var(--base); border-width: 1px; border-style: solid; display: block; margin: 0 auto;}
#top, #play, #game {padding: 4.5rem 0;}

#hero {border-bottom: 10px solid #fff; height: 100vh; min-height: 50rem;}
#hero .full {object-position: top;}
#hero .gradient {position: absolute; top: 0; right: 0; width: 75%; height: 100%; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); z-index: 2;}
#hero .arcade-logo {position: absolute; z-index: 3; bottom: 2.5%; left: 2.5%;}
#hero .logo {position: absolute; z-index: 3; top: 50%; right: 5%; transform: translateY(-50%); width: 44rem;}

#top .container {width: 93.75rem; margin: 0 auto; text-align: center;}
#top {border-bottom: 10px solid #fff;}
#top p {text-align: left;}
#top .left, #top .right {width: 40%;}
#top .center {text-align: center; width: 20%;}

#title {padding: 4rem 0;}
#title .container, #play .container {width: 81.25rem; margin: 0 auto;}
#title .left, #title .right {width: 15%;}
#title .right {text-align: right;}
#title .center {width: 70%;}
#title .left img, #title .right img, #play .flex-holder img {border-color: var(--base); border-width: 1px; border-style: solid; display: block; margin: 0;}
#title .left img {transform: scaleX(-1);}
#title .right img {float: right;}

#play {border-bottom: 10px solid #fff; text-align: center;}
#play .flex-holder {text-align: left;}
#play .play-con {width: 65%; margin-left: auto; margin-right: auto;}
#play .left, #play .right {width: 50%; box-sizing: border-box;}
#play .left {padding-right: 10%;}
#play .right {padding-left: 10%;}
#play .flex-holder {align-items: flex-start;}
#play .flex-holder .control-img img {border: 0;}
#play .sub-flex-holder {display: flex; flex-direction: row; margin-bottom: 1rem; flex-wrap: wrap;}
#play .sub-flex-holder .txt {padding-left: 1rem; box-sizing: border-box; font-size: 1.25rem; line-height: 1.3; width: 62%;}
#play .sub-flex-holder .image {width: 38%;}

#footer {padding: 1.875rem 0 0;}
#footer .txt {padding-right: 5%; text-align: right; display: block; position: relative; z-index: 2; overflow: hidden;}
#footer .txt p {display: block; margin: 0 0 1.875rem; clear: both; overflow: hidden;}
#footer .txt p img {display: block; float: right;}

#game .container {height: 844px; position: relative;}
#game #unity-canvas {width: 1500px !important; height: 844px !important;}

/* Responsive */
@media only screen and (max-width: 96.875rem) {
	#hero .logo {width: auto;}
}
@media only screen and (min-width: 75rem) and (max-width: 96.875rem) {
	#game .container {height: 647px; position: relative;}
	#game #unity-canvas {width: 1150px !important; height: 647px !important;}
	#title .container, #play .container {width: 68.75rem;}
	#top .container {width: 71.875rem;}
	#hero {min-height: 35rem;}
	#top .left, #top .right {width: 35%;}
	#top .center {width: 30%;}
	h1 {font-size: 3rem;}
	#play .right {padding-left: 5%;}
	#play .left {padding-right: 5%;}
}

@media only screen and (max-width: 74.999rem) {
	#footer .txt {padding: 0; text-align: center;}
	#footer .txt p img {float: none; margin: 0 auto;}
	#footer:before {width: 100%; height: 100%; background-color: rgba(0,0,0,.5); position: absolute; z-index: 2; content: ''; top: 0; left: 0;}
}

@media only screen and (min-width: 60rem) and (max-width: 74.999rem) {
	#game .container {height: 512px; position: relative;}
	#game #unity-canvas {width: 910px !important; height: 512px !important;}
	#title .container, #play .container {width: 55rem;}
	#top .container {width: 55rem;}
	#hero {min-height: 30rem;}
	#top .left, #top .right {width: 35%;}
	#top .center {width: 30%;}
	h1 {font-size: 2.75rem;}
	#play .right {padding-left: 5%;}
	#play .left {padding-right: 5%;}
	#top, #play, #game {padding: 3rem 0;}
	body {font-size: 1.15rem;}
	h2 {font-size: 2rem;}
	h4 {font-size: 2rem; margin-bottom: 1rem;}
	#play .sub-flex-holder .txt {font-size: 1rem;}
}

@media only screen and (max-width: 59.999rem) {
	.flex-holder {display: block;}
	#top .left, #top .right, #top .center, #title .left, #title .center, #play .play-con, #play .left, #play .right {width: 100%;}
	#top .left, #top .right {text-align: left;}
	#top .center {margin: 1.25rem 0 1.5rem;}
	#title .right {display: none;}
	#title .left {margin: 0 0 1.5rem;}
	#title .left img {margin: 0 auto;}
	#footer .txt p {width: 250px; margin-left: auto; margin-right: auto;}
	#play .left, #play .right {padding: 0;}
	#play .left {margin-bottom: 2.5rem;}
	#play .control-img img {margin: 0 auto;}
	#hero .arcade-logo {width: 10.9375rem;}
}

@media only screen and (min-width: 48rem) and (max-width: 59.999rem) {
	#game .container {height: 394px; position: relative;}
	#game #unity-canvas {width: 700px !important; height: 394px !important;}
	#title .container, #play .container {width: 43rem;}
	#top .container {width: 43rem;}
	#hero {min-height: 35rem;}
	#top, #play, #game, #title {padding: 2.75rem 0;}
	h1 {font-size: 2.5rem;}
	h2 {font-size: 2rem;}
	h3 {font-size: 3.5rem;}
	#play .sub-flex-holder .txt {font-size: 1.3rem; line-height: 1.75;}
}

@media only screen and (max-width: 47.999rem) {
	#top, #play, #game, #title {padding: 2.5rem 0;}
	#play .sub-flex-holder .txt, body {font-size: 1.15rem; line-height: 2;}
	h2, h1 {width: 100%;}
	#hero .gradient {width: 100%; background: rgba(0,0,0,.5);}
	#hero .logo {right: 0; left: 0; margin: 0 auto; top: 40%; transform: translateY(-40%); width: 85%;}
	#hero .arcade-logo {left: 0; right: 0; margin: 0 auto;}
	p {margin: 0 0 2.5rem;}
}

@media only screen and (min-width: 30.0625rem) and (max-width: 47.999rem) {
	#game .container {height: 242px; position: relative;}
	#game #unity-canvas {width: 430px !important; height: 242px !important;}
	#title .container, #play .container {width: 25rem;}
	#top .container {width: 25rem;}
	#hero {min-height: 30rem;}
	h1 {font-size: 2.25rem;}
	h2 {font-size: 1.75rem;}
	h3 {font-size: 3rem;}
	h4 {font-size: 2rem; margin: 0;}
}

@media only screen and (max-width: 30rem) {
	#game .container {height: 197px; position: relative;}
	#game #unity-canvas {width: 350px !important; height: 197px !important;}
	#title .container, #play .container {width: 92.5%;}
	#top .container {width: 92.5%;}
	#hero {min-height: 30rem; height: 95vw}
	#hero .full {object-position: left;}
	h1 {font-size: 2rem;}
	h2 {font-size: 1.5rem;}
	h3 {font-size: 2.75rem;}
	h4 {font-size: 1.75rem; margin: 0;}
}

@media only screen and (max-width: 23.4375rem) {

}