/* 
 * Minimum Viable Experience 
 * - The bare styles required for a complete mobile/tablet experience
 * - Desktop gets its own file with breakpoints (loaded conditionally) 
 */

/* sanitize */
html
{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

/* wrap in min-width */
@media only screen and (min-width:0)
{
    /* general */
    body
    {
        font-family: 'Google Sans', 'Open Sans','Roboto','Helvetica Neue',Helvetica, Arial, sans-serif;

        height: 100%;

        background: #fff;

        -webkit-font-smoothing: antialiased;
                font-smoothing: antialiased;
    }

    .body--locked
    {
        overflow: hidden;

        height: 100%;
    }

    a,
    a:active,
    a:visited
    {
        text-decoration: none;

        color: #015570;
    }

    a:hover
    {
        text-decoration: underline;
    }

    img
    {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;

        background: #ccc;
    }

    img:not([src])
    {
        visibility: hidden;
    }

    .site-viewport
    {
        width: 100%;

        -webkit-animation: global viewport drop .5s ease-out;
           -moz-animation: global viewport drop .5s ease-out;
                animation: global viewport drop .5s ease-out;
    }

    h1,
    h2,
    h3,
    h4
    {
        font-family: 'Google Sans', 'Open Sans','Roboto','Helvetica Neue',Helvetica, Arial, sans-serif;
        font-weight: 700;
        line-height: 1.2;
        /*margin: 0 0 .5em;*/
    }

    h1
    {
        font-size: 2em;

        margin-top: 0;
    }

    h2
    {
        font-size: 1.5em;
    }

    h3
    {
        font-size: 1.2em;
    }

    h4
    {
        font-size: 1.1em;
    }

    p
    {
        font-family: 'Google Sans', 'Open Sans', 'Helvetica Neue','Helvetica','Arial', sans-serif;
        line-height: 1.6;

        margin: 0 auto 1em auto;

        color: #222;
    }

    .fancy-ordered,
    ol
    {
        margin-left: 0;
        padding-left: 0;

        counter-reset: li;
    }

    ol > li
    {
        position: relative;

        margin: 1em 2em 1em 2.5em;

        list-style: none;
    }

    ol > li:before
    {
        font-family: 'Google Sans', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
        font-weight: bold;
        line-height: 1.4em;

        position: absolute;
        top: -.3em;
        left: -2.5em;

        width: 2em;
        height: 2em;
        margin-right: 8px;
        padding: 4px;

        content: counter(li);
        counter-increment: li;
        text-align: center;

        color: #fff;
        border: 1px solid #19740d;
        border-radius: 2em;
        background: #19740d;
    }

    small,
    .font_small
    {
        font-size: .707em;
    }

    /* main-container */
    .main-container
    {
        height: auto;
        padding: 48px 0 0;
    }

    /* footer-container */
    .footer
    {
        font-size: .75em;

        position: relative;

        height: 200px;
        padding: 4em .25em 1em;

        text-align: center;

        color: #fff;
        background: #000;
    }

    .footer-info-container
    {
        position: absolute;
        right: 15px;
        bottom: 15px;

        text-align: right;
    }

    .social-media-container
    {
        margin-bottom: 10px;
    }

    .copy-container
    {
        font-weight: bold;
    }

    .social-media-link,
    .social-media-link:visited,
    .social-media-link:active
    {
        display: inline-block;

        padding: 0 0 0 15px;

        color: #fff;
    }

    .site__sub-heading
    {
        font-size: .75em;

        margin: 0;
        padding: 1em;

        color: #777;
    }

    .intro
    {
        padding: 1em;

        border: 1px solid rgb(0,0,0);
        border: 1px solid rgba(0,0,0,.1);
        border-width: 1px 0 1px 0;
    }

    .intro__header
    {
        margin-bottom: .25em;
    }

    .intro__blurb
    {
        line-height: 1.50em;
    }

    .sec-std
    {
        padding: 1em .625em;
    }

    .recent-posts__header
    {
        font-size: .75em;

        display: inline-block;

        padding: .15em .5em .15em 1.3333em;

        text-transform: uppercase;

        color: #fff;
        background: #000;
    }

    .post
    {
        padding: 0;
    }

    .post__date
    {
        color: #aaa;
    }

    .post__description
    {
        color: #000;
    }

    .btn
    {
        width: 100%;
        padding: .25em;

        -webkit-transition: all .25s ease-in-out;
           -moz-transition: all .25s ease-in-out;
            -ms-transition: all .25s ease-in-out;
             -o-transition: all .25s ease-in-out;
                transition: all .25s ease-in-out;
    }

    .btn-action
    {
        text-align: center;

        color: #fff;
        background: #19740d;
    }

    .tagged
    {
        font-size: .75em;

        display: inline-block;

        margin: 0 .25em .5em 0;
        padding: 3px 6px;

        -webkit-transition: all .25s ease-in-out;
           -moz-transition: all .25s ease-in-out;
            -ms-transition: all .25s ease-in-out;
             -o-transition: all .25s ease-in-out;
                transition: all .25s ease-in-out;

        border: 1px solid #ccc;
    }

    .tagged:hover,
    .tagged:active
    {
        background: #ccc;
    }

    .active-tags
    {
        margin: .5em 0 0 0;
    }

    .popular-tags,
    .popular-posts
    {
        padding: 1em;
    }

    .transform-to-border
    {
        -webkit-transform: scaleY(.025);
           -moz-transform: scaleY(.025);
            -ms-transform: scaleY(.025);
             -o-transform: scaleY(.025);
                transform: scaleY(.025);

        color: #ccc;
        background: #ccc;
    }

    .other-news
    {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;

        text-align: center;
    }
}

@media only screen and (min-width:768px)
{
    /*
    .main-container,
    #content
    {
        height: auto;
        padding: 0;
    }

    .menu__button
    {
        overflow: hidden;

        width: 0;
        margin-right: 0;
        margin-left: 0;

        -webkit-transform: translateX(-60);
           -moz-transform: translateX(-60);
            -ms-transform: translateX(-60);
                transform: translateX(-60);
    }

    .header
    {
        -webkit-transform: translateY(-100%);
           -moz-transform: translateY(-100%);
                transform: translateY(-100%);
    }

    .navi
    {
        position: relative;

        max-width: 250px;

        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
                transform: translateX(0);

        box-shadow: none;

        flex: 0 0 250px;
    }
*/
    .main-container
    {
        flex: 1;
    }

    .site-viewport
    {
                flex-direction: row;

        height: 100%;

        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
            -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
           -moz-box-orient: horizontal;
            -ms-box-orient: horizontal;
                box-orient: horizontal;
    }
}

@media only screen and (min-width:1024px)
{
    .landing-page
    {
        display: flex;

        max-width: 1280px;
        margin: 0 auto;
    }

    .the-meat
    {
        width: 70%;

        border-right: 1px solid #ccc;

        flex: 70% 0 0;
    }

    .the-potatoes
    {
        width: auto;

        flex: auto;
    }
}