@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/josefinsans-light-webfont.eot');
    src: url('../fonts/josefinsans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinsans-light-webfont.woff') format('woff'),
         url('../fonts/josefinsans-light-webfont.ttf') format('truetype'),
         url('../fonts/josefinsans-light-webfont.svg#josefin_sanslight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/josefinsans-regular-webfont.eot');
    src: url('../fonts/josefinsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinsans-regular-webfont.woff') format('woff'),
         url('../fonts/josefinsans-regular-webfont.ttf') format('truetype'),
         url('../fonts/josefinsans-regular-webfont.svg#josefin_sansregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/josefinsans-bold-webfont.eot');
    src: url('../fonts/josefinsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/josefinsans-bold-webfont.woff') format('woff'),
         url('../fonts/josefinsans-bold-webfont.ttf') format('truetype'),
         url('../fonts/josefinsans-bold-webfont.svg#josefin_sansbold') format('svg');
    font-weight: 700;
    font-style: normal;
}

html {
    font-family: 'Josefin Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3em;
}

a {
    color: #0194be;
    text-decoration: none;
    transition: color .4s;
}

a:hover {
    color: #000;
}

img {
    max-width: 100%;
    height: auto;
}

.l-container {
    width: 80%;
    margin: 4rem auto;
    position: relative;
}

.l-container .l-container {
    width: auto;
}

#nav {
    overflow: hidden;
}

.nav {
    background: #0194be;
}

.nav, .nav a {
    color: #fff;
}

.nav-header-sitename {
    margin: 0;
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .3em;
}

.nav-header-tagline {
    margin: 0;
    font-weight: 400;
    font-size: .8rem;
}

.nav-list {
    margin: 2em 0;
    padding: 0;
    border-top: 1px dotted #0fc3e8;
}

.nav-list-item {
    border-bottom: 1px dotted #0fc3e8;
}

.nav-list-item-link {
    display: block;
    padding: .5em 0;
}

.nav-list-item-link:hover, .nav-list-item-link.is-active {
    color: #0fc3e8;
}

#header {
    overflow: hidden;
}

.header, .pageheader {
    background: #481800;
    color: #fff;
}

.header strong {
    font-weight: inherit;
    color: #f07e13;
}

.header-headline {
    font-weight: 300;
    font-size: 3rem;
    line-height: 1em;
    margin: .5em 0;
}

.header-subhead {
    font-weight: 700;
    font-size: 2rem;
    margin: .5em 0;
}

.header-callout {
    font-weight: 400;
    font-size: 1rem;
    margin: .5em 0;
}

.pageheader-headline {
    font-weight: 300;
    font-size: 2rem;
    line-height: 1em;
    margin: 0;
}

.section-header-img {
    display: block;
    margin: 1em auto;
    border-radius: 50%;
}

.section-header-headline {
    font-weight: 300;
    font-size: 2.67rem;
    line-height: 1em;
    margin: 0;
    color: #f07e13;
}

.section-header-subhead {
    font-weight: 700;
    font-size: 1.33rem;
    margin: .25em 0;
    line-height: 1.1em;
    color: #e2d397;
}

.section-footer-summary {
    font-weight: 300;
    font-size: 2.33rem;
    line-height: 1em;
    color: #f07e13;
}

.stage-header-number, .stage-header-title {
    font-weight: 400;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.stage-header-number {
    color: #481800;
}

.stage-header-title {
    color: #e2d397;
}

.stage-header-subtitle {
    font-weight: 300;
    font-size: 2rem;
    margin: .25em 0;
    color: #f07e13;
}

.stage-header-iterations {
    font-weight: 400;
    font-size: .8rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .3em;
}

.contact-map, .contact-info {
    margin: 1em 0;
}

.contact-info-phone {
    font-weight: 700;
    letter-spacing: .1em;
}

.contact-info-email {
    font-weight: 700;
}

.footer {
    color: #e2d397;
    font-size: .8rem;
}

@media only screen and (min-width: 900px) {
        
    .l-container {
        width: 720px;
    }
    
    .l-padding {
        width: 480px;
        padding-left: 240px;
    }
    
    .l-padding .nav-header {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #nav {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
        transition: padding-top .4s, padding-bottom .4s;
    }
    
    #nav > .l-container {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .nav-header-sitename {
        line-height: 1.2rem;
    }
    
    .nav-header-tagline {
        line-height: .8rem;
    }
        
    .nav-list {
        line-height: 2rem;
        margin: 0;
        border: none;
    }
    
    .nav-list-item {
        display: inline;
        border: none;
    }
    
    .nav-list-item-link {
        display: inline;
        margin-right: 1em;
    }

    .header {
        background-image: url(../img/escapevelocity.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-attachment: fixed;
        background-size: 1700px;
    }
    
    #header.header > .l-container {
        margin-top: 281px;
        margin-bottom: 75px;
    }
    
    #header.pageheader > .l-container {
        margin-top: 5rem;
        margin-bottom: 1rem;
    }
    
    #steampunk, #spaceage, #stages {
        overflow: hidden;
    }
    
    #prototype-img, #launch-img, #growth-img {
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    #steampunk, #spaceage, #stages, #prototype-img, #launch-img, #growth-img {
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 870px;
    }
    
    #steampunk { background-image: url(../img/rocket-steampunk.svg); }
    #spaceage, #stages { background-image: url(../img/rocket-spaceage.svg); }
    #prototype-img { background-image: url(../img/rocket-prototype.svg); }
    #launch-img { background-image: url(../img/rocket-launch.svg); }
    #growth-img { background-image: url(../img/rocket-growth.svg); }
    
    #steampunk {
        margin-top: 4rem;
    }
    
    .l-padding .section-header-img, .l-padding .contact-info {
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .l-padding .section-header-img {
        max-width: 160px;
    }    
    
}

@media only screen and (min-width: 1200px) {
    
    html {
        font-size: 18px;
    }
    
    .l-container {
        width: 960px;
    }
    
    .l-padding {
        width: 640px;
        padding-left: 320px;
    }
    
    .header {
        background-size: 2000px;
    }
    
    #header.header > .l-container {
        margin-top: 322px;
        margin-bottom: 100px;
    }
    
    #steampunk, #spaceage, #stages, #prototype-img, #launch-img, #growth-img {
        background-size: 1160px;
    }
    
    .l-padding .section-header-img {
        max-width: 240px;
    }    
    
}

@media only screen and (min-width: 1800px) {
    
    html {
        font-size: 28px;
    }
    
    .l-container {
        width: 1440px;
    }
    
    .l-padding {
        width: 960px;
        padding-left: 480px;
    }
    
    .header {
        background-size: 2500px;
    }
    
    #header.header > .l-container {
        margin-top: 354px;
    }
    
    #steampunk, #spaceage, #stages, #prototype-img, #launch-img, #growth-img {
        background-size: 1740px;
    }
    
    .l-padding .section-header-img {
        max-width: 320px;
    }
    
}