// black color opacity
@function black($opacity) {
	@return rgba(0, 0, 0, $opacity);
}

// white color opacity
@function white($opacity) {
	@return rgba(255, 255, 255, $opacity);
}

@mixin wrap() {
	width: 92%;
	margin: 0 auto;
	max-width: 1140px;
}

// Word wrap
@mixin word-wrap($val: break-word) {
	-ms-word-wrap: $val;
	word-wrap: $val;
}

// Background cover
@mixin bg-cover() {
	-webkit-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

// Web calc
@mixin calc($property, $expression) {
	#{$property}: -moz-calc(#{$expression});
	#{$property}: -o-calc(#{$expression});
	#{$property}: -webkit-calc(#{$expression});
	#{$property}: calc(#{$expression});
}

// Black and white image
@mixin greyscale() {
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
}

// Cancel greyscale
@mixin no-greyscale() {
	filter: none; /*Applies to FF + IE */
	-webkit-filter: grayscale(0);
}

@mixin css-gradient($from: #dfdfdf, $to: #f8f8f8) {
	background-color: $from;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from($from),
		to($to)
	);
	background-image: -webkit-linear-gradient(top, $from, $to);
	background-image: -moz-linear-gradient(top, $from, $to);
	background-image: -o-linear-gradient(top, $from, $to);
	background-image: linear-gradient(to bottom, $from, $to);
}

@mixin good-clearfix() {
	zoom: 1;
	&:before,
	&:after {
		content: '';
		display: table;
	}
	&:after {
		clear: both;
	}
}

@mixin box-sizing {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

// Hide text
@mixin hide-text() {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

@mixin simplebutton() {
	color: #fff !important;
	padding: 1em 1.2em;
	line-height: 1;
	border: 1px solid #fff;
	display: inline-block;
	transition: 0.25s;

	&:hover {
		background: #fff;
		color: #333 !important;
	}
}

@mixin simplebuttonplain() {
	color: #333 !important;
	padding: 1em 1.2em;
	line-height: 1;
	border: 1px solid #fff;
	display: inline-block;
	transition: 0.25s;
	background: #fff;

	&:hover {
		background: none;
		color: #fff !important;
	}
}

@mixin icon() {
	display: inline-block;
	font-style: normal !important;
	font-weight: 400 !important;
	font-variant: normal !important;
	text-transform: none !important;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}