//  * =========================================================== *
//  <                           CSS MIXINS                        >
//  * =========================================================== *
//
// Customize from csshat.com


// TABLE OF MIXINS:
// align-content
// align-items
// align-self
// animation
// animation-delay
// animation-direction
// animation-duration
// animation-fill-mode
// animation-iteration-count
// animation-name
// animation-play-state
// animation-timing-function
// appearance
// backface-visibility
// background-clip
// background-image
// background-origin
// background-size
// blur
// border-bottom-left-radius
// border-bottom-right-radius
// border-image
// border-radius
// border-top-left-radius
// border-top-right-radius
// box-shadow
// box-sizing
// brightness
// column-count
// column-gap
// column-rule
// column-width
// columns
// contrast
// display
// drop-shadow
// filter
// flex
// flex-basis
// flex-direction
// flex-grow
// flex-shrink
// flex-wrap
// font-face
// grayscale
// hue-rotate
// hyphens
// invert
// justify-content
// opacity
// order
// perspective
// perspective-origin
// placeholder
// rotate
// rotate3d
// rotateX
// rotateY
// rotateZ
// saturate
// scale
// scale3d
// scaleX
// scaleY
// scaleZ
// sepia
// size
// skew
// skewX
// skewY
// transform
// transform-origin
// transform-style
// transition
// transition-delay
// transition-duration
// transition-property
// transition-timing-function
// translate
// translate3d
// translateX
// translateY
// translateZ
// user-select

.align-content(...) {
	-webkit-align-content: @arguments;
	-ms-flex-line-pack: @arguments;
	align-content: @arguments;
}

.align-items(...) {
	-webkit-box-align: @arguments;
	-moz-box-align: @arguments;
	-webkit-align-items: @arguments;
	-ms-flex-align: @arguments;
	align-items: @arguments;
}

.align-self(...) {
	-webkit-align-self: @arguments;
	-ms-flex-item-align: @arguments;
	align-self: @arguments;
}

.animation(...) {
	-webkit-animation: @arguments;
	-moz-animation: @arguments;
	-o-animation: @arguments;
	animation: @arguments;
}

.animation-delay(...) {
	-webkit-animation-delay: @arguments;
	-moz-animation-delay: @arguments;
	-o-animation-delay: @arguments;
	animation-delay: @arguments;
}

.animation-direction(...) {
	-webkit-animation-direction: @arguments;
	-moz-animation-direction: @arguments;
	-o-animation-direction: @arguments;
	animation-direction: @arguments;
}

.animation-duration(...) {
	-webkit-animation-duration: @arguments;
	-moz-animation-duration: @arguments;
	-o-animation-duration: @arguments;
	animation-duration: @arguments;
}

.animation-fill-mode(...) {
	-webkit-animation-fill-mode: @arguments;
	-moz-animation-fill-mode: @arguments;
	-o-animation-fill-mode: @arguments;
	animation-fill-mode: @arguments;
}

.animation-iteration-count(...) {
	-webkit-animation-iteration-count: @arguments;
	-moz-animation-iteration-count: @arguments;
	-o-animation-iteration-count: @arguments;
	animation-iteration-count: @arguments;
}

.animation-name(...) {
	-webkit-animation-name: @arguments;
	-moz-animation-name: @arguments;
	-o-animation-name: @arguments;
	animation-name: @arguments;
}

.animation-play-state(...) {
	-webkit-animation-play-state: @arguments;
	-moz-animation-play-state: @arguments;
	-o-animation-play-state: @arguments;
	animation-play-state: @arguments;
}

.animation-timing-function(...) {
	-webkit-animation-timing-function: @arguments;
	-moz-animation-timing-function: @arguments;
	-o-animation-timing-function: @arguments;
	animation-timing-function: @arguments;
}

.appearance(...) {
	-webkit-appearance: @arguments;
	-moz-appearance: @arguments;
	appearance: @arguments;
}

.backface-visibility(...) {
	-webkit-backface-visibility: @arguments;
	-moz-backface-visibility: @arguments;
	-o-backface-visibility: @arguments;
	-ms-backface-visibility: @arguments;
	backface-visibility: @arguments;
}

.background-clip(...) {
	-webkit-background-clip: @arguments;
	-moz-background-clip: @arguments;
	background-clip: @arguments;
}

.background-image(...) {
	background-image: @arguments;
}

.background-origin(...) {
	-webkit-background-origin: @arguments;
	-moz-background-origin: @arguments;
	background-origin: @arguments;
}

.background-size(...) {
	-webkit-background-size: @arguments;
	-moz-background-size: @arguments;
	background-size: @arguments;
}

.border-bottom-left-radius(...) {
	-webkit-border-bottom-left-radius: @arguments; -webkit-background-clip: padding-box;
	-moz-border-radius-bottomleft: @arguments; -moz-background-clip: padding;
	border-bottom-left-radius: @arguments; background-clip: padding-box;
}

.border-bottom-right-radius(...) {
	-webkit-border-bottom-right-radius: @arguments; -webkit-background-clip: padding-box;
	-moz-border-radius-bottomright: @arguments; -moz-background-clip: padding;
	border-bottom-right-radius: @arguments; background-clip: padding-box;
}

.border-image(...) {
	-webkit-border-image: @arguments;
	-moz-border-image: @arguments;
	-o-border-image: @arguments;
	border-image: @arguments;
}

.border-radius(...) {
	-webkit-border-radius: @arguments; -webkit-background-clip: padding-box;
	-moz-border-radius: @arguments; -moz-background-clip: padding;
	border-radius: @arguments; background-clip: padding-box;
}

.border-top-left-radius(...) {
	-webkit-border-top-left-radius: @arguments; -webkit-background-clip: padding-box;
	-moz-border-radius-topleft: @arguments; -moz-background-clip: padding;
	border-top-left-radius: @arguments; background-clip: padding-box;
}

.border-top-right-radius(...) {
	-webkit-border-top-right-radius: @arguments; -webkit-background-clip: padding-box;
	-moz-border-radius-topright: @arguments; -moz-background-clip: padding;
	border-top-right-radius: @arguments; background-clip: padding-box;
}

.box-shadow(...) {
	-webkit-box-shadow: @arguments;
	-moz-box-shadow: @arguments;
	box-shadow: @arguments;
}

.box-sizing(...) {
	-webkit-box-sizing: @arguments;
	-moz-box-sizing: @arguments;
	box-sizing: @arguments;
}

.brightness(...) {
	-webkit-filter: brightness(@arguments);
	-moz-filter: brightness(@arguments);
	-ms-filter: brightness(@arguments);
	filter: brightness(@arguments);
}

.column-count(...) {
	-webkit-column-count: @arguments;
	-moz-column-count: @arguments;
	column-count: @arguments;
}

.column-gap(...) {
	-webkit-column-gap: @arguments;
	-moz-column-gap: @arguments;
	column-gap: @arguments;
}

.column-rule(...) {
	-webkit-column-rule: @arguments;
	-moz-column-rule: @arguments;
	column-rule: @arguments;
}

.column-width(...) {
	-webkit-column-width: @arguments;
	-moz-column-width: @arguments;
	column-width: @arguments;
}

.columns(...) {
	-webkit-columns: @arguments;
	-moz-columns: @arguments;
	columns: @arguments;
}

.contrast(...) {
	-webkit-filter: ~"contrast(@{process})";
	-moz-filter: ~"contrast(@{process})";
	-ms-filter: ~"contrast(@{process})";
	filter: ~"contrast(@{process})";
}

.drop-shadow(...) {
	-webkit-filter: drop-shadow(@arguments);
	-moz-filter: drop-shadow(@arguments);
	-ms-filter: drop-shadow(@arguments);
	filter: drop-shadow(@arguments);
}

.filter(...) {
	-webkit-filter: @arguments;
	-moz-filter: @arguments;
	-ms-filter: @arguments;
	filter: @arguments;
}

.flex(...) {
	-webkit-box-flex: @arguments;
	-moz-box-flex: @arguments;
	-webkit-flex: @arguments;
	-ms-flex: @arguments;
	flex: @arguments;
}

.flex-basis(...) {
	-webkit-flex-basis: @arguments;
	flex-basis: @arguments;
}

.flex-direction(...) {
	-webkit-box-direction: @arguments;
	-moz-box-direction: @arguments;
	-webkit-box-orient: @arguments;
	-moz-box-orient: @arguments;
	-webkit-flex-direction: @arguments;
	-ms-flex-direction: @arguments;
	flex-direction: @arguments;
}

.flex-grow(...) {
	-webkit-flex-grow: @arguments;
	flex-grow: @arguments;
}

.flex-shrink(...) {
	-webkit-flex-shrink: @arguments;
	flex-shrink: @arguments;
}

.flex-wrap(...) {
	-webkit-flex-wrap: @arguments;
	-ms-flex-wrap: @arguments;
	flex-wrap: @arguments;
}

.font-face(@fontname, @fontfile, @fontweight:normal, @fontstyle:normal) {
	font-family: "@{fontname}";
	src: url("@{fontfile}.eot");
	src: url("@{fontfile}.eot?#iefix") format("embedded-opentype"),
	url("@{fontfile}.woff") format("woff"),
	url("@{fontfile}.ttf") format("truetype"),
	url("@{fontfile}.svg#@{fontname}") format("svg");
	font-weight: @fontweight;
	font-style: @fontstyle;
}

.grayscale(...) {
	-webkit-filter: grayscale(@arguments);
	-moz-filter: grayscale(@arguments);
	-ms-filter: grayscale(@arguments);
	filter: grayscale(@arguments);
}

.hue-rotate(...) {
	-webkit-filter: hue-rotate(@arguments);
	-moz-filter: hue-rotate(@arguments);
	-ms-filter: hue-rotate(@arguments);
	filter: hue-rotate(@arguments);
}

.hyphens(...) {
	-webkit-hyphens: @arguments;
	-moz-hyphens: @arguments;
	-ms-hyphens: @arguments;
	hyphens: @arguments;
}

.invert(...) {
	-webkit-filter: invert(@arguments);
	-moz-filter: invert(@arguments);
	-ms-filter: invert(@arguments);
	filter: invert(@arguments);
}

.justify-content(...) {
	-webkit-box-pack: @arguments;
	-moz-box-pack: @arguments;
	-ms-flex-pack: @arguments;
	-webkit-justify-content: @arguments;
	justify-content: @arguments;
}

.opacity(...) {
	zoom: 1; filter: @arguments;
	-webkit-opacity: @arguments;
	-moz-opacity: @arguments;
	opacity: @arguments;
}

.order(...) {
	-webkit-box-ordinal-group: @arguments;
	-moz-box-ordinal-group: @arguments;
	-ms-flex-order: @arguments;
	-webkit-order: @arguments;
	order: @arguments;
}

.perspective(...) {
	-webkit-perspective: @arguments;
	-moz-perspective: @arguments;
	perspective: @arguments;
}

.perspective-origin(...) {
	-webkit-perspective-origin: @arguments;
	-moz-perspective-origin: @arguments;
	perspective-origin: @arguments;
}

.placeholder(@color:#aaa, @element: 08121991) {
	.inception (@arguments) when not (@element = 08121991) {
		@{element}::-webkit-input-placeholder {
			color: @color;
		}
		@{element}:-moz-placeholder {
			color: @color;
		}
		@{element}::-moz-placeholder {
			color: @color;
		}
		@{element}:-ms-input-placeholder {
			color: @color;
		}
	}
	.inception (@arguments) when (@element = 08121991) {
		&::-webkit-input-placeholder {
			color: @color;
		}
		&:-moz-placeholder {
			color: @color;
		}
		&::-moz-placeholder {
			color: @color;
		}
		&:-ms-input-placeholder {
			color: @color;
		}
	}
	.inception(@arguments);
}

.rotate(...) {
	-webkit-transform: rotate(@arguments);
	-moz-transform: rotate(@arguments);
	-o-transform: rotate(@arguments);
	-ms-transform: rotate(@arguments);
	transform: rotate(@arguments);
}

.rotate3d(...) {
	-webkit-transform: rotate3d(@arguments);
	-moz-transform: rotate3d(@arguments);
	-o-transform: rotate3d(@arguments);
	-ms-transform: rotate3d(@arguments);
	transform: rotate3d(@arguments);
}

.rotateX(...) {
	-webkit-transform: rotateX(@arguments);
	-moz-transform: rotateX(@arguments);
	-o-transform: rotateX(@arguments);
	-ms-transform: rotateX(@arguments);
	transform: rotateX(@arguments);
}

.rotateY(...) {
	-webkit-transform: rotateY(@arguments);
	-moz-transform: rotateY(@arguments);
	-o-transform: rotateY(@arguments);
	-ms-transform: rotateY(@arguments);
	transform: rotateY(@arguments);
}

.rotateZ(...) {
	-webkit-transform: rotateZ(@arguments);
	-moz-transform: rotateZ(@arguments);
	-o-transform: rotateZ(@arguments);
	-ms-transform: rotateZ(@arguments);
	transform: rotateZ(@arguments);
}

.saturate(...) {
	-webkit-filter: ~"saturate(@{arguments})";
	-moz-filter: ~"saturate(@{arguments})";
	-ms-filter: ~"saturate(@{arguments})";
	filter: ~"saturate(@{arguments})";
}

.scale(...) {
	-webkit-transform: scale(@arguments);
	-moz-transform: scale(@arguments);
	-o-transform: scale(@arguments);
	-ms-transform: scale(@arguments);
	transform: scale(@arguments);
}

.scale3d(...) {
	-webkit-transform: scale3d(@arguments);
	-moz-transform: scale3d(@arguments);
	-o-transform: scale3d(@arguments);
	-ms-transform: scale3d(@arguments);
	transform: scale3d(@arguments);
}

.scaleX(...) {
	-webkit-transform: scaleX(@arguments);
	-moz-transform: scaleX(@arguments);
	-o-transform: scaleX(@arguments);
	-ms-transform: scaleX(@arguments);
	transform: scaleX(@arguments);
}

.scaleY(...) {
	-webkit-transform: scaleY(@arguments);
	-moz-transform: scaleY(@arguments);
	-o-transform: scaleY(@arguments);
	-ms-transform: scaleY(@arguments);
	transform: scaleY(@arguments);
}

.scaleZ(...) {
	-webkit-transform: scaleZ(@arguments);
	-moz-transform: scaleZ(@arguments);
	-o-transform: scaleZ(@arguments);
	-ms-transform: scaleZ(@arguments);
	transform: scaleZ(@arguments);
}

.sepia(...) {
	-webkit-filter: sepia(@arguments);
	-moz-filter: sepia(@arguments);

	-ms-filter: sepia(@arguments);
	filter: sepia(@arguments);
}

.size(@square) {
	@unit: 'px';
	.process(@square) when (ispixel(@square)), (isem(@square)), (ispercentage(@square)), (iskeyword(@square)) {
		width: @square;
		height: @square;
	}

	.process(@square) when not (ispixel(@square)) and not (isem(@square)) and not (ispercentage(@square)) and not (isstring(@square)) and not (iskeyword(@square)) {
		width: ~`@{square} + @{unit}`;
		height: ~`@{square} + @{unit}`;
	}

	.process(@square);

}

.size(@width, @height) {
	@unit: 'px';
	.process(@width, @height) when (ispixel(@width)), (isem(@width)), (ispercentage(@width)), (iskeyword(@width)) {
		.kittens(@height) when (ispixel(@height)), (isem(@height)), (ispercentage(@height)), (iskeyword(@height)) {
			width: @width;
			height: @height;
		}
		.kittens(@height) when not (ispixel(@height)) and not (isem(@height)) and not (ispercentage(@height)) and not (iskeyword(@height)) {
			width: @width;
			height: ~`@{height} + @{unit}`;
		}
		.kittens(@height);
	}

	.process(@width, @height) when (ispixel(@height)), (isem(@height)), (ispercentage(@height)), (iskeyword(@height)) {
		.kittens(@width) when (ispixel(@width)), (isem(@width)), (ispercentage(@width)), (iskeyword(@width)) {}
		.kittens(@width) when not (ispixel(@width)) and not (isem(@width)) and not (ispercentage(@width)) and not (iskeyword(@width)) {
			width: ~`@{width} + @{unit}`;
			height: @height;
		}
		.kittens(@width);
	}

	.process(@width, @height) when not (ispixel(@width)) and not (isem(@width)) and not (ispercentage(@width)) and not (iskeyword(@width)) and not (ispixel(@height)) and not (isem(@height)) and not (ispercentage(@height)) and not (iskeyword(@height))  {
		width: ~`@{width} + @{unit}`;
		height: ~`@{height} + @{unit}`;
	}

	.process(@width, @height);

}

.skew(...) {
	-webkit-transform: skew(@arguments);
	-moz-transform: skew(@arguments);
	-o-transform: skew(@arguments);
	-ms-transform: skew(@arguments);
	transform: skew(@arguments);
}

.skewX(...) {
	-webkit-transform: skewX(@arguments);
	-moz-transform: skewX(@arguments);
	-o-transform: skewX(@arguments);
	-ms-transform: skewX(@arguments);
	transform: skewX(@arguments);
}

.skewY(...) {
	-webkit-transform: skewY(@arguments);
	-moz-transform: skewY(@arguments);
	-o-transform: skewY(@arguments);
	-ms-transform: skewY(@arguments);
	transform: skewY(@arguments);
}

.transform(...) {
	-webkit-transform: @arguments;
	-moz-transform: @arguments;
	-o-transform: @arguments;
	-ms-transform: @arguments;
	transform: @arguments;
}

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

.transform-style(...) {
	-webkit-transform-style: @arguments;
	-moz-transform-style: @arguments;
	-o-transform-style: @arguments;
	-ms-transform-style: @arguments;
	transform-style: @arguments;
}

.transition(...) {
	-webkit-transition: @arguments;
	-moz-transition: @arguments;
	-o-transition: @arguments;
	transition: @arguments;
}

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

.transition-duration(...) {
	-webkit-transition-duration: @arguments;
	-moz-transition-duration: @arguments;
	-o-transition-duration: @arguments;
	transition-duration: @arguments;
}

.transition-property(...) {
	-webkit-transition-property: @arguments;
	-moz-transition-property: @arguments;
	-o-transition-property: @arguments;
	transition-property: @arguments;
}

.transition-timing-function(...) {
	-webkit-transition-timing-function: @arguments;
	-moz-transition-timing-function: @arguments;
	-o-transition-timing-function: @arguments;
	transition-timing-function: @arguments;
}

.translate(...) {
	-webkit-transform: translate(@arguments);
	-moz-transform: translate(@arguments);
	-o-transform: translate(@arguments);
	-ms-transform: translate(@arguments);
	transform: translate(@arguments);
}

.translate3d(...) {
	-webkit-transform: translate3d(@arguments);
	-moz-transform: translate3d(@arguments);
	-o-transform: translate3d(@arguments);
	-ms-transform: translate3d(@arguments);
	transform: translate3d(@arguments);
}

.translateX(...) {
	-webkit-transform: translateX(@arguments);
	-moz-transform: translateX(@arguments);
	-o-transform: translateX(@arguments);
	-ms-transform: translateX(@arguments);
	transform: translateX(@arguments);
}

.translateY(...) {
	-webkit-transform: translateY(@arguments);
	-moz-transform: translateY(@arguments);
	-o-transform: translateY(@arguments);
	-ms-transform: translateY(@arguments);
	transform: translateY(@arguments);
}

.translateZ(...) {
	-webkit-transform: translateZ(@arguments);
	-moz-transform: translateZ(@arguments);
	-o-transform: translateZ(@arguments);
	-ms-transform: translateZ(@arguments);
	transform: translateZ(@arguments);
}

.user-select(...) {
	-webkit-user-select: @arguments;
	-moz-user-select: @arguments;
	-ms-user-select: @arguments;
	user-select: @arguments;
}

// FIXED CLASS
.fixed(){
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.rgba-color ( @color,  @x:0.6) {
  color: rgba(red(@color), green(@color), blue(@color), @x);
};

.rgba-bg-color (@color,  @x:0.6) {
  background-color: rgba(red(@color), green(@color), blue(@color), @x);
};

@border_color: #eeeeee;

.transition05() {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.transition03() {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}