body{background: url('images/top_nebula_background.jpg') -400px top no-repeat #000 ; margin: 0px; padding: 0px; overflow-x: hidden; width: 100%; }
.c{clear:both;}
.space30 {margin-bottom:30px;}

/* Global */
.hidden{display: none;}
.full-width-text-pitch{margin-left: 250px; font-family: "Big Shoulders Display", sans-serif; font-size: 40px; font-weight: bold; padding: 40px 0px 20px 0px; text-align: center; width: 100%; color: #fff;}
.full-width-text{ font-family: "Big Shoulders Display", sans-serif; font-size: 40px; font-weight: bold; padding: 40px 0px 20px 0px; text-align: center; width: 100%; color: #fff;}
a, a:visited{color: #2ae3ff; text-decoration: none;}
a:hover{text-decoration: underline;}

/* Header */
.header-background{width: 100%; margin: 0px; min-height:600px; background: #0f0; position: relative; background: url('images/header_background.html') center -200px no-repeat; overflow: hidden;}
.header-grid{min-height: 50px; margin: 50px auto; max-width: 1100px; position: relative;}

/* Logo */
.header-grid .logo{display: grid; grid-template-columns: auto; text-align: center; height: 190px;}
.logo img{width: 700px; position: absolute; left: 50%; margin-left: -350px; top: -90px; z-index: -10;}

/* Menu */
.header-grid .menu{display: grid; grid-template-columns: auto auto auto auto auto auto auto}
.header-grid .menu .menu-item{display: inline-grid; text-align: center; color: #fff; padding-top: 30px; padding-bottom: 20px; font-family: "Big Shoulders Display", sans-serif; font-size: 25px; font-weight: bold;}
.header-grid .menu .menu-item a{color: #fff;}
.header-grid .menu .menu-item a:hover{color: #2ae3ff; text-decoration: none;}
.header-grid .menu .menu-item a.menu-highlight{color:/* #26c8e0*/#f8a922; text-decoration: none;}
.header-grid .menu .menu-item a.menu-highlight:hover{color: #2ae3ff; text-decoration: none;}
.header-grid .menu .menu-image{display: inline-grid; text-align: center;}
.header-grid .menu .menu-image img, .header-grid .menu .menu-image a{border: 0px;}

/* Banner */
.header-grid .banner{height: 500px; background: url('images/header_banner.html'); position: relative; top: -50px; cursor: pointer;}
.header-grid .banner .banner-text{bottom: 20px; left: 60px; color: #fff; font-family: "Big Shoulders Display", sans-serif; font-size: 22px; line-height: 1.3em; font-weight: bold;position: absolute; text-align: center;}
.house-rules-book{position: absolute; width: 511px; height: 529px; background: url('images/book_isolated.html'); z-index: 100;}
.background-characters{position: absolute; width: 1700px; height: 518px; background: url(images/characters_background.png); z-index: -10; top: 70px; margin-left: 50%; left: -850px;}
.foreground-characters{position: absolute; width: 1626px; height: 593px; background: url(images/characters_foreground.png); z-index: 10; top: 240px; margin-left: 50%; left: -860px;}
.pax-ribbon{width: 352px; height: 75px; position:fixed; top: 0px; background: url('images/pax_banner.png');background-size: 100%; z-index: 1000;}
.steam-ribbon{width: 352px; height: 75px; position:fixed; top: 0px; z-index: 1000;}


/* Trailer */
.header-grid .trailer {background: url('images/play_trailer.jpg') center center; height: 400px; cursor: pointer; border: solid #000}
.header-grid .trailer-laurels{margin: 30px 0px;}
.trailer-laurels-mobile{display: none;margin: 30px 0px;}
#trailer-frame{width: 1100px; height: 619px;}

/* enews */
.header-grid .enews {background: #000; min-height: 400px; cursor: pointer; border: solid #000; width: 800px; margin: 40px auto;}

/* rulebook */
.rulebook-link{height: 70px; background: #000; padding-left: 200px; overflow: visible; width: calc(100% - 200px);}
.rulebook-link-image{border: 0px; position: absolute; left: -450px; margin-left: 50%; top: -55px; width: 200px;}
.rulebook-table-of-contents{color: black; margin-top: 30px; width: 548px; height: 411px; margin-left: 105px;}
.rulebook-table-of-contents a{color:black;}
.rulebook-table-of-contents a:hover{color:#fff8d9; text-decoration: none;}
.interactive-highlight{color:#ffa800;}
.rulebook-characters{margin: 0 auto; max-width: 800px; margin-bottom: -20px;}
.rulebook-table-of-contents-container{transform: rotate(5deg); background-image: url('images/rulebook_background.html'); background-repeat: no-repeat; background-position: center; height: 500px;}
    .rulebook-table-of-content-left-logo{float:left; width: calc(50% - 40px); padding: 20px}
    .rulebook-table-of-content-right-text{float:right; width: calc(50% - 60px); padding: 30px 20px 20px 40px;}
.rulebook-house-rules-image{position:absolute; left:-50px; top:-25px; width:25%; border:0px;}
.rulebook-house-rules-first-paragraph{margin-left: 17%; width: 83%;}
.rulebook-left-table{float:left;width:calc(50% - 30px);padding-right:30px;}
.rulebook-right-table{float:right;width:50%;}
.rulebook-left-onethird{float:left;width:calc(33% - 20px);padding-right:20px; text-align:center;}
.header-background .rulebook-container {width: 800px; margin: 0 auto; color: #b9a887; line-height: 1.5em; font-family: "Big Shoulders Display", sans-serif, Arial, sans-serif}
.header-background .rulebook-container .rulebook-section{background: #100b05; margin: 20px 0px; padding: 20px; }
.header-background .rulebook-container .rulebook-section2{background: #100b0500; margin: -50px 0px; padding: 20px; }
.header-background .rulebook-container .rulebook-section .rulebook-title{text-align: center; margin-top: 20px; margin-bottom: 35px;font-size: 2em; font-weight: bold; color: #ffa800; sline-height: 2em;}
.header-background .rulebook-container .rulebook-section .rulebook-body{font-size: 1em; line-height: 1.7em;}
.header-background .rulebook-container .rulebook-section .rulebook-body img.rulebook-body-image-left{float: left; max-width: 300px; padding: 7px 20px 10px 0px;}
.header-background .rulebook-container .rulebook-section .rulebook-body img.rulebook-body-image-right{float: right; max-width: 300px; padding: 7px 20px 10px 0px;}
img.rulebook-body-image-centre{display: block; margin-left: auto; margin-right: auto; width: 50%;}
img.rulebook-body-image-centre2{display: block; margin-left: auto; margin-right: auto; width: 100%; margin-top: 20px; margin-bottom: 20px; border: 1px solid #824e1e;}

img.rulebook-body-image-centre-tile{display: block; margin-left: auto; margin-right: auto; width: 100%;}

.header-background .rulebook-container .rulebook-section .rulebook-body .rulebook-body-title{ font-size: 1.2em;font-weight:bold; color: #ffa800; text-decoration:none; border-width: 0px 0px 1px 0px; border-color: #ffa800; display: initial; border-style: solid;}
.header-background .rulebook-container .rulebook-section .rulebook-body .rulebook-body-subtitle{ font-size: 1.0em;font-weight:bold; }

/* versions aka patches */
.versions-grid{display: grid; grid-template-columns: auto auto auto; width: 1100px; margin: 40px auto; margin-top: 100px;}
.version-item{text-align: center; background: #232323; margin: 20px; min-height: 300px; min-width: 300px; position:relative;}
.version-item img.icon{width: 200px; position:relative; margin: -100px auto;}
.version-item div.content, .version-item li{color: #fff; font-family: "Big Shoulders Display", sans-serif; font-size: 18px; font-weight: bold; width: 100%; text-align: left; margin-top: 10px;}
.version-item div.content{ padding: 20px; margin-top: 80px; }
.version-item .read-more-button{text-align: center; width: 100%;}
.version-item .read-more-button{height: 30px; font-family: "Big Shoulders Display", sans-serif; font-size: 25px; font-weight: bold; background:#2ae3ff; text-align: center; padding: 10px 0px; cursor: pointer;}
.version-item .read-more-button:hover{background:#e70054;}
.version-item .read-more-button a{color: #fff;}
.version-item .read-more-button a:hover{color: #fff; text-decoration: none;}

/* Features */
.features-background{width: 100%; margin: 20px 0px; min-height:100px; background-color:rgba(42, 106, 137, 0.4); position:relative; overflow: auto;}
.features-grid{grid-template-columns: auto auto; grid-gap: 30px;  min-height: 50px; margin: 10px auto 30px auto; max-width: 1100px; position: relative; display: grid; font-family: "Open Sans"; font-size: 25px; color: #fff;}
.features-grid .feature-item-large{font-family: "Big Shoulders Display"; display: inline-grid; font-size: 28px; font-weight: bold; line-height: 1.8em; position:relative; top: 25px;}
.features-grid .feature-item-small{display: inline-grid; font-size: 18px; line-height: 1.5em;}
.mid-nebula-background{position: absolute; width: 2050px; height: 1080px; background: url(images/mid_nebula_background.jpg); z-index: -10; top: 1890px; margin-left: 50%; left: -720px;}
.bottom-nebula-background{position: absolute; width: 1995px; height: 1082px; background: url(images/bottom_nebula_background.jpg); z-index: -10; top: 100%; transform: translateY(-100%); margin-left: 50%; left: -720px;}
.bottom-shuttle-backgorund{position: absolute; width: 2000px; height: 1080px; background: url(images/footer-background.png); z-index: -11; top: 452px; left: 50%; margin-left: -1000px;}
    

/* Body */
.body-background{width: 100%; margin: 0px; min-height:100px; position:relative; overflow: auto; }
.body-grid{min-height: 50px; margin: 50px auto; max-width: 1100px; position: relative; display: grid; grid-template-columns: auto auto; grid-gap: 30px;}
.body-grid .grid-cell{display: inline-grid;}
.body-grid .grid-cell  p{ font-family: "Big Shoulders Display", sans-serif; font-size: 18px; color: #fff; display: block; width: 100%; text-align: center; background: #1e1e1e;line-height: 2em; margin: 0px;}
.body-title{margin: 20px auto 0px auto; min-height: 0px;}
.body-title .desktop-heading{display: block;}
.body-title .mobile-heading{display:none;}

/* News */
.newsletter-grid{display: grid; grid-template-columns: auto auto; grid-gap: 10px; max-width: 1060px; margin: 0px auto; background: #1e1e1e; min-height: 50px; margin-bottom: 30px; color:#fff;padding:20px;}
.newsletter-grid .newsletter-grid-item .title{font-family: "Big Shoulders Display", sans-serif; font-size: 25px; font-weight: bold;}
.newsletter-grid .newsletter-grid-item .subtitle{font-family: "Open Sans"; font-size: 15px;}
.newsletter-grid .newsletter-grid-item input{width:480px; float: right; height: 44px; font-family: "Open Sans"; font-size: 20px; padding-left:20px; border:0px;}
.newsletter-grid .newsletter-grid-item .email-button-mobile{display: none;}
.newsletter-grid .newsletter-grid-item .email-button{width:200px; float: right; margin-top: -1px; height: 47px; cursor: pointer; line-height: 46px; border:0px;  background: #2ae3ff; color:#fff; font-family: "Big Shoulders Display", sans-serif; font-size: 25px; font-weight: bold; text-align:center;}
.newsletter-grid .newsletter-grid-item .email-button:hover{background:#e70054;}
.news-grid{display: grid; grid-template-columns: auto auto auto; grid-gap: 30px; max-width: 1100px; margin: 0px auto; margin-bottom:30px;}
.news-grid .news-item{display: inline-grid; background: #232323; min-height: 225px; background-size: 100%; color: #fff; padding: 300px 20px 0px 20px; }
.news-item .title{font-family: "Big Shoulders Display", sans-serif; font-size: 25px; font-weight: bold; }
.news-item .description{font-family: "Open Sans"; font-size: 18px; }
.news-item .read-more-button{height: 30px; font-family: "Big Shoulders Display", sans-serif; font-size: 25px; font-weight: bold; background:#2ae3ff; text-align: center; padding: 10px 0px; cursor: pointer;}
.news-item .read-more-button:hover{background:#e70054;}
.news-item .read-more-button a{color: #fff;}
.news-item .read-more-button a:hover{color: #fff; text-decoration: none;}
/* Socials */
.newsletter-social-grid{display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; max-width: 1060px; margin: 0px auto; min-height: 50px; margin-bottom: 30px; color:#fff;padding:20px;}
.newsletter-social-grid .twitter-tweet{max-width: 320px !important;}

/* Screenshots */
.screenshot-grid{min-height: 50px; margin: 20px auto 0px auto; max-width: 1100px; position: relative; margin-bottom: 0px;}
.screenshot-grid img{width: 100%; margin-bottom: 30px;}
.screenshot-grid-3{width: 100%; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: auto auto; grid-gap: 20px;}
.screenshot-grid-3 img{width: 100%; display: inline-grid;}

/* Footer */
.footer-background{width: 100%; margin: 0px; min-height:100px; position:relative; overflow: auto; background: url('images/footer_background.html') bottom center no-repeat; padding-bottom: 140px;}
.footer-grid{display: grid; grid-template-columns: auto auto auto auto; grid-gap: 80px; min-height: 50px; margin: 50px auto; max-width: 1100px; position: relative;}
.footer-grid .footer-item{display: inline-grid;}
.footer-grid .footer-item-numi{width: 220px;}

.footer-grid .footer-item img{width: 100%; max-width: 200px;}
.footer-text{min-height: 50px; margin: 20px auto; max-width: 860px; position: relative; text-align: center; font-family: "Open Sans"; font-size: 25px; color: #fff;}

/* Roadmap */
.roadmap-text{margin: 20px auto; max-width: 860px; position: relative; text-align: center; font-family: "Open Sans"; font-size: 15px; color: #fff;}
.roadmap-title{font-size: 25px;}
.roadmap-progress-container{width: 100%; border: 1px solid #fff; padding: 5px; margin-bottom :10px;}
.roadmap-progress-bar{background: #8b0036; display: block; height: 100%; padding: 5px; }


@media only screen and (max-width:1100px){ 

    .header-background{width: 100%; margin: 0px; min-height:600px; background: #0f0; position: relative; overflow: auto; background: url('images/header_background.html') center -200px no-repeat; background-size: 200vh;}
    #trailer-frame{width: 100%; height: 100%;}
    .header-grid{margin: 20px auto; margin-bottom: 0px; overflow:hidden;}
    .header-grid .menu .menu-item-mobile{display: none;}
    .header-grid .menu{display: grid; grid-template-columns: auto auto auto auto auto}
    .header-grid .banner{background: url('images/header_banner_mobile.html') top center;}
    .header-grid .banner .banner-text{width: 86vw; margin-top: 340px; left: calc(50% - 43vw); right: auto; bottom: auto;}
    .features-grid {grid-template-columns: auto;grid-gap: 30px;padding: 0px 50px;}
    .body-grid {grid-template-columns:  auto; grid-gap: 30px; padding: 0px 50px;}
    .screenshot-grid{padding: 0px 50px;}
    .screenshot-grid-3{grid-template-columns: auto; padding: 0px 50px; width: auto;}
    .footer-grid{padding: 0px 50px; grid-gap: 20px; grid-template-columns: auto auto;}
    .footer-text{padding: 0px 50px;}
    .full-width-text{ padding: 0px 50px; width: auto; margin-bottom: 30px;}
    .news-grid{grid-template-columns: auto; }
    .news-grid .news-item{width: calc(100% - 100px); padding: 46vw 50px 0px 50px; background-size: calc(100% - 100px) !important; }
    .newsletter-social-grid{grid-template-columns: auto auto; }
    .newsletter-grid{grid-template-columns: auto; }
    .newsletter-grid .newsletter-grid-item{ text-align: center; }
    #email{width: calc(100% - 220px)}
    .trailer-laurels-mobile{display: block; max-width: 80%; margin: 30px auto;}
    .trailer-laurels{display: none;}
    .newsletter-grid .newsletter-grid-item .email-button{display: none;}
    .newsletter-grid .newsletter-grid-item .email-button-mobile{display: block; width:100%; margin-top: -1px; height: 47px; cursor: pointer; line-height: 46px; border:0px;  background: #2ae3ff; color:#fff; font-family: "Big Shoulders Display", sans-serif; font-size: 25px; font-weight: bold; text-align:center;}
    .newsletter-grid .newsletter-grid-item .email-button-mobile:hover{background:#e70054;}
    #email {width: calc(100% - 20px)}
    .newsletter-grid .newsletter-grid-item {padding: 0px 35px;}
    .news-item .title, .newsletter-grid .newsletter-grid-item .title{font-size: 7vw;}
    .news-item .description, .newsletter-grid .newsletter-grid-item .subtitle{font-size: 5vw;}
    .header-grid .enews{width: 100%;}
    .versions-grid{display: grid; grid-template-columns: auto; width: 80%; max-width: 400px; margin: 40px auto; margin-top: 100px;}
    .version-item{text-align: center; background: #232323; margin: 20px 0px; margin-top: 100px; min-height: 300px; min-width: 300px; position:relative;}
    .first-version-item{margin-top: 20px;}
    .header-grid .logo{height: 160px;}
    .logo img { width: 540px; position: absolute; left: 50%; margin-left: -270px; top: -65px; z-index: -10;}

    .full-width-text-pitch{margin: 50px 50px;width: 80%; font-size: 170%; }
    .bottom-shuttle-backgorund{margin-left: -686px; top: 512px;}
    .bottom-nebula-background{left: -524px; top: 9100px;}
    .footer-item{text-align: center;}
    .footer-grid .footer-item-numi{width: auto}
    .background-characters{max-width: 1000px; background: url(images/characters_background_sm.png) no-repeat; left: 50%; margin-left: -500px; top: 10px;}
    .pax-ribbon{width: 235px; height: 50px; position:fixed; top: 0px; background: url('images/pax_banner.png');background-size: 100%; z-index: 1000;}
    .steam-ribbon{width: 235px; height: 50px; position:fixed; top: 0px; z-index: 1000;}
}

@media only screen and (max-width:550px){ 

    

    .rulebook-link{font-size: 5vw !important;}
    .header-background{background-size: 170vh;}
    .header-grid{margin: 20px auto; margin-bottom: 0px; overflow:hidden;}
    .header-grid .banner{top: -10vw; height: 82vw;}
    .screenshot-grid-3, .screenshot-grid, .body-grid, .features-grid{padding: 0px 7vw;}
    .news-grid .news-item {width: calc(100% - 14vw);padding: 52vw 7vw 0px 7vw;background-size: calc(100% - 14vw) !important;}
    .header-grid .menu .menu-image img, .header-grid .menu .menu-image img{height: 120px;}
    .header-grid .banner{background-size: 150%;}
    .header-grid .banner .banner-text {margin-top: 50vw; font-size: 4.5vw; }
    .header-grid .trailer{background-size: 150%; height: 47vw; width: 90%; margin: 0% 5%;}
    .full-width-text{font-size: 6vw; margin-top: 30px; padding: 0px 5vw;}
    .features-grid .feature-item-large{font-size: 5vw;}
    .features-grid .feature-item-small{font-size: 4vw;}
    .body-grid .grid-cell p{font-size: 3.5vw; line-height: 3vw;}
    .footer-text{font-size: 4vw;}
    .footer-background{background-size: 200%; padding-bottom: 80vw;}
    .logo img { width: 340px; position: absolute; left: 50%; margin-left: -170px; top: 0px; z-index: -10;}

    .full-width-text-pitch{margin: 5vw 10vw;width: 80vw; font-size: 130%; }
    .full-width-text-pitch img{max-width: 100%;}
    .bottom-shuttle-backgorund{ width: 1000px; height: 541px; background: url(images/footer-background_sm.png); top: 520px; left: 50%; margin-left: -440px;}
    .bottom-nebula-background{left: -524px; top: 7400px;}
    .background-characters{display: none;}
    .header-grid .logo{height: 120px;}
    .header-background{min-height: 450px;}
    .body-title .desktop-heading{display: none;}
    .body-title .mobile-heading{display:block; max-width: 100%;}
}