@import url("http://hello.myfonts.net/count/317dc0");

  
@font-face {font-family: 'AvenirLTStd-Heavy';src: url('../fonts/317DC0_0_0.eot');src: url('../fonts/317DC0_0_0-.eot#iefix') format('embedded-opentype'),url('../fonts/317DC0_0_0.woff2') format('woff2'),url('../fonts/317DC0_0_0.woff') format('woff'),url('../fonts/317DC0_0_0.ttf') format('truetype');}


/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}


/* Pix
-------------------------------------------------- */
img {
  max-width: 100%;
}


/* Links
-------------------------------------------------- */
a {
 	color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
}


/* Clearfix
-------------------------------------------------- */
.cf:after {
  content: "";
  display: table;
  clear: both;
}

.clear:before, .clear:after {
    clear: both;
}
.clear:before, .clear:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}


/* Site
-------------------------------------------------- */

html {
  height: 100%;
 font-family: 'AvenirLTStd-Heavy';
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
   font-weight: 400;
}

body {
  font-size: 22px;
  line-height: 34px;
  margin: 0;
  padding: 0;
  background: rgb(255,255,255);
  color:black;
  height: 100%;
  -webkit-font-smoothing: antialiased;
   
   /*-ms-word-break: break-all;
       word-break: break-all;
   word-break: break-word; 
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;*/
}

li {
	list-style: none;
}

::-webkit-scrollbar { 
    display: none; 
}

.mobile {
	display: none!important;
}

.desktop {
	display: block;
}

.hyphenate {
 -ms-word-break: break-all;
     word-break: break-all;

     
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}


/* Nav Alternativ
-------------------------------------------------- */

ul.nav {
	position: fixed;
	top: 26px;
	width: 100%;
	/*transform: translate3d(0px, -50.5386%, 0px);*/
	left: 0;
	right: 0;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	
}

ul.nav h3.left li {
	display: inline-block;
	padding: 0 20px 0 0;
}

ul.nav h3.right li {
	display: inline-block;
	padding: 0 0 15px 0;
}

ul.nav li.black {
	color: black;
}

ul.nav li.black.red {
	color: rgb(255,255,255);
}

h3.left {
/*-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);*/
color: black;
position: absolute;
left: 0px;
/*margin-left: -90px;
margin-top: 10px;*/
}

h3.right {
/*-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);*/
color: black;
position: absolute;
right: 0px;
/*margin-right: 70px;
margin-top: -70px;*/
}

h3.right li {
	display: inline-block;
	padding: 0px 3px;
}

h3.right li img {
	width: 16px;
	height: 20px;
	vertical-align: middle;
	margin-top: -3px;
}

h3.right li a {
	text-decoration: none;
	border: none;
	padding-bottom: 0;
}

h3.right li a:hover {
	text-decoration: none;
	border: none;
	opacity: .7;
	padding-bottom: 0;
}

.language {
	display: inline-block;
	margin-left: 30px;
}





/* Logo
-------------------------------------------------- */

.logo {
	left: 0;
	right: 0;
	top: 18px;
	position: absolute;
	margin: 0 auto;
	/*-webkit-transition: all 100ms ease;
	-moz-transition: all 100ms ease;
	-ms-transition: all 100ms ease;
	-o-transition: all 100ms ease;
	transition: all 100ms ease;*/
	
	padding-bottom: 0px;
}

.logo.black {
	width: 147px;
	height: 40px;
}

/*.logo.red {
	background: url('../images/hb-logo-red.svg') no-repeat;
	width: 110px;
	height: 40px;
}

.logo.black {
	background: url('../images/hb-logo-black.svg') no-repeat;
	width: 110px;
	height: 40px;
}

.redStart.blackApproach.redProductions.blackClients.redSocial .logo, .redStart .logo {
	background: url('../images/hb-logo-red.svg') no-repeat;
	width: 110px;
	height: 40px;
}

.redStart.blackApproach.redProductions.blackClients .logo, .redStart.blackApproach .logo, .redStart.blackApproach.redProductions .logo {
	background: url('../images/hb-logo-black.svg') no-repeat;
	width: 110px;
	height: 40px;
}*/

/* Header
-------------------------------------------------- */
.header {

  /*position: fixed;
   width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  margin: 0 auto;*/
  background: rgb(255,255,255);
  

}



/*.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}*/


.slide {
  overflow: hidden;
  position: relative;

}

.default {
  position: fixed;
}
 
.moveable {
  position: absolute;
  z-index: 9;
}


img.logo {
	width: 130px;
	top: 50px;
	left: 50%;
	margin-left: -70px;
}

.arrow {
	text-align: center;
	margin: 0px 0;
	position: absolute;
	bottom: 50px;
	color: rgb(255,255,255);
	font-size: 32px;
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes example {
    0%   {bottom: 20px;}
    50%  {bottom: 30px;}
    100% {bottom: 20px;}
}



/* Navigation
-------------------------------------------------- */


/* Headings
-------------------------------------------------- */
h1 {
  font-family: 'AvenirLTStd-Heavy';
  font-size: 142px;
  line-height: 154px;
  font-weight: 100;
  margin-bottom: .5em;
  letter-spacing: 2px;
}

h2 {
    font-family: 'AvenirLTStd-Heavy';
    font-size: 42px;
    line-height: 58px;
    font-weight: 100;
    margin-bottom: 0;
    letter-spacing: 2px;
}

h3 {
	font-family: 'AvenirLTStd-Heavy';
	font-size: 13px;
	line-height: 19px;
	font-weight: 400;
	margin-bottom: 0;
	letter-spacing: 4px;
	text-transform: uppercase;
}

h4 {
    font-family: 'AvenirLTStd-Heavy';
    font-size: 26px;
    line-height: 38px;
    font-weight: 100;
    margin-bottom: 0;
    letter-spacing: 2px;

}

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
}

@media only screen 
  and (min-width: 980px) 
  and (max-width: 1440px) {
  	h2 {
  	    font-size: 32px;
  	    line-height: 44px;
  	}
  }



i {
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	margin-bottom: 0;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-style: inherit;
	margin-left: 20px;
	white-space: nowrap;
}

.link {
	display: inline-block;
	border: 1px solid #000;
	padding: 12px 35px;
	margin: 10px 15px;
}

.link:hover {
	text-decoration: underline;
}

h3 a {
	display: inline-block;
	padding-bottom: 3px;
	  letter-spacing: 4px;
	  position: relative;
}

/*h3 a:after {
         position: absolute;
     
      width: 0.45em;
            height: 200%;
     
      background-color:  rgb(243,79,87);
     
      content: "";
     
      text-indent: -9999em;
     
      margin-left: -.27em;}*/


h3 a:hover, h3 a.active {
	border-bottom: 2px solid black;
	padding-bottom: 1px;
}

.contact-btn {
	position: relative;
	text-align: center;
	margin: 0 0 100px 0;
}


/* Main
-------------------------------------------------- */


#wrapper {
	background-color: rgb(255,255,255);
	text-align: center;
}

/*.slide {
	height:100vh;
	min-height: 100%;
	width: 100%;
	display: table; 
	margin: 0 auto;
}

.centering {
	display: table-cell;
	vertical-align: middle;
}*/


/* Start
-------------------------------------------------- */

#start.slide {
	height:100vh;	
	width: 100%;
	margin: 0 auto;
	border: 70px solid rgb(255,255,255);	
}

#start .centering {
	top: 50%;
	-webkit-transform: translate(0%,-50%);
	   -moz-transform: translate(0%,-50%);
	    -ms-transform: translate(0%,-50%);
	     -o-transform: translate(0%,-50%);
	    	transform: translate(0%,-50%);
}

#start h1 {
	color: rgb(255,255,255);
	margin-bottom: 0;
	margin-top: 0;
	
	display: inline;
	/*font-size: 152px;*/
}

#start svg {
	fill: rgb(255,255,255);
}

#start p {
	color: rgb(255,255,255);
	width: 60%;
	margin: 0 auto;
	margin-top: 0px;
}

#start .largelogo {
	width: 350px;	
}

#start .hand-red {
	z-index: 9;
	text-align: center;
	width: 100%;
	display: block;
		margin: 30px 0;
		position: absolute;
		bottom: 50px;
		left: 0;
}

#start .scroll {
	z-index: 9;
	text-align: center;
	margin: 30px 0;
	position: absolute;
	bottom: 50px;
	left: 0;
	width: 100%;		
	color: rgb(255,255,255);	
	font-size: 32px;
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

#start .link {
	display: inline-block;
	border: 2px solid rgb(255,255,255);
	color: rgb(255,255,255);
	padding: 12px 35px;
	margin: 10px 15px;
}



@media only screen 
  and (min-device-width: 0px) 
  and (max-device-width: 736px) 
   { 
  	#start .largelogo {
  		width: 250px;	
  	}
  	#start h1 { 
  		font-size: 62px; 	
  		line-height: 68px;
  	}
  	#start .scroll {
  		bottom: 10px;
  	}
  }
  
  
 @media only screen 
   and (min-width: 980px) 
   and (max-width: 1440px) {
	#start h1 { 
			font-size: 112px;
			
		}
   }


/* Approach
-------------------------------------------------- */

#approach.slide {
	width: 85%;
	margin: 0px auto;
	max-width: 1280px;
	padding-top: 100px;
	margin-top: -100px;
}

#approach .centering {
	margin: 50px 0 50px 0;
}

#approach p {
	margin: 0px auto;
	padding: 0 25px;
}

#approach h2 {
	margin: 20px auto;
	max-width: 800px;
}


#approach .col {
	width: 32%;
	display: inline-block;
	vertical-align: middle;
	margin-top: 100px;
}

#approach .col p {
	width: 100%;
}

#approach .logos {
	text-align: left;
	width: 85%;
	margin: 0 auto;
}

#approach .logos li {

	padding: 0px;
	height: 50px;
	
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	margin: 20px 0;
}

#approach .logos img{
	display:inline-block;
	height: 34px;
}

#approach .logos:after{
	content:""; 
	display: inline-block; 
	width: 100%; 
	height: 0;
}




/* Productions
-------------------------------------------------- */

#productions.slide {
	/*width: 75%;*/
	padding: 0;
	height: inherit;
	margin: 0 auto;
}



#productions li {
	margin-bottom: 0px;
}


#productions p {
	margin-top: 10px;
	line-height: 28px;
}


.reel {
	position: relative;
	margin: 50px auto;
	max-width: 1280px;
	display: block;
	width: 85%;
	margin-bottom: 120px;
}

.vimeo-cover, .reel span {
	cursor: pointer;
}

a.project {
	display: inline-block;
	margin: 50px 0;	
	position: relative;
	width: 100%;
	max-width: 1280px;
}

.project img {
	width: 100%;
	    vertical-align: top;
}


.project span, .reel span {
	position: absolute;
	width: 40%;
	left: 30%;
	color: rgb(255,255,255)!important;
	top: 50%;
	-ms-transform: translate3d(0px, -50.5386%, 0px);
	-webkit-transform: translate3d(0px, -50.5386%, 0px);
	-moz-transform: translate3d(0px, -50.5386%, 0px);
	-o-transform: translate3d(0px, -50.5386%, 0px);
	transform: translate3d(0px, -50.5386%, 0px);
}

.project span h2, .reel span h2 {
	font-size: 132px;
	line-height: 150px;
	
	border-bottom: 11px solid;
	display: inline;
	padding-bottom: 0;
}

.project span p, .reel span p {
	color: rgb(255,255,255);	
}

.caption { 
top: 50%;
-ms-transform: translate3d(0px, -50.5386%, 0px);
-webkit-transform: translate3d(0px, -50.5386%, 0px);
-moz-transform: translate3d(0px, -50.5386%, 0px);
-o-transform: translate3d(0px, -50.5386%, 0px);
transform: translate3d(0px, -50.5386%, 0px);
position: fixed;
width: 100%;
left: 0;
}


/* Productions Overview
-------------------------------------------------- */

#productions-overview {
	text-align: center;
	width: 85%;
	margin: 100px auto 0 auto;
	max-width: 1280px;
}

#productions-overview[data-columns]::before {
	content: '3 .column.size-1of3';
}


@media screen and (max-width: 480px){
	#productions-overview[data-columns]::before {
		content: '2 .column.size-1of2 balanced';
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	#productions-overview[data-columns]::before {
		content: '2 .column.size-1of2 balanced';
	}
}
@media screen and (min-width: 769px) {
	#productions-overview[data-columns]::before {
		content: '3 .column.size-1of3 balanced';
	}
}

/* Again, you’re free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }

#productions-overview  a {
	display: block;
	padding: 30px;
	margin: 0;

}

#productions-overview  a:hover {
	border: 1px solid black;
	padding: 29px;
}

#productions-overview .project span h2 {
    font-size: 42px;
    line-height: 54px;
    border-bottom: 5px solid;
    padding-bottom: 0;
    color: black!important;
}

 #productions-overview .project span p {
 	color: black!important;
 }

#productions-overview .project span {
    position: relative;
    padding-top: 30px;
    display: block;
    width: 100%;
    left: 0;
    -ms-transform: translate3d(0px, 0, 0px);
    -webkit-transform: translate3d(0px, 0, 0px);
    -moz-transform: translate3d(0px, 0, 0px);
    -o-transform: translate3d(0px, 0, 0px);
    transform: translate3d(0px, 0, 0px);
    top: 0;
    color: black!important;
}

#productions-overview .info {
	margin-top: 25px;
	width: 75%;
}

#productions-overview .thumb {
	max-width: 100%;
	max-height: 500px;
	width: initial;
}



/* Productions Detail
-------------------------------------------------- */


.project.hero {
	text-align: center;
	width: 100%;	
	position: relative;
	z-index: 0;
	margin: 0 auto;
	height:100vh;
	/*max-width: 1280px;*/
	min-height: 100%;
	display: table;
	border: 70px solid rgb(255,255,255);
}

.project.hero .centering {
	display: table-cell;
	vertical-align: middle;
}

.project.hero span h2 {	
	border-bottom: 11px solid;
	display: inline;
	padding-bottom: 0;
}


.project span h2.background--light, .info.background--light {
  color: black!important;
}

.project span h2.background--dark, .info.background--dark {
  color: white!important;
}


.projectpage {
   margin: 0 auto;
   padding: 0;
   width: 85%;
   text-align: center;
   margin-top: 0px;
   max-width: 1280px;
 }
 
 
.projectpage img {	
	vertical-align: middle;
	max-height: 850px;
	 padding: 50px 0;
 }
 
 #project li img {
    opacity: 0;
    transition: opacity .3s ease-in;
   
  }
  
  .projectpage li {
   
   } 
   
  #project li span {
 
    
   } 
 
.projectpage .video {
 	padding: 50px 0;
 	vertical-align: middle;
 	max-height: 850px;
 }
 
 
 .info {
 	text-align: center;
 	width: 75%;
 	margin: 0 auto;
 	margin-top: 50px;
 	color: black;
 }
 
/*.credits {
	white-space: normal;
	font-size: 13px;
	line-height: 22px;
}

.credits i {
	font-size: 13px;
	line-height: 22px;
}*/

.credits {
	max-width: 960px;
	margin: 0 auto;
}


.projectpage .center {
	position: relative;
}
 
.projectpage .credits p {
	padding: 100px 0;
	text-align: center;
}

.projectpage .credits a {
	text-decoration: underline;
}

.projectpage .text p {
	padding: 100px 0;
	text-align: left;
}

.projectpage .text p .left, .projectpage .text p .right {
	width: 50%;
	text-align: center;
	display: inline-block;
}

.projectpage .text p .left {

}


/* Contact
-------------------------------------------------- */


#contact.slide {
	height:100vh;
	
	width: 100%;
	display: table; 
	margin: 0 auto;
	z-index: 0;
	border: 70px solid rgb(255,255,255);
}

#contact .centering {
	display: table-cell;
	vertical-align: middle;
}

#contact h2, #contact h3, #contact p {
	color: rgb(255,255,255);
}

#contact h2 {	
	display: inline;
	padding-bottom: 6px;
	font-size: 132px;
	line-height: 150px;
}

#contact h2:hover {	
/*	border-bottom: 11px solid;*/
}

#contact a.link {
	color: rgb(255,255,255);
	border-color: rgb(255,255,255);
}

#contact-us .person p {
	padding: 0 40px;
}

@media only screen 
  and (min-width: 980px) 
  and (max-width: 1440px) {
  	#contact h2 {	
  	
  		font-size: 92px;
  		line-height: 110px;
  	}
  }



/* Footer
-------------------------------------------------- */

footer {
	width: 100%;
	margin: 0 auto;
	display: block;
	left: 0%;
	position: relative;
	max-width: 1280px;
	
}

footer .left, footer .right {
	position: absolute;
	text-align: left;
	bottom: 20px;
}

footer .left {
	width: 60%;
	left: 0;
}

footer .right {
	right: 0;
	text-align: right;
	width: 40%;	
}

footer h3 a {
	margin: 0 6px;
}

.footer.home h3 a:hover, .footer.home h3 a.active {
	
}

.footer.home {

}


  
  
/* ----------- iPad ----------- */
/* Portrait and Landscape */




/* About Us
-------------------------------------------------- */

#about-us {
	text-align: center;
}

#about-us .hero {
	text-align: center;
	width: 100%;
	position: relative;
	z-index: 0;
	margin: 0 auto;
	height:100vh;
	min-height: 100%;
	
	display: table;
	border: 70px solid rgb(255,255,255);
}

#about-us .hero .centering {
	display: table-cell;
	vertical-align: middle;
}

#about-us .hero span h2 {
	color: black;
	border-bottom: 11px solid;
	display: inline;
	padding-bottom: 0;
	color: rgb(255,255,255)!important;
}

#about-us .hero span {
	position: absolute;
	width: 80%;
	left: 10%;
	color: rgb(255,255,255)!important;
	top: 50%;
	-ms-transform: translate3d(0px, -50.5386%, 0px);
	-webkit-transform: translate3d(0px, -50.5386%, 0px);
	-moz-transform: translate3d(0px, -50.5386%, 0px);
	-o-transform: translate3d(0px, -50.5386%, 0px);
	transform: translate3d(0px, -50.5386%, 0px);
}

#about-us .hero span h2 {
	font-size: 132px;
	line-height: 150px;
	color: black;
	border-bottom: 11px solid;
	display: inline;
	padding-bottom: 0;
}

#about-us .approach {
	width: 80%;
	margin: 0 auto;
	padding: 0px 0;
	max-width: 1280px;
	margin-top: -100px;
	padding-top: 100px;
}

#about-us .approach h2 {
	
}

#about-us .approach .col {
	/*width: 32%;
	display: inline-block;
	padding: 30px;
	vertical-align: middle;*/
}

#about-us .approach h2 span {
	border-bottom: 4px solid #000;
}


#about-us h2 {
	margin-bottom: 10px;
	margin-top: 10px;
}

#about-us h3 {
	margin-bottom: 40px;
	margin-top: 10px;
	clear: both;
}


/* Clients
-------------------------------------------------- */

#clients {
	width: 80%;
	background-color: rgb(255,255,255);
	text-align: center;
	margin: 100px auto;
	max-width: 1280px;
}

#clients .centering {
	vertical-align: bottom;
}


#clients .logos {
	text-align: center;
}

#clients .logos img{
	display:inline-block;
	height: 40px;
}

#clients .logos:after{
	content:""; 
	display: inline-block; 
	width: 100%; 
	height: 0;
}

@media only screen 
  and (min-width: 980px) 
  and (max-width: 1440px) {
  	#clients .logos img{
  		height: 35px;
  	}
  }


/* Feed
-------------------------------------------------- */

#feed {
	width: 80%;
	margin: 100px auto;
	max-width: 1280px;
}

#feed h2 {
	margin-top: 20px;
}

#feed #instafeed {
	margin-top: 0px;
	position: relative;
	margin: 0 auto;
	margin-bottom: 100px;
}

#feed .video {
	max-width: 960px;
	margin: 0 auto;
}

#feed a {
		vertical-align: top;
		height: 300px;
		width: 25%;
		display: inline-block;	
		position: relative;	
}

#feed a span {
	position: absolute;
	top: 50%;
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform:translateY(-50%);
	transform: translateY(-50%);
	left: 15%;
	right: 15%;
	display: none;
}

#feed a:hover span {
	display: block;	
	color:  rgb(255,255,255);	
	border-color: rgb(255,255,255);	
}



#feed a img {
	width: 100%;
	vertical-align: top;
	/*-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");*/
	}
	
#feed .square, #feed .portrait {
	
}


/* Friends
-------------------------------------------------- */

#friends.slide {
	width: 80%;
	margin: 100px auto;
	max-width: 1280px;
}

#friends h3 {
	margin-bottom: 30px;
}


#friends h2, #friends h4 {
	
	display: inline-block;
	margin: 0 10px;

}

#friends a:hover {
	border-bottom: 3px solid #000;
}


/* Contact
-------------------------------------------------- */


#contact-us {
	width: 85%;
	margin: -100px auto 150px auto;
	max-width: 1280px;
	padding-top: 100px;
}

#contact-us .col {
	width: 33.333%;
	float: left;

}

#contact-us h2 {
	margin-bottom: 10px;
}

#contact-us h4 {
	margin-bottom: 40px;
}

#contact-us h2 span {
	/*border-bottom: 4px solid #000;*/
}

#contact-us a {
	display: inline-block;
	border: 1px solid #000;
	padding: 12px 35px;
	margin: 10px 15px;
}

#contact-us a:hover {
	text-decoration: underline;
}

#contact-us img.profile {
	width: 40%;
	margin-bottom: 30px;
}

#contact-us #form {
	margin-bottom: 100px;
	width: 50%;
	margin: 0 auto;
	margin-bottom: 100px;

}

#contact-us input, #contact-us textarea, #contact-us button {
	display: inline-block;
	margin: 1%;
	width: 48%;
	padding: 15px;
	border: 1px solid black;
	border-radius: 0px;
	background-color: rgba(255, 255, 255, 0);
	color: black;
	outline: none;
}

#contact-us button:hover {
	text-decoration: underline;
}

#contact-us textarea {
	height: 120px;
	resize: none;
	width: 98%;
}

#contact-us input:focus {
    
}

::-webkit-input-placeholder {
   color: black;
}

:-moz-placeholder { /* Firefox 18- */
   color: black;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: black;  
}

:-ms-input-placeholder {  
   color: black;  
}


#contact-us #address {
	display: inline-block;
	width: 50%;
}




/* ----------- Disclaimer ----------- */

#disclaimer {
	width: 80%;
	max-width: 1280px;
	margin: 100px auto;
}

#disclaimer h3 {
	margin-top: 50px;
	margin-bottom: 25px;
}







/* ----------- iPad ----------- */

@media only screen 
and (min-width : 768px) 
and (max-width : 1023px)  { 
	.mobile {
		display: block!important;
	}
	.desktop {
		display: none;
	}
	h1 {
		font-size: 82px;
		line-height: 92px;
	}
	h2 {
		font-size: 32px;
		line-height: 44px;
	}
	#approach.slide, #productions-overview, .reel {
		max-width: 700px;
		width: 100%;
	}
	#approach .logos {
	    text-align: left;
	}
	#approach .logos li {
	    margin: 15px 25px;
	}
	#clients .logos img {
		margin: 14px;
	}
	.project span, .reel span {
		width: 60%;
		left: 20%;
	}
	.project span h2, .reel span h2 {
	    font-size: 92px;
	    line-height: 112px;
	    border-bottom: 8px solid;
	}
	.reel {
		margin-bottom: 70px;
	}
	#productions-overview {
		margin: 40px auto;
		max-width: 760px;
	}
	footer {
		bottom: 30px;
	}
	footer .right, footer .left {
		width: 100%;
		position: relative;
		text-align: center;
	}
	#contact-us #form {
		 	width: 100%;
		 }
	#contact-us input, #contact-us textarea, #contact-us button {
		width: 100%;
		margin: 6px 0;
    }
    #contact-us .col {
        width: 100%;
        margin-bottom: 100px;
    }
}





/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}


/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
		
}


/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 0px) 
  and (max-width: 767px) 
  { 
  	body {
  		font-size: 14px;
  		line-height: 18px;
  	}
  	.mobile {
  		display: block!important;
  	}
  	.desktop {
  		display: none;
  	}
  	#start.slide {
  		border-width: 20px;
  		border-top-width: 70px;
  		height: 85vh;
  	}
  	#contact h2 {
  	    border-bottom: 7px solid;
  	    font-size: 62px;
  	    line-height: 80px;
  	}
  	footer {
  		left: 0!important;
  		width: 100%;
  	}
  	footer .left, footer .right {
  	    position: relative;
  	    text-align: center;
  	    width: 100%;
  	}
  	#productions-overview {
  		width: 100%;
  	}
  	h2 {
  	    font-size: 24px;
  	    line-height: 36px;
  	}
  	h3 {
  		font-size: 10px;
  		line-height: 16px;
  		letter-spacing: 3px;
  	}
  	h4 {
  	    font-size: 15px;
  	    line-height: 24px;
  	    letter-spacing: 1px;
  	}
  	#about-us .approach {
  		width: 90%;
  		margin-top: -80px;
  	}
  	#approach .centering {
  		margin: 50px 0 50px 0;
  	}
  	#about-us .hero span {
  		width: 50%;
  		left: 25%;
  	}
  	#productions-overview a {
  		padding: 15px;
  	}
  	#productions-overview .project span h2 {
  	    font-size: 24px;
  	    line-height: 32px;
  	    border-bottom: 3px solid;
  	}
  	#productions p {
  	    line-height: 18px;
  	}
  	#productions-overview .info {
  		margin-top: 10px;
  	}
  	#productions-overview .thumb {
  		max-height: 160px;
  	}
  	#productions-overview a:hover {
  		border: none;
  		padding: 15px;
  	}
  	.project span, .reel span {
  		width: 90%;
  		left: 5%;
  	}
  	.project span h2, .reel span h2, #about-us .hero span h2 {
  	    font-size: 52px;
  	    line-height: 64px;
  	    border-bottom: 6px solid;
  	}
  	.project.hero span h2 {
  	    border-bottom: 6px solid;
  	}
  	.project.hero, #about-us .hero {
  	    border: 20px solid rgb(255,255,255);
  	    border-top-width: 70px;
  	    height: 85vh;
  	}
  	.projectpage {
  		width: 90%;
  		margin: 0 auto;
  	}
  	.projectpage img, .projectpage .video {
  		padding: 20px 0;
  	}
  	.projectpage img {
  		
  	}
  	.arrow {
  		display: none;
  	}
  	i {
  	    font-size: 10px;
  	    line-height: 16px;
  	    margin-left: 10px;
  	    letter-spacing: 3px;
  	 }
  	 .projectpage .credits p {
  	 	padding: 30px 0;
  	 	line-height: 22px;
  	 }
  	 .link {
  	     margin: 0px 6px;
  	 }
  	 #productions-overview {
  	 	margin-bottom: 0px;
  	 	margin-top: 60px;
  	 	padding-top: 0px;
  	 }
  	 footer {
  	 	margin-top: 0;
  	 }
  	 .footer .left p {
  	 	margin-right: 0;
  	 	margin-bottom: 10px;
  	 }
  	 #productions-overview .project span {
  	 	padding-top: 10px;
  	 }
  	 .reel {
  	     width: 90%;
  	     margin-bottom: 50px;
  	     margin-top: 30px;
  	 }
  	 #contact.slide {
  	 	margin-top: 0;
  	 }
  	 #about-us h4 span {
  	 	border-bottom: 2px solid #000;
  	 }
  	 #clients {
  	 	margin: 50px auto;
  	 	margin-bottom: -30px;
  	 }
  	 #clients .logos {
  	 	width: 100%;
  	 	text-align: left;
  	 }
  	 #clients .logos img {
  	 	max-height: 35px;
  	 	    max-width: 115px;
  	 	    width: auto;
  	 	    height: auto;
  	 	margin: 15px;
  	 }
  	 #feed {
  	 	display: none;
  	 }
  	 #friends.slide {
  	 	margin: 50px auto;
  	 	width: 90%;
  	 }
  	 #friends h4 {
  	 	margin: 0 6px;
  	 }
  	 #contact-us {
  	 	margin-bottom: 50px
  	 }
  	 #contact-us .col {
  	 	width: 100%;
  	 	float: none;
  	 	margin-bottom: 50px;
  	 }
  	 #contact-us h4 {
  	 	margin-bottom: 20px;
  	 }
  	 #contact-us a, #contact-us .link {
  	 	width: 90%;
  	 }
  	 #approach .logos {
  	    text-align: left;
  	 }
  	 #approach .logos li {
  	 	margin: 10px 20px;
  	 }
  	
  	 #contact.slide {
  	 	border-width: 20px;
  	 	height: 85vh;
  	 }
  	 #contact-us #form {
  	 	width: 100%;
  	 }
  	 #contact-us input, #contact-us textarea, #contact-us button {
  	 	width: 100%;
  	 	margin: 6px 0;
  	 }
  	 .footer .follow {
  	 	display: none!important;
  	 }
  	 .footer {
  	 	bottom: 15px;
  	 	margin-top: 50px;
  	 }
  	 
  }


/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}




@media only screen 
  and (min-width: 980px) 
  and (max-width: 1440px) {
	#approach.slide, ul.nav, .reel, #productions-overview, .footer.home, .footer, .projectpage, #about-us .approach, #clients, #feed, #friends.slide, #contact-us {
		max-width: 960px;
		width: 100%;
	}
	#productions-overview {
		margin-top: 80px;
		margin-bottom: 0;
	}
	.reel {
		margin-bottom: 90px;
	}
	.projectpage img {
    	max-height: 650px;
	}
	.project span h2, .reel span h2, #about-us .hero span h2 {
    	font-size: 92px;
    	line-height: 110px;
    }
	#feed a {
 		height: 180px;
 	}
 	#contact-us a {
 		padding: 12px 15px;
 	}
 	.link {
 		padding: 12px 25px;
 	}
 	#approach .logos img {
 		 	    height: 27px;
 		 }
 
  
  }




/* Localized */