//mixins:
//boxshadow with or without inset
@mixin box-shadow($left, $top, $blur, $color, $inset:"") {

      -webkit-box-shadow:$left $top $blur $color #{$inset};
      -moz-box-shadow:$left $top $blur $color #{$inset};
      box-shadow:$left $top $blur $color #{$inset};
}
@mixin flex-direction($FlexDirection) {

      -webkit-flex-direction: $FlexDirection;
      -ms-flex-direction: $FlexDirection;
      flex-direction: $FlexDirection;
}
@mixin align-items($AlignItem) {

      -webkit-flex-align: $AlignItem;
      -ms-flex-align: $AlignItem;
      align-items: $AlignItem;
}
// justify
@mixin justify-content($JustifyContent) {

      -webkit-justify-content: $JustifyContent;
      -ms-flex-pack: $JustifyContent;
      justify-content: $JustifyContent;
}
//transtion itself
@mixin transition($transition...) {

    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}
//transition property
@mixin transition-property($property...) {

    -moz-transition-property:    $property;
    -o-transition-property:      $property;
    -webkit-transition-property: $property;
    transition-property:         $property;
}
// transition duration
@mixin transition-duration($duration...) {

    -moz-transition-property:    $duration;
    -o-transition-property:      $duration;
    -webkit-transition-property: $duration;
    transition-property:         $duration;
}
//transition timer
@mixin transition-timing-function($timing...) {

    -moz-transition-timing-function:    $timing;
    -o-transition-timing-function:      $timing;
    -webkit-transition-timing-function: $timing;
    transition-timing-function:         $timing;
}
//transition delay
@mixin transition-delay($delay...) {

    -moz-transition-delay:    $delay;
    -o-transition-delay:      $delay;
    -webkit-transition-delay: $delay;
    transition-delay:         $delay;
}
// generic transform
@mixin transform($transforms) {

     -moz-transform: $transforms;
       -o-transform: $transforms;
      -ms-transform: $transforms;
  -webkit-transform: $transforms;
          transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}
 
// scale
@mixin scale($scale) {
   @include transform(scale($scale));
} 
// translate
@mixin translate ($x, $y) {
   @include transform(translate($x, $y));
}
// skew
@mixin skew ($x, $y) {
   @include transform(skew(#{$x}deg, #{$y}deg));
}
//transform origin
@mixin transform-origin ($origin) {
    moz-transform-origin: $origin;
       -o-transform-origin: $origin;
      -ms-transform-origin: $origin;
  -webkit-transform-origin: $origin;
          transform-origin: $origin;
}