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

/* RESET STYLES */
ol,ul,li { margin:0; padding:0; }
table { border-collapse:collapse; margin:0; padding:0; border-spacing:0; }

/* ELEMENT STYLES */
body,html { margin:0; padding:0; text-align:center; color:#000; background:#000; font-size:16px; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; height:100%; font-family:'redoct-reg',sans-serif; font-weight:normal; letter-spacing:1px;  }

h1,h2 { margin:0; padding:0; }

strong { font-family:'redoct-fat',sans-serif; }

a { color:#000; text-decoration:none; }
a,
a img,
#menubar li,
#navlogo,
.still,
#trigger,
#filter span { transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -webkit-transition:all .25s ease-in-out; }
.credit { transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; }
#name,#megaman,#cvcopy { transition:all 1.0s ease-in; -moz-transition:all 1.0s ease-in; -webkit-transition:all 1.0s ease-in; }
#menubar li:hover,
#filter span:hover { opacity:0.5; cursor:pointer; }


/* HEADER STYLES */
header { background:url('../images/header-bg.gif') #FFFFE8 0 50% no-repeat; background-size:cover; width:100%; max-width:1200px; min-height:400px; text-align:center; margin:0 auto; border-bottom:9px solid #FFFFE8; }
#name { width:613px; height:227px; margin:20px; background:url('../images/luke-wiles.png') 50% 50% no-repeat; position:absolute; opacity:0; top:82px; }
#name.slide { opacity:1; }
#trigger { width:20%; margin:0 40%; height:122px; display:block; background:url('../images/trigger.png') 50% 50% no-repeat; position:relative; top:300px; z-index:9991; cursor:pointer; }
#trigger:hover { opacity:0.5; }


/* NAV STYLES */
nav { margin-top:190px; float:right; }
nav ul { list-style:none; }
nav ul li { text-align:right; }
nav ul li a { display:inline-block; font-size:40px; padding:2px 7px; margin:1px 2px; background:#FFFFE8; line-height:1em; }
nav ul li a.active { background:#971718; cursor:default; }
nav ul li a.active:hover { opacity:1; }


/* CONTENT STYLES */
#content { min-height:600px; width:100%; max-width:1200px; margin:0 auto; /*overflow:hidden;*/ }
#content.smaller { height:500px; overflow:hidden; }

/* FILM GRID */
#grid { width:100%; z-index:9970; }
#grid:after { content:""; display:table; clear:both; }
#filter { width:100%; background:#4B0A0E; font-size:36px; line-height:80px; color:#971718; }
#filter span { color:#971718; }
.film { height:250px; width:33.3333%; float:left; overflow:hidden; position:relative; }
.still { position:absolute; height:100%; width:100%; background:50% 50% no-repeat; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); transform:scale(1,1); -moz-background-size:cover; -webkit-background-size:cover; background-size:cover; /*z-index:-1;*/ }
.film:hover .still { -moz-transform:scale(1.05,1.05); -webkit-transform:scale(1.05,1.05); transform:scale(1.05,1.05); }
.credit.show { opacity:1; }
.credit { background:url('../images/credit-bg75.png') 50% 50% repeat; width:100%; height:250px; position:relative; display:table; opacity:0; }
.credit div { display:table-cell; vertical-align:middle; font-size:14px; color:#FFFFE8; }
.credit div h2 { font-size:18px; }
.credit div p { margin:0; }
.credit div a { margin:1em 0 0; display:inline-block; color:#FFF; }


/* CV & CONTACT STYLES */
#coverup { width:100%; max-width:1200px; min-height:600px; z-index:9980; background:url('../images/bg90.png') 50% 50% repeat; position:absolute; display:none; }
#coverup.showup { display:block; }
#contact { width:100%; height:588px; overflow:hidden; }
#numbers { position:absolute; margin:5%; text-align:left; font-size:39px; line-height:78px; color:#FFFFE8; }
#numbers a { color:#FFFFE8; }
#megaman { display:block; width:400px; height:588px; float:right; position:relative; top:-588px; background:url('../images/mega-man.png') 0 50% no-repeat; }
#megaman:hover { background-image:url('../images/mega-man-blast.png'); opacity:1; }
#cv { width:100%; }
#cvouter { background:url('../images/cv-button.png') 0 100% no-repeat; display:inline-block; padding:0 0 0 150px; height:345px; margin:0 auto; }
#cvcopy { display:inline-block; position:relative; top:0; opacity:0; height:145px; line-height:145px; font-size:39px; color:#FFFFE8;  }
#cvouter:hover { background-image:url('../images/cv-button-hl.png'); }


/* FOOTER STYLES */
footer { background:url('../images/footer-bg.gif') #FFFFE8 100% 0 no-repeat; font-family:'redoct-reg',sans-serif; line-height:1.5em; font-weight:normal; font-size:16px; background-size:cover; width:100%; max-width:1200px; min-height:260px; margin:0 auto; padding:0 0 5%; border-top:9px solid #FFFFE8; }
#biog { width:95%; color:#FFF; padding:0 2.5% 1em; text-align:left; }
#awards { width:95%; max-width:500px; height:111px; background:url('../images/awards.png') 50% 50% no-repeat; background-size:contain; margin:0 auto; }


/* RESPONSIVE STYLES -------------------- */

@media only screen and (max-width:1024px) {
/* FILM GRID */
.film { width:50%; }
}

@media only screen and (max-width:750px) {
/* NAV STYLES */	
nav { margin-top:250px; position:absolute; right:0; }
/* FILM GRID */
#filter { font-size:26px; line-height:80px; }
.film { width:100%; height:350px; }
.credit { height:350px; }
.credit div { font-size:24px; }
.credit div h2 { font-size:36px; }
/* FOOTER STYLES */
footer { font-size:22px; }
#awards { max-width:750px; height:166px; }
}

@media only screen and (max-width:650px) {
/* FILM GRID */
#filter { font-size:23px; }
}

/* FONT STYLES -------------------- */
@font-face {
    font-family:'redoct-fat';
    src:url('/assets/fonts/red_october-fat-webfont.eot');
    src:url('/assets/fonts/red_october-fat-webfont.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/red_october-fat-webfont.woff2') format('woff2'),
        url('/assets/fonts/red_october-fat-webfont.woff') format('woff'),
        url('/assets/fonts/red_october-fat-webfont.ttf') format('truetype'),
        url('/assets/fonts/red_october-fat-webfont.svg#red_octoberfat') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'redoct-reg';
    src:url('/assets/fonts/red_october-regular-webfont.eot');
    src:url('/assets/fonts/red_october-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/red_october-regular-webfont.woff2') format('woff2'),
        url('/assets/fonts/red_october-regular-webfont.woff') format('woff'),
        url('/assets/fonts/red_october-regular-webfont.ttf') format('truetype'),
        url('/assets/fonts/red_october-regular-webfont.svg#red_octoberregular') format('svg');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: 'roboto';
    src: url('../fonts/roboto-condensed-webfont.eot');
    src: url('../fonts/roboto-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/roboto-condensed-webfont.woff2') format('woff2'),
         url('../fonts/roboto-condensed-webfont.woff') format('woff'),
         url('../fonts/roboto-condensed-webfont.ttf') format('truetype'),
         url('../fonts/roboto-condensed-webfont.svg#robotocondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}