/*
File: style.css
Author: Erik 'Ragnar' Eliasson
Author URI: http://www.erikeliasson.io
*/
@charset "utf-8";
/* CSS Document */
/*! normalize.css v1.0.0 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
/** PX 2 EM - 16px | 1.000em | 100.0% | 12pt **/
/** Site index ****************
GLOBAL
TEXT
HEADER
NAVIGATION
MAIN
FOOTER
FORMS
ANIMATION
MOBILE
******************************/
/**  GLOBAL  **/
* {
	-webkit-boz-sizing: border-box;
	-moz-boz-sizing: border-box;
	boz-sizing: border-box;
}
html, 
body {
	margin: 0;
	padding: 0;
}
body {
	line-height: 1.5;
	font-size: 100%;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000;
	opacity: 0;
}
body {
	background-color: #0568b9;
}
/**  TEXT  **/
h1, h2, h3 {
	font-size: 2em;
	color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: 'Fredoka One', cursive;
	}
h2 {
	text-align: center;
	font-size: 3em;
	font-weight: normal;
	line-height: 1;
	}
a, 
a:focus, 
a:link, 
a:visited {
	color: #f2e94b;
	text-decoration: none;
	}
a {
	color: #f2e94b;
	}
p {
	font-size: 1.2em;
	color: #fff;
	margin: 1.2em 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: 600;

}
ul, ol {
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	list-style-type: none;
	}
ul li,
ol li {}
::-moz-selection {background: #f2e94b;}
::selection {background: #f2e94b;}

.stroke {
   text-shadow:
	  -2px -2px 0 #72233d,  
	  2px -2px 0 #72233d,
	  -2px 2px 0 #72233d,
	  2px 2px 0 #72233d !important;
	}
.banana {
	color: #f2ea52;
	}
.snow {
	color: white;
	}
/** MARGINS **/
.box {
	max-width: 1200px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 8%;
	margin: 0 auto;
	}
/**  HEADER  **/
#masthead {
	background: #49afef;
	background: -moz-linear-gradient(top, #49afef 0%, #b7e9fc 100%);
	background: -webkit-linear-gradient(top, #49afef 0%,#b7e9fc 100%);
	background: linear-gradient(to bottom, #49afef 0%,#b7e9fc 100%);
	height: 100vh;
	min-height: 80vh;
	overflow: hidden;
	position: relative;
}
#layout-header {
	margin: 0 auto;
	display: block;
	position: relative;
	z-index: 1000;
	text-align: center;
}
.logotype {
	margin: 80px 0 0 0;
	text-align: center; 
	padding-bottom: 30px;
}
.logotype a {
	animation: logo 2s infinite alternate ease-in-out;
	-webkit-animation: logo 2s infinite alternate ease-in-out;
	position: relative;
	}
.logotype a img {
	display: inline-block;
	width: 100%;
	height: auto;
	max-width: 589px;
}
/* Logotype hover animation */
@-webkit-keyframes logo {
0% 		{top: 0px;}
100% 	{top: 20px;}
} 
@keyframes logo {
0% 		{top: 0px;}
100% 	{top: 20px;}
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 99;
}
#island {
	position: absolute;
	bottom: -30px;
	left: 0;
	right: 0;
	z-index: 90;
}
.upper-cloud-strip {
	background: transparent url('/images/fg-upper-cloud-strip.png') repeat-x;
	background-size: auto 80%;
	display: block;
	width: 100%;
	height: 420px;
	position: absolute;
	top: 90px;
	left: 0;
	right: 0;
	z-index: 50;
/*	animation: ucloud 150s infinite linear;
	-webkit-animation: bcloud 150s infinite linear;*/
}
@-webkit-keyframes ucloud {
0% 		{background-position: 0 0;}
100% 	{background-position: 3600px 0;}
} 
@keyframes ucloud {
0% 		{background-position: 0 0;}
100% 	{background-position: 3600px 0;}
}
.upper-cloud-strip:after {
	background: transparent url('/images/bg-upper-cloud-strip.png') repeat-x;
	background-size: auto 70%;
	display: block;
	content: "";
	width: 100%;
	height: 420px;
	position: absolute;
	top: 120px;
	left: 0;
	right: 0;
/*	animation: ubcloud 200s infinite linear;
	-webkit-animation: ubcloud 200s infinite linear;*/
	
}
@-webkit-keyframes ubcloud {
0% 		{background-position: 0 0;}
100% 	{background-position: 3600px 0;}
} 
@keyframes ubcloud {
0% 		{background-position: 0 0;}
100% 	{background-position: 3600px 0;}
}
.bottom-cloud-strip {
	background: transparent url('/images/mountain-bg.png') repeat-x;
	display: block;
	width: 100%;
	height: 315px;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	/*
	animation: bcloud 60s infinite linear;
	-webkit-animation: bcloud 60s infinite linear;
	*/
}
@-webkit-keyframes bcloud {
0% 		{background-position: 0 0;}
100% 	{background-position: 1024px 0;}
} 
@keyframes bcloud {
0% 		{background-position: 0 0;}
100% 	{background-position: 1024px 0;}
} 
*/
/**  MEDIA PLAYER  **/
.tbox {
	display: table;
	position: relative;
	z-index: 95;
	height: 100vh;
	width: 100%;
}
.tvalign {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.vembed {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 6px;
}
.vembed {
	margin: 0 auto;
	display: inline-block;
	width: 853px;
	height: 480px;
	box-shadow: 0 3px 16px 0 rgba(0,0,0,0.5);
}
#layout-header p span {
	vertical-align: middle;
	}
#layout-header p {
	font-size: 1em;
	}
#layout-header .buy-now {
	width: 100%;
	height: 60px;
	display: inline-block;
	background: #fbff04;
	border: 0 none;
	box-shadow: 0 6px 0 0 #d7a901; 
	color: #73223a;
	line-height: 60px;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 6px;
	font-size: 1.5em;
		font-family: 'Fredoka One', cursive;
	}
#layout-header .steam {
	width: 140px;
	height: auto;
	margin: 0 10px 0 0;
	position: relative;
	top: 12px;
	}
#layout-header .platforms .fa {
	margin: 3px;
	}
#layout-header .row {
	line-height: 60px;
	}
.col.right {
	text-align: right;
	}
.col.left {
	text-align: left;
	}
	.release-date {
		font-size: 1.2em;
		font-weight: bold;
		}
	.platforms {
		font-size: 1.3em;
		}
		.platforms .fa-linux {
			position: relative;
			left: -3px;
			}
/**  MAIN  **/
#main:before {
	background: transparent url('/images/sb-waves.png') repeat-x;
	content: "";
	display: block;
	width: 100%;
	height: 46px;
	position: relative;
	top: -22px;
	z-index: 100;
	animation: waves 4s infinite linear;
	-webkit-animation: waves 4s infinite linear;
}
#main {
	background-size: 100% auto;
	min-height: 100vh;
	position: relative;
	z-index: 999;
	margin-top: -42px;
	background-color: #0568b9;
	background-image: url('/images/section-bg.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
	border: 0 none;
}

@-webkit-keyframes waves {
	0% 		{background-position: 0 0;}
	100% 	{background-position: 388px 0;}
} 
@keyframes waves {
	0% 		{background-position: 0 0;}
	100% 	{background-position: 388px 0;}
}
#content {
	text-align: center;
	position: relative;
	z-index: 100;
	line-height: 1.25;
	padding-top: 40px;
	color: #fff;
}
.row {
	margin: 10px 0;
	padding: 10px 0 30px;
	width: 100%;
	}
.row.center {
	text-align: center;
	}
	/* Clearfox */
	.row:after {
		display: table;
		conent: "";
		clear: both;
		}
.row.no-border {
	border: 0 none;
	}
.col {
	display: inline-block;
	box-sizeing: border-box;
	vertical-align: top;
	}
	.col.s-two {
		width: 47%;
		margin-right: 2%;
		text-align: left;

		}
	.col.s-three {
		width: 29.5%;
		margin: 0 1%;
		}
ul.features {
	text-align: left;
	list-style-type: disc;
	margin-left: 10%;
	margin-bottom: 50px;
	}
#content h2, #content p {
/*	text-shadow: 0 0 30px #0896ff;*/
	}
#content p {
	text-align: left;
	margin: 0 4% 20px;
	}
/** ADDTHIS **/
#content .addthis_20x20_style .at4-icon, 
#content .addthis_20x20_white_style .at4-icon, .at-20x20 {
    background-size: 60px auto !important;
    height: 60px;
    line-height: 60px;
    width: 60px;
}

#content .at-share-tbx-element.addthis_20x20_style .at-share-btn, 
#content .at-share-tbx-element.addthis_20x20_white_style .at-share-btn {
    max-height: 60px;
    max-width: 60px;
		border-radius: 100%;
	overflow: hidden;
	margin: 0 5px;
}
/* Bubble */	
.addthis_20x20_style .at_flat_counter {
    font-size: 14px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 15px !important;
	}	
.at_flat_counter {
    top: 14px !important;
	border-radius: 2px !important;
	}
.at_flat_counter::after {
    top: 10px !important;
}
/**  FOOTER  **/
.colophon {
	text-align: center;
}
.colophon .eemd {
	display: inline-block;
	margin: 40px auto;
	-webkit-transition: opacity 200ms ease-in-out;
	-moz-transition: opacity 200ms ease-in-out;
	transition: opacity 200ms ease-in-out;
}
.colophon .eemd:hover {
	opacity: .5;
}
.noumenon-logo {
	width: 200px;
	height: auto;
	margin-top: 30px;
	}
/**  Sunrays  **/
#sunrays {
	position: absolute;
	top: 0;
	z-index: 90;
	}
/**  underwater  
.underwater {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #transparent;
	background-image: url('/images/section-bg.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top center;
	}
**/
/**  FORMS  **/
/**  ANIMATION  **/
/**  MOBILE  **/
@media all and (max-width: 1366px) {
	/* Base text size adjustment */
	body {
		font-size: 90%;
		}	
	/* Logotype */
	.logotype {
		margin: 26px 0 0 0;
		padding-bottom: 10px;
		}
	.logotype a img {
		max-width: 360px;
		}
	/* Header columns */
	.col.s-three.right {
		width: 98%;
		margin: 0 1%;
		text-align: center;
		}
	/* Video embed */
	.vembed {
		max-width: 560px;
		height: 315px;
		margin-top: 0;
		}
	/* Row adjustment */
	#layout-header .row {
    	line-height: 40px;
		margin: 0;
		padding: 0;
		width: 100%;
		}
	/* Header columns */
	.col.s-three {
		width: 48%;
		margin: 0 1%;
		text-align: center;
		}
	/* Release date */
	.release-date {
    	font-size: 1.5em;
		}
	/* Buy button and Misc */
	#layout-header .buy-now {
		height: 40px;
		line-height: 40px;
		width: 50%;
		font-size: 1.2em;
		}
	.bottom-cloud-strip {
		bottom: 0px;
		}	
	/* Main content */
	#main {
		margin-top: -26px;
		}
		#main:before {
		background-size: auto 75%;
		}
		/* Animation adjustments */
		@-webkit-keyframes waves {
			0% 		{background-position: 0 0;}
			100% 	{background-position: 291px 0;}
			} 
		@keyframes waves {
			0% 		{background-position: 0 0;}
			100% 	{background-position: 291px 0;}
			}
}
@media all and (max-height: 900px) {
	/* Video embed */
	.vembed {
		max-width: 700px;
		height: 420px;
		margin-top: 0;
		}
		.logotype {
		margin: 46px 0 0 0;
		padding-bottom: 15px;
		}
		.logotype a img {
		max-width: 460px;
		}
	/* Main content */
	#main {
		margin-top: -36px;
		}

}
@media all and (max-height: 720px) {
	/* Video embed */
	.vembed {
		max-width: 560px;
		height: 315px;
		margin-top: 0;
		}
	/* Logotype */
	.logotype {
		margin: 16px 0 0 0;
		padding-bottom: 15px;
		}
	.logotype a img {
		max-width: 360px;
		}
	/* Island */
	#island {
		bottom: -60px;
		}
}
@media all and (max-width: 1200px) {
	/* Base text size adjustment */
	body {
		font-size: 80%;
		}
	/* Logotype */
	.logotype {
		margin: 16px 0 0 0;
		padding-bottom: 15px;
		}
	.logotype a img {
		max-width: 360px;
		}
	/* Video embed */
	.vembed {
		max-width: 560px;
		height: 315px;
		margin-top: 0;
		}
	/* Row adjustment */
	#layout-header .row {
    	line-height: 30px;
		margin: 0;
		padding: 0;
		width: 100%;
		}
	/* Header columns */
	.col.s-three {
		width: 48%;
		margin: 0 1%;
		text-align: center;
		}
	/* Release date */
	.release-date {
    	font-size: 1.6em;
		}
	/* Buy button and Misc */
	#layout-header .buy-now {
		height: 40px;
		line-height: 40px;
		width: 50%;
		}
	/* Island */
	#island {
		left: 50%;
		bottom: 0px;
		transform: translateX(-522px);
		}
	/* Main content */
	#main {
		margin-top: -26px;
		}
	#main:before {
		background-size: auto 75%;
		}
		/* Animation adjustments */
		@-webkit-keyframes waves {
			0% 		{background-position: 0 0;}
			100% 	{background-position: 291px 0;}
			} 
		@keyframes waves {
			0% 		{background-position: 0 0;}
			100% 	{background-position: 291px 0;}
			}
		
}
@media all and (max-width: 1024px) {
/* Base text size adjustment */
	body {
		font-size: 80%;
		}
	/* Logotype */
	.logotype {
		margin: 30px 0 0 0;
		padding-bottom: 20px;
		}
	.logotype a img {
		max-width: 400px;
		}
	/* Video embed */
	.vembed {
		max-width: 560px;
		height: 315px;
		margin-top: 0;
		}
	/* Row adjustment */
	#layout-header .row {
    	line-height: 40px;
		margin: 0;
		padding: 0;
		width: 100%;
		}
	/* Header columns */
	.col.s-three {
		width: 48%;
		margin: 0 1%;
		text-align: center;
		}
	/* Release date */
	.release-date {
    	font-size: 2em;
		}
	/* Buy button and Misc */
	#layout-header .buy-now {
		height: 40px;
		line-height: 40px;
		width: 56%;
		}
	/* Island */
	#island {
		left: 50%;
		bottom: -20px;
		transform: translateX(-600px);
		}
	/* Main content */
	#main {
		margin-top: -22px;
		}
	#main:before {
		background-size: auto 75%;
		}
		/* Animation adjustments */
		@-webkit-keyframes waves {
			0% 		{background-position: 0 0;}
			100% 	{background-position: 291px 0;}
			} 
		@keyframes waves {
			0% 		{background-position: 0 0;}
			100% 	{background-position: 291px 0;}
			}

}