/**
 * Media Queries
 * -----------------------------------------------------------------------------
 * A simple mixin for using media queries. Change the values to
 * fit your sites needs.
 *
 * Usage:
 *
 *      header {
 *          @include bp-small() {
 *              display: none;
 *          }
 *          @include bp-huge() {
 *              display: block;
 *          }
 *      }
 */
@mixin bp-small {
    @media only screen and (min-width: 20em){
      @content;
   }
}
@mixin bp-medium {
    @media only screen and (min-width: 40em){
      @content;
   }
}
@mixin bp-large {
    @media only screen and (min-width: 60em){
      @content;
   }
}
@mixin bp-xl {
    @media only screen and (min-width: 80em){
      @content;
   }
}
/**
 * Font size
 * -----------------------------------------------------------------------------
 * This mixin will take a pixel value and convert it into a em value
 * with a pixel fallback.
 *
 * Usage:
 *
 *      p {
 *          @include font-size(16px)
 *      }
 *
 * Output:
 *
 *      p {
 *          font-size: 16px;
 *          font-size: 1em;
 *      }
 */
@function calculateEm($size, $context: 16px) {
    @return ($size / $context) * 1em;
}
@mixin font-size($size) {
   font-size: $size;
   font-size: calculateEm($size);
}
/**
 * Expand element outside its container
 * -----------------------------------------------------------------------------
 * This mixin will force an element to expand full width even if it has
 * a container. See demo here: http://codepen.io/sebastianekstrom/pen/vNjOao/
 *
 * Usage:
 *
 *      img {
 *          @include expand-full-width(16px)
 *      }
 *
 */
@mixin expand-full-width() {
   width: 100vw;
   margin-left: calc(-50vw + 50%);
}
/**
 * Vertical align
 * -----------------------------------------------------------------------------
 * Vertical align any element by using top: 50% with the combination of
 * translateY(-50%). This will push the element 50% down from its parent,
 * as well as pushing itself down 50% of its own height. This will cause
 * the element to vertically align.
 *
 * Usage:
 *
 *      .logotype {
 *          @include vertical-align();
 *      }
 *
 *      .logotype--absolute {
 *          @include vertical-align(absolute);
 *      }
 *
 */
@mixin vertical-align($position: relative) {
   position: $position;
   top: 50%;
   transform: translateY(-50%);
}
/**
 * Visually hide an element
 * -----------------------------------------------------------------------------
 * This placeholder selector will visually hide an element while
 * still make it accessible for screenreaders.
 *
 * Usage:
 *
 *      p {
 *          @extend %visually-hidden;
 *      }
 *
 */
%visually-hidden,
.visually-hidden {
   position: absolute !important;
   overflow: hidden;
   width: 1px;
   height: 1px;
   padding: 0;
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
}
/**
 * Clearfix
 * -----------------------------------------------------------------------------
 * A solid clearfix by Nicolas Gallagher.
 * Source: (http://nicolasgallagher.com/micro-clearfix-hack/)
 *
 * Usage:
 *
 *      p {
 *          @extend %clearfix;
 *      }
 *
 */
%clearfix,
.clearfix {
   *zoom: 1;

   &:before {
      content: ' ';
      display: table;
   }

   &:after {
      content: ' ';
      display: table;
      clear: both;
   }
}
/**
 * flex-misc
 * -----------------------------------------------------------------------------
 *
 */
@mixin hook-flex-misc() {}