/* Main.css */

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}table{border-collapse:collapse;border-spacing:0}


body { 
	font-family: sans-serif;
	font-size: 20px;
	color: #888;
	background: #000 url(../img/vboy-stars.gif) repeat;
}

#identity,
#identity a,
#identity span {
    display: block;
    width: 300px;
    height: 153px;
    margin: 0 auto;
    padding: 0;
}

#identity a,
#identity span {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url(../img/8bitmatt-logo-web-jp-white.png) no-repeat 0 0;
}

#pixel-head {
	margin: 30px 0;
	padding: 0;
}

#pixel-head img {
	display: block;
	margin: 0 auto;
}




header, 
#main-wrap,
#mc_embed_signup,
.game-info,
.footer-wrap {
	margin: 0 auto;
	max-width: 1050px;
}

header, footer {
	min-height: 30px;
	padding: 30px 0;
}

header {
	padding-bottom: 70px;
}

.shop-page header {
	padding-bottom: 0;
}

#subscribe {
	margin: 70px 0;
}

.banner {
	width:100%;
	max-width: 1050px;
	margin:0 auto;
}

.game a:link,
.game a:visited {
	color: #ddd;
}

section {
	margin-bottom: 70px;
}

h1 {
	color:#fff;
	margin:0;
	padding: 50px 0;
}

h1 img {
	width:100%;
	padding: 0 20px;
	max-width: 350px;
	box-sizing:border-box;
}

h2 {
	margin: 0;
	text-align: center;
	font-size: 40px;
}
h3 {
	margin-top: 0;
	font-size: 40px;
}

@keyframes highlight {
	0% { outline-color: #FF6854; }
	50% { outline-color: #000; }
	100% { outline-color: #FF6854; }
}

html body footer :target {
	animation: highlight 3s ease-in-out infinite;
	outline: 2px solid;
}








#contact {
	border-top: 2px solid #f00;
}

#contact:target {
	border: none;
}

#contact ul {
	margin: 0;
	padding: 30px;
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#contact ul li {
	margin: 0 30px 0 0;
	padding: 0 30px 0 0;
	border-right: 1px solid #222;
}

#contact ul li:last-child {
	margin: 0;
	padding: 0;
	border: none;
}

#contact a {
	display: flex;
	align-items: center;
}



#about {
	max-width: 800px;
	margin: 0 auto;
	color: #fff;
	font-size: 27px;
	padding: 30px;
	background: rgba(255,0,0, 0.1);
}

#about h3 {
	color: #f00;
}

#copyright {
	padding:0 30px;
	color: #555;
	text-align: center;
	font-size: 13px;
}


.game-info {
	display: flex;
	flex-direction:row;
	padding: 30px;
}

.col-35 {
	width: 35%;
}

.col-65 {
	width: 60%;
	margin-left: 5%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}


.game-title-wrap {
	text-decoration: none;
}
.game-title {
	margin: 0;
}

.game-tagline {
	margin: 0 0 30px 0;
}

.game-description {
	width: 100%;
	font-size: 25px;
	line-height: 35px;
}

.collab,
.website {
	width: 100%;
}

.game-link,
.game-link a,
.game-link img {
	display: block;
}


.home-page #rotostellar {
	border-bottom: 1px solid #008BDF;
	border-left: none;
	border-right: none;
	/*background: #000024;
	background: -moz-linear-gradient(top, #000024 0%, #000024 80%, #000000 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #000024), color-stop(80%, #000024), color-stop(100%, #000000));
	background: -webkit-linear-gradient(top, #000024 0%, #000024 80%, #000000 100%);
	background: -o-linear-gradient(top, #000024 0%, #000024 80%, #000000 100%);
	background: -ms-linear-gradient(top, #000024 0%, #000024 80%, #000000 100%);
	background: linear-gradient(to bottom, #000024 0%, #000024 80%, #000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000024', endColorstr='#000000', GradientType=0 );
	*/
}

.home-page #rotostellar .game-link {
	border-bottom: 1px solid #008BDF;
}

.home-page #rotostellar .game-title {
	color: #c6e7ff;
}

.home-page #rotostellar .game-tagline {
	color: #0088e8;
}

.home-page #rotostellar .game-description {
	color: #0088e8;
}
.home-page #rotostellar .game-description b {
	color: #9000de;
	font-weight: 300;
}

.coming-soon,
.txt-btn {
	text-align: center;
	color: #777;
	font-size: 17px;
	padding:10px;
	background:black;
	border-radius: 10px;
	border:1px solid #444;
	display: inline-block;
	text-decoration: none;
}

.coming-soon b,
.txt-btn b {
	font-weight: normal;
	color: #ccc;
}

.home-page #rotostellar .app-store-badge {
	width: 150px;
	display: block;
}

.home-page #rotostellar .app-store-badge img {
	width: 100%;
}



#dig-dog {
	border-bottom: 1px solid rgba(255,0,0,0.5);
}



#dig-dog .banner {
	max-width: 800px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering: -o-crisp-edges;         /* Opera */
	-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

#dig-dog .game-link { 
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,0,0,0.5); 
}

#dig-dog .platform-group {
	display: flex;
	flex-wrap: wrap;
}

#dig-dog .app-store-badge {
	width: 150px;
	display: block;
	margin: 0 20px 20px 0;
}

#dig-dog .app-store-badge img {
	width: 100%;
}

#dig-dog .steam-btn {
	margin: 0 20px 0 0;
}

#dig-dog .txt-btn {
	align-self: baseline;
}


#rgc {
	border-bottom: 1px solid rgba(255,0,0,0.5);
}

#rgc .banner {
	max-width: 800px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;         /* Firefox */
	image-rendering: -o-crisp-edges;         /* Opera */
	-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

#rgc .game-link { 
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,0,0,0.5); 
}

#rgc .game-title { color: #fff; }
#rgc .game-tagline { color: #666; }

.platforms .available-on {
	display: inline-block;
	color: #ccc;
	vertical-align: top;
	margin:0 20px 20px 0;
}

#rgc .platform-group {
	display: inline-block;
	width: 155px;
	height: 62px;
}

.steam-btn,
.humble-btn {
	display: inline-block;
	width: 60px;
	height: 60px;
	border: 1px solid #444;
	border-radius: 10px;
	background: url(../img/steam-logo.png) no-repeat;
	background-size: contain;
}

.humble-btn {
	margin: 0 0 0 20px;
	background: url(../img/humble-logo.png) no-repeat;
	background-size: contain;
}

.steam-btn:hover,
.humble-btn:hover {
	opacity: 0.8;
}




a:link,
a:visited {
	color: #fff;
}
a:hover,
a:active {
	color: rgba(255,255,255,0.9);
}

.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}




.shop-page #main-wrap {
	padding: 0 10%;
	min-height: 300px;
}

.shop-page #secondary-content {
	padding: 0 10%;
	text-align: center;
}

#shop-heading {
	text-align: center;
	margin: 0 0 1.5em;
	padding: 0;
}

.product-listing h2 {
	margin: 70px 0 40px;
}


noscript.shop-warning div {
		display: block;
		text-align: center;
		padding: 20px;
		border-radius: 4px;
		color: #333;
		background: #FFEA8A;
		margin: 0 20%;
}

/* Shop loading */
.lds-ring {
	display: block;
	position: relative;
	width: 64px;
	height: 64px;
	margin: 0 auto;
}
.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 51px;
	height: 51px;
	margin: 6px;
	border: 6px solid #FF6854;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: #FF6854 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
	animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
	animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
	animation-delay: -0.15s;
}
@keyframes lds-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}





/* jj demo page 
=============================================== */
#jj-demo-heading { text-align: center; }

.jj-demo-vote {
	font-size: 26px;
	color: #fff;
	padding: 30px;
	margin: 30px 0;
	background: #333;
}

.jj-demo-download {
	background: #111;
	margin: 0 0 30px;
	padding: 30px;
}

.jj-demo-details .cover-img {
	float: left;
	margin: 0 60px 30px 0;
}


.jj-demo-imgs {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}


.jj-demo-imgs img {
	width: 40%;
	margin: 0 0 5% 5%;
	display: block;
	border: 1px solid #333;
}


#music {
	padding: 50px 10%;
	text-align: center;
}


#music h2,
#games h2 {
	margin: 0 auto;
	max-width: 1050px;
	text-align: left;
}
#games h2 {
	padding: 0 30px;
}


.preview-play {
	width: 100%;
	max-width: 1050px;
	/*max-height: 480px;*/
	border: 1px solid #222;
	margin: 0 auto 60px;
}

.preview-play img {
	display: block;
	margin: 0 auto;
	width: 100%;
	border: 1px solid #222;
	box-sizing: border-box;
}

.preview-play .video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}

.preview-play .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.music-grid {
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	max-width: 1050px;
	justify-content: center;
}

.music-grid .album {
	list-style: none;
	width: 350px;
	text-align: center;
	margin: 0 0 30px 0;
}




@media (max-width: 768px) {
	#mc_embed_signup label {
		/*font-size: 26px;*/
	}

	.game-title,
	#about h3 {
		font-size: 30px;
	}

	.game-tagline {
		font-size: 20px;
	}

	.game-description,
	.collab {
		font-size: 20px;
		line-height: 24px;
	}

    header nav {
    	width: 100%;
    	top: 0;
    	right: auto;
    	left: 0;
    	background:rgba(88,27,108,0.95);
    }

    header nav ul {
    	display: flex;
    	flex-flow: row;
    }

    .game-info {
		flex-direction:column;
	}

	.col-35 {
		width: 100%;
	}

	.col-65 {
		width: 100%;
		margin-left: 0;
	}

	#about {
		font-size: 20px;
	}
	#contact {
		font-size: 16px;
	}
	#mail svg {
		width: 20px
	}

	#copyright {
		padding:0 15%;
	}

	.home-page #rotostellar .platforms,
	#dig-dog .platforms,
	#rgc .platforms {
		margin-bottom: 30px;
	}


	.jj-demo-page #main-wrap > p,
	.jj-demo-page #main-wrap .jj-demo-details {
		padding: 0 10%;
		font-size: 18px;
	}

	.jj-demo-page .jj-demo-details .cover-img {
		float: none;
		margin: 0;
	}

	.jj-demo-page .jj-demo-details .cover-img img {
		display: block;
		margin: 0 auto;
	}

	.jj-demo-page #main-wrap .jj-demo-imgs {
		padding: 0;
	}

	.jj-demo-page #main-wrap .jj-demo-imgs img {
		width: 100%;
		margin: 0 0 5% 0;
	}
}

@media (max-width: 667px) {
	#contact ul li {
		margin: 0 30px 0 0;
		padding: 0;
		border: none;
	}

	#contact {
		font-size: 13px;
	}
	#mail svg {
		margin:0 5px 0 0;
		width: 13px
	}
}