@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{border: 0;font: inherit;font-size: 100%;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
html,body{font-family: "adobe-garamond-pro",sans-serif;font-weight:300;font-size:14px;}
html{font-size:1em;}

/******************************************************************
01. LAYOUT & GRID STYLES
******************************************************************/
body { font-family:'Bangers', cursive; width:100%; height:100%; padding:0px; margin:0px; background:#000; }
.col1 { width:8.33%; float:left; margin:0px; padding:0px; }
.col2 { width:16.66%; float:left; margin:0px; padding:0px; }
.col3 { width:25%; float:left; margin:0px; padding:0px; }
.col4 { width:33.33%; float:left; margin:0px; padding:0px; }
.col5 { width:41.66%; float:left; margin:0px; padding:0px; }
.col6 { width:50%; float:left; margin:0px; padding:0px; }
.col7 { width:58.33%; float:left; margin:0px; padding:0px; }
.col8 { width:66.66%; float:left; margin:0px; padding:0px; }
.col9 { width:75%; float:left; margin:0px; padding:0px; }
.col10 { width:83.33%; float:left; margin:0px; padding:0px; }
.col11 { width:91.66%; float:left; margin:0px; padding:0px; }
.col12, .row { width:80%; clear:both; float:none; margin:0px auto; padding:0px; position:relative; }
.container { width:100%; float:none; clear:both; position:relative; }
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em; font-family:arial; }
.clr { width:100%; clear:both; height:0px; position:relative; }

/******************************************************************
02. SITE SPECIFIC STYLES
****************************************************  font-family: 'Architects Daughter', cursive;  **************/

#page { position:absolute; top:3vw; left:50%; background:#404040; width:85%; height:142vw; margin:0px auto; transform:rotate(-2.3deg); }
#page span.pad { display:block; height:100%; position:relative; padding:2vw; color:#fff; }
#page span.pad #copyright { color:#999; font-family: 'Architects Daughter', cursive; font-size:1vw; position:absolute; left:2.4vw; bottom:6vw; }
#main { position:absolute; top:7vw; left:50%; background:#fff; width:74vw; margin:0px auto; transform:rotate(10deg); }
#main span.pad { display:block; height:100%; position:relative; padding:1.5vw 2.2vw; }
#main #menu { border:4px solid #000; background: rgb(255,122,0); background: linear-gradient(90deg, rgba(255,122,0,1) 0%, rgba(255,255,0,1) 100%); }
#main #menu ul { padding:0px 0px 0px .6vw; margin:0px; }
#main #menu ul li { display:inline-block; list-style-type:none; font-size:2vw; padding:0px; margin:0px; }
#main #menu ul li a { font-family:'Bangers',cursive; display:inline-block; text-decoration:none; color:#000; font-size:2vw; padding:.6vw .3vw; }

img#logo { position:absolute; top:4.8vw; left:1vw; display:block; width:46%; height:auto; }
#jeff { position:absolute; top:6.5vw; right:7vw; width:58.5%; }
#jeff span { display:block; position:relative; width:100%; height:100%; }
#jeff span #lefteye { position:absolute; top:8.2vw; left:53.4%; }
#jeff span #righteye { position:absolute; top:9.1vw; left:64%; }
#jeff span .eye { background:#fff; width:4.2vw; height:4.2vw; border-radius:50%; z-index:8; }
#jeff span .eye:after { position:absolute; bottom:50%; right:50%; width:1vw; height:1vw; background:#000; border-radius:50%; content:" "; }
#jeff span img#zombie { display:block; position:absolute; top:0px; left:0px; width:100%; height:auto; z-index:10; }

#main #hero { position:relative; border:4px solid #000; background:url(img/top-panel.png) left top no-repeat; background-size:cover; margin-top:1vw; min-height:30vw; }
#main #hero::before { background:#fff; content:''; position:absolute; bottom:-4.6px; left:-4.6px; width:51.2%; height:10vw; border-right:4px solid #000; border-top:4px solid #000; }

#main #panel1 { width:100%; max-width:100%; margin-top:.5vw; }
#main #split1 { margin-top:-8.8vw; }
#main #split1 .col5, #main #split2 .col5 { width:49%; }
#main #split1 .col2, #main #split2 .col2 { width:2%; }

#main #panel2 { position:relative; border:4px solid #000; margin:0px 0px 0px 0px; background:url(img/tbd2.png) left top no-repeat; background-size:cover; min-height:37.2vw; padding:3vw 0px .5vw 0px; }
#main #panel2 #caption2a { background: linear-gradient(90deg, rgba(255,122,0,1) 0%, rgba(255,255,0,1) 100%); border:4px solid #000; position:absolute; top:-15px; right:-15px; z-index:10; font-family:'Bangers',cursive; font-size:2vw; padding:.7vw 1vw; }
p.bubble { position:relative; width:76%; text-align:center; line-height:1.3em; margin:20px auto; background-color:#fff; border:4px solid #000; border-radius:30px; font-family:'Architects Daughter', cursive; text-transform:uppercase; padding:10px; font-size:1vw; }
p.bubble:before, p.bubble:after { content:' '; position:absolute; width:0; height:0; }
p.speech.left { background:#ffc; }
p.speech.left:before { left:34px; bottom:-24px; border:12px solid; border-color:#000 transparent transparent #000; }
p.speech.left:after { left:38px; bottom:-15px; border:10px solid; border-color:#ffc transparent transparent #ffc; }
p.speech.right:before { right:56px; bottom:-24px; border:12px solid; border-color:#000 transparent transparent #000; }
p.speech.right:after { right:58px; bottom:-15px; border:10px solid; border-color:#fff transparent transparent #fff; }

#main #panel3 { position:relative; border:4px solid #000; margin:9.8vw 0px 0px 0px; background:url(img/tbd3.png) left top no-repeat; background-size:cover; min-height:30vw; text-align:center; }
#main #panel3 h3 { color:#fff; font-family:'Bangers', cursive; font-size:4vw; padding:1vw 0px; }
#main #panel3 a { display:block; width:80%; margin:10px auto; font-family: 'Architects Daughter', cursive; font-size:2vw; padding:1.1vw 0px; text-decoration:none; color:#fff; }
#main #panel3 a.one { background:url(img/button-facebook.png) left top no-repeat; background-size:cover; }
#main #panel3 a.two { background:url(img/button-twitter.png) left top no-repeat; background-size:cover; }
#main #panel3 a.tre { background:url(img/button-steam.png) left top no-repeat; background-size:cover; }
#main #panel3 #caption3a { background: linear-gradient(90deg, rgba(255,122,0,1) 0%, rgba(255,255,0,1) 100%); border:4px solid #000; position:absolute; top:-10px; right:10px; z-index:10; font-family:'Bangers',cursive; font-size:2vw; padding:.7vw 1vw; }
#main #panel3 #caption3b { background:#fff; border:2px solid #000; position:absolute; bottom:10px; right:10px; z-index:10; font-family: 'Architects Daughter', cursive; font-size:1.2vw; padding:.7vw 1vw; }

#main #panel4 { position:relative; border:4px solid #000; margin:1vw 0px 0px 0px; background:#fff; min-height:30vw; overflow:hidden;  }
#main #panel4 span { display:block; position:relative; width:100%; height:100%; }
#main #panel4 .big-images img { display:block;  position:absolute; top:0px; left:0px; width:100%; height:auto; z-index:1; }
#main #panel4 .big-images img.animate { -moz-animation-name:animate; -webkit-animation-name:animate; -moz-animation-duration:.6s; -webkit-animation-duration:.6s;  }
#main #panel4 .sml-images { position:absolute; top:8vw; left:0px; margin-left:-7vw; width:44%; height:auto; }
#main #panel4 .sml-images img { position:relative; display:block; width:100%; height:auto; z-index:2; cursor:pointer; }
#main #panel4 .sml-images img.active { z-index: 3; }
#main #panel4 #caption4a { background: linear-gradient(90deg, rgba(255,122,0,1) 0%, rgba(255,255,0,1) 100%); border:4px solid #000; position:absolute; top:10px; left:10px; z-index:10; font-family:'Bangers',cursive; font-size:2vw; padding:.7vw 1vw; }
#main #panel4 #caption4b { background:#fff; border:2px solid #000; position:absolute; bottom:10px; right:10px; z-index:10; font-family: 'Architects Daughter', cursive; font-size:1.2vw; padding:.7vw 1vw; }

#main #split2 { margin-top:1vw; }
#main #panel5 { position:relative; border:4px solid #000; margin:0px 0px 0px 0px; background:url(img/tbd5.png) left top no-repeat; background-size:cover; min-height:30vw; }
#main #panel5 #caption5a { background: linear-gradient(90deg, rgba(255,122,0,1) 0%, rgba(255,255,0,1) 100%); border:4px solid #000; position:absolute; bottom:10px; left:10px; z-index:10; font-family:'Bangers',cursive; font-size:2vw; padding:.7vw 1vw; }
#main #panel5 a { display:block; position:absolute; top:0px; left:0px; width:100%; height:100%; text-decoration:none; }

#main #panel6 { position:relative; border:4px solid #000; margin:0px 0px 0px 0px; background:url(img/tbd6.png) left top no-repeat; background-size:cover; min-height:30vw; }
#main #panel6 #barcode { position:absolute; right:-4.6px; bottom:-4.6px; width:30%; height:auto; border-left:4px solid #000; border-top:4px solid #000; }
#main #panel6 #barcode img { display:block; width:100%; height:auto; }
#main #panel6 #caption6b { background:#fff; border:2px solid #000; position:absolute; bottom:10px; left:10px; z-index:10; font-family: 'Architects Daughter', cursive; font-size:1.2vw; padding:.7vw 1vw; }

#loading { position:absolute; width:100%; height:100vh; text-align:center; margin:0px; padding:0px; background:#000; color:#fff; z-index:100; }
#loading img { margin-top:50vh; }
#loading #declaration { position:absolute; top:5vw; left:10%; width:80%; text-align:left; display:none; }
#loading #declaration h1 { font-family:'Bangers', cursive; font-size:2vw; padding-bottom:15px;  }
#loading #declaration h1 a#close { float:right; font-size:2vw; text-decoration:none; color:yellow; }
#loading #declaration p { font-family: 'Architects Daughter', cursive; font-size:1vw; }
#svgContainer { display:block; box-sizing:border-box; position:fixed; top:0; right:0; bottom:0; left:0; z-index:10; width:100%; height:100%; pointer-events:none; opacity:1; }
#svgContainer.hidden { transition:opacity 2s; opacity:0; }
#svgContainer line { stroke:white; fill:none; stroke-linecap:round; stroke-linejoin:round; }


@-moz-keyframes animate /*--for firefox--*/{
    from{ -moz-transform:rotate(-16deg); } to{ -moz-transform:rotate(0deg); }                       
}

@-webkit-keyframes animate /*--for webkit--*/{
    from{ -webkit-transform:rotate(-16deg); } to{ -webkit-transform:rotate(0deg); }                       
}

/******************************************************************
03. MOBILE STYLES
******************************************************************/

@media only screen and (max-width: 1170px) {
    #page { transform:rotate(-1.15deg); height:148vw; }
    #main { transform:rotate(5.3deg); }
    #jeff { top:6.5vw; right:10.5vw; width:58%; }
    img#logo { top:4.8vw; left:2vw; width:45%; }
    #jeff span .eye { transform:none; }
}
@media only screen and (max-width: 1070px) {
    #page { transform:rotate(-0.5deg); height:152vw; }
    #main { transform:rotate(2.65deg); }
    #main #menu, #main #panel2, #main #panel3, #main #panel4, #main #panel5, #main #panel6, #main #hero, p.bubble, #main #panel4 #caption4a, #main #panel3 #caption3a, #main #panel4 #caption4b, #main #panel3 #caption3b, #main #panel2 #caption2a, #main #panel6 #caption6b, #main #panel5 #caption5a { border-width:3px; }
    #main #hero::before { border-width:3px; left:-3px; bottom:-3px; }
    #main #panel6 #barcode { border-width:3px; right:-3px; bottom:-3px; }
    #jeff { right:13.5vw; width:56%; }
    img#logo { top:6vw; left:3vw; width:44%; }
    #jeff span .eye { transform:none; }
}
@media only screen and (max-width: 970px) {
    #page { transform:rotate(0deg); height:154vw; }
    #main { transform:rotate(0deg); }
    #jeff { top:8vw; right:16.2vw; width:54%; }
    img#logo { top:14.5vw; left:15vw; width:30%; }
    #jeff span .eye { transform:none; }
    #main #panel5 a.m3 { transform:rotate(-5deg); }
    #main #panel2 #caption2a, #main #panel3 #caption3a { right:5px; top:5px; }
}
@media only screen and (max-width: 770px) {
    #main #split1 { margin-top:1vw; }
    #main #panel3, #main #panel6 { margin-top:1vw; }
    #main #panel2 { height:auto!important; padding-bottom:20px; }
    #main #split1 .col5, #main #split2 .col5 { float:none; width:100%; }
    #main #split1 .col2, #main #split2 .col2 { display:none; }
    #main #hero::before { content:none; }
    #page { height:265vw; }
    #jeff { right:15vw; }
    #jeff span .eye { transform:none; }
    img#logo { top:20vw; left:15vw; width:30%; }
    #main #panel5 { min-height:45vw; }
    #main #panel5 a { font-size:3vw; }
    #main #panel5 a.m1 { top:12vw; }
    #main #panel5 a.m2 { top:19vw; }
    #main #panel5 a.m3 { top:27vw; }
    #main #panel6 { min-height:55vw; }
    #main #panel6 #barcode { width:20%; }
    #main #panel3 { padding-bottom:20px; }
    #main #panel3 a { font-size:3.5vw; padding:2.5vw 0px; text-decoration:none; color:#fff; }

}
@media only screen and (max-width: 670px) {
    #page { height:273vw; }
}
@media only screen and (max-width: 570px) {
    #page { height:280vw; }
}
@media only screen and (max-width: 470px) {
    #page { height:295vw; }
}