@charset "utf-8";
/* CSS Document */
/*------------------------------------------------ COMMON -------------------------------------------------------*/
@font-face {
	font-family: Interstate-Light;
	src: url('../fonts/Interstate-Light.otf');
	font-weight:normal;
    font-style:normal;
}
@font-face {
	font-family: Interstate-Regular;
	src: url('../fonts/Interstate-Regular.otf');
	font-weight:normal;
    font-style:normal;
}
@font-face {
	font-family: Interstate-Bold;
	src: url('../fonts/Interstate-Bold.otf');
	font-weight:normal;
    font-style:normal;
}
@font-face {
	font-family: Interstate-Black;
	src: url('../fonts/Interstate-Black.otf');
	font-weight:normal;
    font-style:normal;
}
body{
	background:#000;
	margin:0px;
	padding:0px;
	color:#FFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
ul{
	padding:0px;
}
.holder{
	position:absolute;
	z-index:20;
	top:50%;
	left:50%;
}
#preloader{
	position: fixed;
	top:50%;
	left:50%;
	margin-left:-15px;
	margin-top:-15px;
	z-index:10000;
}
/*------------------------------------------------ MENU & FOOTER -------------------------------------------------------*/
#footer{
	position:fixed;
	z-index:50;
	bottom:0px;
	height:86px;
	width:100%;
}
#logo{
	width:176px;
	height:86px;
	background:url(../img/sprite.png) 0px 0px no-repeat;
	cursor:pointer;
	float:left;
	margin-top:0px;
}
#logo a{
	overflow:hidden;
	display:block;
	text-indent:-5000px;
}
#mainMenu{
	width:373px;
	float:right;
	margin-right:28px;
	z-index:100;
	font-family:'Interstate-Regular',sans-serif;
	font-size:18px;
}
#mainMenu ul{
	float:right;
}
#mainMenu ul > li {
	float:left;
	list-style:none;
	position:relative;
	margin-left:35px;
	bottom:-42px;
}
#mainMenu .home{
	color:#fff;
}
#mainMenu .work{
	color:#fff;
}
#mainMenu .tour{
	color:#fff;
}
#mainMenu .contact{
	color:#fff;
}
#mainMenu .home a{
	color:#8f9ba3;
	text-decoration:none;
}
#mainMenu .home a:hover,
#mainMenu .home li.selected a,
#mainMenu .home li a.selected{
	color:#ff7700;
}
#mainMenu .work a{
	color:#5f6b73;
	text-decoration:none;
}
#mainMenu .work a:hover,
#mainMenu .work li.selected a,
#mainMenu .work li a.selected{
	color:#343637;
}
#mainMenu .tour a,
#mainMenu .contact a{
	color:#5f6b73;
	text-decoration:none;
}
#mainMenu .tour a:hover,
#mainMenu .tour li.selected a,
#mainMenu .tour li a.selected,
#mainMenu .contact a:hover,
#mainMenu .contact li.selected a,
#mainMenu .contact li a.selected{
	color:#ff7700;
}
.subMenu {
	display:none;
	position:absolute;
	z-index:200;
	bottom:20px;
	text-align:right;
	font-family:'Interstate-Regular',sans-serif;
	font-size:18px;
	width:240px;
	right:0px;
	margin:0px;
}
.subMenu li {
	list-style:none;
	margin-right:5px;
}
.subMenu li:last-child {
	margin-bottom:5px;
}
.subMenu .orange{
	font-weight:bold;
	color:#ff7700;
}
.subMenu address{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-right:5px;
	margin-bottom:5px;

}
#mainMenu .home .subMenu{
	color:#fff;
	border-right:solid 1px #ff7700;
}
#mainMenu .work .subMenu{
	color:#fff;
	border-right:solid 1px #fff;
}
#mainMenu .tour .subMenu{
	color:#5f6b73;
	border-right:solid 1px #343637;
}
#mainMenu li:hover .subMenu {
	display:block;
}
#mainMenu .home .subMenu a{
	color:#fff;
	text-decoration:none;
}
#mainMenu .home .subMenu a:hover,
#mainMenu .home .subMenu li.selected a{
	color:#ff7700;
}
#mainMenu .work .subMenu a{
	color:#fff;
	text-decoration:none;
}
#mainMenu .work .subMenu a:hover,
#mainMenu .work .subMenu li.selected a{
	color:#343637;
}
#mainMenu .tour .subMenu a,
#mainMenu .contact .subMenu a{
	color:#343637;
	text-decoration:none;
}
#mainMenu .tour .subMenu a:hover,
#mainMenu .tour .subMenu li.selected a,
#mainMenu .contact .subMenu a:hover,
#mainMenu .contact .subMenu li.selected a{
	color:#ff7700;
}

#socialMenu{
	width:115px;
	height:18px;
	float:right;
	margin-top:62px;
}
#socialMenu ul > li {
	float:left;
	list-style:none;
	margin-top:-10px;
}
#socialMenu a{
	background:url(../img/sprite.png) 0px -86px no-repeat;
	overflow:hidden;
	display:block;
	text-indent:-5000px;
	height:18px;
	margin-right:10px;
	margin-bottom:10px;
}
#socialMenu li.facebook a{
	background-position: 0px -86px;
	width:18px;
}
#socialMenu li.facebook a:hover{
	background-position: 0px -116px;
}
#socialMenu li.twitter a{
	background-position: -29px -86px;
	width:18px;
}
#socialMenu li.twitter a:hover{
	background-position: -29px -116px;
}
#socialMenu li.youtube a{
	background-position: -54px -86px;
	width:46px;
}
#socialMenu li.youtube a:hover{
	background-position: -54px -116px;
}
/*------------------------------------------------ INTRO ------------------------------------------------------*/
#intro{
	width:100%;
	height:100%;
	background:#000;
	z-index:500;
	position:fixed;
	display:none;
}
#intro #video-intro{
	width:100%;
	height:100%;
	background:#000;
	
}
#intro #skip{
	bottom:15px;
	right:15px;
	color:#FFF;
	position:absolute;
	font-family:'Interstate-Bold',sans-serif;
	font-size:18px;
	font-weight:bold;
	cursor:pointer;
}
/*------------------------------------------------ HOME -------------------------------------------------------*/
#home-section{
	position:relative;
	width:100%;	
	display:none;
}
.home-container{
	width:602px;
	height:200px;
	margin-left:-301px;
	margin-top:-100px;
}
#headline{
	width:602px;
	height:130px;
	display:none;
}
#head1{
	background:url(../img/sprite.png) no-repeat 0px -145px;
	width:106px;
	height:53px;
	float:left;
}
#head2{
	background:url(../img/sprite.png) no-repeat -107px -145px;
	width:494px;
	height:53px;
	float:right;
}
#head3{
	background:url(../img/sprite.png) no-repeat 0px -206px;
	width:370px;
	height:68px;
	float:left;
}
#head4{
	background:url(../img/sprite.png) no-repeat -370px -206px;
	width:232px;
	height:68px;
	float:right;
}
.overflow{
	overflow:hidden;
}
#be h2 {
	font-family:'Interstate-Light',sans-serif;
	font-size:28px;
	margin-top:40px;
	cursor:pointer;
}
#be h2:hover,
#be h2.selected {	
	color:#ff7700;
}
#be {
	position:absolute;
	z-index:2;
}
#be-details {
	position:absolute;
	z-index:1;
}
#be-details p {
	width:200px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	border-left:#ff7700 solid 1px;
	padding-left:10px;
	position:absolute;
	z-index:10;
	margin-top:55px;
	opacity:0;
	filter:alpha(opacity=0);
}
#be-details #fresh {
	margin-left:201px;
}
#be-details #different {
	margin-left:411px;
}
.be-element{
	float:left;
	margin-left:101px;
	opacity:0;
	filter:alpha(opacity=0);
}
.be-element:first-child{
	margin-left:0px;
}
/*------------------------------------------------ WORK -------------------------------------------------------*/
#work-section{
	position:relative;
	width:100%;
	display:none;
}

#section-title{
	text-align:center;
	width:500px;
	font-family:'Interstate-Bold',sans-serif;
	font-size:32px;
	font-weight:bold;
	color:#ffc491;
	margin:0 auto;
	position:absolute;
	left:50%;
	margin-left:-250px;
	top:50%;
	margin-top:-212px;
}
#section-title-back{
	text-align:left;
	font-family:'Interstate-Bold',sans-serif;
	font-size:150px;
	font-weight:bold;
	color:#ba5500;
	margin:0 auto;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:50px;
	margin-top:-285px;
}
.work-container{
	width:602px;
	height:520px;
	margin-left:-301px;
	margin-top:-260px;
	overflow:hidden;
}
#work-container section{
	
}
.work-holder{
	width:990px;
	height:350px;
	position:absolute;
	margin-top:80px;
}
#work-reel video{
	width:640px;
	height:360px;
	background:#000;
}
#work-reel #video-reel-holder{
	border:#949494 solid 20px;
	width:640px;
	height:360px;
	margin-left:172px;
	margin-top:-52px;
	background:#000;
}
#work-reel .title{
	padding-top:8px;
	padding-left:44px;
	background:url(../img/sprite.png) 0px -525px no-repeat;
	margin-left:146px;
	margin-top:-83px;
	position:absolute;
	height:53px;
	width:250px;
	color:#c25300;
	font-family:'Interstate-Regular',sans-serif;
	font-size:16px;
	overflow:hidden;	
}
.work-submenu{
	width:250px;
	border-right:2px solid #fff;
	text-align:right;
	font-family:'Interstate-Light',sans-serif;
	font-size:18px;
	margin-left:-40px;
	height:156px;
	float:left;
	margin-right:8px;
	margin-top:0px;
	margin-bottom:0px;
}
.work-submenu-larger{
	height: 190px;
	margin-top:-34px;
}
.work-submenu li{
	list-style-type:none;
	margin-right:0px;
	margin-top:14px;
	width:236px;
	margin-left:4px;
}
.work-submenu li:first-child{
	margin-top:0px;
}
.work-submenu li a{
	text-decoration:none;
	color:#FFFFFF;
}
.work-submenu li:hover,
.work-submenu li.rollover{
	background:#d36100;
}
.work-submenu li.selected{
	background:#883e00;
}

.work-thumb{
	float:left;
	margin-left:2px;
	border:0px;
	height:157px;
	width:353px;
	cursor:pointer;
	position:relative;
	overflow:hidden;
}
.work-thumb:first-child{
	margin-left:2px;
}
.narrow{
	width:353px;
	margin-top:3px;
}
.narrow:first-child{
	margin-left:0px;
}
#work-thumb-container{
	width:710px;
	float:left;
}
.work-thumb .work-thumb-over{
	position:absolute;
	height:157px;
	width:353px;
	background:#f57100;
	opacity:.6;
	filter:alpha(opacity=60);
}
.narrow .work-thumb-over{
	width:353px;
}
.work-thumb:hover .work-thumb-over{
	opacity:0;
	filter:alpha(opacity=0);
}
.work-thumb:hover .work-thumb-label{
	display:block;
}
.work-thumb .work-thumb-label{
	width:353px;
	height:auto;
	background:#fff;
	bottom:-12px;
	position:absolute;
	line-height:20px;
	display:none;
}
.work-thumb .work-thumb-label h2{
	color:#ff7700;
	margin-left:5px;
	font-size:14px;
	margin-top:0px;
}	
.work-thumb .work-thumb-label .client{
	color:#999999;
	font-size:10px;
	margin-left:4px;
}
#work-show-details{
	position:absolute;
	z-index:120;
	left:50%;
	top:50%;
	display:none;
}	
#work-show-details #img-holder{
	background:#949494;
	padding-top:30px;
}	
#work-show-details img{
	margin-bottom:42px;
	margin-left:25px;
	margin-right:25px;
	cursor:pointer;
}
#work-show-details .client{
	color:#dfdfdf;
	text-align:right;
	margin-top:-12px;
	margin-bottom:5px;
	margin-right:25px;
	font-family:'Interstate-Regular',sans-serif;
	font-size:14px;
}
#work-show-details .title{
	padding-top:6px;
	padding-left:25px;
	background:url(../img/sprite.png) 0px -466px no-repeat;
	margin-left:-26px;
	margin-top:-51px;
	height:53px;
	font-family:'Interstate-Regular',sans-serif;
	font-size:16px;
	overflow:hidden;	
}
#work-show-details .close{
	position:absolute;
	top:44px;
	right:-22px;
	width:36px;
	height:36px;
	background:url(../img/sprite.png) -229px -86px no-repeat;
	margin-top:-60px;
	margin-right:10px;
	font-family:'Interstate-Bold',sans-serif;
	font-size:18px;
	text-align:center;
	line-height:36px;
	cursor:pointer;
}
#work-show-details .close:hover{
	color:#ff7700;
}	
#work-show-details #arrow-left{
	position:absolute;
	cursor:pointer;
	width:51px;
	height:88px;
	left:0px;
	z-index:10;
	top:50%;
	margin-top:-44px;
	margin-left:-51px;
	text-indent:-5000px;
	overflow:hidden;
	background:url(../img/sprite.png) no-repeat -141px -276px;
}
#work-show-details #arrow-left:hover{
	background:url(../img/sprite.png) no-repeat -141px -370px;
}
#work-show-details #arrow-right{
	position:absolute;
	cursor:pointer;
	width:51px;
	height:88px;
	right:0px;
	z-index:10;
	top:50%;
	margin-top:-44px;
	margin-right:-51px;
	text-indent:-5000px;
	overflow:hidden;
	background:url(../img/sprite.png) no-repeat -202px -276px;
}
#work-show-details #arrow-right:hover{
	background:url(../img/sprite.png) no-repeat -202px -370px;
}
#work-show-details #subsection-name{
	float:right;
	font-family:'Interstate-Regular',sans-serif;
	font-size:16px;
	color:#ff7700;
	margin-top:10px;
}
#work-show-details #subsection-pagination{
	float:right;
	clear:both;
}
#work-show-details #subsection-pagination dt{
	float:left;
	margin-left:12px;
	background:url(../img/sprite.png) no-repeat -298px -87px;
	width:19px;
	height:19px;
	margin-top:0px;
	text-indent:-5000px;
	overflow:hidden;
	cursor:pointer;
}
#work-show-details #subsection-pagination dt:last-child{
}
#work-show-details #subsection-pagination dt.selected{
	background:url(../img/sprite.png) no-repeat -274px -87px;
	cursor:auto;
}
#work-section #shadow{
	width:100%;
	height:100%;
	background:url(../img/bg-home.jpg) #000 center;
	z-index:100;
	position:absolute;
	opacity:1;
	filter:alpha(opacity=100);	
	display:none;
}

#details-header{
	margin-top:0px;
	height:73px;
	border-bottom:1px solid #cccccc;
}
#details-holder{
	height:349px;
	position:relative;
	overflow:hidden;
}
#details-holder #next-button{
	position:absolute;
	width:80px;
	height:350px;
	right:0px;
	background:#999999;
	opacity:0.2;
	filter:alpha(opacity=20);	
	line-height:350px;
	text-align:center;
	padding-top:20px;
	cursor:pointer;
}
#details-holder #prev-button{
	position:absolute;
	width:80px;
	height:350px;
	left:0px;
	background:#999999;
	opacity:0.2;
	filter:alpha(opacity=20);
	line-height:350px;
	text-align:center;
	padding-top:20px;
	cursor:pointer;
	display:none;
}		
#details-holder #prev-button:hover,
#details-holder #next-button:hover{
	opacity:0.5;
	filter:alpha(opacity=50);
}	
#details-container{
	width:8000px;
	height:350px;
}
#details-container .details-list{
	float:left;
	margin:0px;
	border:0px;
	height:350px;
	width:800px;
}
#details-container .details-list video{
	height:350px;
	width:800px;
}
#details-container .details-list audio{
	width:800px;
	height:175px;
}
#details-close{
	margin-top:4px;
	width:44px;
	height:15px;
	line-height:15px;
	background:url(../img/sprite.png) -111px -114px;
	font-family:'Interstate-Light',sans-serif;
	font-size:12px;
	text-align:right;
	cursor:pointer;
}
#work-pagination{
	position:absolute;
	bottom:10px;
	right:18px;
	height:20px;
}
#work-pagination dt{
	float:left;
	margin-left:12px;
	background:url(../img/sprite.png) no-repeat -202px -87px;
	width:19px;
	height:19px;
	margin-top:0px;
	text-indent:-5000px;
	overflow:hidden;
	cursor:pointer;
}
#work-pagination dt:last-child{
}
#work-pagination dt.selected{
	background:url(../img/sprite.png) no-repeat -176px -87px;
	cursor:auto;
}

/*------------------------------------------------ TOUR -------------------------------------------------------*/
#tour-section{
	position:relative;
	width:100%;
	display:none;
}
.tour-container{
	width:1024px;
	height:530px;
	background:url(../img/bg-tour-holder.png) repeat-x top;
	margin-left:-512px;
	margin-top:-300px;
}
#tour-holder{
	overflow:hidden;
	
}
#tour-holder #image-container{
	height:472px;
	margin-top:22px;
	width:12400px;
}
#tour-holder .image-list{
	float:left;
	margin:0px;
	border:0px;
	height:472px;
	width:1024px;
	cursor:pointer;
	position:relative;
}
#tour-holder .image-over{
	position:absolute;
	height:472px;
	width:1024px;
	background:#FFFFFF;
	opacity:.6;
	filter:alpha(opacity=60);
	display:none;
}
#tour-holder .image-list:hover .image-over{
	opacity:.3;
	filter:alpha(opacity=30);
}
#tour-holder .image-list .image-over-selected,
#tour-holder .image-list:hover .image-over-selected{
	opacity:0;
	filter:alpha(opacity=0);
}
#tour-holder #button-container{
	float:right;
}
#tour-holder #button-container dt{
	float:left;
	margin-right:27px;
	
	background:url(../img/sprite.png) no-repeat -298px -87px;
	width:22px;
	height:22px;
	text-indent:-5000px;
	overflow:hidden;
	cursor:pointer;
}
#tour-holder #button-container dt:last-child{
	margin-right:0px;
}
#tour-holder #button-container dt:hover,
#tour-holder #button-container dt.selected{
	background:url(../img/sprite.png) no-repeat -274px -87px;	
}
#tour-holder #tour-arrow-left{
	position:absolute;
	cursor:pointer;
	width:51px;
	height:88px;
	left:0px;
	z-index:10;
	top:225px;
	text-indent:-5000px;
	overflow:hidden;
	background:url(../img/sprite.png) no-repeat 0px -273px;
}
#tour-holder #tour-arrow-left:hover{
	background:url(../img/sprite.png) no-repeat 0px -367px;
}
#tour-holder #tour-arrow-right{
	position:absolute;
	cursor:pointer;
	width:51px;
	height:88px;
	right:0px;
	z-index:10;
	top:225px;
	text-indent:-5000px;
	overflow:hidden;
	background:url(../img/sprite.png) no-repeat -60px -273px;
}
#tour-holder #tour-arrow-right:hover{
	background:url(../img/sprite.png) no-repeat -60px -367px;
}
/*------------------------------------------------ CONTACT -------------------------------------------------------*/
#contact-section{
	position:relative;
	width:100%;
	display:none;
}
.contact-container{
	width:400px;
	height:400px;
	margin-top:-200px;
	left:100%;
	margin-left:-440px;
	text-align:right;
}
#contact-section h2{
	font-family:'Interstate-Bold',sans-serif;
	font-size:60px;
	color:#ff7700;
	margin-top:0px;
}
#contact-section address{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:24px;
	font-style:normal;
	color:#8f9ba3;
	margin-right:5px;
	margin-bottom:5px;
}
#contact-section .orange{
	font-weight:bold;
	color:#ff7700;
}
#contact-section address a{
	color:#5f6b73;
	text-decoration:none;
}
#contact-section address a:hover{
	color:#ff7700;
}
/*------------------------------------------------ BACKGROUNDS -------------------------------------------------------*/
#backgrounds{
	
}
.holderBg{
	position:absolute;
	z-index:1;
	left:0px;
}
#bg-home{
	position:fixed;
	z-index:3;
	width:100%;	
	left:0px;
	background:url(../img/bg-home.jpg) no-repeat top center #000;
}
#bg-work{
	position:fixed;
	z-index:2;
	width:100%;
	left:0px;
	background:url(../img/bg-work.jpg) no-repeat top center #ff7700;
}
#bg-tour{
	position:fixed;
	z-index:1;
	width:100%;
	left:0px;
	background:url(../img/bg-tour.jpg) no-repeat top center #fff;
}
/*------------------------------------------------ FOOTER -------------------------------------------------------*/
footer{
	position:fixed;
	z-index:499;
	top:0%;
	left:100%;
	margin-left:-10px;
	margin-top:-10px;
	display:none;
}
footer p{
	color:#CCCCCC;
	font-size:9px;
	width:700px;
	transform:rotate(90deg);
	

	transform-origin:0% 100%;
	-ms-transform: rotate(90deg);
	-ms-transform-origin:0% 100%;
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin:0% 100%; 
	-moz-transform: rotate(90deg);
	-moz-transform-origin:0% 100%; 
	-o-transform: rotate(45deg);
	-o-transform-origin:20% 40%; 	
}
/*------------------------------------------------ IPAD -------------------------------------------------------*/

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

	body{ 
		-webkit-background-size: 1024px 768px;
	}
	#bg-home{
		background:url(../img/bg-home-1024.jpg) no-repeat center #000;
	}
	#bg-work{
		background:url(../img/bg-work-1024.jpg) no-repeat center #ff7700;
	}
	#bg-tour{
		background:url(../img/bg-tour-1024.jpg) no-repeat center #fff;
	}
	#work-section #shadow{
		background:url(../img/bg-home-1024.jpg) #000 center;
	}
  
}