/* RESET */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:top}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
a, a:link, a:visited { color: inherit; text-decoration: inherit; }

/*=======*/
/* FONTS */
/*=======*/
@font-face {
	font-family : 'Reckoner';
	src         : url('../fonts/ReckonerBold.eot');
	src         : url('../fonts/ReckonerBold.eot?#iefix') 			format('embedded-opentype'),
								url('../fonts/ReckonerBold.woff')							format('woff'),
								url('../fonts/ReckonerBold.ttf') 							format('truetype'),
								url('../fonts/ReckonerBold.svg#ReckonerBold') format('svg');
	font-weight : bold;
	font-style  : normal;
}

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

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

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

/*========*/
/* GLOBAL */
/*========*/
::-moz-selection { /* Code for Firefox */
    color      : black;
    background : #44e9ad;
}

::selection {
    color      : black;
    background : #44e9ad;
}

.section.internallinks, .section.internallinks *
{
	vertical-align : baseline;
}

html {
	background-color : #1b1b1b;
	color            : #252525;
	font-family      : 'Reckoner';
	font-weight      : 300;
	font-style       : normal;
	text-align       : center;
	font-size        : 20px;
}

.section {
	color : #44e9ad;
}

p>a:link, p>a:visited {
	color           : #44e9ad;
	text-decoration : underline;
	transition      : color 0.2s;
}

p>a:hover {
	color : #0A231A;
}

body {
	position : relative;
}

body.subpage {
	position : relative;
}

.subpage .toprule {
	position : relative;
}

.description {
	text-transform : uppercase;
}

.collapse
{
	font-family    : "Reckoner";
	font-weight    : bold;
	font-size      : 20px;
	letter-spacing : 1px;
}


/*===================*/
/* MAGNIFIC OVERRIDE */
/*===================*/
.datadefense .mfp-image-holder .mfp-content {
    max-width: 90%;
}


/*==========*/
/* PARALLAX */
/*==========*/
#parallax {
	display: none;
}

#nonparallax {
	display: block;
}

#nonparallax {
	height              : 1000px;
	background-image    : url('../images/dataDefenseLogo.png');
	background-position : center;
	background-repeat   : no-repeat;
	background-size     : 200% auto;
}
.keyart, .keyart_layer {
	height: 1000px;
}

.keyart.small, .keyart_layer.small {
	height: 600px;
}

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

.keyart_layer {
	background-position : top center;
	background-size     : auto 1000px;
	background-repeat   : no-repeat;
	width               : 100%;
	position            : absolute;
}

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

.keyart_layer.parallax {
	position: fixed;
}
	#keyart-0 {
		background-image: url('../images/parallax/parallax0.png');
	}
	#keyart-1 {
		background-image: url('../images/parallax/parallax1.png');
	}
	#keyart-2 {
		background-image: url('../images/parallax/parallax2.png');
	}
	#keyart-3 {
		background-image: url('../images/parallax/parallax3.png');
	}
	#keyart-4 {
		background-image: url('../images/parallax/parallax4.png');
	}
	#keyart-5 {
		background-image: url('../images/parallax/parallax5.png');
	}
	#keyart-6 {
		background-image: url('../images/parallax/parallax6.png');
	}
	#keyart-7 {
		background-image: url('../images/parallax/parallax7.png');
	}
	#keyart-8 {
		background-image: url('../images/parallax/parallax8.png');
	}
	#keyart-scrim {
		background-color: #1b1b1b;
		opacity: 0;
	}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
   	#keyart-0 {
		background-image: url('../images/parallax/parallax0%402x.png');
		background-color: #1b1b1b;
	}
	#keyart-1 {
		background-image: url('../images/parallax/parallax1%402x.png');
	}
	#keyart-2 {
		background-image: url('../images/parallax/parallax2%402x.png');
	}
	#keyart-3 {
		background-image: url('../images/parallax/parallax3%402x.png');
	}
	#keyart-4 {
		background-image: url('../images/parallax/parallax4%402x.png');
	}
	#keyart-5 {
		background-image: url('../images/parallax/parallax5%402x.png');
	}
	#keyart-6 {
		background-image: url('../images/parallax/parallax6%402x.png');
	}
	#keyart-7 {
		background-image: url('../images/parallax/parallax7%402x.png');
	}
	#keyart-8 {
		background-image: url('../images/parallax/parallax8%402x.png');
	}
}

/* MAIN STRUCTURE */
.toprule {
	background-color: #1b1b1b;
	height: 37px;
	position: absolute;
	width: 100%;
}

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

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

#maincontain {
	background-color: #1b1b1b;
	position: relative;
	z-index: 98;
}

	.pax #maincontain {
		top: 140px;
	}


#main {
	max-width: 900px;
	padding-left: 30px;
	padding-right: 30px;
	margin-left: auto;
	margin-right: auto;
	z-index: 99;
	position: relative;
	background-color: #1b1b1b;
}

.section {

}


/* GAME DESCRIPTION */
.section.description {
	max-width      : 750px;
	text-align     : center;
	line-height    : 1.5em;
	margin-bottom  : 30px;
	margin-left    : auto;
	margin-right   : auto;
	font-size      : 26px;
	letter-spacing : 2px;
}

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


/* BANNER STYLING */
.banner span {
	background-color : #000000;
	color            : #44e9ad;
	display          : inline-block;
	background-clip  : padding-box;
	outline          : 2px solid #44e9ad;
	transition       : background-color 0.15s;
}

.active .banner span {
	transition: none;
}

a:hover .banner span {
	background-color: #0A231A;
}

.section li>a:hover h3 {
	background-color: #0A231A;
}

.subpagenav .active .banner span {
	color: #44e9ad;
}


/*===============*/
/* VIDEO SECTION */
/*===============*/
.section.feature {
	width: 100%;
	max-width: none;
	margin: 50px auto 70px;
}

.videocontain {
	position: relative;
	padding-bottom: 56.1%;
	height: 0;
	overflow: hidden;
}

.videocontain iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*======================*/
/* PRESS QUOTE SECTIONS */
/*======================*/
.section.pressquote h2 {
	padding-top    : 60px;
	line-height    : 1.35em;
	margin         : 30px auto 60px;
	margin-top     : 0;
	font-size      : 38px;
	letter-spacing : 3px;
	text-transform : uppercase;
}


/*==============*/
/* FAQ SECTIONS */
/*==============*/
.section.faq h2, .section.faq h3 {
	text-align     : left;
}

.section.faq h2 {
	padding-top    : 60px;
	line-height    : 1.35em;
	margin         : 15px 0px 15px 0px;
	font-size      : 38px;
	letter-spacing : 3px;
	text-transform : uppercase;
}

.section.faq h3 {
	font-family    : "Lato";
	padding-top    : 0px;
	line-height    : 1.35em;
	margin-top     : 0;
	font-size      : 24px;
}

.section.faq a
{
	color : #ffffff;
}


/*=====================*/
/* STORE LINKS SECTION */
/*=====================*/
.section.buy {
	color         : #210002;
	margin-top    : 50px;
	margin-bottom : 50px;
}

.section.buy h2.banner span {
	text-transform : uppercase;
	padding        : 15px 30px 15px 40px;
}

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

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

.section.buy li.steam {
	margin-right: 32px;
}

.section.buy a.android img {
	padding-top : 30px;
	width   : 300px;
}

.section.buy a.iOS img {
	padding-left   : 17px;
	padding-right  : 19px;
	padding-bottom : 19px;
	padding-top    : 49px;
	width   		   : 262px;
}

/*====================*/
/* SCREENSHOT SECTION */
/*====================*/
.section.screenshots .thumbnails li {
	display: inline-block;
	width: 47%;
	margin-top: 40px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.section.screenshots .thumbnails li, .screenshot img {
	opacity: 0.85;
	transition: opacity .2s;
}

.section.screenshots .thumbnails li:hover, .screenshot a:hover img {
	opacity: 1;
}

.section.screenshots .thumbnails li img {
	width: 100%;
	height: auto;
}

.section.screenshots .thumbnails li p {
	font-size      : 20px;
	line-height    : 26px;
	padding-top    : 15px;
	text-transform : uppercase;
	letter-spacing : 2px;
}

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

/* FOOTER SECTION */
.section.support ul.supportlinks {
	height: 68px;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center top;
	margin-left: -30px;
	margin-right: -30px;
}

.section.support .supportlinks {
	font-size: 20;
}

.section.support .supportlinks li {
	display      : inline-block;
	width        : 250px;
	margin-top   : 50px;
	margin-bottom: 30px;
	margin-left  : 110px;
	margin-right : 110px;
}

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

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

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

.section.copyright p {
	font-size      : 16px;
	line-height    : 26px;
	text-transform : uppercase;
	letter-spacing : 1px;
}


/*================*/
/* RESPONSIVENESS */
/*================*/

@media (max-width: 1280px) {

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

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

	#nonparallax {
		height              : 400px;
		background-image    : url('../images/dataDefenseLogo.png');
		background-position : top center;
		background-repeat   : no-repeat;
		background-size     : 200% auto;
	}

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

	.keyart_layer {
		background-position : top center;
		background-size     : auto 600px;
		background-repeat   : no-repeat;
		width               : 100%;
		position            : absolute;
	}
	.keyart_layer.parallax {
		position: fixed;
	}
}


@media (max-width: 940px) {

	.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.screenshots .thumbnails li {
		width: 100%;
		height: auto;
	}
	.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;
	}
}

@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: 641px) {

	#nonparallax {
		display: none;
	}

	#parallax {
		display: block;
	}

}

/*===================*/
/* DISABLES PARALLAX */
/*===================*/
@media (max-width: 640px) {

	#nonparallax {
		display: block;
	}

	#parallax {
		display: none;
	}

	#main {
		padding-left: 10px;
		padding-right: 10px;
	}

	.section.copyright p {
		font-size: 12px;
		line-height: 20px;
		letter-spacing: 1px;
	}
}

@media (max-width: 450px) {
		#nonparallax {
			height : 300px;
		}
}

@media (max-width: 300px) {
		#nonparallax {
			height : 200px;
		}
}


@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;
	}

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

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

	.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;
	}
}