/* CSS Document */

/*-----------------------------------------------------------------------------------*/
/* Body, Typography and some main Elements
/*-----------------------------------------------------------------------------------*/

html * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; font-smoothing: antialiased; }
body { font-size:13px; color:#000; overflow-x:hidden; }
input, textarea, select, label { font-family: 'IM Fell English', serif; outline:0; border-radius:0; box-shadow:none; }
input:focus, input:hover { outline:0; }
h1, h2, h3, h4, h5, h6 { padding:0; margin:0; line-height:1.3; }
h1 { font-size:48px; }
h2 { font-size:48px; line-height: 1.2; }
h3 { font-size:32px; }
h4 { font-size:24px; }
h5 { font-size:18px; }
h6 { font-size:12px; }
img { display:block; max-width:100%; height:auto; }
ul,ol { margin:0; padding:0; list-style:none; }
a, a:visited, a:active { text-decoration:none; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out; }
a:focus, a:hover { text-decoration:none; outline:0; }
:focus, :hover { text-decoration:none; outline:0; }
p { margin:0 0 15px 0; line-height:1.5; }
.animate { transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; }
.no-animate { transition:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; }



/*-----------------------------------------------------------------------------------*/
/* Structure
/*-----------------------------------------------------------------------------------*/

.container { width: 90%; max-width: 1200px; margin:0 auto; padding-left:0; padding-right:0; }
.view-mobile { display:none; }

html, body {min-height: 100%; text-align: center;}

body {font-family: 'IM Fell English', serif;}

#header {
    position: relative; z-index: 100; width: 100vw; height: 100vh;
    background: #000 url(images/hero.jpg) no-repeat right center / cover;
}
    #header .container {position: relative; height: 100vh;}
    #header #logo {
        width: 400px; height: auto; 
        position: absolute; z-index: 5000; top: 20px; left: 50%; transform: translateX(-50%); 
    }

    #header #kickstarter {
        width: 240px; height: auto; 
        position: absolute; z-index: 5000; bottom: 320px; left: 50%; transform: translateX(-50%); 
    }

    #header .button-holder {position: absolute; z-index: 5000; bottom: 280px; left: 50%; transform: translateX(-50%); }
         #header .button { 
            width: auto; height: auto; 
            display: inline-block; margin: 0 10px; background: #610E2A; color: #fff;
            padding: 0 40px;
            font-size: 24px;
            height: 66px; line-height: 60px; 
            border-radius: 5px;
            border: solid 3px #610E2A;
        }
            #header .button:hover {background: #0A2639; color: #fff; border: solid 3px #fff;}

    #header h1 {
        color: #fff; text-shadow: 2px 2px #000; line-height: 1.1;
        position: absolute; z-index: 5000; bottom: 150px; left: 50%; transform: translateX(-50%);
        width: 640px;
    } 
    
#social {float: right; margin: 20px 30px 0 0; width: 140px;}
    #social li {
        margin-left: 7px; float: left; background: #fff; border-radius: 50%; width: 28px; height: 28px; 
    }
    #social li a {color: #000; line-height: 30px; font-size: 13px;}
    #social li:hover {background: #610E2A;}
    #social li:hover a {color: #fff;}

#book {
    position: relative; z-index: 500; 
    margin-top: -80px; padding: 100px 0 150px 0; background: url(images/book-bg.png) center top / cover;
}
    
    #dice {
        position: absolute; z-index: 5000; top: -40px; left: 50%; transform: translateX(-50%); width: 86px; height: auto;
    } 
    #path-top-left {position: absolute; top: 120px; right: 73%; height: 131px; width: 1695px;}
    #path-top-right {position: absolute; top: 160px; left: 72%; height: 56px; width: 594px;}

    #cover {height: auto; margin: 30px auto; display: block; width: 90%; max-width: 740px;} 

    #book p {max-width: 700px; width: 90%; margin: auto; font-size: 24px; font-style: italic; line-height: 1.25;}


/* stuff **************/
#stuff {
    position: relative; z-index: 600; 
    background: url(images/stuff-bg.png) center top / cover;
    margin-top: -150px; padding: 120px 0 0 0; 
}
#stuff .container {max-width: 1600px;}
    #stuff-slider {float: right; width: 54%; height: auto; position:relative; }
	#stuff-slider .slides li { height: auto; background-repeat:no-repeat; background-position:center center; background-size:cover; }
	#stuff-slider .flex-direction-nav { display:none; }
    #stuff-slider .flex-control-nav { width:100%; bottom: 0; position:absolute; z-index:10; text-align:center; left:0; } 
		#stuff-slider .flex-control-nav li { display:inline-block; vertical-align:middle; margin:0 5px; }
		#stuff-slider .flex-control-nav li a { display:block; width:12px; height:12px; border-radius:50%; text-indent:-9999px; background:#9EC6DD; }
		#stuff-slider .flex-control-nav li .flex-active { background:none; border:2px solid #9EC6DD; }


    #stuff-text {float: left; text-align: left; width: 44%;}
        #stuff #compass {width: 80px; height: auto; margin: 20px auto; display: block;}
        #stuff-text h2 {font-size: 38px; padding: 0 0 20px 0;}
        #stuff-text p {font-size: 18px;}


/* concept-art **************/
#concept-art {position:relative; height: 100vh;}
    /*#concept-art ul li {height: 100vh; width: 100%; background: no-repeat center top / cover;}*/
    
    #concept-art .slides li { height: 100vh; width: 100%; background: no-repeat center top / cover; }

        #concept-art ul li .container {height: 100vh; position: relative; }
        #concept-art ul li p {
            position: absolute; transform: none; bottom: 12vh; left: 0;
            text-align: left; color: #fff; font-style: italic; font-size: 21px;
            text-shadow: 1px 1px #111; max-width: 200px;
        }

    #concept-art .flex-direction-nav { display:none; }
    #concept-art .flex-control-nav { width: 100%; left: 0; bottom: 10vh; position:absolute; z-index:10; text-align:center; } 
        #concept-art .flex-control-nav li { display:inline-block; vertical-align:middle; margin:0 5px; }
        #concept-art .flex-control-nav li a { display:block; width:12px; height:12px; border-radius:50%; text-indent:-9999px; background:#fff; }
        #concept-art .flex-control-nav li .flex-active { background:none; border:2px solid #fff; }




/* features **************/
#features {
    position: relative; z-index: 600; 
    margin-top: -100px; padding: 70px 0 60px 0;
    background: url(images/features-bg.png) center top / 100% 100%;
}
    #features h2 {font-size: 24px; line-height: 1.3; margin: 0 auto 25px auto; width: 100%; max-width: 900px;}
    
    #features .icon {margin: 20px auto; display: block; height: 90px; width: auto;}
    
    #feature .container {position: relative;}
    
    #feature-path-left {position: absolute; top: 700px; left: -17%; height: 602px; width: 444px;}
    #feature-path-right {position: absolute; top: 120px; right: -7%; height: 1097px; width: 244px;}
   
    #features #gun1 {position: absolute; height: 269px; width: auto; left: 11%; top: 50px;}
    #features #gun2 {position: absolute; height: 248px; width: auto; right: 11%; top: 60px;}
    
    #features ul li {width: 29.33%; float: left; margin: 0 2% 30px 2%;}
        #features ul li h3 { font-family: 'IM Fell English SC', serif; font-size: 28px; line-height: 1.1;}
        #features ul li p {/*display: none;*/ font-size: 18px; padding: 10px 0 0 0;}
    
        #features ul li:nth-child(3n+1) {clear: both;}

    #heroes {clear: both; margin: 30px auto 60px auto;}    

/* map **************/
#map {
    position: relative; 
    z-index: 500; 
    margin-top: -120px; background: url(images/map.jpg) center top / cover; height: 1500px;
}


/* instagram **************/
#instagram {
    position: relative; z-index: 800; 
    margin-top: -150px; padding: 80px 0 0 0; 
    background: url(images/team-top-bg.png) center top / 100% auto; 
}
a.ig-icon {color: #00263B; display: block; font-size: 64px; margin: 0 auto 10px auto;}



#team {background: #FAFAFA; padding: 70px 0;}
    #team h2 {background: url(images/swords-team@2x.png) no-repeat center center / 782px auto; padding: 0;}
    #team .container > h3 { text-align: center; padding: 30px 0 0 0; }
    
    #team ul li {font-size: 21px; float: left; width:  29.33%; margin: 50px 2% 0 2%;}
    #team ul.row50 li {width: 46%;}
    
    #team ul li .team-pic {width: 200px; height: 200px; border-radius: 50%; margin: 0 auto 20px auto; display: block;}
    #team ul li h3 {font-family: 'IM Fell English SC', serif; font-size: 28px; color: #00263B; line-height: 1.1;}
    #team ul li h4 {font-size: 21px; color: #00263B; line-height: 1.1; padding: 5px;}
    #team ul li p {font-size: 18px; color: #000; line-height: 1.5;}

    
#signup {background: #FAFAFA url(images/sign-up-bg@2x.png) center top / cover; position: relative; padding: 0 0 70px 0;}
    img#treasure-chest {width: 332px; height: auto; margin: auto; display: block; position: relative; top: -20px;}
    #signup h2 {font-size: 64px; margin: 0 auto 10px auto; line-height: 1;}
    #signup p { padding: 0; margin: 0; font-size: 24px;}

    #path-signup {position: absolute; top: 140px; right: 55%;}

    #mc_embed_signup {margin: 20px auto; width: 90%; max-width: 640px;}
        #mc_embed_signup label {display: none;}
        #mce-EMAIL {
            float: left; width: 69%; font-size: 24px; border-radius: 5px; padding: 1% 2%; border: solid 1px #939393;
        }
        #mc-embedded-subscribe {
            float: right; width: 30%; background: #610E2A; color: #fff; padding: 1%; font-size: 24px; border-radius: 5px;
            border: solid 1px #610E2A;
        }
    #mc-embedded-subscribe:hover {background: #fff; color: #610E2A;} 
    #signup #mce-success-response {clear: both; padding: 20px 0; font-size: 21px;}

footer {background: #000; text-align: center; padding: 40px;}
    footer #footer-logo {width: 320px; height: auto; margin: auto; display: block;}
    footer p { padding: 20px 0 0 0; margin: 0; color: #fff; font-size: 21px; font-family: 'IM Fell English SC', serif;}