@charset "UTF-8";

/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.clearfix:after {
  content:" ";
  display:block;
  clear:both;
}

/** {
	box-sizing: border-box;
	box-sizing: content-box;
}*/

html { height:100%; }
html, body { min-height:100%; height:100%; width:100%; padding:0; margin:0; }

body {
	overflow:scroll;
	overflow-x:hidden; /* for a better mobile scroll */
	/*overflow-y:scroll;*/
	/*-webkit-overflow-scrolling: touch;*/	
	letter-spacing: 0.05em;
	line-height: 1.1;
	-webkit-font-smoothing: antialiased;
	background-color: #404040;
	background-color:#222;
	font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; 
	color: #FFF;
}


a { color:#FFF; transition:all 0.05s; text-decoration:none; }
a:hover { color:#9F0;  /*background-color:#6ED515;  */ }

ol, ul, li { list-style:none; padding:0; margin:0 }

h1 { text-align:center; font-family:'Oswald', sans-serif; font-weight:bold; font-size:40px; color:#fff; }

/*.button { padding:4px; padding-left:10px; padding-right:35px; text-transform:uppercase; letter-spacing:0.1em; font-weight:bold; color:#000; background-color:#FFF; float:left; }
a.button { color:#000; text-decoration:none; }
a.button:hover, .current-page { color:#000; background-color:#9F0; }*/

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

section { clear:both; min-height:100%; /*height:100%;*/ background-color:#222; position:relative; border-top:#1D1D1D 2px solid; /*border-bottom:#000 1px solid;*/ } 
section .content { padding-top:60px; padding-bottom:40px; position:relative; }
.content { width:90%; margin:0 auto; max-width:1200px; }


.gap { height:100vh; /*height:1000px;*/ } /* this initial height pushes content below fold for video load then resized correctly with js */

section.home { height:100vh; height:100%; width:100%; }
section.home .content { height:100vh;  }
section.work { }
section.we-are { /*height:100vh; */background-color:transparent; /*border:80px solid #222;*/ position:relative; }
section.about-us {  }
section.contact { }

section.work,
section.more-work,
section.about-us 
{ min-height:68%; }



.section-title { margin:0 auto; padding:10px 0 10px 0; margin-top:-2px; margin-bottom:5px;
				color:#555; font-family:'Oswald', sans-serif; text-align:left; font-size:50px; font-weight:bold; text-transform:uppercase; /*border-top:#1D1D1D 2px solid;*/ }
.section-title.sub { padding-top:24px; }
section.we-are .block { position:absolute; background-color:#222; }
section.we-are .header-block { height:140px; width:100%; }
section.we-are .bottom-block { height:50px; width:100%; bottom:0px; }
section.we-are .left-block { left:0; height:100%; width:5%; }
section.we-are .right-block { right:0; height:100%; width:5%; }


/* ///////////// INTRO ////////////// */

#intro { display:none; }


/* ///////////// NAV ////////////// */

.nav { position:relative; /*width:90%; margin:0 auto;*/ }
.nav li { float:left; margin-left:2px; margin-bottom:2px; background-color:black; 
		  padding:3px; padding-left:6px; font-size:14px; color:white; 
		  text-transform:uppercase; letter-spacing:0.1em; font-weight:bold; }
.nav li:hover, .nav li.current-page { background-color:#9F0; color:black; }
.work .nav li { width:18.2%; }
.work .nav .featured { width:16%; }
.work .nav .supervision { width:28%; }


.back { margin-bottom:20px; }
.back a { padding:4px 25px 4px 25px; background-color:#fff; text-transform:uppercase; font-weight:bold; font-size:12px; color:#000; }
.back a:hover { background-color:#9f0; color:#000; } 

.rnav span { font-weight:bold; }




/* ///////////// HEADER ////////////// */

.header { position:absolute; width:100%; height:70px; background-color:#000; z-index:45; /*top:0px;*/ /*visibility:hidden;*/ }
/*.header.homepage  { position:absolute; }*/
.header .content { position:relative; top:10px; }
.header .logo { position:absolute; z-index:100; } 
.header .logo img { width:110px; height:auto; }
.stuck { position:fixed; bottom:auto; /*top:0px;*/ }
.unstuck { position:absolute; bottom:0px; /*top:auto;*/ }

.topPhones { position:absolute; width:100%; height:40px; top:10px; right:30px; text-align:right; overflow:hidden; }
#LAPhone, #POPhone, #NYPhone { /*position:absolute;*/ /*display:none;*/ margin-bottom:5px; right:30px; letter-spacing:normal; }

.audio-icon { text-align:left; right:-30px; position:absolute; top:9px; width:20px; }
.audio-icon i { font-size:28px; cursor:pointer; }
.audio-icon i:hover { color:#9F0; }
.audio-icon #on { display:none; }
.audio-icon #off { display:none; }

.logo img { width:110px; height:auto; }
  
.mobile { display:none; position:absolute; left:10px; cursor:pointer; z-index:2000;}
.mobile i { font-size:34px; }
.mobile .nav { display:none; position:absolute; z-index:200; left:-12px; padding:10px; background-color:black; }
.mobile .nav li { text-align:left; font-family:FontAwesome; padding:5px; margin-bottom:10px; }
.mobile .nav li a { font-family:'Oswald', sans-serif; font-weight:bold; font-size:30px; color:#fff; }

.down-link { width:100%; height:40px; position:relative; top:-40px; font-size:40px; text-align:center; display:none; }


.hilite { color:#000; background-color:#9F0; }


/* ///////////// SLIDESHOW ////////////// */

#slideshow { position:fixed; top:0px; left:0px; margin:0px; padding:0px; width:100%; height:100%; overflow:hidden; pointer-events:none;}
#slideshow ul, #slideshow li { min-height:100%; height:100%; pointer-events:none;}
.rslides img { min-height:100% !important; height:100% !important; width:auto !important; pointer-events:none;}



/* ///////////// HOME PAGE ////////////// */

.home { pointer-events:none; cursor:default; overflow:hidden; } 
/*.home { background-image:url('images/bg-1600x1000-dark.gif'); } */ /*background-attachment:fixed;*/
.home { 
	background-color:#000;
	background-image:url('images/intro_logo.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center; 
	/*position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%) */
}
		  
.home .headline { position:relative; color:#fff; top:30vh; display:inline-block; width:inherit; pointer-events:none; /*clip:rect(10px, 100px, 200px, 10px);*/ }
.home .headline .headlineP { position:absolute; width:inherit; display:none; max-width:90%; color:#fff; font-family:'Oswald',sans-serif; font-size:70px; /*clip:rect(0px, 1500px, 300px, 0px);*/ }
.home .headline .headlineP div { display:inline-block; background-color:#000; padding:6px 12px; margin-bottom:0px; }
.home .headline { z-index:10; }



/* ///////////// H5 BG VIDEO ////////////// */

.bgVideo { position:fixed; top:-10px; }

.bgVideo video { /* #bgVideoHomeDiv */
    position: fixed;
	min-width:100%;
    min-height:100%;
	width:auto;
    height:auto;
    z-index:-100;
    background-size:cover; 
	 /*display:none;*/
}

.background-video { position:absolute; width:100%; height:100%; min-height:100%; overflow:hidden; }

#studio-video { 
	position: fixed;
	height:100% !important; 
	width:auto !important; 
	min-width:100% !important; 
}


/* ///////////// GRID LAYOUTS ////////////// */

.grid { position:relative; display:block; margin:0 auto; padding:0px; max-width:1200px; } /*margin-top:30px; */
.grid .item { position:relative; padding:0; background-color:#222; float:left; overflow:hidden; transition: all 0.1s; margin-right:2px; margin-bottom:2px; box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
.grid .item { font-family:'Oswald',sans-serif; text-align:center; text-transform:uppercase; }
.grid .item.image img { width:100%; height:auto; }

.grid .item .border { display:none; position:absolute; width:100%; height:100%; border:2px solid #9f0; z-index:20; }

.grid a:hover > .item .border { display:block; }
/*.grid a:hover > .item { background-color:#9F0; color:#000; }*/
.grid a:hover > .item .thumbnail {
	transform: scale(1.05,1.05);
	-ms-transform: scale(1.05,1.05);
	-webkit-transform: scale(1.05,1.05);
	transition: all 0.3s; 
}
.grid a:hover > .item img {    
	filter:grayscale(0);
	-webkit-filter:grayscale(0); 
}








.grid.five-across .item { width:19.7%; height:180px; }
.grid.three-across .item { width:33.1%; } 
.grid.two-across .item { width:49.2%; } 


/* ///////////// WORK ////////////// */

.work { position:relative; } 

.work .grid .item { cursor:pointer; }
.work .grid .item .thumbnail { position:relative; width:100%; padding-bottom: 56.25%; /* 16:9 */ }
.work .grid .item .thumbnail img { position:absolute; top:0; bottom:0; left:0; right:0; width:101%; /*-webkit-transform:translateZ(0);*/ }

.featured-videos { }

.playbutton { position:absolute; top:18%; left:38%; display:none; z-index:10; pointer-events:none; }

.credits { position:absolute; top:60%; left:-120%; pointer-events:none; text-align:left; }
.creditsClient, .creditsTitle { font-family:'Helvetica',sans-serif; text-transform:uppercase; padding-left:5px; font-weight:bold; }
.creditsClient { color:#000; background-color:#9f0; font-size:20px; padding: 4px 25px 4px 25px; }
.creditsTitle {color:#FFF; background-color:#000; font-size:9px; padding:3px 3px 3px 25px; }

.grid a:hover > .item .credits { left:0; transition:all 0.18s; }

.work .grid .item .title { position:absolute; top:60%; pointer-events:none; width:100%; text-align:center; font-family:'Helvetica',sans-serif; text-transform:uppercase; font-weight:bold; }

.work .grid .item p { /* styles in about-us */}



/* ///// IMAGE ////// */

.nocolor { -webkit-filter:grayscale(1); filter:grayscale(1); }
.color { -webkit-filter:grayscale(0); filter:grayscale(0); }

.music-makes { position:fixed; bottom:-4px; left:-210px; pointer-events:none; z-index:20; }





/* ///////////// PREVIEW ///////////////////// */













/* ///////////// WE ARE ////////////// */

.we-are { position:relative; /*background-color:#000; */ }
.we-are .content {  position:absolute; left:0; right:0; z-index:10; }
.we-are .message { width:95%; margin:0 auto; margin-top:7%; /*margin-left:0%; /*margin-left:18%;*/  }
.we-are .message p { font-size:32px; font-family:'Helvetica',sans-serif; line-height:1.2em; font-weight:normal; text-transform:uppercase; letter-spacing:normal; }
.we-are .message p { position:relative; opacity:1; }
.we-are .message p { background-color:#222; padding:9px 20px 9px 20px; display:inline-block; margin-top:0px; margin-bottom:0px; }
.we-are .message p:last-child { margin-top:30px; }
.we-are .message .message-bold { font-weight:bold; color:#9f0; }

.bg-video { position:absolute; width:100%; }
.bg-video video { width:98.4%;  }



/* ///////////// ABOUT US ////////////// */

.about-us .message { margin-top:25px; text-align:center; font-size:16px; font-family:'Helvetica',sans-serif; line-height:2em; /*font-weight:bold;*/  }
.about-us .grid {  }
.about-us .grid .item {  }
.about-us .grid .item img { width:100%; height:auto; }

.about-us .grid .item p, 
.more-work .grid .item p, 
.work .grid .item p 
{ position:absolute; /*top:50%;*/ bottom:2px; text-align:center; background-color:#FFF; color:#000; font-size:24px; padding:5px 25px 5px 25px; margin:0;}

.more-work .grid a:hover > .item p, 
.about-us .grid a:hover > .item p, 
.work .grid a:hover > .item p 
{ color:#000; background-color:#9f0; }

.about-us .grid .item .fa { position:relative; top:-2px; font-size:22px; }

/* .what-we-like .grid .item height set by javascript in index (width * 0.56)  */
.what-we-like  .grid .item .thumbnail img { min-height:100%; }

.what-we-like .credits span, .passion-projects .credits span { font-family:'Helvetica',sans-serif; text-transform:uppercase; padding-left:5px; }
.what-we-like .artist, .passion-projects .title { color:#000; background-color:#9f0; font-weight:bold; font-size:16px; padding: 4px 6px 4px 6px; }
.what-we-like .type, .passion-projects .description { color:#FFF; background-color:#000; font-size:9px; padding:3px; padding-left:6px; position:relative; }
.what-we-like .type { top:-6px; }



/* ///////////// CONTACT ////////////// */

section.contact { }
section.contact .content { background-color:#222; padding-bottom:30px; }
.contact .item { display:block; overflow:hidden; background-color:#555; font-family:'Helvetica',sans-serif;}
.contact .city { font-size:20px; text-align:center; color:#333; color:#fff; padding:10px; }
.contact .info { font-size:14px; padding:25px; }
.contact .map { /*max-height:180px; overflow:hidden;*/  }
.contact .map img { position:relative; /*top:-46px; left:-17%;*/ }
.contact .fa { margin-right:4px; color:#666; }

.contact .video  { position:relative; overflow:hidden; }
.contact .map { position:absolute; top:0px; display:none; }
.contact .map img { object-fit:cover; }
.contact .item:hover > .city {  background-color:#9f0; color:#000; }
.contact .item:hover > .video .map {  display:block; }
.contact .item:hover > div a {  /*color:#000;*/ }
.contact .item:hover > div i {  /*color:#000;*/ }


/* ///////////// BP-STUDIO ////////////// */

.bp-studios .content .section-title { background:none; color:#FFF; }

#bp-studios { background-image:url('bp-studios/bp_studio.jpg'); background-size:cover; background-repeat:no-repeat; }

.bp-studios .thumbnail {  }
.bp-studios .thumbnail img { width:100%; height:auto; border:2px solid #9f0; z-index:20;}
.bp-studios .playbutton { top:48%; left:38%; }


/* ///////////// FILMS ////////////// */

#films { /*background-image:url('images/bg-1600x1000-dark.gif');*/ }
#films .image img { width:100%; height:auto; }
#films .text { text-align:left; padding:20px; text-transform:none; line-height:1.4em; font-size:14px; font-family:'Helvetica',sans-serif; }}
#films .text a { color:#9F0; }
.films { margin-top:25px; }


/* ///////////// RIGHT NAV ////////////// */

#rightNav, #rightNavBG { position:fixed; top:45.5%; right:17px; text-align:right; z-index:45; }
#rightNavBG { width:50px; height:100px; right:0px; background-color:#000; opacity:0.5; }

#rightNav li { font-size:12px; line-height:1.25em; margin:7px;	cursor:pointer; }

#rightNav li .icon { margin-left:6px; }

#rightNav li a { color:#e0e0e0; }
#rightNav li a:hover { color:#e0e0e0; }

#rightNav li a span { background-color:#000; padding:2px; }
#rightNav li a span { -webkit-transition: opacity 0.025s ease-in; transition: opacity 0.025s ease-in; opacity:0; }
#rightNav li:hover > a span { opacity: 1; }

/*.content { width:86%; margin:0 auto; }*/


/* ///////////// FOOTER ////////////// */

#footer {  }
#footer .content { padding-top:50px; padding-bottom:50px; text-align:center; }
#footer .copyright { font-size:12px; color:#CCC; }
#footer svg path { fill:#888; }
#footer svg { height:2em; }


/* ///////////// VIDEOS player ////////////// */


.mainVideo { position:fixed; display:none; top:0px; left:0px; width:100%; height:100%; z-index:49; }
#videoOverlay { position:fixed; top:0px; left:0px; width:100%; min-height:100%; background-color:#000; opacity:0.9; z-index:50; }

.mainVideoWrapper { position:relative; margin:0 auto; width:85.5%; max-width:1400px; z-index:51; overflow:hidden; }

.video-header { margin-top:20px; }
#videoLogo { width:110px; float:left; z-index:55;  }
#mainVideoClose { float:right; position:relative; right:-3px; bottom:-13px; cursor:pointer; z-index:52; }
#credits-button { float:right; position:relative; bottom:-10px; padding:8px; margin-right:16px; background-color:#fff; color:#000; font-size:12px; font-weight:bold; text-transform:uppercase; cursor:pointer; z-index:56; }
#credits-button:hover { background-color:#9f0; color:#000; }

#mainVideoPlayer { position:relative; width:100%!important; height:auto!important; /*padding-bottom: 56.25%;*/ /* 16:9 */ }

.mainvideo-credits { position:absolute; display:none; left:-500px; bottom:40px; padding:12px; background-color:#000; }
.mainvideo-credits div { margin-bottom:6px; font-size:14px; }
.mainvideo-credits #client { font-weight:bold; /*display:inline-block;*/ }
.mainvideo-credits #title { /*display:inline-block;*/  }
.mainvideo-credits #artist { display:inline-block; }
.mainvideo-credits #song-name { display:inline-block; }



/* ///////////// REEL player ////////////// */

.reelVideoContainer { position:relative; margin:0 auto; width:100%; max-width:1400px; }
#reelVideoPlayer { position:relative; width:100%!important; height:auto!important; }

.reelTitle { font-family:'Oswald', sans-serif; font-size:25px; font-weight:bold; color:#555; padding:10px 0 10px 0; margin-bottom:0px; text-align:left; text-transform:uppercase;  }

.reelThumbDiv { width:100%; max-width:1400px; height:30px; z-index:3; white-space:nowrap; overflow:hidden; text-align:center; box-sizing:border-box; white-space:nowrap; }

.reelThumb {
	display:inline-block;
	float:left;
	font-size:10px;
	text-align:center;
	color:#333;
	font-weight:normal;
	height:15px;
	padding-top:2px;
	background:#FFF;
	margin-right:0px;
	border-right:1px solid #000;
	cursor:pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

.reelThumbActive { float:left; background:#9F0; color:#000; font-weight:bold; }

.reelThumbHilite { background:#cf6; }



/* ///////////// VIDEO.JS ////////////// */


.video-js .vjs-tech { position:relative !important; }
/*.vjs-default-skin { color:#9f0 !important; }*/
.vjs-volume-level, .vjs-default-skin .vjs-play-progress { background-color:#9f0 !important; }
/* remove glow */
.vjs-default-skin .vjs-control:focus:before, .vjs-default-skin .vjs-control:hover:before,
.vjs-default-skin .vjs-control:before,
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before,
.vjs-default-skin .vjs-playback-rate .vjs-playback-rate-value,
.vjs-default-skin .vjs-slider-handle:before
{ text-shadow: none !important; }
.vjs-default-skin:hover .vjs-big-play-button, .vjs-default-skin .vjs-big-play-button:focus,
.vjs-default-skin .vjs-slider:focus,
.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus,
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content,
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover,
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before
{ -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }


/*.vjs-control-bar { display:none !important; }*/


.mobile-only { display:none; }
.centered { margin:0 auto; }

/* /////// SCREEN SIZE ADJUSTMENTS //////// */



@media screen and (min-width: 1400px) {
section.we-are .left-block, section.we-are .right-block { width:8%; }
}
@media screen and (min-width: 1500px) {
section.we-are .left-block, section.we-are .right-block { width:11%; }
}
@media screen and (min-width: 1600px) {
section.we-are .left-block, section.we-are .right-block { width:14%; }
}
@media screen and (min-width: 1700px) {
section.we-are .left-block, section.we-are .right-block { width:18%; }
}



@media screen and (max-width: 850px) {
	.nav li { clear:both; width:auto !important; padding:6px !important; }
	.we-are .message { width:90%; margin-left:5%;}
}


@media screen and (max-width: 720px) {
	.content { width:96%; margin:0 auto; }
	.logo img, #videoLogo { width:80px; height:auto; }
	.home { background-image:none; }
	section.home .headline { position:absolute; top:100px; font-size:50px; }
	.topPhones .fa { display:none; }
	.home .headline .headlineP { font-size:50px; }
	.mobile { display:block; }
	.header .logo { left:50px; }
	#rightNav { display:none; }
	.grid.three-across .item , .grid.five-across .item { width:49.6%; }
	.contact .video { display:block; }
	.contact .video video { display:none; }
	.contact .video .map { position:relative; display:block; }
	.contact .info { padding-top:0; position:relative; top:-30px; }
	/* #LAPhone, #POPhone, #NYPhone { right:6px; } */


}

@media screen and (max-width: 550px) {
	.header.homepage  { position:fixed; bottom:auto; }
	.header .logo img { width:80px; height:auto; }
	.home .headline .headlineP { font-size:40px; }
	.rslides li { left:-50% !important; }
	.grid.three-across .item, .grid.five-across .item { width:98%; float:none; }
	.grid a:hover > .item .playbutton { display:block; }
	.we-are .message { width:94%; margin-left:2%; margin-top:14%; }
	.we-are .message p { font-size:15px; line-height:1.2em; }
	.we-are .message p:last-child { margin-top:0; }
	.background-video, video { display:none; }
	.music-makes { width:100px; } .music-makes img { width:100%; height:auto; }
	.section-title { font-size:25px; }
	section .content {padding-top:0px; }
	section.we-are { border:20px solid #222; }
	section.we-are .header-block { height:76px; }
	.mobile-only { display:block; }
	.mainvideo-credits { display:block; top:100px; left:0px; }


}