@import url(https://fonts.googleapis.com/css?family=Play|Orbitron:900);
@import url('//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

body {
    float: none;
    line-height: normal;
    color: #fff;
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: "Play", "Helvetica", sans-serif;
    font-weight: 400;
    font-size: 1em;
    text-align: justify;
    line-height: 1.4em;
    -webkit-font-smoothing: antialiased;
    background-color: #000;
    //background: url("images/mainBackground.png") no-repeat top center;
    //background: url("images/mainBackground.png") no-repeat top center, url("images/starBackground.png") repeat;
    background: url("images/starBackground.png") repeat;
}

.bg {
    width: 100%;
    height: 100%;
    background: url(images/mainBackground.png) center top no-repeat;
    position: fixed;
}

/**************** Basic ****************/
p a {
    color: #0c8cc8;
}

p a:hover {
    color: #f7374a;
}

a {
    outline: medium none !important;
}

hr {
    margin: 0;
    border: none;
    border-bottom: solid #074373 5px;
    height: 0;
}

h1 {
    font-size: 1em;
    color: #fff;
    font-family: "Orbitron", "Helvetica", sans-serif;
}

h3 {
    font-size: 20px;
    font-weight: 100;
    color: #1bb7ff;
    font-family: "Play", "Helvetica", sans-serif;
    text-align: center;
    margin:5px 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2em;
}

li {
    padding-left: 1em;
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: #f7374a;
}

.emphasise {
    color: #ffffff;
}

/**************** Basic Component Elements ****************/
.container {
    height: 100%;
    margin: 0 auto;
}

.row {
    margin: 0px -10px;
    padding: 10px 0;
}

.tightRow {
    margin: 0px -5px;
    padding: 5px 0;
}

.column-2, .column-3, .col2third {
    position: relative;
    padding-right: 10px;
    padding-left: 10px;
}

.column-3 {
    padding-right: 5px;
    padding-left: 5px;
}

.section {
    height: auto;
    //width: 100%;
    position: relative;
    //top: 0px;
    //left: 0px;
    margin: 0px;
    padding: 0 20px;
}

.paddedSection {
    margin: 30px 0;
}

.section:after, .section:before, .container:after, .container:before, .row:after, .row:before, .nav:after, .nav:before, .navBar:after, navBar:before {
    display: table;
    content: " ";
}

.container:after, .nav:after, .navBar:after, .section:after, .row:after {
    clear: both;
}


#logo {
    background: url("images/logo.png") no-repeat;
    background-size: contain;
    background-position: center;
    /* height: 206px; */
    margin: 20px auto 0 auto;
    padding-bottom: 39.388%;
    max-width: 523px;
}

/**************** Top Social/Header Bar ****************/

#noscript {
    height: 40px;
    background-color: #400002;
    color: #f7374a;
    text-align: center;
    line-height: 40px;
}

#topheader {
    height: 40px;
    background-color: #000;
}

#social {
    float: right;
    height: 100%;
    clear: right;
    width: 100%;
}

.socialIcon {
    display: block;
    width: 54px;
    height: 60px;
    z-index: 2;
    background: url(images/socialicons.svg) no-repeat;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    transition: margin-top 0.2s;
}

a.socialNavButton {
    font-family: "Orbitron", "Helvetica", sans-serif;
    float: right;
    position: relative;
    z-index: 2;
    margin: 0px;
    padding: 0px 20px;
    font-size: 16px;
    line-height: 40px;

    display:none; //dont show by default
}

a.socialNavButton:hover {
    background-color: #f7374a;
}

a.socialIcon:hover {
    margin-top: 5px;
}


#social ul.socialNav {
    float: right;
}

#social li.socialItem {
    float: left;
    position: relative;
    margin-right: 1px;
    padding-left: inherit;
    text-indent: inherit;
}

#social li.socialItem:before {
    content: "";
}

#socialHappypoly {
    float: left;
    clear: right;
    background-position: 100% 0;
}

#socialFB {
    background-position: 75% 0;
}

#socialTwitter {
    background-position: 50% 0;
}

#socialMail {
    background-position: 25% 0;
}

#socialReddit {
    background-position: 0% 0;
}

/**************** Video ****************/
.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    border: 2px solid #07111b;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**************** Greenlight/OS Section ****************/
.greenLightSection {
    background-color: #28340b;
    margin-bottom: 60px;
}

#greenlightBanner {
    width: 100%;
}

#buyButton {
    width: 100%;
    background: #96e026;
    background-image: -webkit-linear-gradient(top, rgba(131,163,15,1) 5%, rgba(93,115,14,1) 95%);
    background-image: -moz-linear-gradient(top, rgba(131,163,15,1) 5%, rgba(93,115,14,1) 95%);
    background-image: -ms-linear-gradient(top, rgba(131,163,15,1) 5%, rgba(93,115,14,1) 95%);
    background-image: -o-linear-gradient(top, rgba(131,163,15,1) 5%, rgba(93,115,14,1) 95%);
    background-image: linear-gradient(to bottom, rgba(131,163,15,1) 5%, rgba(93,115,14,1) 95%);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 5px;
    font-family: "Orbitron", "Helvetica", sans-serif;
    color: #ffffff;
    font-size: 29px;
    padding: 25px 20px 25px 20px;
    text-decoration: none;
    text-align: center;
}

#buyButton:hover {
    background: #c6ff2b;
    background-image: -webkit-linear-gradient(top,  rgba(164,208,7,1) 5%, rgba(107,135,5,1) 95%);
    background-image: -moz-linear-gradient(top,  rgba(164,208,7,1) 5%, rgba(107,135,5,1) 95%);
    background-image: -ms-linear-gradient(top,  rgba(164,208,7,1) 5%, rgba(107,135,5,1) 95%);
    background-image: -o-linear-gradient(top,  rgba(164,208,7,1) 5%, rgba(107,135,5,1) 95%);
    background-image: linear-gradient(to bottom,  rgba(164,208,7,1) 5%, rgba(107,135,5,1) 95%);
    text-decoration: none;
}

.osIcon {
    font-size: 48px;
    font-family: "FontAwesome";
    color: #9bca05;
    line-height: 1.2em;
    width: 33.3%;
    display: block;
    float: left;
    text-align: center;
}

.steamIcon {
    font-size: 42px;
    font-family: "FontAwesome";
    margin-right: -20px;
}

/**************** Navigation Bar ***************/
.navBar {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}

.nav {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 100%;
}

.nav > li {
    display: block;
    padding-left: inherit;
    border-bottom: solid 1px #000;
}

.nav > li:before {
    content: "";
}

a .navIcon {
    display: block;
    width:37px;
    height:37px;
    float: left;
    margin-left:10px;
    background: url("images/icon_nav.png") no-repeat 0 0;
}

#nav-images
{
    background-position-x: 0%;
}
#nav-features
{
    background-position-x: 33.33333334%;
}
#nav-roadmap
{
    background-position-x: 66.6666667%;
}
#nav-devblog
{
    background-position-x: 0 100%;
}


a:hover .navIcon, a:active .navIcon, a:focus .navIcon {
    background-position-y: 100%;
}

.nav > li > a {
    display: block;
    font-family: "Orbitron", "Helvetica", sans-serif;
    font-size: 20px;
    line-height:37px;
    padding: 15px 0;
    //padding-left: 47px;
    text-align: center;
    outline: 0;
}

.nav > li > a:hover, .nav > li > a:active, .nav > li > a:focus {
    background-color: #f7374a;
}

.navSection {
    padding-left:0;
    padding-right:0;
    background-color: #074373;
}

/**************** Media Section ****************/
img.screenshot, img.miniVideo {
    display: block;
    width: 100%;
    height: auto;
}

.screenshot, .miniVideo {
    border: solid #07111b 2px;
}

p.miniVideo {
    background-color: #07111b;
    text-align: center;
    padding: 3px;
}

/*********** Feature Section *********/
.featureSection {
    background-color: #07111b;
    margin-top: 30px;
    margin-bottom: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.featureSection p {
    margin-bottom: 1.4em;
}

h2.title {
    font-family: "Orbitron", "Helvetica", sans-serif;
    font-size: 20px;
    padding: 10px 0;
    margin: 0;
}

/**************** Road Map ****************/

.roadMap-head h1 {
    font-family: "Orbitron" sans-serif;
    font-size: 40px;
}

.roadMap-head {
    text-align: center;
    font-family: "Orbitron" sans-serif;
    font-size: 40px;
    line-height: 80px;
    z-index: 1;
    background-color: #021727;
    border-top-color: #021727;
}

.roadmapSection {
    padding-left:0;
    padding-right:0;
}

.roadMap-todo {
    background-color: #07111b;
    border-top-color: #07111b;
}


.roadMap-todo:nth-of-type(odd) {
    background-color: #0a1826;
    border-top-color: #0a1826;
}

.roadMap-done {
    background-color: #0d754d;
    border-top-color: #0d754d;
}


.roadMap-done:nth-of-type(odd) {
    background-color: #0c6a46;
    border-top-color: #0c6a46;
}

.roadMap-todo:after, .roadMap-done:after, .roadMap-head:after {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 40px solid;
    border-top-color: inherit;
    top: 100%;
    left: 100%;
    position: absolute;
    z-index: 1;
    margin-left: -60px;
}

.roadMap-todo:last-child:after, .roadMap-todo:last-child:after {
    border: none;
}

#roadmap .roadMapCol-left h1 {
    font-size: 40px;
    font-family: "Play", Helvetica, sans-serif;
    font-weight: 400;
    margin: 15px 0;
}

#roadmap .roadMapCol-left h2 {
    font-size: 20px;
    font-family: "Play", Helvetica, sans-serif;
    font-weight: 400;
    color: #0c8cc8;
    margin: 10px 0;
}

#roadmap .roadMapCol-right {
    text-align: left;
}


#roadmap .roadMap-done h1 {
    color: #00ff8d;
}

#roadmap .roadMap-done h2 {
    color: #fff;
}

li.check, .roadMap-done li:before {
    font-family: "FontAwesome";
    content: " ";
    color: #00ff8d;
}

/**************** Footer ****************/

.footer {
    background-color: #07111b;
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 20px;
}

#footerText {
    font-size: 12px;
    text-align: center;
    color: #87A4BF;
}

#footerLinks a {
    color: #87A4BF;
    padding: 5px 5px 15px 5px;
    display: inline-block;
}

#footerLinks a:hover {
    color: #f7374a;
}

#footerLinks img {
    width: 60px;
    height: 60px;
}

svg {
    font-family: "FontAwesome";
    font-size: 69.8931px;
    width: 60px;
    height: 60px;
    fill: currentColor;
    vertical-align: bottom;
}

@media screen and (min-width: 600px) {
    .column-2 {
        width: 50%;
    }

    .column-3 {
        width: 33.3333333334%;
    }

    .col2third {
        width: 66.6666666667%;
    }

    .column-3, .column-2, .col2third {
        float: left;
    }

    
    a.socialNavButton {
        display:block;
    }

    #logo {
        width: 523px;
        height: 206px;
        padding-bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav > li {
        float: left;
        position: relative;
        width: 50%;
        border: none;
    }
}

@media screen and (min-width: 700px) {

    .container {
        max-width: 728px;
    }

    .smallerContainer {
        max-width: 754px;
    }

    .two-col {
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
    }

    .nav > li {
        width: 25%;
    }

    .roadMapCol-left {
        padding-right: 80px;
        margin-top: 20px;
    }

    .roadMapCol-right {
        padding-left: 80px;
    }

    .roadMap-todo:after, .roadMap-done:after, .roadMap-head:after {
        left: 50%;
    }

    #logo {
        margin-top: 68px;
    }

    .osIconContainer {
        float: left;
        width: 30%;
    }

    #buyButton {
        margin: -12px 0;
        float: right;
        position: relative;
        bottom: -5px;
        width: 350px;
	right: 30px;
    }

}


@media screen and (min-width: 900px) {
    .container {
        max-width: 888px;
    }

    .smallerContainer {
        max-width: 754px;
    }
}
}