/***** General *****/
* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	}
h2, h3, header *, footer * { font-family: OpenSans, Helvetica, sans-serif; }
body { margin: 0; padding: 0; color: #ccc; background: #000 url('../images/bg_content.jpg') no-repeat top center;
	background-size: 100%; background-attachment: fixed; }
.container { width: 960px; margin: 0 auto; }	/* limits width within header, footer & content */
#content { padding-top: 7em; }					/* To make space for the header */
#clear { clear: both; }							/* Ensure the footer does not overlap content */

a { color: #328ec2; text-decoration: none;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
a:hover, a:focus { color: #fff; }
a:active { color: #328ec2; }
.jslink { cursor: pointer; }		/* for anchor links without href */

h2 { margin: 0 0 .5em 0; font-size: 180%; font-weight: bold; }
h3 { margin: 0 0 1em 0; font-size: 150%; font-weight: normal; }
img, input { border: 0; }
p { margin-bottom: 1em; }


/***** Forms *****/
input, select, textarea { width: 100%; border: 1px solid #666; border-radius: 3px; background-color: #999; color: #000; padding: .1em .3em; }
a.button, input, select { font-size: 1em; }
/* @media screen and (-webkit-min-device-pixel-ratio:0) {	/* webkit-specific CSS */
/* 	select { background: url(../images/arrow-down.png) no-repeat right #999; -webkit-appearance: none; }
} */
input[type='submit'], input[type='radio'], input[type='checkbox'] { width: auto; }
a.button, input[type='submit'] { width: auto; border: 0; margin-top: .5em; border-radius: 3px; padding: .5em 1em; color: #fff;
	background: #1C689C; /* Old browsers */
	background: -moz-radial-gradient(20% 0, ellipse cover, #328ec2 10%, #135380 100%); 	/* FF3.6+ */
	background: -webkit-gradient(radial, 20% 0, 0px, center center, 100%, color-stop(0%,#328ec2), color-stop(100%,#135380)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(20% 0, ellipse cover,  #328ec2 0%,#135380 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(20% 0, ellipse cover,  #328ec2 0%,#135380 100%); 	/* Opera 12+ */
	background: -ms-radial-gradient(20% 0, ellipse cover,  #328ec2 0%,#135380 100%); 	/* IE10+ */
	background: radial-gradient(ellipse at 20% 0,  #328ec2 0%,#135380 100%); 			/* W3C */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#328ec2', endColorstr='#135380',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out; }
input:focus, select:focus, textarea:focus { border-color: #007acc; }
a.button:active, input[type='submit']:active { color: #ccc; }
a.button:hover, input[type='submit']:hover { text-shadow: #fff 0 0 3px; cursor: pointer; }
input[type='submit'].disabled { background: #666; cursor: default; }	/*after submit */
dt { margin-bottom: .2em; font-weight: normal; }		/* contains labels */
.clicked { background: #666; }
.req { color: #cc7300; }		/* required */
.hidden { display: none; }
.honey { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }		/* honeypot */
#notice { margin-bottom: 1em; padding: .5em; text-align: center; border: 1px solid #cc7300; border-radius: 3px; }
form em { color: red; font-size: smaller; font-weight: normal; }		/* errors from validation plugin */

fieldset { margin: 2em 0 0 0; border: 0; }
legend { width: 100%; border-bottom: 1px solid #999; padding-right: .5em; font-weight: bold; font-size: 120%; position: relative; }
dl { font-weight: bold; }
dd { margin: 0 0 1em 0; }
dt { margin-top: 1em; }
dt .note { font-weight: normal; font-size: smaller; float: right; }
dd .note { font-weight: normal; font-size: smaller; color: #777; }
div.submit { margin-bottom: 1em; text-align: center; }

::-webkit-input-placeholder { color: #666; }
:-moz-placeholder { color: #666; }  /* Firefox 18- */
::-moz-placeholder { color: #666; }  /* Firefox 19+ */
:-ms-input-placeholder { color: #666; }


/***** Tables *****/
table { border-collapse: collapse; border: 0; width: 100%; margin: 0; padding: 0; }
td { vertical-align: top; }
tr td:first-child { padding-right: 1em; }
/***** CSS Tables *****/
.table { display: table; }
.table .row { display: table-row; }
.table .row div { display: table-cell; vertical-align: top; }
.table .row div:first-child { padding-right: 1em; }


/***** Header *****/
header { width: 100%; position: fixed; z-index: 10; background: #111 url('../images/bg_grey.png'); }
header img.logo { margin-top: 15px; float: left; width: 130px; height: 60px; }
header a { color: #ccc; white-space: nowrap; }
header a:hover { color: #328ec2; text-shadow: 0 0 1px rgba(255,255,255,0.3); }
/***** Searchbar autocomplete *****/
.autocomplete-suggestions { border: 1px solid #333; background: #000; cursor: default; overflow: auto; opacity: .8; border-radius: 3px; }
.autocomplete-suggestion, .autocomplete-no-suggestion { padding: 5px; font-size: smaller; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { color: #328ec2; }
.autocomplete-suggestions strong { font-weight: normal; color: #328ec2; }
/***** Nav *****/
header nav { background: url('../images/bghead.jpg'); width: 960px; height: 76px; padding-top: 45px; }
header nav .search { margin-top: -35px; float: right; color: #333; }
header nav .search a { color: #333;}
header nav .search input#search { width: 15em; background: #111; color: #333; border: #333 solid 1px; font-size: smaller;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out; }
header nav .search:hover { color: #ccc; }
header nav .search:hover a { color: #ccc;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out; }
header nav .search:hover input#search { width: 20em; color: #ccc; border: #666 solid 1px; }
header nav ul { margin: 0; list-style: none; }
header nav>ul { float: right; }
header nav ul li { position: relative; float: left; margin: 0; }
header nav ul li a { margin: 0 0 .5em 2em; display: block; }
header nav ul ul { position: absolute; top: -400px; background: #333; padding: 5px 2px; opacity: 0; /* Hide sub level */
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}
header nav ul li:hover>ul { opacity: 1; top: 100%; }
header nav ul ul a { clear: right; margin: 0px; padding: .3em 1em; }
a.here { color: #328ec2; }
/***** Alert *****/
header .alert { margin: .5em auto; text-align: center; color: red; }


/***** Footer *****/
section { margin-bottom: 80px; }							/* Ensure the footer does not overlap content */
footer { clear: both; width: 100%; position: fixed; bottom: 0px; background: #333 url('../images/bg_grey.png'); }
footer .footer { margin: 0 auto; background: url('../images/bgfoot.jpg'); width: 960px; height: 80px; padding: 1em 0; }	/* footer height */
footer a { color: #999; }
footer a:hover { color: #328ec2; }
/* Social Links */
footer .social { float: right; margin-top: .6em; margin-left: 1em; padding-left: .5em; }
footer .social .dot { margin: 0 .5em; color: #328ec2; }
footer .social a { margin-left: .3em; padding: .3em .5em; background: #333; }
footer .social a span { text-shadow: rgba(0,0,0,.01) 0 0 1px; }
#at20mc { display: none !important; }	/* remove addthis popup on mouseover */
/* Keywords */
footer .kw { text-transform: uppercase; }
footer .kw a:not(:first-child):before { margin: 0 1em; color: #328ec2; content: "\2022"; }


/***** Slides *****/
/* slide settings are in supersized.css */
#supersized { top: 70px !important; }


/***** Tabs *****/
#tabs ul.tab { margin: 0; list-style: none; position: relative; }
#tabs ul.tab li { display: inline-block; margin-left: -4px; }		/* where is the %$&# 4px margin coming from?! */
#tabs ul.tab a { margin: 0; padding: .1em 1em; display: inline-block; color: #fff; font-size: 120%; font-family: OpenSans, Helvetica, sans-serif;
	background: #333; /* Old browsers */
	background-image: -webkit-gradient(radial, 0% 100%, 0, 0% 100%, 255, color-stop(30%, #333), color-stop(100%, #111));
	background-image: -webkit-radial-gradient(left bottom, farthest-corner, #333 30%, #111 100%);
	background-image: -moz-radial-gradient(left bottom, farthest-corner, #333 30%, #111 100%);
	background-image: -ms-radial-gradient(left bottom, farthest-corner, #333 30%, #111 100%);
	background-image: -o-radial-gradient(left bottom, farthest-corner, #333 30%, #111 100%);
	background-image: radial-gradient(farthest-corner at left bottom, #333 30%, #111 100%); }
#tabs ul.tab a:hover { color: #328ec2; }
#tabs ul.tab .ui-tabs-active a { color: #328ec2; background: #000; }
#tabs div.tab_cont { background: url('../images/bg_tab.png') no-repeat top center; padding-top: 2em;  }
#tabs div.tab_cont p:first-child { margin-top: 0; }		/* remove unusual topspace due to <p> margin */


/***** Gallery *****/
.gallery { clear: both; }
.gallery > a { position: relative; overflow: hidden; float: left; margin: 15px 0; height: 133px; }
.gallery a.center { margin: 15px 30px; }				/* calculated to fill .container */
.gallery a, .gallery img { width: 300px; }
.gallery img { height: 133px; }
.gallery h4 { margin: 0; width: 100%; position: absolute; bottom: 0; left: 0; padding: .5em; font-weight: normal; background: rgba(0,0,0,0.5); color: #fff; line-height: 1em; }
.gallery span { display: block; margin: 0; position: absolute; top: 100%; padding: 1em; text-align: right; color: #fff;
	background: rgba(0,0,0,.7); width: 100%; height: 100%; }
.gallery span b { display: block; margin-bottom: .3em; font-size: larger; }
.gallery span ul { text-align: left; margin: 0; padding-left: 1em; }
.gallery img, .gallery h4, .gallery span {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.gallery a:hover h4 { bottom: 100%; }
.gallery a:hover span { top: 0; }
/***** Reel & Text *****/
h2 span { margin-left: 1em; font-weight: normal; font-size: smaller; font-style: italic; }
.gallery .left { float: left; margin-right: 2em; }
.gallery .text { height: 130px; overflow: hidden; }	/* thumbnail height */
.gallery a.more { float: right !important; width: auto; height: auto; margin: 0; }


/***** Play video *****/
.play.right { margin: 0 0 1em 2em; float: right; text-align: right; max-width: 35%; }
.play.right .social { margin: .5em 0 1em 0; }
.play.right .social a { margin-left: .2em; padding: .5em .5em .3em .5em; background: #333; }
.play.right ul { margin-bottom: 0; padding-left: 1em; text-align: left; }
.play.right ul b { margin: -1em; }
.play.right ul li { margin: 0; margin-top: .3em;  }

.video, img.play { margin-bottom: 2em; text-align: center; }
img.play { width: 960px; }
a.close { margin-right: -1em; padding: 0.5em 1em; float: right; font-size: 150%; }
div#novid { padding: 3em; border: 1px solid; }
h2.related { clear: both; margin-top: 2em; }


/**************** PAGE SPECIFIC ****************/

/***** Home *****/
.home #supersized, .home #controls-wrapper { bottom: 260px !important; } 	/* height of bottom panel */
.home .slide_nav { margin-top: -3em !important; }
.home_gal { position: fixed; bottom: 80px; margin-bottom: 10px; width: 100%; }


/***** Work *****/
body#des { background: #000 url('../images/bg_des.jpg') no-repeat top center; }
body#anim { background: #000 url('../images/bg_anim.jpg') no-repeat top center; }
body#vfx { background: #000 url('../images/bg_vfx.jpg') no-repeat top center; }
body#ed { background: #000 url('../images/bg_ed.jpg') no-repeat top center; }
body#mix { background: #000 url('../images/bg_mix.jpg') no-repeat top center; }
body#btv { background: #000 url('../images/bg_btv.jpg') no-repeat top center; }
div.gallery.work { margin-top: 130px; }
/***** Work > Search *****/
.work .search > span { display: block; overflow: hidden; padding-right: 1em; }
.work .search input[type=submit] { margin-top: 0; padding: .1em 1em; float: right; }


/***** Services *****/
body#services { background: #000 url('../images/bg_services.jpg') no-repeat top center; background-attachment: auto; }
h2.services { margin-top: 1em; }
.gallery .text.services { height: auto; }


/***** About > MFX *****/
.about #supersized, .about #controls-wrapper { bottom: 80px !important; } 	/* height of footer */
.about .slide_nav { margin-top: -1em !important; }
.about #slidecaption > div { margin: -2em auto; padding: 1em; color: #fff; background: rgba(0,0,0,0.7); text-shadow: none; }
.about #slidecaption div.big { max-width: 960px; }				/* margin-top: height of header */
.about #slidecaption div.big div.cols {
    -webkit-column-count: 3; 	/* Chrome, Safari, Opera */
    -moz-column-count: 3; 		/* Firefox */
    column-count: 3;
	}
.about #slidecaption div.small { max-width: 700px; }
.about #slidecaption p { margin-bottom: 1em; }
.about #slidecaption p:last-child { margin-bottom: 0; }
.about #slidecaption .title { font-size: 200%; display: block; margin-bottom: .3em !important; }
.about #slidecaption .title b { text-transform: uppercase; }

/***** About > Clients *****/
div.clist { position: relative;
	-moz-column-count: 4; 		/* Firefox */
	-moz-column-gap: 0;
	-webkit-column-count: 4; 	/* Safari and Chrome */
	-webkit-column-gap: 0;
	column-count: 4;
	column-gap: 0;
	}
div.clist ul { list-style-type: none; padding: 0; }
div.clist ul:first-child { margin: 0; }
div.clist ul li b { font-size: larger; }
div.clist ul li { text-indent: -1em; margin-left: 1em; }
/***** About > Jobs *****/
div#vac h4 { margin: 0; }
div#vac hr { border: 0; width: 80%; height: 1px; margin: 2em 0 0 0; color: #666; background-color: #666; }
div#vac a[name] { margin-bottom: 5em; display:block; }
fieldset.software { margin: 0; border: 0; }
fieldset.software legend { margin-right: 1em; width: 8em; border: 0; font-weight: normal; font-size: medium; float: left; }
fieldset.software dd { clear: left; margin: 0; }
fieldset.software dd legend { margin-bottom: .3em; }
fieldset.software dd legend:before { content: '\25B6\0000a0'; visibility: hidden; } /* line indicator */
fieldset.software dd:hover legend:before { content: '\25B6\0000a0'; color: #666; visibility: visible; }
fieldset.software label { margin-right: 1em; font-weight: normal; font-size: smaller; }
/***** About > Contact Us *****/
.table.add div { padding-bottom: 1em; }
.maplinks { margin: .5em 0; padding-right: .5em; font-size: smaller; }
.maplinks a:first-child { float: right; }
.map, .maplinks, td.left.contact { width: 480px; }
td.left.contact { border-right: 1px solid #666; padding: 0; }
td.right.contact { padding-left: 3em; }
.table.contact { width: 100%; }
.table.contact div { padding-bottom: .3em; }
.table.contact .row div:first-child { padding-right: 0em; }