@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}
// .my-box {
// 	padding: 10px;
// 	@include for-desktop-up {
// 		padding: 20px;
// 	}
// }



@mixin box-shadow( $left-offset: 2px, $top-offset: 2px, $blur: 4px, $color: rgba( 0, 0, 0, 0.30 ), $inset: false ) {
	@if $inset {
		-webkit-box-shadow:inset $left-offset $top-offset $blur $color !important;
		-moz-box-shadow:inset $left-offset $top-offset $blur $color !important;
		-o-box-shadow:inset $left-offset $top-offset $blur $color !important;
		box-shadow:inset $left-offset $top-offset $blur $color !important;
	} @else {
		-webkit-box-shadow: $left-offset $top-offset $blur $color !important;
		-moz-box-shadow: $left-offset $top-offset $blur $color !important;
		-o-box-shadow: $left-offset $top-offset $blur $color !important;
		box-shadow: $left-offset $top-offset $blur $color !important;
	}
}

@mixin text-shadow( $left-offset: 2px, $top-offset: 2px, $blur: 4px, $color: rgba( 0, 0, 0, 0.80 ) ) {
	-webkit-text-shadow: $left-offset $top-offset $blur $color !important;
	-moz-text-shadow: $left-offset $top-offset $blur $color !important;
	-o-text-shadow: $left-offset $top-offset $blur $color !important;
	text-shadow: $left-offset $top-offset $blur $color !important;
}

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

@mixin gradient( $from, $to ) {
	background: -webkit-linear-gradient( top, bottom, from( $from ), to( $to ) ) !important;
	background: -moz-linear-gradient( top, $from, $to ) !important;
	background: -o-linear-gradient( top, $from, $to ) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$from}', endColorstr='#{$to}' ) !important;
}

@mixin opacity( $value: 1.0 ) { // value between 0 and 1
	$IEValue: $value*100 !important;
	opacity: $value !important;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
	filter: alpha(opacity=$IEValue);
}

@mixin scale( $value: 1.0 ) { // 1 = 100%
	-webkit-transform: scale( $value, $value ) !important;
	-moz-transform: scale( $value, $value ) !important;
	-o-transform: scale( $value, $value ) !important;
	transform: scale( $value, $value ) !important; 
}

@mixin bg-cover {
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	-o-background-size: cover !important;
	background-size: cover !important;
}

@mixin angled-bottom {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%) !important;
	-moz-clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%) !important;
	-o-clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%) !important;
	clip-path: polygon(0 0, 100% 0, 100% 93%, 0 100%) !important;
}

@mixin animation( $duration: 0.5s ) {
	-webkit-transition: all $duration !important;
	-moz-transition: all $duration !important;
	-o-transition: all $duration !important;
	transition: all $duration !important;
}

@mixin loop-animate( $effect, $duration ) {
	display: inline-block;
	-webkit-animation-name: $effect;
	animation-name: $effect;
	-webkit-animation-duration: $duration;
	animation-duration: $duration;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@mixin translate-y( $size ) {
	-webkit-transform: translateY( $size );
	transform: translateY( $size );
}