/* Elliot Barer, ebarer [at] mac [dot] com, 2015-09-27 */


/* RESETS */
html, body, div, span, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, code, em, font, img, strong, var, ul, ol, dl, li,
fieldset, form, label, caption,
table, tbody, tfoot, thead, tr, th, td  { background: transparent; margin: 0; padding: 0; border: 0; outline: 0; }

ol, ul              { list-style: none; }
table               { border-collapse: collapse; border-spacing: 0; }
:focus              { outline: 0; }
::selection         { background: transparent; }


/* BASIC */
    div             { display: block; }
    .left           { float: left !important; text-align: left !important; }
    .right          { float: right !important; text-align: right !important; }
    .clear          { clear: both; }


/* FONTS */
    h1              { font: 600 30px/1.25 -apple-system, BlinkMacSystemFont, sans-serif;; color: #FF0033; text-align: left; }
    h3              { font: 400 25px/1.25 -apple-system, BlinkMacSystemFont, sans-serif;; color: #4d4d4d; margin-bottom: 25px; }
    p               { font: 16px/1.25 -apple-system, BlinkMacSystemFont, sans-serif;; text-align: left; margin-bottom: 40px; }
    li              { font: 16px/1.25 -apple-system, BlinkMacSystemFont, sans-serif;; text-align: left; margin-bottom: 10px; }
    ul              { list-style: disc inside; margin-bottom: 25px; }
    a               { font-size: 16px; text-decoration: none; color: rgb(69, 160, 204); }
    a:hover         { color: rgb(55, 111, 163); }


/* BODY */

    html            { height: 100%; width: 100%; }
    body            { background: #f2f2f2; height: 100%; width: 100%; }


/* CONTENT */

    .shelf          { background: #f2f2f2; height: 350px; width: 100%; }

    .content
    {
        height: auto; width: 800px; margin: 0 auto;
        position: relative; top: 85px;
    }
    
    
    /* TITLE */
        .title                  { height: 115px; margin-bottom: 25px; text-align: left; }
        .title #logo            { height: 75px; width: auto; margin-right: 15px; position: relative; top: 25px; }
        
        .title#default          { display: block; }
        .title#mobile           { display: none; padding-top: 25px; }
        
    
    /* HERO */
    
        .content .hero
        {
            background: url(hero_bg.png) no-repeat center center;
            background-size: contain;
            height: 600px; width: 50%;
            float: left; box-sizing: border-box;
            position: relative;
        }
        
        .content .hero .screen
        {
/*             height: auto; width: 243px; */
/*             position: relative; top: 84px; left: 79px; */
            height: 600px; width: auto;
            position: relative; top: 0; left: 28px;
        }
        
        .content .hero .screen img      { height: 100%; width: auto; }


    /* COPY */
    
        .content .copy
        {
            height: auto; width: 50%;
            float: left; box-sizing: border-box;
            margin-top: 140px;
        }
        
        
    /* FOOTER */
    
        .footer                 { clear: both; }
        .footer p               { font: 11px/100px -apple-system, BlinkMacSystemFont, sans-serif;; text-align: center; color: #999; }
        .footer a               { font: 11px/100px -apple-system, BlinkMacSystemFont, sans-serif;; text-align: center; color: #999; }
        .footer a:hover         { color: #FF0033; }



/* MOBILE */

@media only screen and (max-width: 850px) {
    
    .shelf                      { height: 290px; }
    .content                    { width: 100%; top: 15px; }

    .content .hero              { height: 350px; width: 200px; float: none; margin: 0 auto; position: relative; }
    .content .hero .screen      { height: 350px; width: auto; top: 0px; left: 0px; }

    .content .copy              { width: 100%; max-width: 550px; float: none; margin: 0 auto; padding: 25px 25px 0; text-align: center; }
    .content .copy li           { text-align: center; }
    .content .copy #store       { display: block; margin-bottom: 5px;}
    
    .title                      { font-size: 25px; height: auto; margin-bottom: 15px; text-align: center; }
    .title #logo                { height: 50px; top: 12px; }

    .title#default              { display: none; }
    .title#mobile               { display: block; }
    
    .footer p                   { line-height: 50px; }
    
}

@media only screen and (max-width: 350px) {
    
    .title #logo                { display: block; margin: 0 auto 15px; }
    
}

@media only screen and (max-height: 700px) and (min-width: 800px) {
    
    .shelf                      { height: 275px; }
    .content                    { top: 15px; }
    .footer p                   { line-height: 50px; }
    
}