@charset "utf-8";

/*        Globals      */

:root 
{
	--headerHeight:7vh;
	--footerHeight:4em;
	--headerColor:rgb(40,40,40);
	--primaryColor:rgba(40,40,40,0.9);
	--secondaryColor:rgba(30,30,30,0.9);
	--borderStyle:1px solid black;
}
body
{
	margin: 0;
	background-color:black;
	font-size:1em;
	color:white;
}
h1, h2, h3, h4
{
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:300;
	color:white;
	margin:0;	
}
h1
{
	font-size:5em;
}
h2
{
	font-size:3em;
}
h3
{
	font-size:2em;
}
h4
{
	font-size:1.5em;	
}
p, li
{
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	margin:0;
}
a
{
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	text-decoration:none;
}
.bodyText
{
	font-size:1.25em;
}
.wrapper
{
	width:100%;
}
.flexContainer
{
	width:100%;
	display:flex;
	flex-wrap:wrap;
}
.primary
{
	background-color:var(--primaryColor);
}
img 
{
	max-width:100%;
	max-height:100%;
}


/*        Header      */

.header
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:var(--headerHeight);
	background-color: var(--primaryColor);
	z-index:10;
	border-bottom:var(--borderStyle);
}
.headerBackground
{
	background-color:var(--headerColor);
	width:100%;
	height:100%;
	opacity:0;
}
.fullScreenVideo
{
	position:fixed;
	top:0;
	left:0;
	z-index: -100;
	height:100%;
	width:100%;
	overflow:hidden;
}
.promoVideo
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-width:100%;
	min-height:100vh;
	z-index:-1;
}
.patternOverlay
{
	width:100%;
	height:100%;
	background-color:black;
	//background-image:url(images/CirclePattern.png);
	//background-size:5px;
	background-repeat:repeat;
	opacity:0.5;
}
#phlHeader, #metricBearHeader
{
	width:100%;
	height:100%;
	z-index:10;
	
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.phlHeaderLogo, .metricBearHeaderLogo
{
	height: 85%;
	width: auto;
	margin:0 2em;
}
#phlHeader p, #metricBearHeader p
{
	color:white;
	font-weight:300;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#phlHeader
{
	float:left;	
	border-right:1px inset black;
}
.phlHeaderLogo
{
	position:absolute;
	left:0;
	top:50%;
	transform:translate(0,-50%);
}

#phlHeader p
{
	position:absolute;
	right:0%;
	top:45%;
	transform:translate(0,-50%);
	padding:2em 3em 2em 7em;
	cursor:pointer;
}

#metricBearHeader
{
	float:right;
	border-left:1px inset black;
}

.metricBearHeaderLogo
{
	position:absolute;
	right:0;
	top:48%;
	transform:translate(0,-50%);
}

#metricBearHeader p
{
	position:absolute;
	left:50%;
	top:45%;
	transform:translate(0,-50%);
	padding:4em 7em 4em 3em;
}

/*        Footer      */

.footer
{
	background-color: var(--secondaryColor);
	width:100%;
	height:calc(var(--footerHeight) + 1em);
	overflow:hidden;
}
.socialLinks
{
	float:left;
	height:calc(100% - 2em);
	padding:1em;
}
.socialLinks a
{
	display:block;
	float:left;
	margin-left:1em;
	height:90%;
}
.socialLinks img
{
	
}
.copyright
{
	margin:1.25em 2em;
	float:right;
	color:gray;
}

/*        Games List      */

.gamesTab
{
	position:absolute;
	z-index:-1;
	margin-top:var(--headerHeight);
	width:100%;
	float:left;	
	overflow:hidden;
}
.gamesList
{
	width:100%;
	margin:0 auto;
}
.phlGamesList, .metricBearGamesList
{
	background-color:var(--secondaryColor);	
	width:100%;
	height:100%;
}
#phlTab, #metricBearTab
{
	display:none;	
}
.game
{
	height:12em;
	margin: 0 2em 1.8em 0;
	cursor: pointer;
    transition: 0.1s ease-out;
}
.game:hover
{
	transform: scale(1.1);
}	
.game img
{
	max-width:100%;
	max-height:100%;
}
.phlGamesList .gamesList, .metricBearGamesList .gamesList
{
	display:flex;
	flex-wrap:wrap;
}
.phlGamesList .gamesList
{
	justify-content:center;
	padding: 2em 2em 0.5em 2em;
    box-sizing: border-box;
}
.metricBearGamesList .gamesList
{
	justify-content:flex-end;
}
ul
{
	margin:0;
}


/*        Company Message      */

.companyMessage
{
	height:calc(90vh - (var(--headerHeight) + 1em));
	width:100%;
	z-index:0;
}
.companyHeader 
{
	position:relative;
	margin:0 auto;	
	text-align:center;
	top:35%;
}
.companyDescription
{
	width:45%;
	font-size:2em;	
	margin:0 auto;
	min-width:20em;
}
.companyDescription p
{
	font-weight:100;
}
.moreInfo
{
	position:relative;
	text-align:center;
	top:50%;
	height:var(--headerHeight);
	margin-bottom:2em;
}
.moreInfo img
{
	width:2em;
	height:auto;
	margin-top:0.25em;
}



/*        About Us      */

.companyInfo
{
	width:90%;	
	margin: 0 auto;
	padding:2em 0;
}
.aboutUsMessage, .location p
{
	margin:0.5em 0 1em 0;	
}
.aboutUsHeader
{
	margin-bottom:2em;
	text-align:center;
}
.headerText
{
	display:block;
	width:100%;
}
.availableText
{
	display:block;
	width:100%;
	margin-bottom: 1em;
}
.companyInfo .flexContainer
{
	border-left:var(--borderStyle);
	border-right:var(--borderStyle);
}
.companyInfo .location
{
	border-left:var(--borderStyle);
}
.location, .aboutUs
{
	padding:0 2em;
}
.aboutUs
{
	flex:2;
	min-width:500px;
}
.location
{
	flex:1;
}
.registeredPlatforms
{
	display:flex;
	align-items:center;
	margin:0.5em 0;
}
.platformIcon
{
	padding-right:1em;
}


/*        Games Page      */

.gameInfoContainer
{
	margin-top:var(--headerHeight);
	overflow:hidden;
}
.gameInfoContainer h2
{
	font-size:4em;
}
.videoSpace
{
	flex:2;	
	min-width:60%;
	min-height:50vh;
}
.gameInfo
{
	flex:1;
	width:30%;
	padding:0 4% 2% 4%;
	background:var(--primaryColor);
	border-left:var(--borderStyle);
	box-sizing: border-box;
}
.gameHeader
{
	margin-top:2em;	
	align-items:center;
}
.features, .gamePlatforms, .videos, .images
{
	margin-top:1.5em;	
}
.gameHeader .headerText
{
	margin-right:0.5em;	
}
.gameSet
{
	border-bottom:var(--borderStyle);
	margin-bottom:2em;
	padding-bottom: 2em;
}
.gameSet .headerText h2
{
	font-size:2em;
}
.gameSet h3
{
	margin-bottom: 0.25em;
}

.platformIcons .platformIcon
{
	width:46%;
	height:4em;
	background:var(--secondaryColor);
	border:var(--borderStyle);
	border-radius:0.5em;
	padding:0;
	margin-right:2%;
	margin-top:0.5em;
	text-align:center;
}
.platformIcons .platformIcon:hover
{
	background:rgba(75,75,75,1);
}
.platformIcons .platformIcon:active
{
	background:rgba(10,10,10,1);
}
.platformIcons .platformIcon img
{
	position:relative;
	transform:translate(0,-50%);	
	top:50%;
	max-height:70%;
	max-width:60%;
}
.videoList
{
	width:100%;	
	text-align:center;
}
.videoList iframe
{
	width:100%;
	height:20em;
	margin-bottom:0.5em;
	padding-top:0.5em;
}
.imageList
{
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.imageList .image
{
	overflow: hidden;
    text-align: center;
    width: 49%;
    margin-bottom: 2%;
    vertical-align: middle;
}
.imageList img
{
	height: auto;
    min-width: 100%;
	max-height:none;
    vertical-align: middle;
}
.alignVert
{
	display: inline-block;
    height: 100%;
    vertical-align: middle;
}
a:link
{
	color:#FFFFFF;
}
a:visited
{
	color:#FFFFFF;
}
a:hover
{
	color:#FFFFFF;
}
a:active
{
	color:#FFFFFF;
}
.Bears .headerText h2
{
	font-size:2em;
}

@media (orientation: portrait) 
{
	.gameInfo
	{
		min-width: 100%;
	}
}

/*        Lightbox        */

#lightBox
{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 15;
	text-align: center;
}
.lightBoxArrow, #lightBoxImage
{
	position:fixed;
	top:50%;
	transform:translate(-50%,-50%);
}
#lightBoxImage
{
	max-width:75%;
	max-height:80vh;
	box-shadow:0 0 5em black;
	left:50%;
}
.lightBoxArrow
{
	cursor:pointer;
	width:10%;
}
#lightBoxArrowLeft
{
	left:5%;
}
#lightBoxArrowRight
{
	left:95%;
}
#lightBoxBackground
{
	width:100%;
	height:100vh;
	background-color:rgba(0, 0, 0, 0.75); 
}


/*        Animations      */

@-webkit-keyframes _fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes _fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes _fadeIn { from { opacity:0;} to { opacity:1; } }
 
.fadeIn 
{
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:_fadeIn ease- 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:_fadeIn ease-in 1;
	animation:_fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:0.25s;
	-moz-animation-duration:0.25s;
	animation-duration:0.25s;

	animation-delay: 0;
}

@-webkit-keyframes _fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes _fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes _fadeOut { from { opacity:1;} to { opacity:0; } }
 
.fadeOut
{
	opacity:1;  /* make things invisible upon start */
	-webkit-animation:_fadeIn ease- 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:_fadeIn ease-in 1;
	animation:_fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:0.25s;
	-moz-animation-duration:0.25s;
	animation-duration:0.25s;

	animation-delay: 0;
}

@-webkit-keyframes _slideDown { from { opacity:0; Transform:translate(0,-15em); } to { opacity:0; Transform:translate(0,0); } }
@-moz-keyframes _slideDown { from { Transform:translate(0,-15em); } to { Transform:translate(0,0); } }
@keyframes _slideDown { from { opacity:0; Transform:translate(0,-15em); } to { opacity:1; Transform:translate(0,0); } }
 
.slideDown 
{
	-webkit-animation:_slideDown ease-out 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:_slideDown ease-out 1;
	animation:_slideDown ease-out 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:0.25s;
	-moz-animation-duration:0.25s;
	animation-duration:0.25s;

	animation-delay: 0;
}


/*      STUPID EDGE!!!!!!!!        */

@supports (-ms-ime-align:auto) 
{
    .primary
	{
		background-color:rgba(40,40,40,0.9);
	}
	.primary
	{
		background-color:rgba(40,40,40,0.9);
	}
	.header
	{	
		height:7em;
		background-color: rgba(40,40,40,0.9);
	border-bottom:var(--borderStyle);
	}
	.headerBackground
	{
		background-color:rgba(40,40,40,1);
	}
	.footer
	{
		background-color: rgba(30,30,30,0.9);
		height:5em;
	}
	.gamesTab
	{
		margin-top:7em;
	}
	.phlGamesList, .metricBearGamesList
	{
		background-color:rgba(30,30,30,0.9);	
	}
	.companyMessage
	{
		height:calc(100vh - 8em);
	}
	.moreInfo
	{
		height:7em;
	}
	.companyInfo .flexContainer
	{
		border-left:1px solid black;
		border-right:1px solid black;
	}
	.companyInfo .location
	{
		border-left:1px solid black;
	}
	.gameInfoContainer
	{
		margin-top:7em;
	}
	.gameInfo
	{
		background:rgba(40,40,40,0.9);
		border-left:1px solid black;
	}
	.platformIcons .platformIcon
	{
		background:rgba(30,30,30,0.9);
		border:1px solid black;
	}
}