@mixin background-cover() {
  background: {
    size: cover;
    repeat: no-repeat;
    position: center;
  }
}

@mixin background-auto() {
  background: {
    size: 100% auto;
    repeat: no-repeat;
    position: center;
  }
}

@mixin hiddentext() {
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  font-size: 0;
  text-align: start;
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transform-style: preserve-3d;
}

@mixin horizontal-align {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

@mixin centered {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-style: preserve-3d;
}

@mixin background-cover() {
  background: {
    size: cover;
    repeat: no-repeat;
    position: center;
  }
}

@mixin background-auto() {
  background: {
    size: 100% auto;
    repeat: no-repeat;
    position: center;
  }
}

@mixin hiddentext() {
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  font-size: 0;
  text-align: start;
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transform-style: preserve-3d;
}

@mixin horizontal-align {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

@mixin centered {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-style: preserve-3d;
}

// Source: https://github.com/magnetikonline/sassboilerplate/blob/master/fontface.scss
@mixin fontFace($family, $src, $weight: normal, $style: normal) {
  @font-face {
    font-family: $family;
    src: url('#{$src}.eot'); // IE9 compat
    src: url('#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
      url('#{$src}.woff2') format('woff2'),
      url('#{$src}.woff') format('woff'), // standards
      url('#{$src}.ttf') format('truetype'), // Safari, Android, iOS
      url('#{$src}.svg##{$family}') format('svg'); // legacy iOS

    font-style: $style;
    font-weight: $weight;
  }
}

Add font-face mixin for custom webfonts
Add font-face mixin for custom webfonts
