@charset "utf-8";
/* CSS Document */

/*
 * Colors
 * brown => #614C3A
 * red => #AA1D19
 * light gray => #d3d4ce
 */
 
.clear {clear: both;}

/*
 * BODY
 */
body {
	background: #d3d4ce;
	font-family: Helvetica, Ariel, sans-serif;
}

#center {
	width: 1008px;
	min-height: 742px;
	margin: 1.5% auto 0 auto;
}
#home #center {
	width: 888px;
}

#logo {
	margin: 26px 0 0 10px;
}

#left-col {
	float: left;
	position:relative;
	min-height: 680px;
	min-width: 116px;
}
#home #left-col {
	display: none;
}

#right-col {
	float: right;
}

#page {
	background: #fff;
	width: 888px;
	min-height: 642px;
	-moz-box-shadow: 1px 1px 15px #b7b8b3;
	-webkit-box-shadow: 1px 1px 15px #b7b8b3;
	box-shadow: 1px 1px 15px #b7b8b3;
	padding: 24px 0;
	position: relative;
}
#home #page {
	overflow: hidden;
}

#main {
	clear: both;
	margin-top: 80px;
}

#main .one-col {
	float: left;
	width: 688px;
	padding: 0 50px 20px 50px;
}

#main-left-col {
	float: left;
	width: 260px;
	padding: 0 50px 20px 50px;
}

#main-left-special {
	float: left;
	width: 520px;
	padding: 0 50px 20px 50px;
}


#main-right-col {
	float: left;
	width: 500px;
	
}

.about-pics,
.press-awards-pics {
	padding-bottom: 10px;
}

.three-pics {
	float: left;
	width: 360px;
}

.three-pics img {
	padding-bottom: 42px;
}

/*
 * TYPOGRAPHY
 */
h1 {
	color: #000;
	font-size: 2em;
}

h1.long-title {
	color: #000;
	font-size: 1.4em;
	line-height: 1.2em;
	margin-bottom: 5px;
}

.lighter {
	font-weight: normal;
	font-style: italic;
}

h2 {
	color: #AA1D19; /* Red sub-heading */
	font-size: 1em;
	font-weight: normal;
	line-height: 1.2em;
	position: relative; /* so secondary nav lines up with the h2 */
}

h3 {
	color: #000;
	font-size: .8em;
	font-weight: normal;
}

p {
	font-size: .8em;
	line-height: 1.2em;
	color: #797a75;
}

.news p {
	padding-top: 15px;
}

.contact p {
	padding-top: 5px;
	line-height: 1.5em;
}

#main-left-col p {padding-bottom: 1.2em;}

ul.credits li {font-size: .8em; line-height: 1.2em;color: #797a75;}
ul.credits li.title {color: #000;}

p.caption { /* photo caption styles */
	font-size: .7em;
}

/*
 * HOME PAGE
 */
ul#mosaic {
	margin: 30px 0 0 25px;
	float: left;
	clear: both;
}

#mosaic li {
	float: left;
}

#mosaic li a {
	height: 118px;
	padding: 5px;
	float: left;
}
/*
 * NAVIGATION
 */
.cmn-toggle-switch {
	display: none;
}

#nav, #nav ul {
	padding: 0 0 0 24px;
	margin: 0 0 0 -10px;
	list-style: none;
}

#nav a {
	display: block;
	text-decoration: none;
	color: #8e8e8e;
	font-size: .9em;
}

#nav a:hover {color: #000;}
#nav a:active {color:#000;}

#nav li {
	float: left;
	padding: 12px 12px 12px 0;
	
}

#nav li a {
	padding: 1px 0 0 14px; /* for the select arrow */
}

#nav li ul {
	position: absolute;
	width: 9em;
	left: -999em;
	background: #614C3A;
	padding: 10px 15px 15px 6px; /* was padding: 4px 15px 6px 6px;*/
	margin: 10px 0 0 6px;
	 /* for IE */
  	filter:alpha(opacity=98);
 	 /* CSS3 standard */
  	opacity:0.98;
  	font-size: .9em;
  	z-index: 1000;
}

#nav li ul li {
	padding: 4px 6px;
}

#nav li ul li a{
	color: #d0cfca;
	padding-left: 6px;
}

#nav li ul li:hover a{
	color: #fff;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#nav .selected {
	color: #000;
	background: url(../_assets/arrow.png) no-repeat 0 0;
}

#nav .heading {
	color: #fff;
	font-weight: bold;
}

/*
 * SECONDARY NAVIGATION
 */

ul#side-nav {
	position: absolute;
	left: -160px;
	top: -8px;
	text-align: right;
}

ul#side-nav a {
	color: #797a75;
	font-size: .8em;
	padding: 5px 8px 3px 8px;
	font-weight: normal;
}

ul#side-nav li {
	margin: 8px 0;
}

ul#side-nav a:hover {
	color: #fff;
	background: #614C3A; /* brown rectangle */
	text-decoration: none;
}

ul#side-nav a.selected {
	color: #fff;
	background: #614C3A;
}

.nav-align {
	position: relative;
}

/*
 * PAGES
 */

#main .one-col.news{
	float: left;
	width: 420px;
	padding: 0 50px 20px 50px;
}

.entry { /* news blog entry */
	padding: 10px 0 20px 0;
}

.entry img {
	margin-top: 10px;
}

.project-list { /* link to Robert's resume on About page */
	clear: both;
	margin: 30px;
	float: left;
}

.project-list a {
	color:#7fa6c5;
	font-size: .7em;
}

.project-list a:hover {
	color:#237fb4;
	text-decoration: none;
}

#main a {
	color:#7fa6c5;
	font-weight: bold;
}

#main a:hover {
	color:#237fb4;
	text-decoration: none;
}

.contact #main-left-col{
	float: left;
	width: 180px;
	padding: 0;
	padding: 0 0 10px 50px;
}

.contact #main-right-col {
	float: left;
	width: 520px;
	margin-top: 38px;	
}

.contact-note {
	clear: both;
	margin: 10px 0 0 60px;
	font-size: .8em;
	position: absolute;
	bottom: 100px;
}

.thumbs-landing { /* films landing page */
	clear: both;
	min-height: 140px;
	padding: 18px 0 50px 0;
}

.thumbs-landing li {
	float: left;
	width: 112px;
	margin-right: 15px;
}

.thumbs-landing img {
	margin-bottom: 10px;
}

#main .thumbs-landing li a {
	font-size: .8em;
	line-height: 1.2em;
	color: #797a75;
	font-weight: normal;
	float: left;
}

#main .thumbs-landing li:hover a{
	color: #000;
}

#add {
	margin: 60px 0 80px 0;
}

/* STILLS */
#mobile-stills {
	display: none;
}

/*
 * FOOTER
 */
#footer {
	font-family: Courier, Helvetica, Arial, sans-serif;
	color: #ababaa;
	padding: 15px 0 20px 10px;
	float: left;
}

#footer p {font-size: .6em; color: #ababaa;}

#footer a {
	color: #ababaa;
}

@media screen and (max-width: 1024px) {
  #footer {
    font-size: .8em;
  }
}


/*
 * MOBILE STYLES
 */
@media screen and (max-width: 640px) {
	#home #center,
	#home #page,
	#page,
	#center,
	#nav li {
		width: 100%;
	}
	#center {
		margin: 0;
	}
	#page {
		min-height: 0;
		padding-top: 40px;
	}
	#img-5 {
		display: none;
	}

	#home #left-col {
		display: block;
	}

	#nav {
		width: 100%;
		position: absolute;
		z-index: 2;
		padding: 0;
		box-sizing: border-box;
		left: -100%;
		top: 72px;
		margin: 0;
		max-height: 0;
		overflow: hidden;
		-webkit-transition: left 0s 300ms, max-height 300ms;
		transition: left 0s 300ms, max-height 300ms;
		background: #eaebe5;
	}
	#nav.active {
		left: 0;
		max-height: 100%;
		-webkit-transition: max-height 300ms;
		transition: max-height 300ms;
	}
	#nav .selected {
		background: none;
	}
	#nav li {
		padding-left: 24px;
	}
	#nav > li:first-child {
		margin-top: 20px;
	}
	#nav > li:last-child {
		margin-bottom: 20px;
	}

	#nav li ul {
		position: relative;
		left: 0;
		background: none;
		width: 100%;
	}
	#nav li ul li {
		padding: 6px;
	}
	#nav li ul li a {
		color: #8e8e8e;
		padding-left: 6px;
	}

	#logo {
		position: absolute;
		top: 20px;
		left: 0;
		z-index: 2;
		margin: 0;
	}
	ul#mosaic {
		margin: 56px 30px;
	}
	#mosaic li {
		width: 100%;
	}
	#mosaic li a {
		height: auto;
		padding: 3px 6px 3px 0;
		width: 100%;
	}

	#mosaic li img {
		width: 100%;
		height: auto;
	}

	#mosaic li:nth-child(5) img {
		display: none;
	}

    #link-films {
      margin-top: 30px;
    }

    #link-services {
      position: absolute;
      top: 55px;
    }

	/* MOBILE HAMBURGER MENU */
	.cmn-toggle-switch {
		display: block;
		position: absolute;
		top: 25px;
		right: 0;
		z-index: 2;
		overflow: hidden;
		margin: -20px 0 0;
		padding: 0;
		width: 70px;
		height: 60px;
		font-size: 0;
		text-indent: -9999px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-shadow: none;
		border-radius: none;
		border: none;
		cursor: pointer;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
		float: right;
		background: transparent;
	}

	.cmn-toggle-switch:focus {
		outline: none;
	}
	.cmn-toggle-switch span {
		display: block;
		position: absolute;
		top: 28px;
		left: 18px;
		right: 18px;
		height: 4px;
		background: #000;
	}

	.cmn-toggle-switch span::before,
	.cmn-toggle-switch span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: #000;
		content: "";
	}

	.cmn-toggle-switch span::before {
		top: -10px;
	}

	.cmn-toggle-switch span::after {
		bottom: -10px;
	}

	.cmn-toggle-switch__htx span {
		-webkit-transition: background 0 0.3s;
		transition: background 0 0.3s;
	}

	.cmn-toggle-switch__htx span::before,
	.cmn-toggle-switch__htx span::after {
		-webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
		-webkit-transition-delay: 0.3s, 0;
		transition-delay: 0.3s, 0;
	}

	.cmn-toggle-switch__htx span::before {
		-webkit-transition-property: top, -webkit-transform;
		transition-property: top, transform;
	}

	.cmn-toggle-switch__htx span::after {
		-webkit-transition-property: bottom, -webkit-transform;
		transition-property: bottom, transform;
	}

	/* active state, i.e. menu open */
	.cmn-toggle-switch__htx.active span {
		background: none;
	}

	.cmn-toggle-switch__htx.active span::before {
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.cmn-toggle-switch__htx.active span::after {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.cmn-toggle-switch__htx.active span::before,
	.cmn-toggle-switch__htx.active span::after {
		-webkit-transition-delay: 0, 0.3s;
		transition-delay: 0, 0.3s;
	}


	/* sub pages */
	ul#side-nav {
		position: relative;
		left: 0;
		top: 0;
		text-align: left;
      background-color: #eaebe5;
      padding: 5px 20px;
      margin: 15px -20px 10px -20px;
	}
    ul#side-nav li {
      margin: 12px 0;
    }
	ul#side-nav a {
		color: #797a75;
		padding: 0;
		line-height: 1.2em;
	}
	ul#side-nav a:hover {
		background: none;
		color: #AA1D19;
	}
	ul#side-nav a.selected {
		color: #AA1D19;
		font-size: 1em;
		font-weight: normal;
		line-height: 1.2em;
		background: none;
	}
	#main-left-col {
		float: none;
		width: 100%;
		padding: 0 50px 20px 50px;
		box-sizing: border-box;
	}
	#main-left-col h2 {
		display: none;
	}

	#left-col {
		min-height: 0;
		min-width: 0;
	}

	#main-right-col {
		width: 100%;
	}
	#main a {
		display: block;
	}

	#main p a {
		display: inline;
	}
	.about-pics {
		padding: 0;
		width: 100%;
		height: auto;
		margin-bottom: 6px;
	}
	#main-right-col .credits {
		padding: 0 50px 20px 50px;
	}

	.three-pics {
		width: 100%;
	}

	/* FILM PAGE */
	#main .one-col {
		width: auto;
	}
	.film-page h2 {
		clear: both;
	}
	.film-page .thumbs-landing {
		float: left;
	}
	.film-page .thumbs-landing li {
		margin-bottom: 15px;
	}

	/* POST PRODUCTION SERVICES */
	#main-left-special {
		width: auto;
	}

	/* CONTACT */
	
	.contact #main-left-col {
		float: left;
		width: 100%;
		padding: 0 0 10px 30px;
	}
	.contact #main-right-col {
		display: none;
	}
	#right-col {
		float: none;
	}

	/* TRAILER */
	.trailer {
		width: 100%;
		position: relative;
		height: 0;
		padding-bottom: 56.25%;
	}

	.trailer iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* STILLS */
	#stills {
		display: none;
	}
	#mobile-stills {
		display: block;
		width: 100%;
	}
	#mobile-stills img {
		width: 100%;
		height: auto;
		margin-bottom: 6px;
	}
}