/* PARALLAX */

.keyart, .keyart_layer {
	height: 100vh;
}

#parallax {
	display: none;
}
#nonparallax {
	display: block;
}

#nonparallax {
	background-image: url('../imgs/keyart-mobile.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.keyart {
	position: relative;
	z-index: 10;
}

.keyart_layer {
	background-position: bottom center;
	background-size: cover;
	background-repeat: repeat-x;
	width: 100%;
	position: absolute;
}
.keyart_layer.parallax {
	position: fixed;
}
	#keyart-0 {
		background-image: url('../imgs/parallax0.png');
		background-color: #ffaf1b;
	}
	#keyart-1 {
		background-image: url('../imgs/parallax1.png');
	}
	#keyart-2 {
		background-image: url('../imgs/parallax2.png');
	}
	#keyart-3 {
		background-image: url('../imgs/parallax3.png');
	}
	#keyart-4 {
		background-image: url('../imgs/parallax4.png');
	}
	#keyart-5 {
		background-image: url('../imgs/parallax5.png');
	}
	#keyart-6 {
		background-image: url('../imgs/parallax6.png');
		background-size: cover;	
	}
	/* #keyart-scrim {
		background-color: #ffaf00;
		opacity: 0;
	}*/

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 
   	#keyart-0 {
		background-image: url('../imgs/parallax0.png');
		background-color: #ffaf1b;
	}
	#keyart-1 {
		background-image: url('../imgs/parallax1.png');
	}
	#keyart-2 {
		background-image: url('../imgs/parallax2.png');
	}
	#keyart-3 {
		background-image: url('../imgs/parallax3.png');
	}
	#keyart-4 {
		background-image: url('../imgs/parallax4.png');
	}
	#keyart-5 {
		background-image: url('../imgs/parallax5.png');
	}
	#keyart-6 {
		background-image: url('../imgs/parallax6.png');
	}
}

/* FIREWATCH LOGO */

h1#firewatchlogo {
	position: relative;
	width: 100%;
	height: 282px;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 400px auto;
	background-image: url('../imgs/firewatch_subpage_mainlogo.png');
	text-indent: -9999px;
	z-index: 2;
	margin-bottom: 80px;
}

#firewatchlogocontain {
	max-width: 400px;
	margin: 105px auto 80px;
}
	#firewatchlogocontain img {
		width: 100%;
		transition: opacity 0.2s;
	}
	#firewatchlogocontain a:hover img {
		opacity: 0.8;
	}

@media (max-width: 600px) {
	#firewatchlogocontain {
		padding-left: 10px;
		padding-right: 20px;
	}
}

@media only screen and (max-device-width: 450px) {

	h1#firewatchlogo {
		
	}

}

/* MAIN STRUCTURE */

.toprule {
	background-color: #a34300;
	height: 37px;
	position: absolute;
	width: 100%;
}

@media only screen and (max-width: 480px) {
	.toprule {
		display: none;
	}

	.pax #maincontain {
		top: 0px !important;
	}
}

/* GAME DESCRIPTION */

.section.description {
	text-align: left;
	line-height: 1.6em;
	margin-top: 80px;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.section.description h5 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5em;
	margin-bottom: 30px;
}

.columntext p {
	margin-bottom: 1.6em;
	width: 325px;
	display: inline-block;
}
	.columntext p.left {
		margin-right: 50px;
	}


/* BANNER STYLING */

.banner span {
	background: url('../images/banner_transparent_left.png') no-repeat left top / contain, 
				url('../images/banner_transparent_right.png') no-repeat right top / contain;
	background-color: #ffaf00;
	color: #210002;
	display: inline-block;
	padding: .5em 1.1em;
	background-clip: padding-box;
	outline: 1px solid #210002;
	transition: background-color 0.15s;
}
.banner.arrow span {
	background: url('../images/banner_transparent_left.png') no-repeat left top / contain, 
				url('../images/banner_arrow_transparent_right.png') no-repeat right top / contain;
}
	.active .banner span {
		transition: none;
	}
	a:hover .banner span {
		background-color: #ffffff;
	}
	a:hover .banner span s:before {
		box-shadow: 0px 1px 1px #fff;
	}

	.section li>a:hover h3 {
		background-color: #ffffff;
	}
.subpagenav .active .banner span {
	color: #ffaf1b;
}

.link.active .banner span {
	background: url('../images/banner_outlined_left.png') no-repeat left top / contain,
				url('../images/banner_outlined_right.png') no-repeat right top / contain,
				url('../images/banner_outlined_body.png') repeat-x center top / contain;
}

.smalllinks li h3 {
	width: 290px;
	height: 70px;
	background-color: #ffaf00;
	display: inline-block;
	text-indent: -9999px;
	background-size: cover;
	background-position: center;
	padding-bottom: 3px;
	box-shadow: inset 0 0 0 3px #210002;
	background-clip: padding-box;
	transition: background-color 0.15s;
}
.withxbone .smalllinks li h3 {
	width: 250px;
}

.smalllinks li.pc .steam h3 {
	width: 184px;
}
.smalllinks li.pc .gog h3 {
	width: 70px;
}
.smalllinks li.xbone .xlive h3 {
	width: 140px;
}

.smalllinks li.pc a {
	display: inline-block;
}

.smalllinks li h4 {
	font-size: 18px;
	letter-spacing: 3px;
	font-weight: 700;
}

.smalllinks h4.banner span {
	padding: 4px 13px 3px 16px;
}

.smalllinks li a {
	display: block;
}

.section .dim li>a h3, .section .dim li.active>a h4.banner span {
	background-color: #210002;
}

.section .dim li>a h3, .section .dim li>a h4.banner span {
	background-color: #973700;
}
.section .dim li>a:hover h3, .section .dim li>a:hover h4.banner span {
	background-color: #ffaf00;
}




/* SUBPAGE TOP NAV */

.section.subpagenav {
	max-width: 1425px;
	margin: 0 auto 90px auto;
	padding-left: 25px;
	padding-right: 25px;
}
.section.subpagenav li.link {
	display: inline-block;
}
.section.subpagenav li.link.active {
	margin: auto 110px;
}

.section.subpagenav .banner span {
	width: 280px;
}

.section.subpagenav .active a {
	cursor: default;
}

@media (max-width: 1450px) {
	.section.subpagenav li.link.active {
		margin: auto 43px;
	}
	.section.subpagenav .banner span {
		width: 240px;
	}
}

@media (max-width: 975px) {
	.section.subpagenav li.link {
		display: block;
		margin: 15px auto;
	}
	.section.subpagenav .banner span {
		display: block;
		max-width: 400px;
		width: auto;
		margin: auto;
	}
	.section.subpagenav li.link.active {
		margin: auto;
	}
}

/* STORE LINKS SECTION */

.section.buy {
	color: #210002;
	margin-top: 80px;
	margin-bottom: 80px;
}

.section.buy h2.banner span {
	padding: 15px 22px 15px 28px;
}
.withxbone .section.buy h2.banner span {
	padding-left: 48px;
	padding-right: 42px;
	padding-top: 12px;
	font-size: 130%;
}
.withxbone .section.buy h2.banner span>em {
	font-size: 89%;
	vertical-align: -1px;
}

.section.buy h2 {
	font-size: 28px;
	letter-spacing: 10px;
}

.section.buy ul {
	margin-left: 26px;
}
.withxbone .section.buy ul {
	margin-left: 0;
}

.section.buy li {
	display: inline-block;
	margin-top: 12px;
}
.section.buy li.steam {
	margin-right: 32px;
}

.smalllinks li.steam h3 {
	background-image: url('../images/storelink_steam.png');
}
.smalllinks li.pc .steam h3 {
	background-image: url('../images/storelink_steam.png');
}
.smalllinks li.pc .gog h3 {
	background-image: url('../images/storelink_gog.png');
}

.smalllinks li.ps4 h3 {
	background-image: url('../images/storelink_psn.png');
}
.smalllinks .ps4 h4.banner span {
	padding-right: 17px;
}

.smalllinks li.xbone h3 {
	background-image: url('../images/storelink_xbone.png');
}


/* SITE LINKS SECTION */

.section.internallinks {
	margin-top: 10px;
	margin-bottom: 35px;
	font-size: 0;
}

.smalllinks li.merchandise h3 {
	background-image: url('../images/merchlink_transparent.png');
	height: 99px;
	width: 283px;
}

.section.internallinks .smalllinks li {
	margin-bottom: 40px;
}

.section.internallinks .smalllinks li h4.banner span {
	display: block;
}

ul.links.smalllinks {
	display: inline-block;
	width: 325px;
	margin: 0 25px;
}



/* FOOTER SECTION */


.section.support ul.supportlinks {
	height: 68px;
	background-image: url('../images/firewatch_shield_small.png');
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center top;
	margin-left: -30px;
	margin-right: -30px;
}

.section.support .supportlinks {
	font-size: 0;
}
.section.support .supportlinks li {
	display: inline-block;
	width: 50%;
	margin-top: 23px;
}

.section.support .supportlinks .banner>span {
	display: block;
}

.section.support .supportlinks .link a {
	margin: 0 50px;
}

.section.support .supportlinks h4.banner span {
    padding: 4px 7px 3px 10px;
}

.section.copyright {
	margin: 50px auto;
}

.section.copyright p {
	font-size: 15px;
	font-weight: 500;
	line-height: 26px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #973700;
}

.section.companylinks {
	margin-top: 50px;
	padding-right: 50px;
	padding-bottom: 50px;
}
.section.companylinks .companies li {
	display: inline-block;
}
.section.companylinks .companies li a {
	display: block;
}
.section.companylinks .companies li h1 {
	height: 69px;
	width: 125px;
	background-color: #973700;
	text-indent: -9999px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 0 0 0 2px #210002;
	background-clip: padding-box;
	transition: background-color 0.15s;
	margin: 30px;
}
	.section.companylinks .companies li>a:hover h1 {
		background-color: #ffaf00;
	}
.section.companylinks .companies li.campo h1 {
	background-image: url('../images/logo_camposanto_transparent.png');
}
.section.companylinks .companies li.panic h1 {
	background-image: url('../images/logo_panic_transparent.png');
	width: 62px;
}



/********************/
/********************/
/*** GRID  LAYOUT ***/
/********************/
/********************/

.gridcontainer {
	width: 1425px;
	font-size: 0;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	vertical-align: top;
}
	.gridcontainer.fullpage {
		margin-bottom: 100px;
		
	}

.gridunit, .gridparent {
	display: inline-block;
}

.gridunit {
	margin: 30px 25px;
	
	font-size: 0;
}
	.gridunit>a {
		font-size: 0;
	}
	.gridunit.videoparent {
		
	}

.gridunit.c1 {
	width: 425px;
}
.gridparent.c1 {
	max-width: 475px;
}

.gridunit.c2 {
	width: 900px;
}
.gridparent.c2 {
	max-width: 950px;
}

.gridunit.c3 {
	display: block;
}
.gridparent.c3 {
	width: 100%;
}


.videocaptions {
	font-size: 16px;
	color: #ffaf1b;
	text-transform: uppercase;
	display: block;
	height: 34px;
	margin-bottom: -4px;
	letter-spacing: 3px;
	position: relative;
}
	.videocaptions span {
		display: block;
		position: absolute;
		bottom: 0;
	}
	.videocaptions span.left {
		left: 0;
	}
	.videocaptions span.right {
		right: 0;
	}

.quotecontain {
	text-transform: uppercase;
}
.quotation {
	font-size: 38px;
	color: #ffaf00;
	letter-spacing: 3px;
	line-height: 48px;
}
.citation {
	margin-top: 15px;
}
.quotecontain .gridcaptionbold {
	line-height: 24px;
}

.gridcaptionbold {
	color: #973700;
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 3px;
}

@media (max-width: 1450px) {
	.gridcontainer {
		max-width: 950px;
	}
	.gridunit.hidetwocolumn {
		display: none;
	}
}

@media (min-width: 976px) {
	.gridunit.quote {
		height: 238px;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		position: relative;
	}
	.quotecontain {
		position: relative;
		top: 49%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

@media (max-width: 975px) {

	.gridunit.hideonecolumn, .gridunit .hideonecolumn {
		display: none;
	}	 

	.gridcontainer, .gridcontainer>.gridparent {
		width: auto;
		max-width: inherit;
		
	}
	.gridcontainer>.gridunit, .gridcontainer>.gridparent, .gridcontainer>.gridparent>.gridunit {
		display: block;
		width: auto;
	}

	.quotecontain {
		margin: 60px auto;
	}

	.gridunit.fullbleed {
		margin-left: 0;
		margin-right: 0;
	}
}


/* FAQ BLOQ ELEMENT */

.gridinsert {
	max-width: 700px;
	margin: auto;
	padding-left: 25px;
	padding-right: 25px;
}

.faqbloq {
	margin: 50px auto 70px auto;
}
.faqbloq p {
	font-size: 20px;
	text-align: left;
	line-height: 32px;
	margin: 10px auto 30px auto;
}
.faqbloq p.q {
	margin-bottom: 10px;
	font-size: 30px;
	font-weight: bold;
	line-height: 40px;
}



/********************/
/********************/
/** RESPONSIVENESS **/
/********************/
/********************/


@media (max-width: 880px) {
	.section.support ul.supportlinks {
		margin-left: 0;
		margin-right: 0;
	}
	.section.support .supportlinks .link.techsupport a {
		margin: 0 50px 0 0;
	}
	.section.support .supportlinks .link.streaming a {
		margin: 0 0 0 50px;
	}

	.columntext p {
		display: inline;
	}
	.columntext p.left {
		margin: 0;
	}

	.section.description {
		margin-bottom: 50px;
	}

	.section.screenshots .thumbnails li:nth-child(odd) {
    	margin-right: 0px;
	}

	.columntext p {
		margin-bottom: 1.6em;
		width: 325px;
	}

	.section.buy ul {
		margin-left: 0px;
	}

	
	ul.links.smalllinks li h4 {
		max-width: 267px;
		margin-left: auto;
		margin-right: auto;
	}
	.section.companylinks {
		margin: 50px auto;
		padding-right: 0;
	}	

}

@media (max-width: 830px) {
	ul.links.smalllinks {
		margin: 0 5px;
	}
}

@media (max-width: 820px) {
	.supportlinks.smalllinks li h4 {
		letter-spacing: 2px;
	}

}


@media (max-width: 780px) {

	.section.support ul.supportlinks {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
		background: none;
	}	

	.section.support .supportlinks li {
		display: block;
		width: 100%;
	}
	.section.support .supportlinks .link.techsupport a, .section.support .supportlinks .link.streaming a {
		margin: 0;
	}
}

@media (max-width: 750px) {
	ul.links.smalllinks {
		margin: 0;
	}
}

@media (max-width: 740px) {
	.section.buy li {
		display: block;
	}
	.section.buy li.steam {
		margin-right: 0;
	}
}

@media (max-width: 730px) {
	ul.links.smalllinks {
		display: block;
		width: auto;
		margin: 0 auto;
	}
}

 
/********************/
/********************/
/* ENABLES PARALLAX */
/********************/
/********************/

@media (min-width: 601px) {

	#nonparallax {
		display: none;
	}
	#parallax {
		display: block;
	}

}

/*********************/
/*********************/
/* DISABLES PARALLAX */
/*********************/
/*********************/

@media (max-width: 600px) {

	#nonparallax {
		display: block;
	}
	#parallax {
		display: none;
	}

	.section.copyright p {
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 1px;
	}
	.section.companylinks .companies li h1 {
		margin: 20px;
	}
}


@media only screen and (max-device-width: 450px) {



	.section.buy h2 {
		font-size: 22px;
		letter-spacing: 3px;
		font-weight: 700;
		line-height: 28px;
	}
	.section.buy h2.banner span {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.withxbone .section.buy h2.banner span {
		padding-top: 6px;
		padding-bottom: 8px;
	}

	.columntext p {
		font-size: 23px;
	}

	.section.pressquote.big h2 {
		font-size: 28px;
		letter-spacing: 1px;
	}
	.section.pressquote.big h3 {
		font-size: 16px;
	}

	.section.screenshots .thumbnails li {
		opacity: 1;
	}

	.supportlinks.smalllinks li h4 {
		letter-spacing: 1px;
	}

	.section.copyright {
		margin-top: 60px;
	}
	.section.copyright p {
		font-size: 10px;
		line-height: 16px;
		letter-spacing: 1px;
	}







/* PARALLAX */

	.keyart, .keyart_layer {
		height: 550px;
	}

	.keyart_layer {
		position: absolute;
		background-size: auto 600px;
	}
}