root { display: block; }

body { text-rendering:optimizeLegibility; font-family:"Times New Roman", Times, Cambria, serif; margin:0px; background:#f3eeea url('../img/binary.png'); font-size:18px; color:#333333; }

a { color:#BA1820; text-decoration:none }
a:hover { color:#555555; }
a.navLink { font-size:24px; line-height:45px; margin-right:30px; }

h1 { text-align:center; font-style:italic; font-size:18px; position:relative; padding:0px; margin:10px 0px 0px 0px; background-color:#f3eeea; margin-left:auto; margin-right:auto; display:inline-block; padding:0px 10px 0px 10px }
h2 { font-size:21px; }

img { border:0px; }

p { color:#333333; }

svg image { transition: all .6s ease; }
svg image:hover { opacity: 0; }

div#bigFilm { background-color:#000000; position:fixed; top:0px; left:0px; width:100%; height:100%; overflow:hidden; display:none; }
div#filmThumbs { text-align:center; margin:0px 0px 18px 0px; }
div#footer { font-size:16px; text-align:center; margin-top:20px; }
div#home { width:100px; height:50px; float:left; text-align:center; }
div#imgHolder { position:absolute; left:0px; top:0px; width:100%; height:100%; }
div#left { width:656px; float:left; min-height:600px; }
div#main { margin:0px auto; padding:0px 17px 10px; width:946px;}
div#nav { width:846px; height:50px; float:right; }
div#navMobile { height:40px; float:right; display:none; text-align:right; margin-right:20px; margin-top:10px; }
div#phoneClickable { display:none; }
div#phoneNotClickable { }
img#bigImg { max-width:none; }
img#homeButton { cursor:pointer; margin-top:11px; }
img#menuButton { cursor:pointer; }
p#filmDescription {  }

br.navBr { display:none; }
div.contactInfo { padding-top:10px; margin-left:45px; }
div.contactLine { clear:both; height:50px; }
div.filmItem { overflow:hidden; display:none; }
div.heading { height:22px; margin:-18px 0px 18px 0px; border-bottom: double #cccccc; text-align:center; }
div.landingItem { float:left; width:190px; height:200px; margin:0px 10px 10px 0px; padding:10px 10px 5px 10px; text-align:center; opacity:0.0;  }
div.landingSpaceThree { margin-right:0px; }
div.playButton { text-align:center; display:none; }
div.right { width:274px; float:right; }
div.videoHolder { padding:18px 0px 18px 0px; text-align:center; margin:0px auto 0px auto; }
video { max-width:100%; }
img.contactIcon { float:left; clear:left; margin:5px; }
img.filmImg { float:right; max-width:425px; max-height:420px; margin: 0px 0px 18px 18px; position:relative; cursor:pointer; border: #333333 solid 1px; }
img.filmImg:hover { border-color:#BA1820; }
img.filmThumbImg { width:50px; height:50px; cursor:pointer; border: #333333 solid 1px; -moz-user-select: none; -khtml-user-select: none; user-select: none; margin:5px; }
img.filmThumbImg:hover { border-color:#BA1820; }
img.landingImg { border:0px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img.landingImg:hover { filter:none; -webkit-filter: grayscale(0%); }
img.playButton { cursor:pointer; }
img.projectImg { max-width:263px; float:left; margin:0px 18px 18px 0px; border:1px solid #333333; }
p.landingDescription { padding:0px; margin:0px; font-size:16px; font-style:italic; }
p.prevNext { text-align:center; }

.bubbled { background-color:#f8f6f5; border-style: solid; border-color: #dddddd; border-width: 1px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0px 0px 5px #dddddd; margin-bottom:18px; }

.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

.padded { padding: 0px 20px 0px 20px; }

.bigUi { height:20vh; position:absolute; max-width:40vw;  }

/* tablet */
@media (min-device-width:1024px) and (max-width:989px), 
		screen and (max-device-width:480px), 
		(max-device-width:480px) and (orientation:landscape), 
		(min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
	img { max-width: 424px; }
	video { max-width:424px; }
	#flash { max-width: 424px; }
	div#contact { display:inline-block; width:300px; margin:12px 0px 0px 50px; }
	div#desktopFilm { display:none; }
	div#filmThumbs { text-align:center; margin-top:18px; }
	div#home { width:96px; }
	div#languages { display:none; }
	div#left { width:468px; min-height: 0px; float:none; }
	div#main { width:468px; }
	div#nav { width:448px; display:none; margin-bottom:20px; padding-left:20px; background-color:#cccccc; border-style: solid; border-color: #dddddd; border-width: 1px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0px 0px 5px #dddddd; }
	div#navMobile { width:327px; display:inline; }
	
	br.navBr { display:inline; }
	div.canvas { display:none; }
	div.landingItem { margin-right:10px; margin-left:20px; opacity:1.0; filter:alpha(opacity=100); }
	div.landingSpaceThree { margin-right:10px; margin-left:20px; }
	div.landingSpaceEven { margin-left:0px; }	
	div.playButton { display:block; }
	div.right { width:428px; clear:both; float:none; margin-left:auto; margin-right:auto; }
	div.rightContent { width:428px; float:none; margin-left:-20px; }	
	div.video { display:none; }
}

/* phone */
@media (min-device-width:1024px) and (max-width:509px),
       (max-device-width:480px) and (orientation:portrait) {
	img { max-width: 265px; }
	video { max-width: 265px; }
	#flash { max-width:265px; }
	div#contact { display:inline-block; width:265px; margin:0px 0px 0px 0px; }
	div#desktopFilm { display:none; }
	div#filmThumbs { text-align:center; margin-top:18px; }
	div#home { width:92px; }
	div#languages { display:none; }
	div#main { padding:0px 0px 10px 0px; width:306px; }
	div#left { padding:0px 0px 10px 0px; width:306px; float:none; margin-left:auto; margin-right:auto; min-height: 0px; }
	div#nav { width:286px; display:none; margin-bottom:20px; padding-left:20px; background-color:#cccccc; border-style: solid; border-color: #dddddd; border-width: 1px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0px 0px 5px #dddddd; }
	div#navMobile { width:183px; display:inline; }
	div#video { display:none; }
	div.landingItem { margin-left:47px; margin-right:0; opacity:1.0; filter:alpha(opacity=100); }
	div.landingSpaceThree { margin-right:0px; }
	div.landingSpaceEven { margin-right:0px; }
	div.right { width:306px; clear:both; float:none; margin-left:auto; margin-right:auto; }
	div.rightContent { margin-left:0px; width:266px; }
}