@font-face {
    font-family:'puppy'; 
    src:url('fonts/puppy-webfont.eot'); 
    src:url('fonts/puppy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/puppy-webfont.woff') format('woff'),
         url('fonts/puppy-webfont.ttf') format('truetype'),
         url('fonts/puppy-webfont.svg#04b03regular') format('svg'); 
    font-weight:normal; 
    font-style:normal; 

}

@font-face {
    font-family: 'titilliumlight';
    src: url('fonts/titillium-light-webfont.eot');
    src: url('fonts/titillium-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/titillium-light-webfont.woff') format('woff'),
         url('fonts/titillium-light-webfont.ttf') format('truetype'),
         url('fonts/titillium-light-webfont.svg#titilliumlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'basingstoke';
    src: url('fonts/blue_highway_cd-webfont.eot');
    src: url('fonts/blue_highway_cd-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/blue_highway_cd-webfont.woff2') format('woff2'),
         url('fonts/blue_highway_cd-webfont.woff') format('woff'),
         url('fonts/blue_highway_cd-webfont.ttf') format('truetype'),
         url('fonts/blue_highway_cd-webfont.svg#blue_highwaycondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'journalultraboldbold';
    src: url('fonts/journultbol-webfont.woff2') format('woff2'),
         url('fonts/journultbol-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'monommm';
    src: url('fonts/monommm_5-webfont.woff2') format('woff2'),
         url('fonts/monommm_5-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-size: 18px;
}

	/* fonts */

	body, form, select, input, textarea { font-family:'titilliumlight', Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, sans-serif;  line-height:1.5em; }
	h1, h2, h3, h4, h5, td, input[type="submit"], #puppyContent nav, figure.review blockquote,
		.button, figure.review blockquote, #vid .playButton, #home #games > p,
		.blog .entry-meta, .blog .more-link, .blog .no-comments, .blog .comment-reply-link, .blog .footerLink,
		.puppyStyle { 
		font-family:'puppy'; text-transform:uppercase; font-weight:normal; color:#fff; 
	}


	/* basic layout with sticky footer and v-centered content */

	* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
	
	html, body { width:100%; margin:0; padding:0 }
	html { background:#21201c; color:#beb8a9; min-width:320px; } /* background:#090907; */
	body { display:flex; flex-flow:column nowrap; min-height:100vh; }
   
	#page { width:100%; position:relative; overflow:hidden;
		background:-webkit-linear-gradient(181deg, rgba(120,0,255,1) 0%, rgba(130,0,255,0.1) 20em, rgba(140,0,255,0) 100em), -webkit-linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background:linear-gradient(181deg, rgba(120,0,255,1) 0%, rgba(130,0,255,0.1) 20em, rgba(140,0,255,0) 100em), linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background-repeat:no-repeat, no-repeat;
		background-size:auto, auto;
		background-position:top left, top left;
		background-attachment:scroll, fixed;
		flex:1 0;
	}
   
	#puppyContentWrap { vertical-align:middle; text-align:center; height:100%; } /*display:table-cell;*/
   	#puppyContent { text-align:left; padding:4em 3em 5em; margin:auto; width:90%; max-width:70em; position:relative; overflow:auto}
   
   	.blog #puppyContent {overflow:visible}

	/* page background */

	#one, #two {background-attachment:scroll; position:fixed; width:100%;height:100%;min-height: 100%; z-index:-1; } 

	#one { background:url('images/home-top.jpg') center top no-repeat transparent; background-size:100% auto; opacity:1; }
	#two { bottom:0em; background:url('images/home-bottom.jpg') center bottom no-repeat transparent;  background-size:100% auto; opacity:0;}
	
	#page {
		background:-webkit-linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background:linear-gradient(180deg,  rgba(120,0,255,0.5) 0%, rgba(110,0,255,0.1) 20%, rgba(100,0,255,0.0) 50%); 
		background-attachment:fixed;
		}



	/* assume tablet landscape, 1024 width monitor - override with rules later if poss */	
	
	h1, h2, h3, h4, h5, #hiscoreTables blockquote p:first-of-type, #home #games > p, .puppyStyle {text-shadow:0 0 0.5em #ffb37b }
	h1 { font-size:3.0em; line-height:0.75em; padding:0; margin:0 0 0.25em;}
	h2, .blog #respond h3 { font-size:2.0em; line-height:0.85em; margin:0 0 0.5em; padding:0; }
	h3 { font-size:1.25em;  line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	h4 { font-size:1.25em; line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	h5 { font-size:1.25em;  line-height:0.85em; max-width:28em; margin:0 0 0.5em 0; }
	p, li { margin:0 0 0.75em 0; max-width:35em; font-size:0.9em;line-height:1.5em}
	strong {color:#fff;font-weight:normal}
	.noWrap {white-space:nowrap}
	
	.blog #respond h3 small {font-size:0.5em}
	.blog blockquote { font-size:1em;}
	
	#comments strong {color:#000}
	
	ol, ul {padding-left:0em;margin:0 1em 0.75em;list-style-position: outside;}
	li {padding-left:0.5em}
	li li, p li, li p {font-size: 100%;}
	
	li small {font-size:0.75em; vertical-align:top}
	
	a { color:#d2c7b8 }
	a:hover { color:rgba(255, 255, 255, 1); }
	h1 a, h2 a {color:#fff !important; text-decoration:none !important;}

	.hex {display:inline-block;background:black;color:white;font-family:Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace, sans-serif;
				font-size:2em; letter-spacing: 0.2em; margin: 1em 0 0; padding: 0.5em 1em; text-transform: uppercase;}

	form {position:relative;overflow:visible;}
	form#reset {display:none !important;}
	
	.formWrap {display:table;width:100%;margin-bottom:1em}
	form .formWrap p {display:table-row;max-width:none;width:100%;}
	form .formWrap p input, form .formWrap p textarea, form .formWrap p label, form .formWrap p select {display:table-cell;float:none;max-width:none;min-width:0;width:100%;vertical-align:top;font-size:1.125em}
	form .formWrap p label {width:4.5em;max-width:none;min-width:0;margin:0;padding:0 1em 0 0;clear:none}
	
	.inputTrap {display:none !important}
	form .formWrap p.inputTrap label {width:100%;line-height:1.125em;}
	form .formWrap p.inputTrap input {width:2em}
	
	select, input, textarea {font-size:1.0em;margin:0 0 1em;width:75%;border:none; transition:all 0.25s ease;opacity:0.9;}
	label {min-width:3.25em;text-align:right;display:block;float:left;clear:left;margin:0 1.25em 0.25em 0;opacity:0.75;line-height:1.75em}
	select, input, textarea, option {width:100%; max-width:17em;border-radius:2px; line-height:1.75em;height:1.75em; outline:0px none !important; padding:0 0 0 0.5em;}
	textarea {height:auto;line-height:1.25em;padding-top:0.25em; resize:vertical; min-height:2em}
	select {padding:0 0 0 0.3em}
	option {border-radius:0;margin:0}
	option[value=""] {color:#aaa}

	input:focus, textarea:focus, select:focus { box-shadow: 0 0 1em rgba(255,255,255,0.5); opacity:1.0 !important}
	
	input[type="submit"], .button, .blog #content .comment-reply-title small a, .comment-reply-link  { width:auto;min-width:6em;float:right;clear:both;padding:0 1em;margin:0;font-size:1.0em;line-height:1.75em;height:1.75em;
		color:hsla(43,11%,100%,1);background:hsla(43,11%,37%,0.6);border:0;border-radius:0.25em;cursor:pointer;text-shadow:none;text-decoration:none;text-align:center;
		transition:color 0.125s, background 0.25s, box-shadow 0.25s, opacity 0.125s;}
		
	input[type="submit"]:hover, .button:hover, #home #games a:hover .button, .blog #content .comment-reply-title small a:hover, .buyButtons .buyButtonArea:hover .button, .homeGameLarge .logoWrap .button:hover  { color:#fff;background:#f70;box-shadow: 0 0 1em #f30;opacity:1.0 !important}
	input[type="submit"]:active, .button:active, #home #games a:active .button, .blog #content .comment-reply-title small a:active, .buyButtons .buyButtonArea:active .button, .homeGameLarge .logoWrap .button:active  { color:#fff;background:#f70;box-shadow: 0 0 1em #f30;opacity:1.0 !important}
	
	.button.disabled {cursor:default;opacity:0.75 !important;color:hsla(43,11%,60%,1)!important}
	.button.disabled:hover  { color:hsla(43,11%,60%,1)!important;background:hsla(43,11%,37%,0.6)!important;box-shadow: none!important;}

	.error p:first-of-type, .thanks p:first-of-type {font-size:1.25em; color:#fff}
	.error p, .thanks p, .thanks li {font-size:1.0em;}
	
	p.intro {font-size:1em; color:#fff;margin-top:0}


	#puppyContent section {width:100%;margin:0 0 1em;padding:3em;float:left;position:relative;}
	
	#puppyContent section section { width:100%;margin:2em 0; padding:0; position:relative; }
	#puppyContent section section h3 {margin-top:1em}
	#puppyContent section section .column h3:first-child {margin-top:0.25em}
	
	#puppyContent section section:after {content:"";clear:both;display:block;width:100%;height:3px;padding:0 3em;margin:0;position:relative;bottom:-1.5em;left:-3em;
		 -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;
		 background:-webkit-linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);
		background:linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);}
	#puppyContent section section:first-of-type { margin-top:0 }
	#puppyContent section section:last-of-type { border:none; margin-bottom:0 }
	#puppyContent section section:last-of-type:after {content:none}

	#puppyContent section section .column {width:48%;float:left;}
	#puppyContent section section .column:first-of-type {margin-right:4%;}

	#puppyContent div.formSectionWrap {display:table;width:100%;margin-bottom:1em;position:relative}
	#puppyContent div.formSectionWrap section {width:auto;height:100%;float:none;display:table-cell;margin:0; border:none }
	#puppyContent div.formSectionWrap form, #puppyContent div.formSectionWrap > nav {width:50%;height:100%;display:table-cell;padding:3em; vertical-align:middle;	}


	div.formSectionWrap nav li {list-style-type:none;font-size:0.9em;line-height:1em;position:relative;}
	div.formSectionWrap nav ol ol {margin:1em 0;padding:0;}
	div.formSectionWrap nav li li {margin-left:2em;}
	div.formSectionWrap nav li a {text-decoration:none}
	div.formSectionWrap nav li .contentsIndex {position:absolute;left:-1em;}
	div.formSectionWrap nav ol ol li .contentsIndex {left:-2em;}


	figure.review blockquote {background:#000;padding:1.25em 1.5em 0.5em;text-align:left;margin:0;font-size:100%;position:relative}
	figure.review blockquote p {font-size:1.158em;line-height:1em}
	figure.review figcaption {font-size:0.8em;font-style:italic;text-transform:lowercase;text-align:right;padding:0 0.25em 0 5.5em; height:4em;line-height:2em;float:right;position:relative;}
	figure.review figcaption img {position:absolute;bottom:0;left:0;height:175%}
	
	figure.review figcaption:before {content:"";width:2em;height:2em;line-height:2em;float:left;margin:0 0 0 -7.5em;
		background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%) no-repeat;
		background:linear-gradient(45deg, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 50%) no-repeat;
	}

	figure.review:before, #home #games .game:before, .game #puppyContent section div.slideshow:before {content:"";display:block;width:100%;height:3px;position:relative;bottom:-3px;z-index:1000;background:linear-gradient( 270deg, hsla(43,11%,60%,0.4) 0%, hsla(43,11%,40%,0.15) 100%)}
	#home #games .game:before {content:none}

	#home #puppyContent, .game #puppyContent {text-align:center;width:100%; max-width:100%;padding:1.5em 0 0; overflow-x:hidden;}
	
	#puppyContent #video h1 {position:absolute;width:100%;bottom:50%;z-index:1000}
	
	
	/* centered content with flex */
	
	#flexCentered #puppyContent { 
		display:flex;
		flex-flow:column;
		justify-content: center;
		height: 100%;
		overflow:hidden;
		}
	
	#flexCentered #page  { 
		display:grid 
		}
	
	#flexCentered #puppyContent div.formSectionWrap {
		display: flex;
		flex-flow:row wrap;
		}
	
	#flexCentered #puppyContent div.formSectionWrap section, #contact #puppyContent div.formSectionWrap form {
		display:block;
		width:auto;
		flex:1 1 50%;
		min-width:20em;
		}
	

	/* blog stuff */
	
	div.blogImg { margin: 2em -8vw 1.5em !important; max-width: 1140px !important}


	/* patreon button */

	.patreon {text-align:center;width:100%;display:block;clear:both;margin:0 0 1em; }
	.patreon .button {padding:1em;clear:both;margin:0 auto 0;float:none;clear:none;display:block;height:100%;
		max-width:30em; 
	} 
	.patreon .button span { color:white;clear:both;display:block;font-size:1.25em;margin:-0.25em 0 0} 
	.patreon .button img {margin:0;max-width:100%}

	/* buy buttons */
	
	.buyButtons {width:100%;background:black;clear:both;padding:0;margin:0;overflow:hidden}
	.buyButtons:after  {content:"";display:table;clear:both;}
	.buyButtons > div {width:auto;margin:0 auto 1em;text-align:center;padding:0;position:relative }
	
	.buyButtonArea {cursor:pointer}
	
	.buyButtons.pcOnly > div:first-of-type {margin-bottom:1.0em}
	
	/* temp b4 ps */
	.buyButtons > div {text-align:center;}
	
	.buyButtons .platform {display:inline-block;padding:1em 0 0;vertical-align:top;margin:0}
	.buyButtons .platform.pc {padding-right:1.5em;}
	
	/* to reduce space on stacking */
	.buyButtons .platform.pc p {margin-bottom:1.0em}
	.buyButtons .platform.pc .buyButtonArea {margin-bottom:-1.0em;margin-top:-1.0em}
	
	.buyButtons .platform p {font-size:0.8em;clear:none;max-width:none;width:auto;margin:0.5em 2em 0 ;position:relative;}
	.buyButtons .platform p img {display:inline-block;vertical-align:middle;margin:0 1em 0 0;position:relative;top:-0.25em}
	.buyButtons .platform > div, .buyButtons .platform .buyButtonArea {display:inline-block;vertical-align:middle;margin:0 auto 0;text-decoration:none}
	
	.buyButtons .platform.ps {margin:0 0 0 1em}
	.buyButtons .platform.ps > div > div {display:inline-block;clear:none;margin:0 auto}
	
	.buyButtons .platform .button {margin:0 0.5em 0 0;min-width:2em;clear:none;float:none;display:inline-block;vertical-align:middle;text-transform:none}
	
	.buyButtons .divide {width:3px;display:inline-block;position:absolute;top:0;bottom:0;
		background:-webkit-linear-gradient( 180deg, hsla(265,100%,50%,1) 0%, hsla(265,80%,30%,0) 100%);
		background:linear-gradient( 180deg, hsla(265,100%,50%,1) 0%, hsla(265,80%,30%,0) 100%);}

	.buyButtons .platform img.shop, .singleBuyButton img.shop {opacity:0.71;transition:opacity 0.25s ease-out;display:inline-block;vertical-align:middle}
	.buyButtons .platform.ps:hover img.shop, .singleBuyButton:hover img.shop, .buyButtons .platform .buyButtonArea:hover img.shop,  #humbleButtonBuy.disabled img.shop {opacity:1}

	.buyButtons .bundleWidget  {margin:0 auto 0;padding:0;display:block;text-align:center;}
	.buyButtons .bundleWidget iframe {height:1px;width:0;transition:height 0.25s ease-out, width 0.25s ease-out;overflow:hidden;display:block;margin:0 auto 0.5em}
	.buyButtons .bundleWidget .button {clear:both;float:none;display:none;opacity:0;margin-top:0.5em}
	
	.buyButtons .bundleWidget.active {margin:0 auto 1em;}
	.buyButtons .bundleWidget.active iframe {height:340px;width:526px}
	.buyButtons .bundleWidget.active .button {opacity:1;height:auto;display:inline-block;}

	.bundleWidget.thinScreen {display:none}
	.bundleWidget.wideScreen {display:block;}

	.singleBuyButton {background:none;overflow:visible}
	.singleBuyButton a.buyButtonArea{padding:0.5em 0}
	.singleBuyButton a.buyButtonArea img{padding:0}
	.singleBuyButton span.button {
		margin:0 0.5em 0 0;min-width:2em;clear:none!important;float:none !important;display:inline-block!important;vertical-align:middle!important;text-transform:none
		}

	.game #playstation .psStore, .game #curve .consoles {clear:left;float:left;background:black;width:100%;text-align:center;margin:0.25em 0 0;padding-bottom:1em}
	.game #curve .consoles {margin-bottom:1.5em;}
	
	.game #curve .consoles img {margin-top:-30px;}
	
	.game #playstation .psStore img:first-of-type, .game #curve .consoles img:first-of-type{width:100%;height:auto;margin:-0.125em 0 0 0}
	.game #playstation .psStore div {display:inline-block;padding:0 0 2em 0}
	.game #playstation .psStore img.shop, .game #playstation .button {
		top:auto;vertical-align:middle;display:inline-block;float:none;clear:none;min-width:2em;margin:0 0 0 0.25em;text-transform:none}
	.game #playstation .psStore img.shop {clear:left;margin:-1em 0 0}

		

	/* vid */

	#puppyContent #video {width:100%;padding:0 15% 3em;position:relative;overflow:hidden }
	
	#video #vid {background:none;cursor:pointer;width:100%;padding:0 0 46%;margin:auto;position:relative;transition:padding 0.25s ease-out;}	
	
	#video #vid img {position:absolute;background:none;width:100%;left:0;top:0;opacity:1;transition:opacity 0.25s ease-out}
	#video #vid.show img {opacity:0}
	
	#video #vid .playButton {
		cursor:pointer;
		opacity:1; 
		position:absolute;
		padding:0;
		bottom:10%;
		left:50%;
		width:5em;
		min-width:0;
		height:4em;
		margin:0 0 0 -2.5em;
		transition:opacity 0.125s ease-out, transform 0.125s ease-out;
		background:url('images/icon-play.png') 50% 50% no-repeat rgba(0,0,0,0.75); 
		background-size:auto 60%;
		border:1px solid rgba(255,255,255,0.1) !important;
		box-shadow:none !important;
		transform:scale3d(1,1,1);
	}

	#video #vid .playButton:hover {
		transform:scale3d(1.2,1.2,1);
	}

	#video #vid.show, .blog #vid {width:100%; padding:0 0 56.25%;}

	#video #vid.show .playButton {opacity:0 !important;}

	#video #vid .youTubeVid {opacity:0;background:black;position:absolute;width:100%;height:100%;
		-webkit-transform:scale3d(0,0.5,1);transform:scale3d(0,0.5,1);
		transition:all 0.25s ease-out 0.25s}
	#video #vid.show .youTubeVid {-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:1}

	#video #vid iframe, .blog  #vid iframe{ position:absolute;z-index:1001;width:100%;height:100%;margin:0;padding:0;left:0;top:0;border:0; background:black; border:2px solid hsl(43,10%,20%); }


	/* Video on home page */

	#home #video { 
		padding:0 8% 3px;
		max-width:150em;
		margin:0 auto;
	}
	
	#home #video:after, #battledroid #video:after { 
		bottom:0; 
		background: linear-gradient(90deg, 
			hsla(20, 60%, 50%, 0.3) 0%, 
			hsla(40, 80%, 50%, 0.5) 20%, 
			hsla(40, 100%, 65%, 0.7) 40%, 
			hsla(40, 100%, 65%, 0.7) 60%, 
			hsla(30, 80%, 50%, 0.5) 80%, 
			hsla(20, 60%, 50%, 0.3) 100%
		 ) repeat scroll 0 0;
		 position:absolute; 
		 width:100%; 
		 left:0; 
		 right:0;
		 bottom:0;
		 overflow:visible
	}

	#home #video, #battledroid #video { 
		padding-bottom:3px !important 
	}

	#home #video #vid, #battledroid #video #vid  { 
		margin-bottom:2em;
	}
	
	#home #video #vid .playButton, #battledroid #video #vid .playButton { 
		bottom:20%; 
		left:0; 
		right:0; 
		margin: 0 auto; 
		border-radius:0;
		width:7vw; 
		height:7vw; 
		max-width:7em; 
		max-height:7em; 
		min-width:4em; 
		min-height:4em;
		background-image:url('images/icon-play-large.png');  
		background-color:rgba(0,0,0,0.9);
		background-size: auto 50%;
	}
	
	#home #video #vid img, #battledroid #video #vid img { 
		width: 87%; 
		max-width:1920px; 
		top:18%; 
		left:0;
		right:0;
		margin:0 auto
	}
	
	#home #video #vid .playButton:hover, #battledroid #video #vid .playButton:hover {
		transform:scale3d(1.1,1.1,1);
	}



	/* slides */

	.game #puppyContent section div.slideshowWrap {padding:0 !important;position:relative;overflow:hidden !important; background:#000;  border:2px solid hsl(43,10%,20%); margin:0;}
	.game #puppyContent section div.slideshow:before {top:-3px;position:absolute;z-index:9999}
	.game #puppyContent section#intro div.slideshowWrap {width:100%;max-width:60em; margin:2em auto 1.5em!important;}
	
	.game #puppyContent section div.slideshow {width:100%;height:0;padding:0 0 56.25%;margin:0;}
	.game #puppyContent section img.slideshow { position: absolute; display: none; width:100%; padding:0; margin:0; }


	/* section backgrounds */
	
	/* purp background */
	#puppyContent > section, #revenge-help div.helpHeading, #puppyContent div.formSectionWrap section,  .hiscores #puppyContent #hiscoreTables blockquote,
	 .blog article header, .blog .site-footer, .blog #masthead  {
		background:-webkit-linear-gradient( 0deg, hsla(265,100%,30%,0.5) 0%, hsla(265,100%,40%,0.6) 100%); 
		background:linear-gradient( 0deg, hsla(265,100%,30%,0.5) 0%, hsla(265,100%,40%,0.6) 100%); 
		box-shadow:0 0 5em 0 hsla(270,100%,60%,0.5) inset /*, 0 0 2em 0 hsla(260,100%,70%,0.1);*/
	}
	
	.blog .comments-title {background:black;  box-shadow:none}
	
	.blog #masthead:after {content:"";clear:both;display:block;width:100%;height:3px;padding:0 1em;margin:0;position:relative;bottom:0;left:-2em;
		 -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;
		background:-webkit-linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);
		background:linear-gradient( 90deg, hsla(265,80%,30%,0.5) 0%, hsla(270,100%,50%,1) 40%, hsla(270,100%,50%,1) 60%, hsla(265,80%,30%,0.5) 100%);}

	/* dark background */
	#puppyContent div.formSectionWrap form, .support #puppyContent > section:nth-child(2), .privacy #puppyContent > section:nth-child(2), #revenge-help div.helpSection, #games section,
	.hiscores #puppyContent #hiscoreTables section, #battledroid #puppyContent > section,
		 #puppyContent div.formSectionWrap > nav, #puppyContent section.intro.blog #respond, .site-header, .blog .entry-content {
		background:hsla(40,5%,0%,0.6); box-shadow:0 0 5em 0 hsla(40,5%,0%,1) inset; /*, 0 0 2em 0 hsla(260,100%,70%,0.1);*/
	}	
	

	/* page split grad background */
 
	.game #puppyContent > section {
		background:-webkit-linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.5) 50%, hsla(40,5%,10%,0) 100%);
		background:linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.5) 50%, hsla(40,5%,10%,0) 100%); box-shadow:none; }
	
	.game #puppyContent > section#intro {
		background:-webkit-linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.75) 40%, hsla(40,5%,0%,0.75) 90%, hsla(40,0%,0%,1) 100%);
		background:linear-gradient( 0deg, hsla(265,100%,50%,0.5) 0%, hsla(40,5%,10%,0.75) 40%, hsla(40,5%,0%,0.75) 90%, hsla(40,0%,0%,1) 100%); box-shadow:none; }



	/* HOME -------------------------------------------------------------------------------------------------- */


	#home #page, #battledroid #page {
		background: linear-gradient( 181deg, 
			hsla(5,80%,50%,0.35) 0%, 
			hsla(0,20%,20%,0.1) 25em, 
			hsla(0,20%,20%,0) 100em
		);
		background-attachment:fixed;
	}

	#home #one, #battledroid #one { background-image:url('images/battledroid/battledroid-top.jpg')}

	#home #games{
		background:-webkit-linear-gradient( 180deg, hsla(20,10%,0%,1) 0%, hsla(30,5%,5%,0.4) 40%, hsla(40,5%,0%,0) 100%);
		background:linear-gradient( 180deg, hsla(20,10%,0%,1) 3%, hsla(30,5%,5%,0.5) 70%, hsla(40,5%,0%,0) 100%); 
		box-shadow:none;
	}


	iframe#bundle{width:410px;height:150px;background:none;padding:0;margin:-4em auto 0}

	#home #games {width:100%;padding:1em; margin:auto; overflow:visible; }

	#home #homeIntro p, #home #games > p {text-align:center;max-width:100%;font-size:1.125em;line-height:1em;}
	
	#home #gamesWrap, #home .curveWrap {position:relative;max-width:80em;margin:0 auto;}
	#home #gamesWrap2, #home .curveWrap2 {display:table;border-spacing:0.75em;border-collapse:separate;margin:0 -0.375em;}
	
	
	#home #games .game {display:table-cell;width:25%;padding:0 0 5.5em;vertical-align:top;background:black;}
	#home #games section {width:100%;margin:0;padding:0;position:relative;}
	#home #games section img {-webkit-transform: rotate(0);-moz-transform: rotate(0);transform: rotate(0);}
	#home #games section img.bw {width:100%; height:auto; }
	#home #games section img.color {position:absolute;top:0;left:0;width:100%; height:auto;opacity:0;
		transition:opacity 0.25s ease-out}
	#home #games .game:hover section img.color {opacity:1}
	#home #games section p {padding:0.5em 10% 0;}


	/* can't set pos relative on <a> as a table cell, but can on wrap as a table */
	#home #games .info {width:25%;display:inline-block;position:absolute;bottom:2.25em;left:0;padding:0 2em;text-align:left;}
	#home #games .info:before {content:"";display:block;width:100%;height:2px;-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;margin:0 -1.625em 0;padding:0 3.25em 0 0;position:relative;top:-2px;
		background:hsla(43,11%,40%,0.2) }
	
	#home #games .button {float:right;margin:1.25em 0 0}
	#home #games .info img {position:static;opacity:0.71;width:auto;min-width:0;max-width:none;transition:opacity 0.25s ease-out;margin:1.5em 0 0}
	#home #games .game:hover .info img {opacity:1}
	#home #games .game:nth-child(2) .info {left:25%}
	#home #games .game:nth-child(3) .info {left:50%}
	#home #games .game:nth-child(4) .info {left:75%}
	
	
	/* flex version */
	
	#home #games {padding:2em 0}
	
	#home #games #gamesWrapFlex {display:flex;flex-flow:column nowrap;justify-content:center;padding:1em 0 3em}
	#home #games #gamesWrapFlex .game {
		flex:0 0 100%;width:100%;max-width:100%;margin:0;padding:0;
		display:flex;flex-flow:column nowrap;overflow:hidden;text-decoration:none!important;
		border-radius:0.5em;
		/* border:2px solid hsla(43,11%,40%,0.2) */
	}
	#home #games #gamesWrapFlex .game section {flex:1 1 auto;margin:0}
	#home #games #gamesWrapFlex .game section p {margin:0 10% 3em;padding:3em 0 0;max-width:100%;opacity:0;
		background:url('images/all-OS-small.png') 50% 0% no-repeat;
		transition:0.25s ease-out;
		}
	#home #games #gamesWrapFlex .game:hover section p {opacity:1}
	
	#home #games #gamesWrapFlex section img {transform: scale(1) translateY(0); image-rendering:crisp-edges;
		transition:transform 0.1s ease-out, opacity 0.5s ease-out;}
	#home #games #gamesWrapFlex section img.color {opacity:0.25}
	#home #games #gamesWrapFlex .game:hover section img {transform: scale(1.05) translateY(-0.125em);}
	#home #games #gamesWrapFlex .game:hover section img.color {opacity:1}
	
	
	#home #games #gamesWrapFlex .game .info {flex:0 0 auto; width:100%; position:inherit;padding:1em 1em 1.125em;
		border:2px solid hsla(43,11%,40%,0.2);border-width:2px 0 0;
		display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center;
	}
	#home #games #gamesWrapFlex .game .info:before {display:none}
	#home #games #gamesWrapFlex .game .info img {margin:-0.125em 0 0 0.25em;}
	#home #games #gamesWrapFlex .game .info .button {margin:0;opacity:0.625;}
	
	
	
	/* new style v2 */
	
	#home #two { display:none; background:black; }
	#home #games { padding:0; min-height:100vh; }
	
	.homeGame { display:block; position:relative; width:100%; height:100%;background:black; text-decoration:none}
	.homeGame .background { width:100%; min-width:90em; position:relative; left:50%; transform:translateX(-50%); overflow:hidden}
	.homeGame .background img { width:100%; height:auto; opacity:0.75; 
		transition:opacity 2s ease-in-out, transform 4s ease-out; transform:scale(1) }
		
	 body:hover .background img { opacity:0.5 }
	.homeGame:hover .background img { opacity:0.9; transform:scale(1.05)}
	
	.homeGame .info { position:absolute; top:0; height:100%; width:100%; z-index:1000 }
	.homeGame .flex { width:90%; height:100%; margin:auto; position:relative;
		display:flex; flex-flow:column noWrap; justify-content:center; align-items:center
		}
	.homeGame .logo { width:40vw; min-width:1em; max-width:100% }
	.homeGame .logo img { width:100%; max-width:100%; height:auto }
	.homeGame .flex p {margin:0.25em 0 1.75em;max-width:40em}

	.homeGame .flex .consoles {display:flex;flex-flow:row wrap;justify-content:center;align-items:center;
		margin:-4vw 0 1vw;}
	.homeGame .flex .consoles img {max-width:30vw}
	.homeGame:hover .background img { opacity:1 }

	.homeGame.basingstoke .logo { width:80vw; max-width:90em; z-index: -1;}
	.homeGame.basingstoke .logo img {margin:-4vw 0 -10vw}
	.homeGame.basingstoke .flex p {margin-top: 8vw}

	.homeGame.glitchangels .background { min-width:100em; }
	.homeGame.glitchangels .logo { width:70vw; min-width:50em;}
	.homeGame.glitchangels .logo img {margin:-11vw 0 -10vw}
	
	.homeGame.paladin .background { min-width:100em; }
	.homeGame.paladin .logo { 
		width:80vw;
		max-width:90em;
		display:flex;
		flex-flow:row wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		margin:-2vw 0 2vw;
		}
	
	.homeGame.paladin .logo img {
		flex:3 0.1 26em;
		max-width:80em;
		min-width:26em;
		margin:0;
		}
	.homeGame.paladin .logo img:first-of-type {
		flex:1 1 10em;
		max-width:20em;
		min-width:10em;
		margin:0;
		}

	.homeGame.dire .background { min-width:100em; }
	.homeGame.dire .logo { width:55vw; min-width:45em;}
	.homeGame.dire .logo img {margin:-7vw 0 -9vw}

	.homeGame.harvest .background { min-width:100em; }
	.homeGame.harvest .logo { width:45vw; min-width:40em;}
	.homeGame.harvest .logo img {margin-top:-4vw}
	
	.homeGame.revenge .flex  { align-items:flex-end; max-width:45%; margin:0 50% 0 5%; text-align:right;}
	.homeGame.revenge .logo img { margin:0 -10% -4vw; width:120%; max-width:120%}
	.homeGame.revenge .flex p { width:20em; margin:0 }
	
	.homeGame.titanAttacks .flex { height:95%; justify-content:flex-end; }
	.homeGame.titanAttacks .logo { min-width:35em }
	
	.homeGame.droidAssault .background img { image-rendering:crisp-edges; }
	.homeGame.droidAssault .flex { height:95%; justify-content:flex-end; }
	.homeGame.droidAssault .logo { width:45vw; min-width:30em;margin-bottom:0.25em}
	
	.homeGame.ultratron .background img { image-rendering:crisp-edges; }
	.homeGame.ultratron .flex { height:95%; justify-content:flex-end; }
	.homeGame.ultratron .logo { width:55vw; min-width:50em;}
	.homeGame.ultratron .logo img { margin:0 -10%; width:120%; max-width:120% }
	
	.homeGame.curve {padding-bottom:8em;min-height:24em;}
	.homeGame.curve .background { min-width:75em; } 
	.homeGame.curve .background { left:50% } 
	.homeGame.curve .flex { height:95%; justify-content:flex-end; } 
	.homeGame.curve .flex p { max-width:95%; } 

	
	@media all and (max-width:53em) {
		.homeGame .background { min-width:75em } 
		.homeGame .background img { opacity:1 !important }
		.homeGame .logo { max-width:90vw!important; min-width:19em!important }
		.homeGame .flex p {margin-bottom:1.5em}

		.homeGame.paladin .logo { width:100vw; }

		.homeGame.dire .logo  {width:100vw; max-width:40em!important;}
		
		.homeGame.harvest .logo { width:90vw; max-width:35em!important; }
		
		.homeGame.revenge .background { transform: translateX(-60%); }
		.homeGame.revenge .flex  { height:95%; max-width:80%; width:20em; justify-content:flex-end; margin:0 auto }
		.homeGame.revenge .logo  { width:80vw; max-width:25em!important; min-width:17em!important; padding-left:2vw;}
		.homeGame.revenge .flex p  { width:100%; }
		
		.homeGame.titanAttacks .logo { width:95vw; max-width:30em!important; }
		
		.homeGame.droidAssault .logo { width:80vw; max-width:30em!important; }
		
		.homeGame.ultratron .logo { width:90vw; max-width:40em!important; }
		
		.homeGame.curve .background { min-width:140vw; } 
		.homeGame.curve .background { left:51.5% } 
	}

	
	@media all and (max-width:20em) {
		.homeGame .background { min-width:60em } 
		
		.homeGame.curve .background { min-width:29em; } 
		.homeGame.curve .background { left:53% } 
	}
	

	
	
	
	
	
	
	
	#home #games .info img.PSStore {float:left;margin:0}
	
	#home #games #gamesWrap + p,  #home #games .curveWrap + p {margin-top:0.75em}

	#home  #puppyContent .curveWrap {max-width:100%;overflow:hidden;} 
	
	/* wide version */
	#home  #puppyContent .curveWrap2 { border-spacing:0em; margin:0 }
	#home  #puppyContent .curveWrap2 section img { image-rendering:crisp-edges; }
	
	#home  #puppyContent   .curveWrap .game {width:50%;padding-bottom:3em}
	#home  #puppyContent   .curveWrap p {max-width:none;padding-top:0 !important}
	
	#home  #puppyContent .curveWrap .info {width:100%;min-height:100px;bottom:0.75em;padding:0 1em !important} /*width:50%; */
	#home  #puppyContent .curveWrap .info:before {margin-top:-1px}
	
	#home  #puppyContent   .curveWrap .button {min-width:0;clear:none;text-transform:none;margin:0 0 0 0.5em;position:relative;} /* ;margin:-0.875em 0 0 0.5em; top:50px */
	#home  #puppyContent   .curveWrap .button:last-of-type {margin-left:0}
	#home  #puppyContent   .curveWrap .game:nth-child(2) .info {left:50%}

	#home  #puppyContent   .curveWrap .info:before {margin: 0 -0.625em;padding: 0 1.25em 0 0;}

	#home #games .curveWrap .info.consoles {text-align:center;vertical-align:middle;margin-bottom:30px}
	#home #games .curveWrap .info.consoles img {margin:0 0 -30px; max-width:29vw; vertical-align: middle; }
	

	#home #puppyContent div.reviews {display:flex !important;flex-flow:row wrap;justify-content:center;align-items:flex-end;padding:0;margin:2em auto 1.5em;width:100%;max-width:120em}
	#home div.reviews figure.review {flex:1 1 20em; min-width:19em;max-width:22em!important; margin:0.25em 0.75em!important; padding:0;float:none;}




	/* buy buttons etc for home / basingstoke */

	#homeInfo {
		clear:both;width:100%;text-align:center; background:black; text-align:center; padding:0.5em 0 5em;
	}

	#homeInfo .buyButtons {background:none}

	#homeInfo > div:first-of-type {display:flex; flex-flow:row wrap; justify-content:center; margin:1em 0 0.5em}

	#homeInfo p {flex:0 1 auto; max-width:90%;margin:0.25em 0.25em; font-size:1.125em;font-size:calc( 1em + 0.25vw ); }

	#puppyContent #outNowGlow {font-family:basingstoke; font-size:3em; font-size:calc( 3em + 1vw ); line-height:1em; color:white; max-width:100%; margin:0 !important;	
		animation: infoBannerAnim 0.5s ease-in-out 0s infinite alternate;}

	#basingstoke #puppyContent #outNowGlow {margin:0.25em 0 0!important}

	#homeInfo a.button {clear:both;float:none;display:inline-block}

	
	/*buy buttons */

	#puppyContent .buyButtons.basButtons {padding:1em 0}
	#puppyContent .buyButtons.basButtons .platform.pc {
		padding:1em 0 0!important; display:flex; flex-flow:row wrap;justify-content:center; align-items:center;
	}
	
	#puppyContent .buyButtons.basButtons .buyButtonArea {flex:0 0 auto; padding:0.5em 2vw !important; 
		margin:0 !important; 
	}

	#puppyContent .buyButtons.basButtons a img{ opacity:0.8; height:auto; width:100% }
	#puppyContent .buyButtons.basButtons a:hover img{ opacity:1;}
	
	@media all and (max-width:75em) {
		#puppyContent .buyButtons.basButtons a img{ width:90% }
	}	
	
	@media all and (max-width:53em) {
		#puppyContent .buyButtons.basButtons a img{ width:80% }
	}





	/* SUPPORT -------------------------------------------------------------------------------------------------- */

	.support #puppyContent > section:first-of-type {padding-right:40%}
	.support #puppyContent section h1 + img {position:absolute;width:42%;right:0em;bottom:0.25em;}
	
	
	
	/* GAMES -------------------------------------------------------------------------------------------------- */


	.game #puppyContent > section {width:100%;margin:0;padding:2em;position:relative;border:none; } 
	.game #puppyContent > section:first-of-type {padding-top:0;}

	.game #puppyContent > section:after, #video:after {content:"";display:block;width:100%;height:3px;padding:0;margin:0;position:relative;bottom:-2em;z-index:-1;
		background:-webkit-linear-gradient( 90deg, hsla(265,80%,30%,0) 0%, hsla(265,100%,50%,1) 40%, hsla(265,100%,50%,1) 60%, hsla(265,80%,30%,0) 100%);
		background:linear-gradient( 90deg, hsla(265,80%,30%,0) 0%, hsla(265,100%,50%,1) 40%, hsla(265,100%,50%,1) 60%, hsla(265,80%,30%,0) 100%);}
	#video:after{bottom:-3em;}

	.game #puppyContent > section > div {padding:3em 3em 0.5em; margin:-2.5em auto 0; width:90%; max-width:70em; position:relative; overflow:visible;text-align:left;}
	.game #puppyContent > section > div:after { content:""; display:table; clear:both;}

	
	.game #puppyContent > section.new div {overflow:visible;}
	.game section.new h1 {font-size:2.75em;padding-left:2em;position:relative;}
	.game section.new h1 img {position:absolute;top:-1.25em;left:-0.25em;width:2em;height:2em}

	.game #puppyContent > section.sub {background:none}


	.game #puppyContent > section > div.reviews {padding:0;margin-top:0;}
	
	.game figure.review {width:31.333%;float:left;margin:0 1%}

	.game #puppyContent > section > div.reviews:first-of-type {display:table;padding:0 0 1em}
	.game #puppyContent > section > div.reviews:first-of-type figure.review {width:33.333%;padding:0 1%;float:none;display:table-cell;vertical-align:bottom}


	.game p.intro {clear:both}

	.game #puppyContent section div h2 {margin:1em 0 0.5em;}

	.game #puppyContent > section .column {width:48%;float:left;}
	.game #puppyContent > section .column:first-of-type {margin-right:4%}
	
	.game #puppyContent > section .column.alignRight {text-align:right; float:right;}
	.game #puppyContent > section .column.wide {width:57%;margin-right:0;margin-left:0}
	.game #puppyContent > section .column.narrow {width:39.5%;}
	
	.game #puppyContent > section .column.inset {
		max-width:46%; margin-left:-5%; border:2px solid hsla(43,11%,80%,0.2);padding:2.5em;background:black;border-radius:1em
	}
	.game #puppyContent > section .column.inset.right { float:right; margin-right:-5%;}
	
	.game #intro h1 {text-align:center}
	.game #intro figure.review {width:100%;max-width:26em;float:right;margin:2em 0 0}
	
	.game #intro .reviews figure.review blockquote {background:hsla(40,10%,20%,0.5);color:white}
	.game #intro .reviews figure.review figcaption:before {
		background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(40,10%,20%,0.5) 50%) no-repeat;
		background:linear-gradient(45deg, rgba(0,0,0,0) 49%, hsla(40,10%,20%,0.5) 50%) no-repeat;
	}

	.game #playstation h1, .game #curve h1 { margin-bottom:0.625em; text-align:center}
	
	.game #puppyContent section#playstation .column {width:40%}
	.game #puppyContent section#playstation .column + .column {width:56%;margin-top:0.25em}

	.game #playstation .psLogosWrap, .game #curve .psLogosWrap{text-align:center;width:100%;max-width:25em;margin:0 auto 2em}
	.game #playstation img.psFamily, .game #curve img.psFamily {margin:0 auto -1em;float:none;clear:both;}
	.game #playstation div.psLogos, .game #curve div.psLogos {margin:0 auto;clear:both;}
	.game #playstation div.psLogos, .game #curve  div.psLogos {margin:0 auto -1.0em}
	.game #playstation img.curve, .game #curve img.curve {clear:both;margin:1.5em auto 0}

	.game #playstation img#TA-on-Vita, .game #curve img#TA-on-Vita{margin:1.5em 0 -2em;width:100%;height:auto}



	#droidAssault figure.review figcaption, figure.review.droidAssaultCharacter figcaption {padding-left:5.5em;}
	#droidAssault figure.review figcaption:before, figure.review.droidAssaultCharacter figcaption:before {margin-left:-7.5em;}
	#droidAssault figure.review figcaption img, figure.review.droidAssaultCharacter figcaption img {height:150%;bottom:0em;left:0.5em;}
	


	/* INFO BANNER -------------------------------------------------------------------------------------------------- */

	@keyframes infoBannerAnim {
		0%   {color:hsl(43,11%,100%);text-shadow: 0 0 0.5em #f70;}
		100%   {color:hsl(43,11%,50%);text-shadow: 0 0 0.5em #320f00;}
	}
	#infoBanner img {position:absolute;z-index:100}
	#infoBanner {border:3px solid hsl(43,11%,20%); background:black;position:relative}
	#infoBanner a:hover h2 {color:white;transition:color 0.2s}
	#infoBanner h2 {font-size:1.5em;margin:0 3em 0 0;padding:0.5em;color:hsl(43,11%,75%);animation: infoBannerAnim 0.5s  ease-in-out 0s  infinite alternate;}
	#infoBanner a {text-decoration:none}
	#infoBanner .button {position:absolute;right:0.5em;top:0.5em;min-width:4em;padding:0}
	#infoBanner.comingSoon h2::before {  content: "COMING SOON! "; color:#f70;text-shadow: 0 0 0.5em #f00;}


	#puppyContent > img:first-child {display:none; width:80%; max-width:40em; margin:6em -0.75rem 0 0; position:absolute; right:96%;  }
	h2 a {color:#fff}

	#puppyContent section nav ul {margin:0;padding:0}
	#puppyContent section nav ul li { list-style:none;margin:0;padding:0;font-size:1.75em;line-height:1.5em;text-shadow:0 0 0.5em #ffb37b}
	#puppyContent section nav ul li.selected { line-height:0.8em;padding:0.7em 0 0.4em }
	#puppyContent section nav a {color:#B0AB9F;font-size:0.625em;display:inline-block;text-shadow:none;line-height:1em;transition:font-size 0.25s ease-out, color 0.25s ease-out}
	#puppyContent section nav a:hover {color:#fff;font-size:0.75em;}

	#puppyContent div.intro aside {right:0;bottom:auto}
	#puppyContent div.intro aside form {margin:0;padding:0;background:none;overflow:visible}
	#puppyContent div.intro aside form input, #puppyContent div.intro aside form input[type="submit"]{max-width:10em;float:left;position:relative;bottom:auto;right:auto;margin:0 1em 0 0;font-size:0.9em}
	#puppyContent div.intro aside form input[type="submit"] {margin:0;}
	
	#console {position:fixed;left:0;top:10em;z-index:10000;background:#000;padding:0.25em 0.5em}

	#puppyContent p.trademarks {text-shadow:none !important; text-transform:none !important; font-size:0.625em !important; color:#beb8a9 !important; margin:1em auto 2em; width:90em; max-width:70%;
	font-family:'titilliumlight', Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, sans-serif !important;}
	
	#puppyContent .buyButtons p.trademarks {padding:0 2em;margin:2em auto 1em;color:rgba(104,98,83,0.6)!important}

	#video + .buyButtons p.trademarks {display:none}


	/* PRIVACY -------------------------------------------------------------------------------------------------- */

	#puppyContent > section:nth-child(2) span {color:#d2c7b8 !important;}

	#puppyContent > section:nth-child(2) * { font-size:15px !important; font-family:'titilliumlight', Optima, Segoe, "Segoe UI", Candara, Calibri, "DejaVu Sans", Arial, sans-serif !important;}
	
	#puppyContent > section:nth-child(2) strong, #puppyContent > section:nth-child(2) strong * { color:#fff !important; } 

/* small screen */

@media all and (max-width:75em) {
	#console { background:yellow}
	
	#one, #two {z-index:-2;} /* disable scroll pos fx */
	
	#puppyContent { width: 95%;}
	#puppyContent #video {padding:0 10% 3em}

	#home #puppyContent  .curveWrap .game {padding-bottom:6em}
	#home #puppyContent  .curveWrap .info {text-align:center}
	#home #games .info img.PSStore {float:none;margin:0 auto 0}
	#home #puppyContent  .curveWrap .buttons {padding:0 0.5em}

	#home div.reviews {width:100%}

	.game #puppyContent > section > div {width:100%}

	.buyButtons .divide {position:static;width:100%;height:1px;background:rgba(104, 98, 83, 0.3);}
	.bundleWidget.thinScreen {display:block}
	.bundleWidget.wideScreen {display:none;}
	
	.buyButtons .platform.ps {margin:0 0 1em 0}

	.game #puppyContent #steam > div { display:block !important;padding-right:0 !important}
	.game #puppyContent #steam .column {display:block;width:100%!important;min-width:0;margin:0;padding:0;text-align:center}
	.game #puppyContent #steam img {width:40em;max-width:100%;margin:-4em 0 1em}
	.game #puppyContent #steam p , .game #puppyContent #steam li {max-width:none;line-height:1.5em;}
	.game #puppyContent #steam ul { list-style-position:inside }
	

}

	
/* tablet or phone probably */
	
@media all and (max-width:53em) {
	
	#console { background:orange}

	#one {z-index:-2;background-attachment:scroll; position:absolute;}
	#two {display:none}
	
	form label {font-size:0.75em}

	#puppyContent {padding:2em 0; max-width:32em}
	.blog #puppyContent { max-width: 90%;}

	#flexCentered #puppyContent { height:auto }

	#puppyContent div.formSectionWrap section, #puppyContent div.formSectionWrap form, #puppyContent div.formSectionWrap nav {display:block;clear:both;width:100%}
	#puppyContent div.formSectionWrap form {padding-bottom:4em}
	
	#puppyContent section section .column {width: 92%;}

	#puppyContent section {padding: 6vw;}
	#puppyContent section section:after {padding:0 6vw;left:-6vw;}

	/* #home #video #vid img {width:120%;margin-left:-10%;padding-bottom:2em} */
	#puppyContent #video {padding:0 5% 3em}
	#video:after {}
	#home #video #vid .playButton {  }

	/*
	#home #games {padding:0.5em 1em 2em}
	*/
	
	#home #games #gamesWrap + p, #home #games .curveWrap + p {margin:1.5em 0.5em;clear:both}
	#home #gamesWrap2, #home  #puppyContent  .curveWrap2 {display:block;}
	
	/*
	#home #puppyContent #games .game {width:100%;max-width:30em;display:block;margin:1em auto 0;padding-bottom:1.5em}
	*/
	
	#home #puppyContent #games .curveWrap .game.titanAttacks {padding-bottom:1.5em}
	#home #puppyContent #games .curveWrap .game.ultratron {padding-bottom:0}
	
	/*
	#home #puppyContent #games .curveWrap .game {max-width:100%;padding-bottom:0}
	#home #games .info:before {margin-top:1em}
	*/
	/*
	#home #games .info,
	*/
	#home #puppyContent .curveWrap .info {width:100%;position:static;text-align:center;height:auto;bottom:auto;clear:both;}
	

	#home #games section img.bw {display:none}
	#home #games section img.color {opacity:1 !important;position:static}
	
	#home #games #gamesWrapFlex section img.color {opacity:1}
	#home #games #gamesWrapFlex .game .info .button {opacity:1;}
	#home #games #gamesWrapFlex .game section p {opacity:1;}
	
/*
	#home #games #gamesWrap .info img {float:left;margin-top:1.75em}
	#home #games #gamesWrap .button {float:right;clear:none;margin-top:1.5em}
*/

	/*#home #psGamesWrap .buttons {padding:0;display:inline-block;width:100%}
	#home #psGamesWrap .button {padding:0}*/
	
	
	#page #puppyContent div.reviews {display:block}
	#page #puppyContent figure.review { display:block;width:auto;margin:0 auto;padding:0;clear:both;float:none; max-width:25em}	
	figure.review blockquote p { font-size: 1.1em;  line-height: 1em;	}

	.game #puppyContent > section {min-width:10em;width:100%;padding-left:4vw;padding-right:4vw}
	.game #puppyContent > section > div {padding: 2em 0 0.5em;}

	.game #page #intro figure.review {margin:0 auto 3em;float:none}
	.game #page #end figure.review {margin:0 auto 3em;float:none}

	.buyButtons .platform.pc { padding-right: 0; }

	.game #intro .column {width:100% !important;margin:0 !important}
	.game #intro p { margin-left:auto;margin-right:auto}
	.game #intro p.intro {max-width:31.5em} 

	.game #puppyContent #playstation h1, .game #puppyContent #curve h1{font-size:5vw;text-align:center}
	.game #puppyContent section#playstation .column {width:auto;max-width:31.15em;margin:0 auto;float:none}
	.game #puppyContent section#playstation .column + .column {width:100%;max-width:none;margin:1em 0 0}

	.game #puppyContent section#curve .column {width:100%;max-width:none;margin:1em 0 0}
	.game #puppyContent section#curve .column + .column {width:auto;max-width:31.15em;margin:0 auto;float:none}

	.game #playstation p.intro, .game #curve p.intro  {text-align:center}
	.game #playstation .psLogosWrap, .game #curve .psLogosWrap{max-width:none;margin-left:auto;margin-right:auto}
	.game #puppyContent .psStore {margin-top:1em}

	.game #end img.allOS {margin-top:-1em !important}

	.game #puppyContent #steam img {width:100%;max-width:none;margin:1em 0}

	footer {font-size:0.9em !important}

}


/*  phone portrait */	
/*  this is the smallest - will inherit rules from above, and then reduce margins, decrease line height, and indented bulleted lists etc. */

@media all and (max-width:20em) {
	#console { background:red}
	
	footer {font-size:0.8em !important}
}

/* hires tablet landscape, 1368 width monitor */	
/* start scaling up various elements relative to the viewport size using VW units. */

@media all and (min-width:75em) {
	#console { background:green}
	body  {
		font-size:1.3em; 
		font-size:calc(1.0em + 0.3vw); 
		line-height:1.618em;
	}
	h1 {
		font-size:2.5em;
		font-size:calc(2.5em + 1.0vw); 
	}
}

/* 1920 width monitor */	
/* body text starts to get uncomfortably large at 90em so use rem units to keep it at a comfortable reading size while the other elements scale around it */	
	
@media all and (min-width:90em) {
	#console { background:blue}
	body {font-size:1.1875rem; line-height:1.618em; }
}