html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
}
*,
*:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

@font-face {
    font-family: 'national-light';
    src:  url('/fonts/National-Light.woff2') format('woff2'),
    url('/fonts/National-Light.woff') format('woff');
}


@font-face {
    font-family: 'din-condensed-bold';
    src:  url('/fonts/DIN-Condensed-Bold.woff2') format('woff2'),
    url('/fonts/DIN-Condensed-Bold.woff') format('woff');
}

body
{
    margin:0;
    padding:0;
    color:#5D5A58;
    font-family: 'national-light', sans-serif;
    font-size: 1em;
}

header {
    height: 76px;
    -webkit-box-shadow: 0 12px 20px 0 rgba(0,0,0,0.1);
    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.1);
    display:flex;
    align-items: center;
    justify-content: center;
}

.logo {
    height:30px;
    width:193px;
}

.logo img {
   width:100%;
}

.hero
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position:relative;
    
}

.hero-image
{
    height: 339px;
    min-width: 100%;
    background-image: url('/images/hero.jpg');
    background-repeat: no-repeat;
    background-position: 40% 0%;
    background-size: cover;
}

.heading
{
    font-family: 'din-condensed-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 8px;
    margin-right:-8px;
}

.hero-content
{
    height:342px;
    background-color: #171311;
    color:#fff;
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding:60px 0 60px 0;
    position:relative;
}

.hero-content .headings
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    width:220px;
}

.hero-content .hero-get-app
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}

.hero-content .app-badges-title
{
    font-size:1em;
    font-family: 'din-condensed-bold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 8px;
    margin-right:-8px;
    margin-bottom:20px;
}

.hero-content .heading
{
    color:#fff;
    font-size: 1.875em;
    margin-bottom: 10px;
}


.hero-content .hero-sub-heading
{
    font-size:1.25em;
}

.badges
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width:290px;
}

.badges img {
    width:135px;
    height:40px;
}

.screen-sections {
    display:flex;
    flex-direction: column;
    align-items: center;
}

.screen-section {
    width: 332px;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}

.screen-section:first-child {
    padding-top: 102px;
}

.screen-section .section-heading
{
    min-height: 84px;
    width:80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}


.screen-section .heading
{
    color:#171311;
    font-size: 1.4em;
    padding-bottom:10px;
}



.screen-section .screen-img img
{
    width:332px;
    height:606px;
}

.get-app
{
    display:flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0 0 0;
}

.get-app .heading
{
    color:#171311;
    font-size: 1.4em;
    padding-bottom:25px;
}

.get-app .badges
{
    padding-bottom:43px;
}

.copy
{
    text-align:center;
    margin-bottom:30px;
    font-size:1.1em;
    color:#A2A1A0;
    padding:0 42px;
}

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

    .hero-image
    {
        height: 535px;
        background-position: 35% 0;
    }

    .hero-content
    {
        padding:72px 90px;
    }

    .hero-content .headings
    {
        width:420px;
    }

}

@media only screen and (min-width: 1000px) {
    .hero-content
    {
        height:438px;
        width:370px;
        position:absolute;
        top:48px;
        right:33px;
        padding:98px 0 98px 0;
    }

    .hero-image
    {
        background-position: 0 0;
    }

    .screen-sections {
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }

    .screen-section {
        padding-top: 120px;
    }
}

@media only screen and (min-width: 1200px) {
    .hero-image
    {
        height:733px;
        background-position: 20% 0;
    }
    .hero-content
    {
        height:553px;
        width:430px;
        top:90px;
        right:90px;
        padding:140px 0 140px 0;
    }
}

@media only screen and (min-width: 1400px) {
    .hero-content
    {
        height:553px;
        width:520px;
    }
    .hero-image
    {
        background-position: 0 0;
    }
}