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

// Inline flex display
@mixin inline-flex {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

// nowrap | wrap | wrap-reverse
// @include flex-wrap(wrap);
@mixin flex-wrap($value: nowrap) {
  // No Webkit/FF Box fallback.
  -webkit-flex-wrap: $value;
  @if $value == nowrap {
    -ms-flex-wrap: none;
  } @else {
    -ms-flex-wrap: $value;
  }
  flex-wrap: $value;
}


// - applies to: flex containers
// <flex-direction> || <flex-wrap>
@mixin flex-flow($values: (row nowrap)) {
  // No Webkit/FF Box fallback.
  -webkit-flex-flow: $values;
      -ms-flex-flow: $values;
          flex-flow: $values;
}

// Display Order
// - applies to: flex items
// <integer>
@mixin order($int: 0) {
  -webkit-box-ordinal-group: $int + 1;
     -moz-box-ordinal-group: $int + 1;
              -webkit-order: $int;
             -ms-flex-order: $int;
                      order: $int;
}



// Flex grow factor
// - applies to: flex items
// <number>
@mixin flex-grow($int: 1) {
  -webkit-box-flex: $int;
     -moz-box-flex: $int;
 -webkit-flex-grow: $int;
          -ms-flex: $int;
         flex-grow: $int;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number> 
@mixin flex-shrink($int: 0) {
 -webkit-flex-shrink: $int;
    -moz-flex-shrink: $int;
            -ms-flex: $int;
         flex-shrink: $int;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width> 
@mixin flex-basis($value: auto) {
 -webkit-flex-basis: $value;
         flex-basis: $value;
}


// Axis Alignment [justify-content]
// flex-start | flex-end | center | space-between | space-around 
@mixin justify-content($value: flex-start) {
  @if $value == flex-start {
    -webkit-box-pack: start;
       -moz-box-pack: start;
       -ms-flex-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
       -moz-box-pack: end;
       -ms-flex-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
       -ms-flex-pack: justify;
  } @else if $value == space-around {
       -ms-flex-pack: distribute;
  } @else {
    -webkit-box-pack: $value;
       -moz-box-pack: $value;
       -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
          justify-content: $value;
}


// Cross-axis Alignment [ align-items]
// flex-start | flex-end | center | baseline | stretch 
@mixin align-items($value: stretch) {
  @if $value == flex-start {
    -webkit-box-align: start;
       -moz-box-align: start;
       -ms-flex-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
       -moz-box-align: end;
       -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
       -moz-box-align: $value;
       -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
          align-items: $value;
}


// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch 
@mixin align-self($value: auto) {
  // No Webkit Box Fallback.
  -webkit-align-self: $value;
  @if $value == flex-start {
    -ms-flex-item-align: start;
  } @else if $value == flex-end {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

// Packing Flex Lines [align-content]
// flex-start | flex-end | center | space-between | space-around | stretch 
@mixin align-content($value: stretch) {
  // No Webkit Box Fallback.
  -webkit-align-content: $value;
  @if $value == flex-start {
    -ms-flex-line-pack: start;
  } @else if $value == flex-end {
    -ms-flex-line-pack: end;
  } @else {
    -ms-flex-line-pack: $value;
  }
  align-content: $value;
}



// Flex Flow Direction [flex-direction]
// row (default) | row-reverse | column | column-reverse
@mixin flex-direction($direction: row) {
  @if $direction == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
       -moz-box-direction: reverse;
       -moz-box-orient: horizontal;
  } @else if $direction == column {
    -webkit-box-direction: normal;
     -webkit-box-orient: vertical;
       -moz-box-direction: normal;
        -moz-box-orient: vertical;
  } @else if $direction == column-reverse {
    -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
       -moz-box-direction: reverse;
         -moz-box-orient: vertical;
  } @else {
     -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
        -moz-box-direction: normal;
       -moz-box-orient: horizontal;
  }
  -webkit-flex-direction: $direction;
      -ms-flex-direction: $direction;
          flex-direction: $direction;
}



// transition
// @include transition(.4s);
@mixin transition($time) {
	-webkit-transition: all $time ease-out 0s;
	-moz-transition: all $time ease-out 0s;
	-ms-transition: all $time ease-out 0s;
	-o-transition: all $time ease-out 0s;
	transition: all $time ease-out 0s;
}

// transform
@mixin transform($value) {
  -webkit-transform: $value;
      -ms-transform: $value;
          transform: $value;
}


// Translate
@mixin translate ($x, $y) {
	@include transform(translate($x, $y));
}
// TranslateY
@mixin translateY ($y) {
  @include transform(translateY($y));
  }
// TranslateY
@mixin translateX ($x) {
  @include transform(translateX($x));
}


// Box shadows
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;       
          box-shadow: $shadow;
}
// opacity
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// transition
@mixin border-radius($man) {
  -webkit-border-radius: $man;
  -moz-border-radius: $man;
  border-radius: $man;
}


@mixin background($imgpath,$position: center,$size: cover,$repeat: no-repeat) {
  background: {
      image: url($imgpath);
      position: $position;
      repeat: $repeat;
      size: $size;
  }
}
@mixin transform_time($total_time) {
  -webkit-transition: $total_time;
  transition: $total_time;
}
@mixin placeholder {
    &.placeholder {
      @content;
    }
    &:-moz-placeholder {
      @content;
    }
    &::-moz-placeholder {
      @content;
    }
    &::-webkit-input-placeholder {
      @content;
}
}
@mixin transition($args: all 0.6s ease 0s) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -o-transition: $args;
  transition: $args;
}

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