@charset "UTF-8";
html {
  font-size: 16pt;
}

body, div, ul, img, picture, source 
{
  margin: 0;
  padding: 0;
  /*list-style: none;*/
  display: block;
}

h3 {
  text-transform: uppercase;
  position: relative;
}

/**{
  outline: 1px solid red;
}*/

body {
  background: #0077dc;
  /*background: #467361;*/
  /*font-family: "Pirata One";*/
  text-shadow: 1px 1px 3px black;
  color: white;
  font-size: 2rem;
  
  font-family: century-gothic, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.imagerow 
{
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  
  grid-template-columns: 1fr 1fr;
  width:90%;
  margin:auto;
}

.imagebox 
{
  position: relative;
  /*min-height: 3rem;*/
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.imagebox img
{
	width:100%;
	height: auto;
}


div.niceborder 
{
	background-image: url("../img/MidBorder.jpg");
	background-repeat:repeat-x;
	height:39px;
	width:100%;
	/*position:relative;
	top:0px;
	left:0vw;*/
}

main {
  /*background: #000000;*/
  /*background-image: url("../img/blackness.png");
  background-repeat:repeat-x;
  background-position:0vw 22vw;
  background-size:cover;
  */
  position:relative;
}

.needs-styling {
  display: block;
}

a {
  color: #9D15F2;
  text-decoration: none;
  -webkit-transition: .2s;
  transition: .2s;
}

a:hover {
  color: yellow;
}

#parallax-scene {
  display: block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

#trailer {
  width: 64vw;
  height: 36vw;
  margin: 0 auto;
  padding: 4vw 5vw 2vw 5vw;
}

#trailer iframe {
  width: 100%;
  height: 100%;
}

#what-is
{
	font-size: 1.2vw;
	margin: 0 auto;
	width: 94vw;
	/*height:25.5vw;*/
	padding: 5vw 3vw;
	padding-bottom: 1vw;
	
	background-image: url("../img/WhatISBorderimage.png");
	background-size: 100%;
	background-repeat:no-repeat;
}

#what-is-mobile
{
	font-size: 3vw;
	margin: 0 auto;
	width: 94vw;
	/*height:75vw;*/
	padding: 5vw 3vw;
	padding-bottom: 1vw;
	
	/*background-image: url("../img/WhatISBorderimage.png");
	background-size: 100%;
	background-repeat:no-repeat;*/
}

.what-is-text
{
	padding-left:50vw;
	width:30vw;
	background-image: url("../img/BorderLeft.png");
	background-size: 4vw;
	background-repeat:no-repeat;
	background-position:44vw 0vw;
}

.what-is-text-mobile
{
	padding-left:4vw;
	width:70vw;
		margin-bottom:4vw;

	/*background-image: url("../img/BorderLeft.png");
	background-size: 4vw;
	background-repeat:no-repeat;
	background-position:44vw 0vw;*/
}

.what-is-new-text-mobile
{
	width:80vw; 
	padding-left:4vw; 
	padding-top:4vw;
}

#whats-new
{
	font-size: 1.2vw;
	margin: 0 auto;
	width: 94vw;
	/*height:46vw;*/
	padding: 1vw 3vw;
	padding-bottom: 1vw;
	
	background-image: url("../img/WhatsNewBacking.jpg");
	background-size: 100%;
	background-repeat:no-repeat;
	background-color:#030305;
}

#whats-new-mobile
{
	font-size: 3vw;
	margin: 0 auto;
	width: 94vw;
	/*height:120vw;*/
	padding: 1vw 3vw;
	padding-bottom: 1vw;
	
	background-image: url("../img/WhatsNewBacking.jpg");
	background-size: 100%;
	background-repeat:no-repeat;
	background-color:#030305;
}

.featurelist
{
	padding-left:6.5vw;
	margin-left:2vw;
	margin-top:1vw;
	/*background-image: url("../img/BorderRight.png");
	background-size: 2.2vw;
	background-repeat:no-repeat;
	background-position:0vw 1.5vw;*/
}

.featurelist-mobile
{
	padding-left:6.5vw;
	margin-left:2vw;
	margin-top:1vw;
	
	/*padding-left:10vw;
	margin-left:2vw;
	margin-top:1vw;
	background-image: url("../img/BorderRight.png");
	background-size: 6vw;
	background-repeat:no-repeat;
	background-position:0vw 3vw;*/
}

.featurelist li
{
	padding:0.5vw;
}

.featurelist-mobile li
{
	padding:0.5vw;
}

#screenshotsection
{
	font-size: 1rem;
	margin: 0 auto;
	width: 94vw;
	/*height:80vw;*/
	padding: 1vw 3vw;
	padding-bottom: 1vw;
	
	background-image: url("../img/BottomImage.jpg");
	background-size: 100%;
	background-position:0vw 20vw;
	background-repeat:no-repeat;
	background-color:#030305;
}

.screenshotlist ul
{
	list-style: none;
}

#screenshots {
  width: 90vw;
  margin: 0 auto;
  padding: 5vw 5vw;
}


#stores {
  text-align: center;
  /*background: $dark-area;*/
  padding: 4vw 0 8vw 0;
}

#stores h3 {
  font-size: 3rem;
  /*border-bottom: 1px solid yellow;*/
  width: 40vw;
  margin: 2vw 30vw 6vw 30vw;
}

#stores ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: horizontal;
          flex-direction: horizontal;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#stores li {
  width: 20vw;
  height: 20vw;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2vw;
  margin: 0 3vw;
  background: white;
  position: relative;
  -webkit-transition: top .2s;
  transition: top .2s;
  top: 0;
}

#stores li:hover {
  top: -2vw;
}

#stores li img {
  display: block;
  width: 90%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 5%;
}

#stores li img svg {
  display: block;
}

footer {
  background-image: url("../img/Map_Background.png");
  background-repeat:repeat-xy;
  /*background: rgba(0, 0, 0, 0.3);*/
  /*background: rgb(70, 115, 97);*/
  text-align: center;
  padding: 2em;
}

.wrapper {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-perspective: 2px;
          perspective: 2px;
  -webkit-perspective-origin: 50vw 0vh;
          perspective-origin: 50vw 0vh;
  height: 100vh;
  width: 100vw;
  background: #030305;
}

.section {
  position: relative;
}

nav {
  position: relative;
  top: 0;
  height: 0;
  z-index: 50;
}

nav p {
  position: absolute;
  left: 0;
  top: auto;
  margin: 0;
  padding: 0;
  z-index: 50;
  margin: 2vw 2vw;
  padding: 0;
}

#navlist {
  position: absolute;
  left: auto;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  right: 0;
}

#navlist li {
  margin: 1vw;
  font-size: 1.75rem;
}

#navlist li:hover {
  text-decoration: underline;
}

#mobile-navigation {
  display: none;
}

#awards {
  position: absolute;
  left: 0;
  top: 3vw;
  right: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 60;
  font-size: 1.8rem;
  height: 10vw;
  margin:auto;
  display:block;
  width:45vw;
}

#awards img
{
	width:9vw;
	float:left;
}

#storelinks {
  position: absolute;
  left: 0;
  /*top: 42vw;*/
  top: 10vw;
  right: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 60;
  /*background: rgba(0, 0, 0, 0.5);*/
  /*margin: 0 auto;*/
  font-size: 1.8rem;
  height: 32vw;
}

#storelinks li {
  margin-left: 1.2vw;
  padding: 0.6vw 0.6vw 0 0.6vw;
  min-height: 2.4vw;
  color: white;
  display: block;
}

#storelinks p {
  margin: 0;
  position: relative;
  top: .75vw;
}

#storelinks a {
  position: relative;
  top: 0;
}

#storeicons
{
	width:34vw;
	display:block;
	margin:auto;
	text-align:center;
}

#storeicons a
{
  -webkit-transition: top .2s;
  transition: top .2s;
  position:relative;
  top:0px;
}

#storeicons a:hover
{
	top:-4px;
}

#storeicons img
{
	height:5vw; display:inline-block; margin:0.5vw;
}

#dpadlink {
  text-indent: -9999em;
  background-image: url("../img/logo/dpadlogoV2.png");
  background-repeat:no-repeat;
  width: 13.9vw;
  height: 3.1vw;
  max-width: 147px;
  max-height: 36px;
  background-size: 100%;
  padding: 0;
  margin: 0;
  top: 0.5vw;
  left: 91vw;
}

#dpadlink a {
  display: block;
  height: 100%;
  width: 100%;
}

header {
  width: 100%;
  height: 50vw;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  z-index: -1;
}

header h1 {
  z-index: -10000;
}

header picture img {
  width: 100%;
}

header picture char {
	width: 100%;
	z-index: -1000;
}

#main > p:first-child {
  margin-top: 0;
  padding-top: 0;
}

h1 {
  position: absolute;
  left: 0;
  top: 6vw;
  width: 100%;
  -webkit-transform: translateZ(0) scale(1);
          transform: translateZ(0) scale(1);
   z-index:-1999;
}

h1 img {
  display: block;
  margin: 0 auto;
  width: 30vw;
  z-index:1999;
  position:relative;
  /*height: 16.23vw;*/
}

.scene {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  width: 100%;
}

button {
  background: none;
  color: white;
  border: none;
}

#thumbnails {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  width: 80vw;
  /*height: 31.5vw;*/
  padding-top: 1vw;
  /*padding-bottom: 5vw;*/
  padding-bottom: 0vw;
  /*margin: 0 auto 5vw auto;*/
  margin: 0 auto 0vw auto;
  list-style:none;
  
}

#thumbnails ul {
	list-style:none;
}

#thumbnails img {
  border: 0.5vw;
  border-radius: 0;
  opacity: 0.8;
  -webkit-transition: .2s;
  transition: .2s;
  width: 25vw;
}

#thumbnails img:hover {
  opacity: 1;
}

.para-background {
  -webkit-transform: translateZ(-3px) scale(2.5);
          transform: translateZ(-3px) scale(2.5);
  z-index: 17;
  -webkit-transform-origin: 50.5% 0%;
          transform-origin: 50.5% 0%;
}

.para-alchemist {
  -webkit-transform: translate3d(-20vw, 20vw, -0.5px) scale(0.7);
          transform: translate3d(-20vw, 20vw, -0.5px) scale(0.7);
  z-index: 18;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

.para-elevator {
  -webkit-transform: translate3d(-50vw, 30vw, -2px) scale(1);
          transform: translate3d(-50vw, 30vw, -2px) scale(1);
  z-index: 17;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

.para-vario {
  -webkit-transform: translateZ(-2.5px) scale(0.2);
          transform: translateZ(-2.5px) scale(0.2);
  z-index: 19;
  -webkit-transform-origin: 142% 120%;
          transform-origin: 142% 120%;
}

.paraRedShark
{
	-webkit-transform: translateZ(-2px) scale(0.3);
          transform: translateZ(-2px) scale(0.3);
  z-index: -1000;
  -webkit-transform-origin: 120% 160%;
          transform-origin: 120% 160%;
}

.paraBlueShark
{
	-webkit-transform: translateZ(-1.9px) scale(0.3);
          transform: translateZ(-1.9px) scale(0.3);
   z-index: -999;
   -webkit-transform-origin: 150% 164%;
          transform-origin: 150% 164%;
}

.paraGreenShark
{
	-webkit-transform: translateZ(-1.8px) scale(0.4);
          transform: translateZ(-1.8px) scale(0.4);
   z-index: -998;
   -webkit-transform-origin: 127% 210%;
          transform-origin: 127% 210%;
}

.para-videobacking {
  -webkit-transform: translate3d(0px, 57vw, 0px) scale(1);
          transform: translate3d(0px, 57vw, 0px) scale(1);
  z-index: 18;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

.para-videobottom {
  -webkit-transform: translate3d(-15vw, 72.5vw, 0px) scale(1.75);
          transform: translate3d(-15vw, 72.5vw, 0px) scale(1.75);
  z-index: 18;
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

#store-1 {
  width: 6.3vw;
}

#store-2 {
  width: 5.064vw;
}

#store-3 {
  width: 8.292vw;
}

@media only screen and (max-width: 1000px) {
	#what-is
	{
		display:none;
	}
	#whats-new
	{
		display:none;
	}
	
	.imagerow
	{
	  grid-template-columns: 1fr;
	}
	
	.desktopOnly
	{
		display:none;
	}
}

@media only screen and (min-width: 1000px) {
	#what-is-mobile
	{
		display:none;
	}
	#whats-new-mobile
	{
		display:none;
	}
	
	.mobileOnly
	{
		display:none;
	}
}