body {
    color: #333;
    font: 400 16px/24px "Quicksand", Helvetica, Arial;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    background-color: #f9f9f9
}

.home {
	    overflow: hidden;
}

a, h1, h2, h3, h4, h5, li {
    font-family: 400 35px "Quicksand", Helvetica, Helvetica Neue, Arial;
}
.logo {
    background: url(../img/timhooper.png) no-repeat;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    color: #757575;
    font-size: 32px;
    height: 55px;
    left: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    text-indent: -9999px;
    top: 10px;
    width: 218px;
}

.logo a {
	display:block;
	height: 55px;
	width: 218px;
	
}


/*.logo {
	font-family: 'Ultra', serif;
    background: url(../img/timhooper.png) no-repeat;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    
    color: #757575;
    font-size: 32px;
    height: 55px;
    left: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10px;
    width: 218px;
    line-height: 27px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo a {
	display:block;
	height: 55px;
	width: 218px;
	color: #442920;
    font-size: 32px;
    text-decoration: none;*/
/*    text-shadow: -3px 2px 3px rgba(0, 0, 0, .4);*/
/*	
}*/

.main-nav {
	background-color: #fff;
    height: 72px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 5555
}
.main-nav ul {
    float: right;
    list-style: none;
    margin: -3px 0 0;
    padding-right: 45px;
}
.logo, .logo:hover {
    text-decoration: none;
}
.main-nav li {
    display: inline-block;
    margin: 2em 1em 0;
}
.main-nav li:fist-child {
    padding: 0;
}
.main-nav li, .main-nav li a {
    color: #757575;
    text-decoration: none;
}
.main-nav li.selected, .main-nav li:hover {
    border-bottom: 1px solid #9cbfee;
}

.main-nav li.activeNav {
	border-bottom: 1px solid #9cbfee;
}

.main-nav li:last-child {
	margin-right: 0;
}

.content {
	width: 100%;
    height: 100%;
    margin-top: 72px;
}

.main-img {
	max-width: 100%;
    text-align: center;
    margin: 0 auto;
}

.main-img img {
    width: 100%;
}

.content ul li img {
	position: relative;
	top: 55px;
}

.slide-info {
	position: fixed;
	bottom: 17%;
	left: 30px;
	width: 254px;
}

.slide-info h2 {
	font-size: 28px;
	line-height: 33px;
	color: #c4c2bf;
	font-family: 'Arbutus', Helvetica, Sans-Serif;
	width: 290px;
	font-weight:400;
	margin-bottom: 23px;
}

.slide-info h2.sub {
	color: #fff;
	position: relative;
	top: -23px;
}

.slide-info a {
	top: -12px;
	position: relative;
	
}

.viewReel {

background: #6980a1;
padding: 12px 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:   0 1px 2px #394350, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(142,159,184,0.8); /*top internal highlight*/;
   -webkit-box-shadow: 0 1px 2px #394350, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(142,159,184,0.8); /*top internal highlight*/;
   box-shadow:         0 1px 2px #394350, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(142,159,184,0.8); /*top internal highlight*/;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 22px;
font-family: "Quicksand", Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
font-weight: 600;
z-index: 3;
}

.viewReel:hover {
background: #394350;
color: #ffffff;
border:0;
-moz-box-shadow:   0 1px 2px #161818, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(95,103,114,0.8); /*top internal highlight*/;
   -webkit-box-shadow: 0 1px 2px #161818, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(95,103,114,0.8); /*top internal highlight*/;
   box-shadow:         0 1px 2px #161818, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(95,103,114,0.8); /*top internal highlight*/;
}


.seeStory {

background: #b26454;
padding: 12px 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:   0 1px 2px #31231c, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(193,130,117,0.8); /*top internal highlight*/;
   -webkit-box-shadow: 0 1px 2px #31231c, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(193,130,117,0.8); /*top internal highlight*/;
   box-shadow:         0 1px 2px #31231c, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(193,130,117,0.8); /*top internal highlight*/;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 22px;
font-family: "Quicksand", Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
font-weight: 600;
}

.seeStory:hover {
background: #643d35;
color: #ffffff;
border:0;
-moz-box-shadow:   0 1px 2px #462b25, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(121,87,80,0.8); /*top internal highlight*/;
   -webkit-box-shadow: 0 1px 2px #462b25, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(121,87,80,0.8); /*top internal highlight*/;
   box-shadow:         0 1px 2px #462b25, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(121,87,80,0.8); /*top internal highlight*/;
}

.showWork {

background: #434343;
padding: 12px 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow:   0 1px 2px #333333, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(103,103,103,0.8); /*top internal highlight*/;
   -webkit-box-shadow: 0 1px 2px #333333, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(103,103,103,0.8); /*top internal highlight*/;
   box-shadow:         0 1px 2px #333333, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(103,103,103,0.8); /*top internal highlight*/;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 22px;
font-family: "Quicksand", Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
font-weight: 600;
}

.showWork:hover {
background: #2f2f2f;
color: #ffffff;
border:0;
-moz-box-shadow:   0 1px 2px #242424, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(75,75,75,0.8); /*top internal highlight*/;
   -webkit-box-shadow: 0 1px 2px #242424, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(75,75,75,0.8); /*top internal highlight*/;
   box-shadow:         0 1px 2px #242424, /*bottom external highlight*/
  0 -1px 1px #666, /*top external shadow*/ 
  inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
  inset 0 1px 1px rgba(75,75,75,0.8); /*top internal highlight*/;
}



.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 95%;
}

.reelContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 9999;
}

.fullVideo {
	display:none;
}

.close-btn {
	position: absolute;
	top: 25px;
	right: 25px;
	font-size: 55px;
	color: #fff;
	z-index: 9999;
	background: #333;
	opacity: .8;
	display: block;
	width: 35px;
	height: 35px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	text-indent: 9px;
	line-height: 35px;
	font-size: 25px;
	cursor: pointer;
}

.close-btn:hover {
	opacity: 1.0;
}


.reelContainer iframe,
.reelContainer object,
.reelContainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#workList {
    padding-left: 0;
}

.work-container {
	font-family: 'Pontano Sans', sans-serif;
	padding: 55px 0 100px;
    text-align: center;
}

.work-container ul li {
	list-style: none;
	display: inline-block;
	width: 44%;
	padding: 15px 15px 0 15px;
	margin-right: 15px;
	margin-bottom: 15px;
    vertical-align: top;
    text-align: left;
}

.work-container ul li:hover {
	background-color: #eee;
}
.work-container ul li.active {
	background-color: #eee;
}

.work-container ul li a {
	text-decoration: none;
	border:none;
}

.work-container ul li img {
	float:left;
	margin-right: 10px;
	width: 50%;
	padding: 0 8px 20px 0;
}

.work-container ul li h2 {
	font-size: 1.5em;
	color: #323232;
	padding: 0;
	margin: 0;
}

.work-container ul li h3 {
	font-size: 1em;
	color: #555;
	padding: 0;
	margin: -1px 0 0 0;
}

.work-container ul li h4 {
	font-size: 1em;
	color: #666;
	padding: 0;
	margin: 5px 0 10px;
	font-weight: normal;
}

.work-container ul li p {
	font-size: .8em;
	color: #888;
	padding: 0;
	margin: 0;
	line-height: 16px;
}


#social {
    width: 100%;
    text-align: left;
    height: 60px;
    position: fixed;
    bottom: 0;
    background: #fff;
}

#social ul {
	text-align: right;
    margin-right: 20px;
}

#social ul li {
		display: inline-block;
}

#social ul li a {
	color: #42648a;
	opacity: .8
}

#social ul li a i {
	    font-size: 2em;
}

#social ul li a:hover {
	opacity: 1;
}

#social ul li a#twitter {background-position: 0 0;}
#social ul li a#facebook {background-position: -38px 0;}
#social ul li a#youtube {background-position: -76px 0;}
#social ul li a#instagram {background-position: -114px 0;}
#social ul li a#vimeo {background-position: -152px 0;}
#social ul li a#imdb {background-position: -190px 0;}

.contact .content {
	top: 100px;
}

.contact .main-nav {
	top: 0;
}

#contact {
	font-family: 'Pontano Sans', sans-serif;
	margin: 0px auto 0;
	text-align: center;
    width: 100%;
    max-width: 700px;
    padding: 40px;
}

#contact #agent {
	    display: inline-block;
	text-align: center;
	width: 45%;
	max-width: 500px;
	
}

#contact #agent img {
	width: 100%;
	    max-height: 250px;
}

#contact #agent-b {
	width: 45%;
	max-width: 500px;
	    display: inline-block;
	text-align: center;
	
}

#contact #agent-b img {
	width: 100%;
	    max-height: 250px;
}

#contact #agent .agent-info {
	margin-top: 20px;
}

#contact #agent-b .agent-info {
	margin-top: 38px;
}

#contact h1 {
	margin-bottom: 10px;
	font-size: 1.7em;
	margin-top: 0;
}

#contact h2 {
	font-size: 1.5em;
	margin-top:6px;
	margin-bottom: 0;
}

#contact p {
	margin-top: 6px;
}

#contact a {
	color: #442920;
	text-decoration: none;
	font-size: 1.2em;
}

#contact a:hover {
	color: #6980a1;
}

#contact #social-contact {
	margin-top: 35px;
	float:left;
}

#story {
	font-family: 'Pontano Sans', sans-serif;
	margin: 0px auto 0;
	text-align: center;
	width: 100%;
    padding: 40px 0;
    max-width: 900px;
}

.story-img {
	float: right;
	margin-left: 50px;
}

#story p {
	text-align: left;
}

#mobileNav {
	width: 35px;
	height: 35px;
	position: absolute;
	right: 20px;
	z-index: 888;
	top: 20px;
    display: none;
    text-align: center;
    font-size: 2em;
}

#wideNav {
		
		-webkit-transition: all ease 0.75s;
    -moz-transition: all ease 0.75s;
    -o-transition: all ease 0.75s;
    transition: all ease 0.75s;
}

#wideNav.open {
	    height: 120px;
}

.reel-overlay {
    z-index: 9999;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 1;
    display: none;
}
.reel-container {
    position: relative;
    top: 0;
    left: 0;
    width: 90%;
    height: 80%;
    overflow: hidden;
    /* max-width: 2000px;
      max-height: 1000px;*/
    
    margin: 0 auto;
    -webkit-transition: all ease 0.75s;
    -moz-transition: all ease 0.75s;
    -o-transition: all ease 0.75s;
    transition: all ease 0.75s;
}
.reel-container iframe,
.reel-container object,
.reel-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.reel-container {
      position: relative;
      top: 0;
      left: 0;
      width: 90%;
      height: 90%;
      overflow: hidden;
     /* max-width: 2000px;
      max-height: 1000px;*/
      margin: 0 auto;
}
       
      .reel-container iframe,
      .reel-container object,
      .reel-container embed {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
}

.reel-overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:9999;
    height:100%;
    width:100%;
    background:#000;
    opacity:1;
    display:none;    
}

.desktop-bg {
	display: block;
}

.mob-bg {
	display: none;
}

@media only screen and (max-width: 1024px) {
		.work-container ul li {
		width: 90%;
		float:none;
	}
}

@media only screen and (max-width: 950px) {
	#story {
		    max-width: 90%;
	}
}


@media only screen and (max-width: 800px) {
	#contact {
		max-width: 100%;
		    width: 70%;
	}

	#contact #agent {
		max-width: 100%;
		display: block;
		width: 100%;
	}

	#contact #agent-b {
		max-width: 100%;
		display: block;
		width: 100%;
	}
}

@media only screen and (max-width: 670px) {
	.desktop-bg {
		display: none;
	}

	.mob-bg {
		display: block;
	}

	.content, .main-img {
		     overflow: hidden; 
	}

	#story {
		    padding-bottom: 80px;
	}

	.story-img {
		float: none;
		margin-left: 0px;
	}

	#story p {
		text-align: justify;
	}
}

@media only screen and (max-width : 640px) {
	#mobileNav {
		display: block;
	}
	#wideNav {
		height: 0;
		overflow: hidden;
	}
	
	#mobileNav {
		display:block;
	}
	
	.main-nav ul {
		background: #fff;
		width: 65px;
		height: 120px;
		float: none;
		list-style: none;
		margin: -3px 0 0;
		padding-right: 20px;
		position: absolute;
		right: 0px;
		top: 74px;
		text-align: left;
		padding-left: 13px;
/*		border-right: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		border-left: 1px solid #e5e5e5;*/
	}
	.logo, .logo:hover {
	    text-decoration: none;
	}
	.main-nav li {
	    display: inline-block;
	    margin: 2px 0;
		text-align:right;
	}
	.main-nav li:fist-child {
	    padding: 0;
	}
	.main-nav li, .main-nav li a {
	    color: #757575;
	    text-decoration: none;
		text-align: right;
	}
	.main-nav li.selected, .main-nav li:hover {
	    border-bottom: 1px solid #9cbfee;
	}

	.main-nav li.activeNav {
		border-bottom: 1px solid #9cbfee;
	}
	
	.work-container ul li {
	    width: 90%;
	    margin-right: 0;
	    float: none;
	    padding: 15px;
	}
	.work-container ul li img {
		width: 100%;
	}
	
	.video-container {
		padding-top: 73px;
	}
	
	.work-container ul li h4 {
		margin: -5px 0;
	}
	
	.work-container ul li h3 {
		margin: -1px 0 -5px 0;
	}
	
	#supersized {
	display: block;
	position: fixed !important;
	left: 0;
	top: 72px;
	overflow-y: hidden !important;
	overflow-x: hidden !important;
	z-index: -999;
	height: 100%;
	width: 100%;
	}
	
	#supersized li {
	display: block;
	list-style: none;
	z-index: -30;
	position: fixed;
	overflow-y: hidden !important;
	overflow-x: hidden !important;
	top: 72px;
	left: 0;
	width: 100%;
	height: 100%;
	background: #111;
	}
	
	.slide-info {
	position: fixed;
	bottom: 35px;
	left: 30px;
	width: 254px;
	}
	
	#slidecaption {
		position: fixed;
		bottom: 40px;
		left: 0px;
		top: auto !important;
	}
	
	.slide-info h2 {
	font-size: 20px;
	line-height: 22px;
	width: 180px;
	}
	
	
	
	.viewReel, .seeStory, .showWork {
		font-size: 16px;
	}
	

	
	#contact #agent {
	float: none;
	text-align: center;
	margin-bottom: 50px;
	}
	
	#contact #social-contact {
		width: 100%;
		float: none;
		position:relative;
		left: -15px;
		top: -20px;
	}
	
	#contact #social-contact {
		width: 290px;
		margin: 0 auto;
	}
}