// !HELPERS
*, *:before, *:after {
  box-sizing: border-box;
}
// !Selection

::-moz-selection {
    background: black;
		color: white;
    text-shadow: none;
}

::selection {
    background: black;
		color: white;  
    text-shadow: none;
}

// !HR
// A better looking default horizontal rule

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

// !IMG
// Remove the gap between images and the bottom of their containers: h5bp.com/i/440 (Make it responsive)

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

// !FORMS
// !Fieldset //*** move to forms base
// Remove default fieldset styles.



// !Textarea
// Allow only vertical resizing of textareas



// !Chromeframe prompt

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

// !Clearfix
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/

%grp,
.grp {
    zoom: 1;

    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

// !TOOLS

// Image Replace http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
%ir,
.image-replace {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

// Hide only visually, but have it available for screenreader
%vh,
.vh {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;

        // allows focus
        &.focusable:active,
        &.focusable:focus {
            clip: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            position: static;
            width: auto;
        }

}

// Hide from both screenreaders and browsers
%h,
.hidden {
    display: none !important;
    visibility: hidden;
}
// maintain layout
%inv,
.invisible {
    visibility: hidden;
}

// Hidden by Device

// Mobile
%hm,
.hide-mobile {

    display: block;

    @include mq($until: tablet) {

        display: none !important;

    }


}

// Tablet
%ht,
.hide-tablet {

    display: block;

    @include mq($from: tablet, $until: desktop) {

        display: none !important;

    }

}

// Desktop
%hd,
.hide-desktop {

    display: block;

    @include mq($from: desktop) {

        display: none !important;

    }


}

// old browsers
.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number}   $responsive  - Viewport-based size
/// @param {Number}   $min         - Minimum font size (px)
/// @param {Number}   $max         - Maximum font size (px)
///                                  (optional)
/// @param {Number}   $fallback    - Fallback for viewport-
///                                  based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback), 
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}