/**
* all and (min-width: 1367px)
*
* Anything more than 1367px.
*
* http://www.browserhacks.com/
*/

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 1367px) {

    .page-wrapper {
        overflow: hidden;
    }

    /** $intro */

    header,
    .summary,
    .preamble {
        position: absolute;
    }

    /** $main */

    .main::before,
    .main::after {
        display: none;
    }

    .main {
        top: 0;
        right: 0;
        padding: 0;
        width: 50%;
        height: 100%;
        background: transparent;
    }

        .main div[role="article"] {
            visibility: hidden;
            margin-top: -230px;
            padding: 55px 70px 50px 70px;
            width: 460px;
            height: 355px;
            background: url(layer.svg) no-repeat left center;
            -moz-background-size: auto 100%;
            -o-background-size: auto 100%;
            -webkit-background-size: auto 100%;
            background-size: auto 100%;
        }

            .main div[role="article"]::before {
                display: block;
            }

            .main div[role="article"] h3 {
                padding: 0 15px;
                font-size: 36px;
                line-height: 40px;
            }

            .main div[role="article"],
            .main div[role="article"] p {
                position: absolute;
            }

    footer {
        position: fixed;
        margin: -225px 0 0 0;
        padding: 0;
        width: 75px;
        height: 450px;
    }

    .zen-validate-html,
    .zen-validate-css,
    .zen-license,
    .zen-github,
    .zen-accessibility {
        position: relative;
        float: none;
        width: 75px;
    }

    /** $sidebar */

    .wrapper {
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -280px;
    }

        .wrapper:hover {
            position: absolute;
            top: 60%;
            left: 0;
            margin-top: -280px;
        }

    .design-selection li a.designer-name {
        background: #000;
        background: -ms-linear-gradient(top, #111 45%, #111 45%, #111 50%, transparent 50%, transparent 55%, #111 55%, #111 100%);
        background: linear-gradient(to bottom, #111 45%, #111 45%, #111 50%, transparent 50%, transparent 55%, #111 55%, #111 100%);
        color: rgba(255,255,255,.95);
        text-indent: 100%;
        font-weight: 900;
        font-size: 25px;
    }
}

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 1600px) {

    /** $intro */

    header {
        top: 80px;
    }

    /** $sidebar */

    .wrapper {
        left: 100px;
    }

        .wrapper:hover {
            left: 100px;
        }
}