@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) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@mixin transform($transforms) {
	-webkit-transform: $transforms;
	-moz-transform: $transforms;
	-ms-transform: $transforms;
	-o-transform: $transforms;
	transform: $transforms;
}


@mixin rotate($deg) {
  @include transform(rotate(#{$deg}));
}
 
@mixin scale($scale) {
	 @include transform(scale($scale));
} 

@mixin translate ($x, $y) {
   @include transform(translate($x, $y));
}

@mixin skew ($x, $y) {
   @include transform(skew(#{$x}, #{$y}));
}

@mixin animation-iteration-count ($count) {
	-webkit-animation-iteration-count: $count;
	-moz-animation-iteration-count: $count;
	-ms-animation-iteration-count: $count;
	-o-animation-iteration-count: $count;
	animation-iteration-count: $count;
}

@mixin animation-name ($name) {
	-webkit-animation-name: $name;
	-moz-animation-name: $name;
	-ms-animation-name: $name;
	-o-animation-name: $name;
	animation-name: $name;
}

@mixin animation-duration ($duration) {
	-webkit-animation-duration: $duration;
	-moz-animation-duration: $duration;
	-ms-animation-duration: $duration;
	-o-animation-duration: $duration;
	animation-duration: $duration;
}

@mixin animation-fill-mode ($mode) {
	-webkit-animation-fill-mode: $mode;
	-moz-animation-fill-mode: $mode;
	-ms-animation-fill-mode: $mode;
	-o-animation-fill-mode: $mode;
	animation-fill-mode: $mode;
}

@mixin transform-origin ($origin) {
	-webkit-transform-origin: $origin;
  moz-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -o-transform-origin: $origin;
  transform-origin: $origin;
}

@mixin font-face ($name, $weight, $slug) {
  @font-face {
    font-family: $name;
    font-weight: $weight;
    src: url('../fonts/#{$slug}.svg') format('svg');
    src: url('../fonts/#{$slug}.woff') format('woff'),
         url('../fonts/#{$slug}.ttf') format('truetype'),
         url('../fonts/#{$slug}.eot');
  }
}

@mixin greyscale ($percent) {
  -webkit-filter: grayscale($percent);
  -moz-filter: grayscale($percent);
  -ms-filter: grayscale($percent);
  -o-filter: grayscale($percent);
  filter: grayscale($percent);
}

@mixin bp-1200 {
  @media only screen and (max-width: 1199px) {
    @content;
  }
}

@mixin bp-1080 {
  @media only screen and (max-width: 1079px) {
    @content;
  }
}

@mixin bp-1200-992 {
  @media only screen and (max-width: 1199px) and (min-width: 992px) {
    @content;
  }
}

@mixin bp-1200-768 {
  @media only screen and (max-width: 1199px) and (min-width: 768px) {
    @content;
  }
}

@mixin bp-1200-544 {
  @media only screen and (max-width: 1199px) and (min-width: 544px) {
    @content;
  }
}

@mixin bp-992 {
  @media only screen and (max-width: 991px) {
    @content;
  }
}

@mixin bp-992-768 {
  @media only screen and (max-width: 991px) and (min-width: 768px) {
    @content;
  }
}

@mixin bp-992-544 {
  @media only screen and (max-width: 991px) and (min-width: 544px) {
    @content;
  }
}

@mixin bp-768 {
  @media only screen and (max-width: 767px) {
    @content;
  }
}

@mixin bp-768-544 {
  @media only screen and (max-width: 767px) and (min-width: 544px) {
    @content;
  }
}

@mixin bp-544 {
  @media only screen and (max-width: 543px) {
    @content;
  }
}

@mixin bp-400 {
  @media only screen and (max-width: 400px) {
    @content;
  }
}


@mixin min-bp-1200 {
  @media only screen and (min-width: 1200px) {
    @content;
  }
}

@mixin min-bp-992 {
  @media only screen and (min-width: 992px) {
    @content;
  }
}

@mixin min-bp-768 {
  @media only screen and (min-width: 768px) {
    @content;
  }
}

@mixin min-bp-544 {
  @media only screen and (min-width: 544px) {
    @content;
  }
}