*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
img{border:0;margin:0;padding:0;}
html,body{width:100%;height:100%;margin:0;padding:0;}
body{
	margin:0;
	padding:0;
	border:0;
	background-color:#000;
	font-size:1px;line-height:1px;
	color:#fff;
}

nav{display:block;}


#pages{
	width:100%;height:100%;
	max-width:1024px;
	margin:auto;
	position:relative;
}
body.page{background:#000 url("subpage-bg.jpg") no-repeat top center;}
#pages .page{
	left:0;
	top:0;
	display:none;
	z-index:2;
	width:100%;height:100%;
}
#pages .page.on{
	display:block;
}
#pages-nav{
	display:none;
	position:fixed;
	left:0;bottom:0px;
	width:100%;
	height:149px;
	background:#000
	z-index:3;
}
#pages-nav #pages-navi{
	max-width:1024px;
	margin:auto;
	position:relative;
}
#pages-nav-buts{
	position:absolute;
	right:25px;
	bottom:25px;
}
#pages-nav-buts a:last-child{
	padding-left:15px;
}

body.page #pages-nav{display:block;}


/* homepage */
#page-homepage{
	display:block;
	background:url("homepage/bg.jpg") no-repeat top center;
	margin:auto;
}
.page #page-homepage{
	display:none;
}
#hp-title{
	display:block;
	width:486px; 
	margin:auto;
}
#hp-title img{
	width:100%;
}

#hp-nav{
	background:url("homepage/nav_bgbar.png") no-repeat top center;
	max-width:1025px;
	height:40px;
	margin:auto;
	margin-top:5px;
	text-align:center;
	position:relative;
}
#hp-navi{
	width:742px;
	margin:auto;
	position:relative;
	z-index:2;
}
#boxorder{
	width:700px;
	max-width:100%;
	text-align:center;
	margin:auto;
	margin-top:53px;
}
#packshot{
	background:rgba(0,255,0,0.0);
	position:relative;
	z-index:1;
}
#packshot img{max-width:100%;}
#stores{
	position:relative;
	margin-top:3px;
	display:none;
}

#packshot{
	position:relative;
	z-index:1;
}
#hp-navi a{
	display:inline-block;
	vertical-align:top;
}

#hp-shares{
	width:395px;
	margin:auto;
	margin-top:14px;
	text-align:center;
}
#hp-shares div{display:inline-block;}
#hp-shares #hp-tw{margin-left:3px;}
iframe.twitter-share-button{width:60px !important;}
#hp-legal{
	width:688px;height:108px;
	background:url("homepage/legal2.png") no-repeat;
	margin:auto;
	margin-top:10px;
	position:relative;
}
#hp-legal a{
	display:block;
	position:absolute;
	left:10px;top:10px;
	background:rgba(0,0,255,0.0);
}
a#f-fb{left:296px;top:0px;width:53px;height:18px;}
a#f-tw{left:360px;top:0px;width:53px;height:18px;}
a#f-yt{left:418px;top:0px;width:39px;height:18px;}
a#f-priv{left:98px;top:22px;width:69px;height:13px;}
a#f-terms{left:176px;top:22px;width:94px;height:13px;}
a#f-cserv{left:274px;top:22px;width:86px;height:13px;}
a#f-corp{left:369px;top:22px;width:154px;height:13px;}
a#f-part{left:530px;top:22px;width:47px;height:13px;}
a#f-fr{left:273px;top:59px;width:115px;height:13px;}
a#f-pg{left:397px;top:59px;width:125px;height:13px;}
a#f-mpaa{left:142px;top:59px;width:125px;height:13px;}
a#f-paramount{left:0px;top:0px;width:56px;height:48px;}
a#f-marvel{left:598px;top:0px;width:90px;height:48px;}



/*============== story page ==================*/
#page-story{text-align:center;padding-bottom:52px}
#page-story #story-box{
	width:99%;
	max-width:654px;
	margin:auto;
	text-align:left;
	margin-bottom:60px;
}
#story-title{display:block;margin:auto;}
#page-story #story-txt{
	width:100%;
	background:rgba(12,26,29,0.8);
	box-shadow:2px 2px 10px rgba(0,0,0,0.8);
	font:bold 12px/1.5em helvetica,arial;
	word-spacing:2px;
	padding:14px;
	padding-bottom:200px;  
	margin-top:12px;
	margin-bottom:185px;
	
}
#story-txt strong{
	font-size:16px;
}
#story-txt ul{margin:0;}
#page-story img{max-width:100%;margin-bottom:0;}
.page-story #pages-nav { background:#000;background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#333));}

/*==================== downloads page =============*/
#page-downloads{
	text-align:center;
	padding-bottom:30px;
}
.dl-mod{
	display:block;
	margin:auto;
	width:388px;
	position:relative;
}
.dl-mod a{
	display:block;
	position:absolute;left:23px;bottom:15px;
	width:164px;height:50px;
	background:rgba(0,0,255,0.0);
}
.dl-mod #dl-iphone{left:199px;}
#dl-mod-phone{display:none;width:100%; max-width:394px;}
#dl-mod-phone #dl-iphone2{width:100%;left:0;}
#dl-mod-phone img{width:100%;max-width:388px;}
/*==================== gallery page ==================*/
#pages #page-gallery{
	background-image:none;position:relative;
	background:#000;
}
#page-gallery #fbshare-gallery,#page-video #fbshare-video{
	position:absolute;
	right:20px;top:20px;
	z-index:5;
	display:block;
	width:81px;height:21px;
	background:url("fb_share.png") no-repeat;
}

#page-gallery #nav-gallery{
	position:absolute;
	top:28%;
	width:100%;
	height:39px;
	z-index:2;
}
#nav-gallery #gallery-prev, #nav-gallery #gallery-next{
	width:41px;height:39px;
	display:block;
	background:url("gallery/left_arrow.png") no-repeat;
	cursor:pointer;
	position:absolute;
	left:8px;top:0;
}
#nav-gallery #gallery-next{
	background-image:url("gallery/right_arrow.png");
	left:auto;right:13px;
}

#page-gallery .images{
	position:relative;
	max-width:1024px;
	margin:auto;
	padding-top:130px;
	z-index:1;
}
#page-gallery .images{
	padding-top:0px;
}
#page-gallery img{
	display:none;
	width:100%;
	height:auto;
	cursor:pointer;
	z-index:1;
}
#page-gallery img.on{
	display:block;
}
.page-gallery #pages-nav{
	background:#000;z-index:2;
}


/*============= partners page ===========*/
#page-partners{
	padding-top:10px;
	/*min-height:100%;*/
}
#pt-mod{
	position:relative;
	margin:auto;
	width:799px;
	max-width:100%;   
	margin-bottom:100px;
	backround:rgba(0,0,255,0.0);
} 
#pt-mod img{max-width:100%;}
#pt-mod a{
	display:block;
	position:absolute;
	left:0;top:0;
	width:50%;height:100%;
	background:rgba(255,0,0,0.0);
}
a#p-norton{left:0;}
a#p-colantotte{left:50%;}

/*========== ticketing frame ==============*/
#tframe{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:80%;
	max-height:85%;
	z-index:1;
	background:rgba(0,0,0,0.9);
}



/*================== videos page ==================*/
#page-video{background:#000;}
#vido{width:100%;max-width:100%;max-height:75%;height:65%;}
#vido video{width:100%;height:100%;}
#video.playing{opacity:1;}
#vnav{
	position:fixed;
	bottom:77px;right:30px;
	width:auto;height:30px;
	background:rgba(0,0,255,0.0);
	z-index:4;
	text-align:right;
	white-space:nowrap;
	overflow:visible;
}
#vnav .vsep{
	margin:0 -21px;
}
#page-video #fbshare-video{
	left:-92px;top:8px;
}

/*================================ orientation specific at bottom always ==============*/
@media all and (max-width:1020px){
	#vnav{bottom:100px;}
}


@media all and (max-width:875px){
	#vnav{bottom:68px;right:10px;}
	#pages-nav{height:82px;}
	#pages-nav #bottom-title{display:none;}
	#pages-nav #bottom-title-box{
		height:75px;width:670px;
		max-width:80%;
		background:url("title-small_bottom_now.png") no-repeat;
		background-size:100% auto;
		margin:10px 0 0 10px;
	}
	#bottom-close img{height:22px;width:auto;}
}
@media screen and (max-width:768px){
	#pages-nav #bottom-title-box{height:71px;}
}
@media screen and (max-width:675px){
	#hp-nav{background:none;height:auto;}
	#hp-navi{width:auto;height:auto;}
	#hp-legal a{display:none;}
	#hp-legal{width:auto;background-size:100% auto;}
	#pages-nav{height:67px;}
	#pages-nav #bottom-title-box{height:70px;}
}
@media screen and (max-width:620px){
	#vnav{
		right:-11px;
		-moz-transform:scale(0.7);-moz-transform-origin:0 0;
		-webkit-transform:scale(0.7);-webkit-transform-origin:0 0;
	}
	#pages-nav #bottom-title-box{
		height:65px;
	}
}
@media screen and (max-width:600px){
	/*partners module needs to start scaling with image*/
	/*#page-partners,#page-story,#page-downloads{min-height:672px;}*/
	
}
@media screen and (max-width:550px){
	#pages-nav #bottom-title-box{max-width:70%;height:32px;}
}

@media screen and (max-width:500px){
	#pages-nav,#pages-nav #bottom-title{height:42px;}
	#pages-nav-buts{right:5px;bottom:5px;}
	#vnav{right:-133px;bottom:35px;}
	/*============ homepage rewrites ===========*/
	#page-homepage{
		background-image: url("bg-phone.jpg");
	    background-position: center -55px;
	    background-size: 476px auto;
	}
	/*====== hack title for horiz layout ====*/
	#hp-title{width:391px;height:70px;margin:0 auto;position:relative;max-width:100%;}
	#hp-title img{display:none;}
	#hp-title #title-lone-logo{
		display:block;
		position:absolute;left:0;top:4px;
		background:url("title-small.png") no-repeat;
		background-size:100% auto;
		width:179px;height:66px;
	}
	#hp-title #title-box-art{
		display:block;
		position:absolute;right:0;top:7px;
		background:url("box_art.png") no-repeat;
		background-size:100% auto;
		width:213px;height:64px;
	}
	/*#boxorder{display:none;}*/
	#boxorder{position:absolute;top:110px;left:0;} 
	#packshot{display:none;}
	#stores img{width:80px;}
	#hp-nav{margin-top:169px;} 
	#hp-navi{width:100%;}
	#hp-navi a img{display:none;}
	#hp-navi a{
		width:100px;height:30px;
		background-repeat:no-repeat;
		background-size:100% auto;
		background-position:center top;
		margin:-9px -7px 0 0;
	}
	#nvideo{background-image:url("homepage/video_btn.png");}
	#ngallery{background-image:url("homepage/gallery_btn.png");}
	#nstory{background-image:url("homepage/story_btn.png");}
	#ndownloads{background-image:url("homepage/downloads_btn.png");}
	#npartners{background-image:url("homepage/partners_btn.png");}
	
	#dl-mod-phone{display:block;}
	#dl-mod-both{display:none;}
	#hp-shares{margin-top:0;}
	#pages-nav{
		background:#000;
		background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#333));
	}	
}
@media screen and (max-width:480px){
	#vnav #fbshare-video{display:none !important;}
}
@media screen and (max-width:470px){
	#page-homepage{background-position:center 18px;}
	#hp-title{margin:auto;margin-top:5px;text-align:center;}
	#hp-title img{display:inline-block;width:230px;}
	#hp-title #title-lone-logo,#hp-title #title-box-art{display:none;}
	#hp-nav{margin-top:167px;}
}

@media screen and (max-width:415px){
	#vnav{
		-moz-transform:scale(0.6);-webkit-transform:scale(0.6);
		right:-174px;
	}
	#bottom-close img{height:14px;width:auto;}
	#pages-nav-buts a:last-child{padding-left:5px;	}
	#pages-nav-buts{bottom:5px;}
	#page-homepage{background-position:center 26px;}
	#hp-nav{margin-top:10px;}
	#hp-navi{width:252px;}
	#hp-navi a{
		width:252px;height:52px;
		margin:-12px 0 0 0;
	}
	#boxorder{display:block;margin-top:140px;position:static;}
	#packshot{display:block;}
	#packshot img {width:133px;}
	#stores img{width:auto;}
	#stores a{display:inline-block;padding:4px;}
}
@media screen and (max-width:370px){
	#page-video #fbshare-video{
		left:101px;
		top:51px;
	}
}

@media screen and (max-width:360px){
	#hp-shares{width:100%;}
	#hp-fb{margin-bottom:8px;}	
}
@media screen and (max-width:340px){
	#pages-nav #bottom-title{height:34px;}
	#vnav #fbshare-video{left:101px;top:38px;}
}

@media screen and (max-width:320px){
	#page-story{min-height:620px;}
	#page-homepage{background-size:335px auto;background-position:center 52px;}
	#pages-nav #bottom-title-box{height:24px;}
	#boxorder{margin-top:105px;}
}

/*========== adjust for HEIGHT ========*/
@media screen and (max-height:356px){
	#page-video{min-height:330px;}
}
@media screen and (max-height:208px){/*ADJUST FOR HEIGHT*/
	#page-gallery #nav-gallery{top:50%;}
	#page-downloads{min-height:430px;}
	#page-partners{min-height:450px;}
	#page-story{min-height:1000px;}
	#page-video{min-height:190px;}
	#vnav{bottom:27px}
	#vido{height:55%;}
}


