// 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: .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: .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;
}

@mixin button($color) {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:0.8em 1.2em 0.8em;
	margin: 0 0.1em 0.5em 0.2em;
	position: relative;
	opacity: 1!important;
	line-height: 1!important;
	font-style:normal!important;
	vertical-align: middle;
	@include transition(background-color 0.1s);
	text-shadow: none!important;
	font-family: $sans-serif;
	text-align: center;
	font-weight:700;
	text-decoration: none!important;
	display: inline-block;
	letter-spacing:0;
	color:white!important;
	@include box-shadow( 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) );
	width: auto;
	border:1px solid darken($color, 10%);
	@include border-radius(0);
	background: $color;
	@include background-image(linear-gradient($color, darken($color, 10%)));
	@include text-shadow(0px 0px 5px darken($color, 10%));

	&:hover, &:focus {
		color : #fff!important;
		background: lighten($color, 5%);
	}

	&:active{
		color : #fff!important;
		background: $color;
		top:1px;
		-moz-box-shadow: none!important;
		-webkit-box-shadow: none!important;
		-o-box-shadow: none!important;
		box-shadow: none!important;
	}
}