Module media queries

.Header {
    padding: 5em 1.35em 0;
    display: block;
    background-color: $black;
    background-color: $rgba-0-0-0-80;
    color: $white;
    opacity: 1;
    transition: opacity 0.5s;
}

.Header:hover {
    opacity: 1;
}

.Header-logo {
    position: absolute;
    max-height: 80px;
    left: 0;
    top: 0;
    z-index: 5;
    background-color: $black;
    background-color: $rgba-0-0-0-80;
}

@media only screen and (min-width: 38em) {
    .Header {
        padding: 1.35em;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: auto;
        z-index: 10;
    }
}

@media only screen and (min-width: 68em) {
    /*
     * States are scoped to a media query
     * should also disable javascript logic at this point
     */

    .Header-logo {
        border-right: 1px solid $white;
    }

    .Header.is-fixed {
        position: fixed;
        z-index: 99;
        @include transition(transform .3s, height .3s, background .4s, opacity .3s);
    }

    .Header.is-invisible {
        @include transform(translate(0, -100%));
        @include transition(transform, .2s);
        opacity: 0;
    }
}