body {background-color:#000; overflow-y:scroll; font-family:'Arial',sans-serif; font-size:16px; line-height:22px; color:#ddd;}
h1 {font-size:60px; font-weight:700; font-style:normal; margin:0; padding:0; line-height:70px; color:#fff;}
h2 {font-size:30px; font-weight:700; font-style:normal; margin:0 0 10px 0; padding:0; line-height:40px; color:#fff; text-shadow: 2px 0px #000, -2px 0px #000, 0px -2px #000, 0px 3px #000;}
h3 {font-size:20px; font-weight:700; font-style:normal; margin:0 0 10px 0; padding:0; line-height:40px; color:#fff;}
a {color:#08f; text-decoration:none;}
a:hover {color:#f80; text-decoration:underline;}
p, ul {margin:10px 0 30px 0;}


/*iframe {margin:0;}*/

#site-container {width:100%; text-align:center; padding-top:40px; background-color:#252729;}

#header {margin-bottom:30px;}
	#header iframe {max-width:1200px; max-height:675px;}
	#header .container {padding-bottom:30px;}
	
#intro, #features, #media, #buy, #try, #inspired-by, #support, #social {margin-bottom:30px; text-align:left;}

#features li {margin-bottom:10px;}

.screenshot-container {text-align:center; margin:10px 0 30px 0;}
a.screenshot {display:inline-block; text-align:center;}
a.screenshot:hover {background-color:#666;}
.screenshot-container a.screenshot img {width:216px; height:122px; margin:8px 8px 4px 8px;}

#buy {text-align:center;}
	#buy .container {background-color:#000; border-radius:4px; padding:20px 0 20px 0;}
	
#try {text-align:center;}
	#try .container {background-color:#000; border-radius:4px; padding:20px 0 20px 0;}

a.buy-button, a.demo-button {margin:10px; display:inline-block; width:295px; height:88px; border-radius:10px; position:relative;}
	a.buy-button img, a.demo-button img  {width:295px; height:88px; border-radius:10px;}
	a.buy-humble-store {background:#cd282c;}
	a.buy-humble-store:hover {background:#da5e61;}
	a.buy-itch {background:#fa5c5c;}
	a.buy-itch:hover {background:#fb8585;}
	a.buy-google-play {background:#000000;}
	a.buy-google-play:hover {background:#404040;}
	a.buy-app-store {background:#000000;}
	a.buy-app-store:hover {background:#404040;}
	a.buy-steam {background:#367096;}
	a.buy-steam:hover {background:#6894b0;}
	a.demo-windows {background:#0088ff;}
	a.demo-windows:hover {background:#40a6ff;}
	a.demo-macos {background:#3bc254;}
	a.demo-macos:hover {background:#51ce68;}
	a.demo-ubuntu {background:#dd663d;}
	a.demo-ubuntu:hover {background:#e77a54;}
	
.coming-soon {width:295px; height:88px; position:absolute; background-image:url("/images/button-banner-coming-soon.png"); background-repeat:no-repeat; background-size:295px 88px; border-radius:10px;}
.beta-open {width:295px; height:88px; position:absolute; background-image:url("/images/button-banner-beta-open.png"); background-repeat:no-repeat; background-size:295px 88px; border-radius:10px;}
.for-macos {width:295px; height:88px; position:absolute; background-image:url("/images/button-banner-macos.png"); background-repeat:no-repeat; background-size:295px 88px; border-radius:10px;}
.for-ios {width:295px; height:88px; position:absolute; background-image:url("/images/button-banner-iphone-ipad.png"); background-repeat:no-repeat; background-size:295px 88px; border-radius:10px;}

#social {text-align:center;}
	#social a {display:inline-block; height:60px; width:260px; margin:10px; padding-left:35px; border-radius:4px; color:#fff; text-decoration:none; font-size:20px; line-height:56px; background-repeat:no-repeat; background-position:51px 16px;}
	#social a.facebook {background-color:#3b5998; background-image:url("/images/icon-facebook.png");}
	#social a.twitter {background-color:#1da1f2; background-image:url("/images/icon-twitter.png");}
	#social a:hover {background-color:#888;}
	
#footer {margin:0; padding:0; color:#888; background-color:#000;}
	#footer div {padding:16px 0 30px 0;}
	#footer .legal {font-size:30px; line-height:46px; margin-bottom:12px;}
	#footer .fine-print {font-size:12px; line-height:16px; text-align:left;}
	#footer .partners, #footer .footer-links {margin-top:5px; font-size:12px; line-height:16px; text-align:left;}
	#footer p {margin:0; padding:0;}
	
.container {max-width:1200px; margin:0 auto;}
.top-rule {border-top:2px solid #444;}
.bottom-rule {border-bottom:2px solid #444;}
.image-center{width:100%; text-align:center;}
	.image-center img {margin:0 auto;}

.caps {text-transform:uppercase;}
.bold {font-weight:700;}
.italic {font-style:italic;}
.clear {clear:both;}
.note {color:#08f;}
.plain {text-shadow:none; color:#000;}
.light {color:#fff;}
.nlp {margin:10px 0 15px 0;}

html, body {height:100%;}
.iframe_wrapper {width:80%; max-width:1200px; height:100%; margin:0 auto; background:#000;}
.iframe_container {position:relative; padding-top:56.25%;}
.iframe_container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
	
#contact-container {width:100%; text-align:center;}

#contact {width:100%; text-align:center; padding:20px 0 60px 0; position:relative; background-repeat:no-repeat; background-position:center -300px;}
	#contact-inner {max-width:1200px; min-width:360px; margin:40px auto 0 auto; padding:40px 10px 20px 10px; text-align:left; background-color:#000; border-radius:4px; padding:20px 0 20px 0;}
	#contact-form {max-width:800px; min-width:340px; margin:0 auto; text-align:center;}
	#contact form div {display:inline-flex;}
	#contact form .label {margin:0 10px 5px 0; width:200px; }
	#contact form .input-text {height:40px; width:570px; margin:0 0 20px 0; padding:0 0 0 10px; position:relative; top:0; font-size:16px; border:0; border-radius:2px;}
	#contact form .input-textarea {height:240px; width:570px; margin-bottom:10px; padding:9px 0 0 10px; position:relative; top:-1px; font-size:16px; border:0; border-radius:2px; line-height:20px;}
	#contact form .input-submit {display:inline-block; height:60px; width:260px; margin:10px 0 0 0; border-radius:5px; line-height:45px; text-decoration:none; font-size:20px; color:#fff; background-color:#08f; text-align:center; cursor:pointer; border:0;}
		#contact form .input-submit:hover {background-color:#f80;}
		
#contact-errors {width:100%; text-align:center; position:relative; margin-bottom:20px;}
	#contact-errors div {max-width:1160px; min-width:360px; margin:40px auto 40px auto; padding:20px 20px 0 20px; text-align:center; background-color:#08f; color:#fff;}
	#contact-errors ul {text-align:left;}
	
#contact-done {width:100%; text-align:center; padding:20px 0 20px 0; position:relative;}
	#contact-done div {max-width:1160px; min-width:360px; margin:0 auto 40px auto; padding:40px 20px 40px 20px; text-align:center; background-color:#fff; color:#000; border-radius:4px; }
	#contact-done p {text-align:left; max-width:800px; min-width:360px; margin:20px auto;}
	#contact-done .nav {display:inline-block; height:50px; width:160px; margin:10px auto 10px auto; border-radius:5px; line-height:50px; text-decoration:none; font-size:20px; color:#fff; background-color:#08f; text-align:center;}
	#contact-done .nav:hover {color:#fff; background-color:#f80;}
	
#privacy-policy {width:100%; text-align:center; padding:20px 0 20px 0; position:relative;}
	#privacy-policy div {max-width:1160px; min-width:360px; margin:0 auto 40px auto; padding:40px 20px 40px 20px; text-align:center; background-color:#fff; color:#000; border-radius:4px; }
	#privacy-policy p {text-align:left; max-width:800px; min-width:360px; margin:20px auto;}
	#privacy-policy .nav {display:inline-block; height:50px; width:160px; margin:10px auto 10px auto; border-radius:5px; line-height:50px; text-decoration:none; font-size:20px; color:#fff; background-color:#08f; text-align:center;}
	#privacy-policy .nav:hover {color:#fff; background-color:#f80;}
	
#changelog {width:100%; text-align:center; padding:20px 0 20px 0; position:relative;}
	#changelog div {max-width:1160px; min-width:360px; margin:0 auto 40px auto; padding:40px 20px 40px 20px; text-align:center; background-color:#fff; color:#000; border-radius:4px; }
	#changelog div .entry {margin:0; padding: 0; border-radius:0;}
	#changelog p {text-align:left; max-width:800px; min-width:360px; margin:20px auto;}
	#changelog .nav {display:inline-block; height:50px; width:160px; margin:10px auto 10px auto; border-radius:5px; line-height:50px; text-decoration:none; font-size:20px; color:#fff; background-color:#08f; text-align:center;}
	#changelog .nav:hover {color:#fff; background-color:#f80;}
	#changelog h3 {max-width:800px; background-color:#000; text-align:left; margin:20px auto; padding:5px 10px;}
	#changelog ul {text-align:left; max-width:800px; margin:20px auto;}
	#changelog ul li {margin-bottom:5px;}

.g-recaptcha {margin:9px 0 8px 0; position:relative; left:-33px;}






/* extras for smaller screens */

@media screen and (max-width: 1280px) {
	h3 {padding:0 20px;}
	.container {padding:0 20px;}
	#footer p {padding:0 20px;}
	#contact form .inpt {width:90%;}
	#contact-form .label {width:89% !important; margin-bottom:10px !important;}
	#contact form .input-text, #contact form .input-textarea {width:100%;}
	.g-recaptcha {margin:9px 0 8px 0; position:relative; left:0px;}
	
/*
	body {font-size:2em; line-height:1.2em;}
	h1 {font-size:2.5em; line-height:1em;}
	h2, h3 {font-size:2em; line-height:1em; margin-bottom:10px; padding:0 10px;}
	#header h3 {font-size:2em;}
	#header .nav a {height:90px; width:300px; font-size:2em; line-height:1.4em; margin-bottom:20px;}
	#blocks .card {width:90%; height:auto; margin-bottom:2px; overflow:visible;}
	.card-icon {width:192px; height:192px; background-size:192px 192px;}
	#contact-form {max-width:98%; text-align:left;}
	
	
	
	#contact form .input-submit {width:300px; height:90px; font-size:2em; line-height:1.4em; margin-bottom:40px;}
	#contact-done .nav {height:90px; width:300px; font-size:2em; line-height:1.4em; margin-bottom:20px;}
	#contact form .input-text, #contact form .input-textarea {font-size:1em; line-height:1.2em;}
	#contact form .input-text {height:70px;}
	#footer {font-size:2em; line-height:1.6em; padding-left:10px; padding-right:10px;}
	.arrow-down {top:-68px;}
		.arrow-down div {width:138px; height:139px; background-size:138px 139px;}
	.g-recaptcha {left:0px; margin-bottom:40px;}
*/
	
}