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

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

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

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

@mixin border-radius($radius...) {
  -moz-border-radius: $radius; 
   -webkit-border-radius: $radius; 
   border-radius: $radius;
}

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

@mixin text-hide() {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin flexbox-order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation_name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation ($delay, $duration, $animation, $iteration, $direction: forward, $fillmode: fowards) {
  -webkit-animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -webkit-animation-name: $animation;
  -webkit-animation-fill-mode: $fillmode;
  -webkit-animation-direction: $direction;
  -webkit-animation-iteration-count: $iteration;
  animation-delay: $delay;
  animation-duration: $duration;
  animation-name: $animation;
  animation-fill-mode: $fillmode;
  animation-direction: $direction;
  animation-iteration-count: $iteration;
}

@mixin gradient($from, $to) {
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}



//Usage
div {
  
@include transform(perspective(800px) rotate(-90deg));
  
@include transition(opacity 0.35s, transform 0.5s);
  
@include transition-delay(0.5s);
  
@include transform-origin (50% 0%);
  
@include box-shadow(0, 0, 15px, #000);
  
@include border-radius(10px 10px 10px 10px);
  
@include text-hide();
  
}

.flex-box {
  @include flexbox();
}

.flex-item {
  @include flex(1 200px);
  @include flexbox-order(2);
}

.animation {
  @include keyframes(animation-slide-out-up) {
    0% {
        transform: translate(0,0);
    }
    100% {
        transform: translate(0,-100%);
    }
  }
}
.animation-slide-out-up{
  @include animation(0, 0.5s, animation-slide-out-up, infinite, ease);
}







body {
  background-color: #222;
  color: #FFF;
  font-family: sans-serif;
  letter-spacing: 0.7em;
}