@mixin banner-bg ($img, $aspect){
	background: {
		image: url("#{$p-img}#{$img}");
		size: cover;
		repeat: no-repeat;
		position: center;
	}
	width: 100%;
	height: 100vw/$aspect;
	position: absolute;
}
@mixin picture-bg ($height: auto){
	width: 100%;
  height: $height;

  background: {
    size: cover;
    position: center;
    repeat: no-repeat; 
  }
}
@mixin circle-image ($size, $url:"not-provided"){
	background: {
		size: 100% auto;
		repeat: no-repeat;
		@if $url != "not-provided" {
			image: url("#{$p-img}#{$url}");
		}
	}
	width: $size;
	height: $size;
	border-radius: 100%;
	display: inline-block;
}

@mixin transition($property:all, $duration:1s, $timinng:ease, $delay:0s){
	-webkit-transition: $property $duration $timinng $delay;
	-moz-transition:    $property $duration $timinng $delay;
	-o-transition:      $property $duration $timinng $delay;
	transition:         $property $duration $timinng $delay;
}
@mixin animation($name, $duration:1s, $timinng:ease, $delay:0s){
	-webkit-animation:	$name $duration $timinng $delay normal 1 forwards running;
	-moz-animation:	    $name $duration $timinng $delay normal 1 forwards running;
	-o-animation:		$name $duration $timinng $delay normal 1 forwards running;
	animation:         	$name $duration $timinng $delay normal 1 forwards running;
}
@mixin play-animation(){
	-webkit-animation-play-state:	running;
	-moz-animation-play-state:		running;
	-o-animation-play-state:		running;
	animation-play-state:			running;
}
@mixin filter($values){
	-webkit-filter:	$values;
	filter:			$values;
}
@mixin transform($value){
	-webkit-transform: $value;
	-moz-transform:    $value;
	-o-transform:      $value;
	transform:         $value;
}
@mixin boxshadow($value: 0px 0px 3px rgba(0, 0, 0, 0.2)){
	box-shadow: $value;
}
@mixin icon-image($size: 2rem){
  width: $size;
  height: $size;
  display: block;
  margin: 0 auto;
	background-repeat: no-repeat!important;
}
@mixin ddd(){
	text-overflow: ellipsis;
	overflow: hidden;
}
@mixin max-lines($lines: 3, $line-height: 1.3){
	display: -webkit-box;
	max-height: #{$lines*$line-height}rem;
	line-height: $line-height;
	-webkit-line-clamp: $lines;
	-webkit-box-orient: vertical;
	
	@include ddd;
}
// =============================================================================
// Font Face
// =============================================================================
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
	$src: null;

	$extmods: (
		eot: "?",
		svg: "#" + str-replace($name, " ", "_")
	);

	$formats: (
		otf: "opentype",
		ttf: "truetype"
	);

	@each $ext in $exts {
		$extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
		$format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
		$src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
	}

	@font-face {
		font-family: quote($name);
		font-style: $style;
		font-weight: $weight;
		src: $src;
	}
}