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

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

  // 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));
}

  // translate3d
@mixin translate3d ($x,$y,$z) {
	@include transform(translate3d($x,$y,$z))
}

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

@mixin flexbox-grow($amount){
  flex-grow: $amount;
  -webkit-flex-grow: $amount;
  -webkit-box-flex: $amount;
  -moz-flex-grow: $amount;
  -ms-flex-positive: $amount;
}

@mixin flexbox-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
  
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
  
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
  
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
  }
  
  -webkit-flex-direction: $value;
  -moz-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

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

@mixin flexbox-basis($value: auto) {
	-webkit-flex-basis: $value;
	-moz-flex-basis: $value;
	-ms-flex-preferred-size: $value;
	flex-basis: $value;
}