// Central Media Query Helper
// -------------------------

@mixin respond-to($media) {
    @if $media == mobile {
        @media only screen and (max-width: $respond-size-desktop - 1) { @content; }
    }
    @else if $media == desktop {
        @media only screen and (min-width: $respond-size-desktop) { @content; }
    }
    @else if $media == retina {
        @media all and (-webkit-min-device-pixel-ratio : 1.5),
            all and (-o-min-device-pixel-ratio: 3/2),
            all and (min--moz-device-pixel-ratio: 1.5),
            all and (min-device-pixel-ratio: 1.5) {
                @content
        }
    }
}

// Visibility classes (mobile first approach)
// -------------------------

.visible-phone      { display: inherit !important; }
.hidden-phone       { display: none !important; }
.visible-desktop    { display: none !important; }
.hidden-desktop     { display: inherit !important; }

@include respond-to(desktop) {
    .visible-desktop    { display: inherit !important; }
    .hidden-desktop     { display: none !important; }
    .visible-phone    { display: none !important; }
    .hidden-phone     { display: inherit !important; }
}