/**********************
 BACKSTAGE 2014: HOME STYLESHEET
**********************/

/**********************
	HEADER
**********************/
header{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 800;
}

.branding{background: none;}

.logo > h1{
	background: url('../images/backstage-logo-inverted.png') no-repeat;
	width: 350px;
	height: 111px;
}


@media (max-width: 768px){
	.branding{background: none !important;}
	.logo{margin: 0;}
		
		.logo > h1{
			height: 60px; 
			width: 200px;
			background-size: 189px 60px;
			-webkit-background-size: 189px 60px;
			-moz-background-size: 189px 60px;
		}
			
}

/**********************
	MAIN NAVIGATION
**********************/		
	nav > ul > li > a{
		color: #ebebeb;
		border: 2px solid transparent;
	}

		nav > ul > li > a:hover,
		nav > ul > li > a.active{
			color: #fff;
			background: rgba(0,0,0,.5);
			border: 2px solid #ebebeb;
			color: #ebebeb;
			
		}



/**********************
	HERO
**********************/
.hero{margin-top: 50px; position: relative;}

.home-hero{
	background: url('../images/curtain.jpg') center top no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	height: 67em;
}
	
	
	/**********************
		HERO OVERLAY
	**********************/
	.hero-overlay{
		background: rgb(33,33,33);
		background: rgba(0,0,0,.7);
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	
		.hero-overlay > .grid-pad{position: relative;}
	
		.tagline{
			width: 50%;
			padding-right: 2%;
		}
		
			.tagline h2{
				font-family: 'open_sansbold';
				font-size: 2.1em;
				margin-bottom: 0.8em;
			}
			
			.tagline p{font-size: 1.6em;}
		
	
		/**********************
			POPUP PROMO
		**********************/
		.popup-promo-tab{
			max-width: 450px;
			position: absolute;
			bottom: 0;
			right: 6em;
			padding: 2.8em 2.8em 2.8em 2.8em;
			background: rgb(116,15,15);
			background: rgba(116,15,15,.95);
			border-top-left-radius: 30px;
			border-top-right-radius: 30px;
			-webkit-border-top-left-radius: 30px;
			-webkit-border-top-right-radius: 30px;
			-moz-border-radius-topleft: 30px;
			-moz-border-radius-topright: 30px;
			border: 5px solid #ebebeb;
			border: 5px solid rgba(255,255,255,0.4);
			border-bottom: none;
		}
		
			.popup-promo-tab > strong{
				font-size: 2.2em;
				line-height: 1.2;
				color: #ebebeb;
				margin-bottom: 0.8em;
				display: block;
			}
			
			.popup-promo-tab > p{
				font-size: 1.6em;
				width: 70%;
				float: left;
			}
			
			.download{
				display: block;
				width: 10.8em;
				height: 10.8em;
				background: url('../images/download.png') no-repeat;
				text-indent: -99999px;
				float: right;
			}
			
				.download > i{display: none;}
			
			/**********************
				QUERIES FOR HERO
			**********************/
			@media (max-width: 1024px){
				.tagline{width: 55%;}
				
				.tagline > p{font-size: 1.5em;}
				
				.popup-promo-tab{
					max-width: 40%;
					right: 2em;
					padding: 1.8em 1.2em;
					border-top-left-radius: 0px;
					border-top-right-radius: 0px;
					-webkit-border-top-left-radius: 0px;
					-webkit-border-top-right-radius: 0px;
					-moz-border-radius-topleft: 0px;
					-moz-border-radius-topright: 0px;
					text-align: center;
				}
				
				
				
				.popup-promo-tab > p{
					font-size: 1.5em;
					width: 100%;
					padding-bottom: 1em;
				}

				.download{
					width: 100%;
					height: auto;
					background: #ebebeb;
					float: none;
					text-indent: 0;
					display: block;
					clear: both;
					text-align: center;
					font-size: 1.8em;
					vertical-align: middle;
					padding: 0.6em 0.8em;
					color: #292929;
					text-transform: uppercase;
					box-shadow: 0 1px 3px #292929;
					margin: 0.5em 0;
				}
				
					.download:hover{text-decoration: none;}
				
					.download > i{
						display: inline-block; 
						padding-right: 0.4em;
					}

			}
			
			@media (max-width: 768px){
				.home-hero{
					background-size: cover;
					-webkit-background-size: cover;
					-moz-background-size: cover;
				}
				
				.hero-overlay > .grid-pad{padding: 0;}
				
				#mobile-nav{
					float: right;
					vertical-align: middle;
					background: none;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
				    border-radius: 3px;
				    padding: 1.4em 1.2em;
				    margin: 8px 0em 0 0;
					display: inline-block;
				    margin-bottom: 0.5em;
				    border: 2px solid #ebebeb;
				}

				#mobile-nav .bar{background: #fff;}

				.hero-overlay{
					bottom: 0;
					background: rgb(33,33,33);
				}
				
				.overlay-copy{width: 100%;}
				
			
					
				.tagline{width: 100%; padding-top: 15px;}
				
				.popup-promo-tab{
					width: 100%;
					max-width: none;
					border-top-left-radius: 0px;
					border-top-right-radius: 0px;
					-webkit-border-top-left-radius: 0px;
					-webkit-border-top-right-radius: 0px;
					-moz-border-radius-topleft: 0px;
					-moz-border-radius-topright: 0px;
					position: static;
					background: rgb(115,14,14);
					border: none;
					text-align: left;
					overflow: hidden;
				}
					
				.tagline > h2,
				.popup-promo-tab > strong{font-size: 2.2em;}
				
				.tagline > p,
				.popup-promo-tab > p{font-size: 1.6em;}
				
				.download{
					max-width: 320px; 
					display: block;
					margin-left: auto;
					margin-right: auto;
				}
			}	
					
			@media (max-width: 568px){
				
				.hero{margin-top: 0px;}

				nav > ul > li > a{font-size: 1.4em; padding: 0.4em;}

				.home-hero{
					background-size: auto 350px;
					-webkit-background-size: auto 350px;
					-moz-background-size: auto 350px;
				}
								
				.popup-promo-tab{padding: 2em 1.2em;}
				
				.popup-promo-tab > p{
					width: 100%;
					font-size: 1.4em;
				}
				
				.tagline > p{font-size: 1.4em;}
				
				.tagline > h2,
				.popup-promo-tab > strong{font-size: 2.0em;}
				
			}
	
/*============== END OF HERO OVERLAY ============== */	

/**********************
	HOME-CONTENT BODY
**********************/
.content-body{border-top: 2px solid #111;}

	.section-header-mobile{display: none;}

	.tabs-container{background: url('../images/gplaypattern-gray.png') repeat;}
	
	.tabs > li{
		height: 11.6em;
		text-align: center;
		padding: 0em 1.2em; 
		display: table;
		border-right: 1px solid #ebebeb;
	}
	
		.tabs > li:hover{background: #ebebeb;}
		
		.tabs > li.last{
			border-right: none; 
			padding-right: 1.2em;
		}
		
		.tabs > li.active{background: #ebebeb;}
	
	.tabs > li > a{
		text-transform: uppercase;
		color: #fff;
		font-size: 2.1em; 
		display: table-cell; 
		vertical-align: middle;
		outline: none;
	}
	
		.tabs > li:hover > a{text-decoration: none;}
	
		.tabs > li:hover > a,
		.tabs > li.active > a{color: #780000;}

	.tab-copy{
		display: none; 
		position: relative;
		overflow: hidden;
	}
	
		#tab-copy-1{display: block;}
	
	.tab-copy > .grid{
		min-height: 50em;
		position: relative;
	}
	
	.tab-copy > .grid-pad{padding: 0;}
	
	.feature-header-mobile{
		vertical-align: middle;
		display: table;
		margin-left: -10px;
	}
	
		#tab-copy-6 .feature-header-mobile{margin-left: -60px;}
	
		.feat-header-sprite{
			width: 50px;
			height: 50px;
			background:  url('../images/tab-resources/header-sprite.png') no-repeat;
			vertical-align: middle;
			display: table-cell;
			overflow: hidden;
			float: left;
		}
		
			.leaf{background-position: -250px 0px;}
	
	
	.tab-copy-desc-box{
		margin-top: 6em;
		float: right;
		width: 38%;	
	}
	
	.feature-header-mobile > strong{
		font-family: "roboto_condensedregular", Arial, sans-serif;
		font-size: 2.4em;
		color: #780000;
		line-height: 1.3;
		vertical-align: middle;
		display: table-cell;
		padding-left: 0.5em;
		padding-right: 1em;
	}
	
	.tab-copy-desc-box p{
		color: #292929; 
		margin-bottom: 0.8em;
		font-size: 1.8em;
		padding-right: 2em;
		margin-top: 1em;
		line-height: 1.5;
	}
	
		.tab-copy-desc-box p > strong{
			color: #292929;
			font-size: 1em;
			display: inline;
			margin-left: 0px;
		}
		
	.tab-quote{
		position: absolute; 
		top: 5%;
		left: 7em;
		font-family: "roboto_condensedregular", Arial, sans-serif;
	}
	
		.tab-quote > blockquote{
			color: #ac5f5f;
			font-size: 4em;
			text-transform: uppercase;
			font-weight: 700;
			line-height: 1.2;
		}
		
		.tab-quote > span{
			float: right;
			color: #840606;
			font-size: 1.4em;
			padding-top: 1.5em;
		}
		
	
	.tab-img-box{
		max-width: 55%;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 0;
	}
	
	.rec-button{
		color: #fff;
		font-size: 2em;
		text-transform: uppercase;
		text-align: center;
		background: #780000;
		padding: 0.6em 2em;
		margin: 1em 0;
		vertical-align: middle;
		clear: both;
		float: none;
		display: inline-block;
		line-height: 1.3;
		float: right;
		font-weight: 300;
		border: 4px solid #780000;
		margin-right: 1em;
	}
	
		.rec-button:hover{
			border: 4px solid #780000;
			background: none;
			text-decoration: none;
			color: #780000;
		}
	
		.rec-button > i{
			font-size: 1.6em;
			padding-left: 0.4em;
			vertical-align: middle;
			font-weight: 300;
			margin-top: -0.2em;
		}
		
		
		/**********************
			SPECIFIC ELEMENTS FOR EVERY TAB
		**********************/
		.tab-copy-2 .tab-img-box{max-width: 65%; left: -9em;}
		.tab-copy-3 .tab-img-box{max-width: 50%; left: 7em;}
		.tab-copy-4 .tab-img-box{max-width: 100%; left: -30em;}	
		.tab-copy-5 .tab-img-box{max-width: 50%; left: 6em;}
		.tab-copy-6 .tab-img-box{max-width: 44%; left: 7em; bottom: 5%;}
		
		/**********************
		QUERIES FOR BODY
		**********************/
		
		@media (min-width: 769px) and (max-width: 1023px){
			
			
			.tabs > li{
				width: 50%;
				height: 5em; 
				border-top: 1px solid #fff;
				border-right: none;
			}
			
				.tabs > li:nth-child(2n){border-left: 1px solid #fff;}
			
			.tabs > li > a{font-size: 1.8em;}
			
			.tabs > li:last-child{padding-right: 20px;}			
			
			.tab-quote{left: 4em; top: 12%;}
			
				.tab-quote > blockquote{font-size: 2.6em;}
				
			.tab-img-box{bottom: 12%;}
			
			/**********************
			SPECIFIC ELEMENTS FOR EVERY TAB
			**********************/
			.tab-copy-2 .tab-img-box{max-width: 65%; left: -9em;}
			.tab-copy-3 .tab-img-box{max-width: 50%; left: 4em; top: 20%;}
			.tab-copy-4 .tab-img-box{max-width: 100%; left: -30em;}	
			.tab-copy-5 .tab-img-box{max-width: 50%; left: 6em; top: 5%;}
			.tab-copy-6 .tab-img-box{max-width: 46%; left: 6em; top: 15%;}
			.tab-copy-6 .tab-copy-desc-box{width: 44%;}
		}
		
		
		
		@media (max-width: 768px){
			.content-body{border-top: none;}
			.section-header-mobile{
				display: block;
				background:  url('../images/halftone.jpg');
				
			}
			
				.section-header-mobile > h3{
					text-align: center;
					font-size: 2.8em;
					text-transform: uppercase;
					padding: 0.8em 0;
					color: #ebebeb;
					 font-family: 'roboto_condensedbold';
				}
				
		
			.tabs-container{display: none;}
			
			.tab-copy{display: block !important;}
			
			.tab-copy > .grid{min-height: 0; height: auto;}
			
			.tab-copy .grid-pad{background: none; padding: 0;}
			
			.tab-copy-desc-box{
				width: 100%;
				margin: 0 auto;
				float: none;
			}
			
			.feature-header-mobile{
				background: url('../images/gplaypattern-gray.png') repeat;
				margin-left: 0;
				width: 100%;
				display: table;
				padding: 1.5em 2em;
				overflow: hidden;
			}
			
				#tab-copy-6 .feature-header-mobile{margin-left: 0;}
				#tab-copy-6 .feat-header-sprite.leaf{display: none;}
			
				.feat-header-sprite{float: none;}
				
					.lock{background-position: 0px -50px;}
					.graph{background-position: -50px -50px;}
					.flame{background-position: -100px -50px;}
					.sync{background-position: -150px -50px;}
					.secure-lock{background-position: -200px -50px;}
					.leaf{background-position: -250px -50px;}
		
				.feature-header-mobile > strong{
					font-size: 1.9em;
					font-weight: 400; 
					color: #fff; 
					padding: 0;
					display: table-cell;
					vertical-align: middle;
					text-align: left;
					text-transform: uppercase;
				}
				
				.tab-copy-desc-box > .mobile-padding > p{
					padding-right: 0;
					font-size: 1.6em;
					width: auto;
					float: left;
					padding-right: 0;
				}
				
				.tab-img-box{
					position: static;
					max-width: 40%;
					float: right;
					margin-right: 2em;
				}
				
				.tab-quote{display: none;}	
				
								
				.rec-button{
					float: left;
					margin: 0.4em 2em 0 0em; 
					padding: 0;
					background: none;
					color: #780000;
					text-align: left;
					font-size: 2em;
					border: none;
				}
				
					.rec-button > i{font-size: 1em; margin-top: -0.2em;}
					
					.rec-button:hover{
						color: #292929;
						border: none;
					}
				
				/**********************
					SPECIFIC ELEMENTS FOR EVERY TAB
				**********************/
				.tab-copy-2 .tab-img-box,
				.tab-copy-3 .tab-img-box,
				.tab-copy-4 .tab-img-box,
				.tab-copy-6 .tab-img-box{max-width: 40%;}
				.tab-copy-5 .tab-img-box{max-width: 35%; padding-bottom: 1em;}
				.tab-copy-6 .tab-img-box{padding-bottom: 1em;}
		}
		
		@media (max-width: 568px){
			.tab-copy-desc-box{text-align: center;}
			
			.tab-copy-desc-box > p{
				text-align: center;
				float: none;
				width: auto;
				font-size: 1.5em;
			}
			
			.tab-img-box{
				position: static;
				max-width: 80%;
				float: none;
				display: block;
				margin: 1em auto 0 auto;
			}
			
			.rec-button{
				float: none;
				padding: 0.4em 0 0.4em 0;
				margin: 1.5em auto; 
				display: inline-block; 
				background: none;
				color: #780000;
				text-align: center;
				font-size: 2.2em;
				width: 10em;
				border: 4px solid #780000;
			}
			
				.rec-button:hover{
					color: #292929;
						border: 4px solid #292929;
				}
			
			.grid-pad{background: none !important;}
			
			.feature-header-mobile{
				padding: 1.4em 0;
				overflow: hidden;
				display: block;
				float: left;	
			}
			
			.feature-header-mobile > strong{
				text-align: center;
				display: block;
			}
							
			.tab-copy-desc-box > .mobile-padding > p{padding-right: 0; font-size: 1.5em;}
			
			/**********************
					SPECIFIC ELEMENTS FOR EVERY TAB
			**********************/
			.tab-copy-2 .tab-img-box,
			.tab-copy-3 .tab-img-box,
			.tab-copy-4 .tab-img-box,
			.tab-copy-5 .tab-img-box,
			.tab-copy-6 .tab-img-box{max-width: 80%;}
				
			
			
		}
		
/**********************
	FOOTER
**********************/
/*	.secondary-nav nav > ul > li > a{
			display: block;
			padding: 0.4em 0.6em;
			font-size: 2em;
			font-family: 'Roboto Condensed', Arial, sans-serif;
			font-weight: 700;
			text-transform: uppercase;
			color: #292929;
		}

		.secondary-nav	nav > ul > li > a:hover,
			nav > ul > li > a.active{
				color: #fff;
				text-decoration: none;
				background: rgb(142,27,27);	
				background: rgba(142,27,27,.9);
				border-radius: 8px;
				-webkit-border-radius: 8px;
				-moz-border-radius: 8px;
			}
*/

	
	
/**********************
	RETINA
**********************/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx){



.feat-header-sprite{
	background:  url('../images/tab-resources/header-sprite@2x.png') no-repeat;
	background-size: 300px 100px;
	-webkit-background-size: 300px 100px;
	-moz-background-size: 300px 100px;
	-ms-background-size: 300px 100px;
}

.connect > li > span{
		background: url('../images/ca-flag@2x.png') no-repeat;
		background-size: 48px 25px;
		-webkit-background-size: 48px 25px;
		-moz-background-size: 48px 25px;
		-o-background-size: 48px 25px;
		-ms-background-size: 48px 25px;
		height: 2.5em;
	}



}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2) and (max-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1)  and (max-width: 768px),
only screen and (        min-device-pixel-ratio: 2)  and (max-width: 768px),
only screen and (                min-resolution: 192dpi)  and (max-width: 768px),
only screen and (                min-resolution: 2dppx)  and (max-width: 768px){

.logo > h1{
	background: url('../images/backstage-logo-inverted.png') no-repeat;
	background-size: 189px 60px;
	-webkit-background-size: 189px 60px;
	-moz-background-size: 189px 60px;
}


.feat-header-sprite{
	background:  url('../images/tab-resources/header-sprite@2x.png') no-repeat;
	background-size: 300px 100px;
	-webkit-background-size: 300px 100px;
	-moz-background-size: 300px 100px;
	-ms-background-size: 300px 100px;
}

.lock{background-position: 0px -50px;}
					.graph{background-position: -50px -50px;}
					.flame{background-position: -100px -50px;}
					.sync{background-position: -150px -50px;}
					.secure-lock{background-position: -200px -50px;}
					.leaf{background-position: -250px -50px;}


}