@mixin css3-prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-ms-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  @include css3-prefix('animation', $str);
}

@mixin animation-name($str) {
  @include css3-prefix('animation-name', $str);
}

@mixin animation-duration($str) {
  @include css3-prefix('animation-duration', $str);
}

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

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}

//====================================================//
// ==================== REM MIXIN ====================//
//====================================================//

$rem-baseline: 16px !default;
$rem-fallback: true !default;
$rem-px-only: false !default;

@function rem-separator($list) {
  @if function-exists("list-separator") == true {
    @return list-separator($list);
  }

  $test-list: ();
  @each $item in $list {
    $test-list: append($test-list, $item, space);
  }

  @return if($test-list == $list, space, comma);
}

@mixin rem-baseline($zoom: 100%) {
  font-size: $zoom / 16px * $rem-baseline;
}

@function rem-convert($to, $values...) {
  $result: ();
  $separator: rem-separator($values);

  @each $value in $values {
    @if type-of($value) == "number" and unit($value) == "rem" and $to == "px" {
      $result: append($result, $value / 1rem * $rem-baseline, $separator);
    } @else if type-of($value) == "number" and unit($value) == "px" and $to == "rem" {
      $result: append($result, $value / ($rem-baseline / 1rem), $separator);
    } @else if type-of($value) == "list" {
      $result: append($result, rem-convert($to, $value...), $separator);
    } @else {
      $result: append($result, $value, $separator);
    }
  }

  @return if(length($result) == 1, nth($result, 1), $result);
}

@function rem($values...) {
  @if $rem-px-only {
    @return rem-convert(px, $values...);
  } @else {
    @return rem-convert(rem, $values...);
  }
}

@mixin rem($properties, $values...) {
  @if type-of($properties) == "map" {
    @each $property in map-keys($properties) {
      @include rem($property, map-get($properties, $property));
    }
  } @else {
    @each $property in $properties {
      @if $rem-fallback or $rem-px-only {
        #{$property}: rem-convert(px, $values...);
      }
      @if not $rem-px-only {
        #{$property}: rem-convert(rem, $values...);
      }
    }
  }
}

@function em-separator($list) {
  @if function-exists("list-separator") == true {
    @return list-separator($list);
  }

  $test-list: ();
  @each $item in $list {
    $test-list: append($test-list, $item, space);
  }

  @return if($test-list == $list, space, comma);
}

@mixin em-baseline($zoom: 100%) {
  font-size: $zoom / 16px * $rem-baseline;
}


@function em-convert($to, $values...) {
  $result: ();
  $separator: em-separator($values);

  @each $value in $values {
    @if type-of($value) == "number" and unit($value) == "em" and $to == "px" {
      $result: append($result, $value / 1em * $rem-baseline, $separator);
    } @else if type-of($value) == "number" and unit($value) == "px" and $to == "em" {
      $result: append($result, $value / ($rem-baseline / 1em), $separator);
    } @else if type-of($value) == "list" {
      $result: append($result, em-convert($to, $value...), $separator);
    } @else {
      $result: append($result, $value, $separator);
    }
  }

  @return if(length($result) == 1, nth($result, 1), $result);
}

@function em($values...) {
  @if $rem-px-only {
    @return em-convert(px, $values...);
  } @else {
    @return em-convert(em, $values...);
  }
}

@mixin em($properties, $values...) {
  @if type-of($properties) == "map" {
    @each $property in map-keys($properties) {
      @include em($property, map-get($properties, $property));
    }
  } @else {
    @each $property in $properties {
      @if $rem-fallback or $rem-px-only {
        #{$property}: em-convert(px, $values...);
      }
      @if not $rem-px-only {
        #{$property}: em-convert(em, $values...);
      }
    }
  }
}