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

@mixin flex-wrap {
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

@mixin flex-no-wrap {
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

@mixin flex-align-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

@mixin flex-align-start {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

@mixin flex-align-end {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

@mixin flex-justify-space-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

@mixin flex-justify-center {
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
}

@mixin flex-justify-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

@mixin flex-justify-start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

@mixin flex-flow-row-nowrap {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
}

@mixin flex-direction-row {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

@mixin flex-direction-column {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

@mixin flex-flow-column-wrap {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column wrap;
	flex-flow: column wrap;
}

@mixin flex-direction-row-reverse {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse
}

@mixin flex-justify-space-evenly {
	-webkit-box-pack: space-evenly;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly;
}


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

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

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

@mixin translateX ($x) {
	@include transform(translateX($x));
}

@mixin media( $res ) {
	@if mobile == $res {
		@media only screen and (min-width: $mobile_width) {
			@content;
		}
	}

	@if mobile_horizontal == $res {
		@media only screen and (min-width: $mobile_horizontal) {
			@content;
		}
	}

	@if tablet == $res {
		@media only screen and (min-width: $tablet_width) {
			@content;
		}
	}

	@if desktop == $res {
		@media only screen and (min-width: $desktop_width) {
			@content;
		}
	}

	@if landscape == $res {
		@media only screen and (min-width: $landscape_width) {
			@content;
		}
	}

	@if wide == $res {
		@media only screen and (min-width: $wide_width) {
			@content;
		}
	}

	@if large == $res {
		@media only screen and (min-width: $large_screen) {
			@content;
		}
	}

	@if diagonal == $res {
		@media only screen and (min-width: $diagonal_screen) {
			@content;
		}
	}

	@if ultra_wide == $res {
		@media only screen and (min-width: $ultra_wide_screen) {
			@content;
		}
	}
}