@function to-number($string) {
  // Matrices
  $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  $numbers:  0   1   2   3   4   5   6   7   8   9;
  // Result
  $result: 0;
  $divider: 0;
  $minus: false;
  // Looping through all characters
  @for $i from 1 through str-length($string) {
	$character: str-slice($string, $i, $i);
	$index: index($strings, $character);
	@if $character == '-' {
	  $minus: true;
	}
	@else if $character == '.' {
	  $divider: 1;
	}
	@else {
	  @if type-of($index) != 'number' {
		$result: if($minus, $result * -1, $result);
		@return _length($result, str-slice($string, $i));
	  }
	  $number: nth($numbers, $index);
	  @if $divider == 0 {
		$result: $result * 10;
	  }
	  @else {
		// Move the decimal dot to the left
		$divider: $divider * 10;
		$number: $number / $divider;
	  }
	  $result: $result + $number;
	}
  }
  @return if($minus, $result * -1, $result);
}
@function _size($number, $unit) {
  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
  $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
  $index: index($strings, $unit);
  @if type-of($index) != 'number' {
	@warn 'Unknown unit `#{$unit}`.';
	@return false;
  }
  @return $number * nth($units, $index);
}
@function space($v) {
	@return calc(var(--space) * #{$v});
}
@function map-deep-get($map, $submapKey, $keys...) {
  $iterable: map-get($map, $submapKey);
  @each $key in $keys {
	  $map: map-get($iterable, $key);
  }
  @return $map;
}
@function map-deep-has-key($map, $map-key, $keys...) {
  @each $key in $keys {
	  $tmp: map-deep-get($map, $map-key, $key);
	  @if $tmp != null {
		@return true;
	  }
  }
  @return false;
}
$scale: (
  percent: (
	'10': 10%,
	'20': 20%,
	'25': 25%,
	'33': 33%,
	'40': 40%,
	'45': 45%,
	'50': 50%,
	'60': 60%,
	'67': 66.67%,
	'75': 75%,
	'80': 80%,
	'90': 90%,
	'100': 100%
  ),
  decimal: (
	'01': .1,
	'02': .2,
	'03': .3,
	'04': .4,
	'05': .5,
	'06': .6,
	'07': .7,
	'08': .8,
	'09': .9,
	'1': 1
  ),
  proportion: (
	'xxs': .5rem,
	'xs': 1rem,
	'sm': 1.5rem,
	'ms': 2rem,
	'md': 3rem,
	'ml': 5rem,
	'lg': 6rem,
	'xl': 8rem,
	'xxl': 10rem
  )
);
$flex-basis: (
  1: null,
  2: calc(51% - #{map-deep-get($scale, proportion, sm)} / 2),
  3: calc(33.3333% - 1.5 * #{map-deep-get($scale, proportion, sm)} / 3),
  4: calc(25% - 2 * #{map-deep-get($scale, proportion, sm)} / 4),
  5: calc(25% - 2.5 * #{map-deep-get($scale, proportion, sm)} / 5),
  6: calc(25% - 3 * #{map-deep-get($scale, proportion, sm)} / 6),
  7: calc(14.2857% - 3.5 * #{map-deep-get($scale, proportion, sm)} / 7),
  8: calc(12.5% - 4 * #{map-deep-get($scale, proportion, sm)} / 8),
  9: calc(11.11% - 4.5 * #{map-deep-get($scale, proportion, sm)} / 9),
  10: calc(10% - 5 * #{map-deep-get($scale, proportion, sm)} / 10),
  11: calc(9.0909% - 5.5 * #{map-deep-get($scale, proportion, sm)} / 11),
  12: calc(8.3333% - 6 * #{map-deep-get($scale, proportion, sm)} / 12),
);
$media: (
  breakpoints: (
	'xxs': 240px, // Nokia 8810 and other super small screens like Smart Watches
	'xs': 375px, // Most of the smartsms including Galaxy S and ism 6/7/8/X,
	'sm': 420px, // Large Smartsms like ism XS Max/XR/6 Plus/7 Plus/8 Plus or Galaxy Note 9
	'ms': 767px, // All Devices smaller than Tablet,
	'md': 980px, // Tablets,
	'ml': 1080px, // iPad Pro & super small laptop screens
	'ls': 1280px, // Small laptops like MacBook 12"
	'lg': 1366px, // Most common laptop resolution
	'll': 1440px, // MacBook Pro 13"
	'xl': 1580px, // MacBook Pro 15"
	'xxl': 1920px
  ),
  resolutions: (
	'nHD': (
	  '(min-width: 640px)'
	),
	'qHD': (
	  '(min-width: 960px)'
	),
	'HD': (
	  '(min-width: 1280px)'
	),
	'FHD': (
	  '(min-width: 1920px)'
	),
	'2K': (
	  '(min-width: 2048px)'
	),
	'QHD': (
	  '(min-width: 2560px)'
	),
	'UHD': (
	  '(min-width: 3840px)'
	),
	'4K': (
	  '(min-width: 4096px)'
	),
	'5K': (
	  '(min-width: 5120px)'
	),
	'UHD-2': (
	  '(min-width: 7680px)'
	),
	'8K': (
	  '(min-width: 8192px)'
	),
	'retina2x': (
		'(-webkit-min-device-pixel-ratio: 2)',
		'(min-resolution: 192dpi)'
	),
	'retina3x': (
		'(-webkit-min-device-pixel-ratio: 3)',
		'(min-resolution: 350dpi)'
	)
  ),
  types: (
	'screen': 'screen',
	'print': 'print',
	'handheld': 'handheld'
  )
) !default;
$unit-intervals: (
	'px': 1,
	'em': 0.01,
	'rem': 0.1
) !default;
@mixin background-image($background-image) {
  background-image: $background-image;
}
@mixin background-position-x($background-position-x) {
  background-position-x: $background-position-x;
}
@mixin background-position-y($background-position-y) {
  background-position-y: $background-position-y;
}
@mixin background-position($background-position, $background-position-x: $background-position, $background-position-y: $background-position) {
  @if $background-position {
	background-position: $background-position;
  } @else {
	background-position: $background-position-x $background-position-y;
  }
}
@mixin background-size($background-size) {
  background-size: $background-size;
}
@mixin background-repeat($background-repeat) {
  background-repeat: $background-repeat;
}
@mixin background-origin($background-origin) {
  background-origin: $background-origin;
}
@mixin background-clip($background-clip) {
  background-clip: $background-clip;
}
@mixin background-color($background-color) {
  background-color: $background-color;
}
@mixin background(
  $image: null,
  $position: null,
  $position-y: null,
  $position-x: null,
  $size: null,
  $size-y: null,
  $size-x: null,
  $repeat: null,
  $attachment: null,
  $origin: null,
  $clip: null,
  $color: null
){
  // Image
  @if $image
  and $color == null
  and $position == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image;
  }
  // Color
  @if $color
  and $image == null
  and $position == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $color;
  }
  // Repeat
  @if $repeat
  and $image == null
  and $color == null
  and $position == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background-repeat: $repeat;
  }
  // Attachment
  @if $attachment
  and $image == null
  and $color == null
  and $position == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $origin == null {
	background-attachment: $attachment;
  }
  // Origin
  @if $origin
  and $image == null
  and $color == null
  and $position == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null {
	background-origin: $origin;
  }
  // Clip
  @if $clip
  and $image == null
  and $color == null
  and $position == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $origin == null
  and $attachment == null {
	background-clip: $clip;
  }
  // Positions
  @if $position
  and $image == null
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background-position: $position;
  }
  @if $position-y
  and $image == null
  and $color == null
  and $position-x == null
  and $position == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background-position-y: $position;
  }
  @if $position-x
  and $image == null
  and $color == null
  and $position == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background-position-x: $position;
  }
  @if $position-y and $position-x
  and $image == null
  and $color == null
  and $position == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background-position: $position-y $position-x;
  }
  // Sizes
  @if $size
  and $image == null
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size-y == null
  and $size-x == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background-size: $size;
  }
  @if $size-y and $size-x
  and $image == null
  and $color == null
  and $position == null
  and $size == null
  and $repeat == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background-size: $size-y $size-x;
  }
  // Image and Repeat
  @if $image and $repeat
  and $color == null
  and $position == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image $repeat;
  }
  // Image, Repeat and Positions
  @if $image and $repeat and $position
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image $position $repeat;
  }
  @if $image and $repeat and $position-y and $position-x
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image $position-y $position-x $repeat;
  }
  // Image, Repeat, Positions and Sizes
  @if $image and $repeat and $position and $size
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image #{$position} / #{$size} $repeat;
  }
  @if $image and $repeat and $position and $size-y and $size-x
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image #{$position} / #{$size-y $size-x} $repeat;
  }
  @if $image and $repeat and $position-y and $position-x and $size
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image #{$position-y $position-x} / #{$size} $repeat;
  }
  @if $image and $repeat and $position-y and $position-x and $size-y and $size-x
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $clip == null
  and $attachment == null
  and $origin == null {
	background: $image #{$position-y $position-x} / #{$size-y $size-x} $repeat;
  }
  // Image, Repeat, Positions, Sizes and Attachment
  @if $image and $repeat and $position and $size and $attachment
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $origin == null {
	background: $image #{$position} / #{$size} $repeat $attachment;
  }
  @if $image and $repeat and $position and $size-y and $size-x and $attachment
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $clip == null
  and $origin == null {
	background: $image #{$position} / #{$size-y $size-x} $repeat $attachment;
  }
  @if $image and $repeat and $position-y and $position-x and $size and $attachment
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size-y == null
  and $size-x == null
  and $clip == null
  and $origin == null {
	background: $image #{$position-y $position-x} / #{$size} $repeat $attachment;
  }
  @if $image and $repeat and $position-y and $position-x and $size-y and $size-x and $attachment
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $clip == null
  and $origin == null {
	background: $image #{$position-y $position-x} / #{$size-y $size-x} $repeat $attachment;
  }
  // Image, Repeat, Positions, Sizes, Attachment and Origin
  @if $image and $repeat and $position and $size and $attachment and $origin
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size-y == null
  and $size-x == null
  and $clip == null {
	background: $image #{$position} / #{$size} $repeat $attachment $origin;
  }
  @if $image and $repeat and $position and $size-y and $size-x and $attachment and $origin
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $clip == null {
	background: $image #{$position} / #{$size-y $size-x} $repeat $attachment $origin;
  }
  @if $image and $repeat and $position-y and $position-x and $size and $attachment and $origin
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size-y == null
  and $size-x == null
  and $clip == null {
	background: $image #{$position-y $position-x} / #{$size} $repeat $attachment $origin;
  }
  @if $image and $repeat and $position-y and $position-x and $size-y and $size-x and $attachment and $origin
  and $color == null
  and $position-x == null
  and $position-y == null
  and $size == null
  and $clip == null {
	background: $image #{$position-y $position-x} / #{$size-y $size-x} $repeat $attachment $origin;
  }
	// Image, Repeat, Positions, Sizes, Attachment and Clip
	@if $image and $repeat and $position and $size and $attachment and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size-y == null
	and $size-x == null
	and $origin == null {
	  background: $image #{$position} / #{$size} $repeat $attachment $clip;
	}
	@if $image and $repeat and $position and $size-y and $size-x and $attachment and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size == null
	and $origin == null {
	  background: $image #{$position} / #{$size-y $size-x} $repeat $attachment $clip;
	}
	@if $image and $repeat and $position-y and $position-x and $size and $attachment and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size-y == null
	and $size-x == null
	and $origin == null {
	  background: $image #{$position-y $position-x} / #{$size} $repeat $attachment $clip;
	}
	@if $image and $repeat and $position-y and $position-x and $size-y and $size-x and $attachment and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size == null
	and $origin == null {
	  background: $image #{$position-y $position-x} / #{$size-y $size-x} $repeat $attachment $clip;
	}
	// Image, Repeat, Positions, Sizes, Attachment, Origin and Clip
	@if $image and $repeat and $position and $size and $attachment and $origin and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size-y == null
	and $size-x == null {
	  background: $image #{$position} / #{$size} $repeat $attachment $origin $clip;
	}
	@if $image and $repeat and $position and $size-y and $size-x and $attachment and $origin and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size == null {
	  background: $image #{$position} / #{$size-y $size-x} $repeat $attachment $origin $clip;
	}
	@if $image and $repeat and $position-y and $position-x and $size and $attachment and $origin and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size-y == null
	and $size-x == null {
	  background: $image #{$position-y $position-x} / #{$size} $repeat $attachment $origin $clip;
	}
	@if $image and $repeat and $position-y and $position-x and $size-y and $size-x and $attachment and $origin and $clip
	and $color == null
	and $position-x == null
	and $position-y == null
	and $size == null {
	  background: $image #{$position-y $position-x} / #{$size-y $size-x} $repeat $attachment $origin $clip;
	}
	// Complete Property
	@if $image
	and $color
	and $position
	and $position-x == null
	and $position-y == null
	and $size
	and $size-y == null
	and $size-x == null
	and $repeat
	and $clip
	and $attachment
	and $origin {
	  background: $image #{$position} / #{$size} $repeat $attachment $origin $clip $color;
	}
	@if $image
	and $color
	and $position == null
	and $position-x
	and $position-y
	and $size
	and $size-y == null
	and $size-x == null
	and $repeat
	and $clip
	and $attachment
	and $origin {
	  background: $image #{$position-y $position-x} / #{$size} $repeat $attachment $origin $clip $color;
	}
	@if $image
	and $color
	and $position
	and $position-x == null
	and $position-y == null
	and $size == null
	and $size-y
	and $size-x
	and $repeat
	and $clip
	and $attachment
	and $origin {
	  background: $image #{$position} / #{$size-y $size-x} $repeat $attachment $origin $clip $color;
	}
	@if $image
	and $color
	and $position == null
	and $position-x
	and $position-y
	and $size == null
	and $size-y
	and $size-x
	and $repeat
	and $clip
	and $attachment
	and $origin {
	  background: $image #{$position-y $position-x} / #{$size-y $size-x} $repeat $attachment $origin $clip $color;
	}
}
@mixin border-width($border-width) {
  border-width: $border-width;
}
@mixin border-style($border-style) {
  border-style: $border-style;
}
@mixin border-radius($border-radius) {
  border-radius: $border-radius;
}
@mixin border-top($width: null, $style: null, $color: null, $radius: null) {
  border-top: $width;
  border-style: $style;
  border-color: $color;
  border-radius: $radius;
}
@mixin border-right($width: null, $style: null, $color: null, $radius: null) {
  border-right: $width;
  border-style: $style;
  border-color: $color;
  border-radius: $radius;
}
@mixin border-bottom($width: null, $style: null, $color: null, $radius: null) {
  border-bottom: $width;
  border-style: $style;
  border-color: $color;
  border-radius: $radius;
}
@mixin border-left($width: null, $style: null, $color: null, $radius: null) {
  border-left: $width;
  border-style: $style;
  border-color: $color;
  border-radius: $radius;
}
@mixin border(
  $border: null,
  $top: null,
  $right: null,
  $bottom: null,
  $left: null,
  $x: null,
  $y: null,
  $width: null,
  $style: null,
  $color: null,
  $radius: null,
) {
  // Single Property
  border: $border;
  @if $width and $style == null and $color == null {
	border-width: $width;
  }
  @if $style and $width == null and $color == null {
	border-style: $style;
  }
  @if $color and $width == null and $style == null {
	border-color: $color;
  }
  @if $radius {
	border-radius: $radius;
  }
  @if $top and $style == null and $color == null {
	border-top: $top;
  }
  @if $right and $style == null and $color == null {
	border-right: $right;
  }
  @if $bottom and $style == null and $color == null {
	border-bottom: $bottom;
  }
  @if $left and $style == null and $color == null {
	border-left: $left;
  }
  @if $x and $style == null and $color == null {
	border-left: $x;
	border-right: $x;
  }
  @if $y and $style == null and $color == null {
	border-top: $y;
	border-bottom: $y;
  }
  // Two properties
  @if $width and $style and $color == null {
	border: $width $style;
  }
  @if $top and $style and $color == null {
	border-top: $top $style;
  }
  @if $right and $style and $color == null {
	border-right: $right $style;
  }
  @if $bottom and $style and $color == null {
	border-bottom: $bottom $style;
  }
  @if $left and $style and $color == null {
	border-left: $left $style;
  }
  @if $x and $style and $color == null {
	border-left: $x $style;
	border-right: $x $style;
  }
  @if $y and $style and $color == null {
	border-top: $y $style;
	border-bottom: $y $style;
  }
  // Three Properties
  @if $width and $style and $color {
	border: $width $style $color;
  }
  @if $top and $style and $color {
	border-top: $top $style $color;
  }
  @if $right and $style and $color {
	border-right: $right $style $color;
  }
  @if $bottom and $style and $color {
	border-bottom: $bottom $style $color;
  }
  @if $left and $style and $color {
	border-left: $left $style $color;
  }
}
@mixin box(
  $min-width: null,
  $width: null,
  $max-width: null,
  $min-height: null,
  $height: null,
  $max-height: null,
  $size: null,
  $size-max: null,
  $padding: null,
  $padding-x: null,
  $padding-y: null,
  $padding-top: null,
  $padding-right: null,
  $padding-bottom: null,
  $padding-left: null,
  $margin: null,
  $margin-x: auto,
  $margin-y: null,
  $margin-top: null,
  $margin-right: null,
  $margin-bottom: null,
  $margin-left: null,
  $display: null,
  $place: null
){
  @include size(
	$size: $size,
	$min-x: $min-width,
	$x: $width,
	$max-x:$max-width,
	$min-y: $min-height,
	$y: $height,
	$max-y: $max-height
  );
  @include padding(
	$padding: $padding,
	$y: $padding-y,
	$x: $padding-x,
	$top: $padding-top,
	$right: $padding-right,
	$bottom: $padding-bottom,
	$left: $padding-left
  );
  @include margin(
	$margin: $margin,
	$y: $margin-y,
	$x: $margin-x,
	$top: $margin-top,
	$right: $margin-right,
	$bottom: $margin-bottom,
	$left: $margin-left
  );
  @if $display == flex or $display == 'flex' {
	@if $place {
	  @include flex($place: $place)
	} @else {
	  @include flex;
	}
  }
}
@mixin boxed($width: null, $max-width: null) {
  width: $width;
  max-width: $max-width;
  margin: auto !important;
  @media all and (max-width: 767px) {
	width: calc(100% - #{map-deep-get($scale, proportion, sm)});
  }
}
@mixin fullwidth {
  width: 100%;
  max-width: 100vw;
}
@mixin container {
  box-sizing: border-box;
  width: 100%;
  &__inner {
	@include size(100%);
	margin: auto;
	&--boxed {
	  @include boxed;
	}
  }
}
@mixin flex-grow($flex-grow) {
  flex-grow: $flex-grow;
}
@mixin flex-shrink($flex-shrink) {
  flex-shrink: $flex-shrink;
}
@mixin flex-basis($flex-basis) {
  flex-basis: $flex-basis;
}
@mixin flex-direction($flex-direction) {
  flex-direction: $flex-direction;
}
@mixin flex-wrap($flex-wrap) {
  flex-wrap: $flex-wrap;
}
@mixin flex(
  $grow: null,
  $shrink: null,
  $basis: null,
  $direction: null,
  $wrap: null,
  $justify-content: null,
  $align-items: null,
  $place: null,
  $position: null,
  $gap: null // TO BE REMOVED
) {
  display: flex;
  @if $grow & $shrink & $basis {
  flex: $grow $shrink $basis;
  }
  @if $grow {
	flex-grow: $grow;
  }
  @if $shrink {
	flex-shrink: $shrink;
  }
  @if $basis {
	flex-basis: $basis;
  }
  @if $direction {
	flex-direction: $direction;
  }
  @if $wrap {
	flex-wrap: $wrap;
  }
  @if $justify-content {
	justify-content: $justify-content;
  }
  @if $align-items {
	align-items: $align-items;
  }
  @if $gap {
	gap: $gap;
  }
  // TO BE REMOVED
  @if $position {
	justify-content: $position;
	align-items: $position;
  }
  ////////////////
  @if $place == 'center start' or $place == 'center flex-start' {
	justify-content: center;
	align-items: flex-start;
  }
  @if $place == 'center' or $place == 'center center' {
	  justify-content: center;
	  align-items: center;
  }
  @if $place == 'center end' or $place == 'center flex-end' {
	  justify-content: center;
	  align-items: flex-end;
  }
  @if $place == 'center space-between' {
	justify-content: center;
	align-items: space-between;
  }
  @if $place == 'center space-around' {
	justify-content: center;
	align-items: space-around;
  }
	@if $place == 'start' or $place == 'flex-start' or $place == 'start start' or $place == 'flex-start flex-start' {
	  justify-content: flex-start;
	  align-items: flex-start;
  }
	@if $place == 'start center' or $place == 'flex-start center' {
	  justify-content: flex-start;
	  align-items: center;
  }
	@if $place == 'start end' or $place == 'flex-start flex-end' or $place == 'start flex-end' or $place == 'flex-start end' {
	  justify-content: flex-start;
	  align-items: flex-end;
  }
  @if $place == 'start space-between' or $place == 'flex-start space-between' {
	justify-content: flex-start;
	align-items: space-between;
  }
  @if $place == 'start space-around' or $place == 'flex-start space-around' {
	justify-content: flex-start;
	align-items: space-around;
  }
	@if $place == 'end start' or $place == 'flex-end flex-start' or $place == 'flex-end start' or $place == 'end flex-start' {
	  justify-content: flex-end;
	  align-items: flex-start;
  }
	@if $place == 'end center' or $place == 'flex-end center' {
	  justify-content: flex-end;
	  align-items: center;
  }
	@if $place == 'end' or $place == 'flex-end' or $place == 'end end' or $place == 'flex-end flex-end' {
	  justify-content: flex-end;
	  align-items: flex-end;
  }
  @if $place == 'end space-between' or $place == 'flex-end space-between' {
	justify-content: flex-end;
	align-items: space-between;
  }
  @if $place == 'end space-around' or $place == 'flex-end space-around' {
	justify-content: flex-end;
	align-items: space-around;
  }
  @if $place == 'space-between start' or $place == 'space-between flex-start' {
	justify-content: space-between;
	align-items: flex-start;
  }
  @if $place == 'space-between center' {
	justify-content: space-between;
	align-items: center;
  }
  @if $place == 'space-between end' or $place == 'space-between flex-end' {
	justify-content: space-between;
	align-items: flex-end;
  }
  @if $place == 'space-between space-around' {
	justify-content: space-between;
	align-items: space-around;
  }
  @if $place == 'space-between space-between' {
	justify-content: space-between;
	align-items: space-between;
  }
  @if $place == 'space-around start' or $place == 'space-around flex-start' {
	justify-content: space-around;
	align-items: flex-start;
  }
  @if $place == 'space-around center' {
	justify-content: space-around;
	align-items: center;
  }
  @if $place == 'space-around end' or $place == 'space-around flex-end' {
	justify-content: space-around;
	align-items: flex-end;
  }
  @if $place == 'space-around space-around' {
	justify-content: space-around;
	align-items: space-around;
  }
  @if $place == 'space-around space-between' {
	justify-content: space-around;
	align-items: space-between;
  }
}
@mixin font-weight($font-weight) {
  font-weight: $font-weight;
}
@mixin font-variant($font-variant) {
  font-variant: $font-variant;
}
@mixin font-stretch($font-stretch) {
  font-stretch: $font-stretch;
}
@mixin font-size($font-size) {
  font-size: $font-size;
}
@mixin line-height($line-height) {
  line-height: $line-height;
}
@mixin font-family($font-family) {
  font-family: $font-family;
}
@mixin font(
  $style: null,
  $weight: null,
  $variant: null,
  $stretch: null,
  $size: null,
  $line-height: null,
  $family: null,
  $letter-spacing: null,
  $color: null,
  $align: null,
  $important: null
) {
  @if $style and $variant and $weight and $size and $line-heigh and $family {
	@if $important {
	  font: $style $variant $weight #{$size}/#{$line-height} $family !important;
	} @else {
	  font: $style $variant $weight #{$size}/#{$line-height} $family;
	}
  }
  @if $size and $weight == null and $line-height == null {
	@if $important {
	  font-size: $size !important;
	} @else {
	  font-size: $size;
	}
  }
  @if $weight and $size == null and $line-height == null and $family == null {
	@if $important {
	  font-weight: $weight !important;
	} @else {
	  font-weight: $weight;
	}
  }
  @if $size and $weight and $line-height == null and $family == null {
	@if $important {
	  font-size: $size !important;
	  font-weight: $weight !important;
	} @else {
	  font-size: $size;
	  font-weight: $weight;
	}
  }
  @if $line-height and $size == null and $weight == null and $family == null {
	@if $important {
	  line-height: $line-height !important;
	} @else {
	  line-height: $line-height;
	}
  }
  @if $size and $line-height and $weight == null and $family == null {
	@if $important {
	  font-size: $size !important;
	  line-height: $line-height !important;
	} @else {
	  font-size: $size;
	  line-height: $line-height;
	}
  }
  @if $size and $weight and $family and $line-height == null {
	@if $important {
	  font: $weight #{$size}/1 $family !important;
	  line-height: inherit !important;
	} @else {
	  font: $weight #{$size}/1 $family;
	  line-height: inherit !important;
	}
  }
  @if $size and $weight and $line-height and $family == null {
	@if $important {
	  font: $weight #{$size}/#{$line-height} sans-serif !important;
	  font-family: inherit !important;
	} @else {
	  font: $weight #{$size}/#{$line-height} sans-serif;
	  font-family: inherit !important;
	}
  }
  @if $size and $weight and $line-height and $family {
	@if $important {
	  font: $weight #{$size}/#{$line-height} $family !important;
	} @else {
	  font: $weight #{$size}/#{$line-height} $family;
	}
  }
  @if $letter-spacing {
	@if $important {
	  letter-spacing: $letter-spacing !important;
	} @else {
	  letter-spacing: $letter-spacing;
	}
  }
  @if $color {
	@if $important {
	  color: $color !important;
	} @else {
	  color: $color;
	}
  }
  @if $align {
	@if $important {
	  text-align: $align !important;
	} @else {
	  text-align: $align;
	}
  }
}
@mixin grid-layout-core(
  $gap: null,
  $cols: null,
  $cols-fr: null,
  $cols-gap: null,
  $rows: null,
  $rows-fr: null,
  $rows-gap: null,
  $place-items: null,
  $place-content: null,
  $justify-items: null,
  $justify-content: null,
  $align-items: null,
  $align-content: null,
  $template: null,
  $template-areas: null,
  $template-columns: null,
  $template-rows: null,
  $media: null
) {
  @include flex($wrap: wrap);
  > div {
	@if $gap {
	  @if $cols == 1 {
		flex-basis: 100%;
	  }
	  @if $cols == 2 {
		flex-basis: calc(50% - #{$gap} / 2);
	  }
	  @if $cols == 3 {
		flex-basis: calc(33.3333% - 2 * #{$gap} / 3);
	  }
	  @if $cols == 4 {
		flex-basis: calc(25% - 3 * #{$gap} / 4);
	  }
	  @if $cols == 5 {
		flex-basis: calc(25% - 4 * #{$gap} / 5);
	  }
	  @if $cols == 6 {
		flex-basis: calc(25% - 5 * #{$gap} / 6);
	  }
	  @if $cols == 7 {
		flex-basis: calc(14.2857% - 6 * #{$gap} / 7);
	  }
	  @if $cols == 8 {
		flex-basis: calc(12.5% - 7 * #{$gap} / 8);
	  }
	  @if $cols == 9 {
		flex-basis: calc(11.11% - 8 * #{$gap} / 9);
	  }
	  @if $cols == 10 {
		flex-basis: calc(10% - 9 * #{$gap} / 10);
	  }
	  @if $cols == 11 {
		flex-basis: calc(9.0909%- 10 * #{$gap} / 11);
	  }
	  @if $cols == 12 {
		flex-basis: calc(8.3333% - 11 * #{$gap} / 12);
	  }
	}
  }
  // CSS Grid-based layout system
  @if $cols {
	@if $rows == null {
	  @if $cols-fr == null and $rows-fr == null {
		@include grid(
		  $template-columns: repeat($cols, auto),
		  $template-rows: auto,
		  $gap: $gap
		);
	  }
	  @if $cols-fr {
		@if $rows-fr == null {
		  @include grid(
		  $template-columns: repeat($cols, $cols-fr),
		  $template-rows: auto,
		  $gap: $gap
		  );
		}
	  }
	}
  }
  @if $rows {
	@include grid(
	  $template-columns: repeat($cols, auto),
	  $template-rows: repeat($rows, auto),
	  $gap: $gap
	);
	@if $rows-fr {
	  @if $cols-fr == null {
		@include grid(
		$template-columns: repeat($cols, auto),
		$template-rows: (auto, $rows-fr),
		$gap: $gap
		);
	  }
	}
  }
  @if $cols-gap {
	column-gap: $cols-gap;
  }
  @if $rows-gap {
	row-gap: $rows-gap;
  }
  @if $justify-content {
	justify-content: $justify-content;
  }
  @if $justify-items {
	justify-items: $justify-items;
  }
  @if $align-content {
	align-content: $align-content;
  }
  @if $align-items {
	align-items: $align-items;
  }
  @if $place-content {
	place-content: $place-content;
  }
  @if $place-items {
	place-items: $place-items;
  }
  @if $template {
	grid-template: $template;
  }
  @if $template-areas {
	grid-template-areas: $template-areas;
  }
  @if $template-columns {
	grid-template-columns: $template-columns;
  }
  @if $template-rows {
	grid-template-rows: $template-rows;
  }
}
@mixin grid-layout(
  $gap: null,
  $cols: null,
  $cols-fr: null,
  $cols-gap: null,
  $rows: null,
  $rows-fr: null,
  $rows-gap: null,
  $justify-items: null,
  $justify-content: null,
  $align-items: null,
  $align-content: null,
  $place-items: null,
  $place-content: null,
  $template: null,
  $template-columns: null,
  $template-rows: null,
  $template-areas: null,
  $media: null
) {
  @include grid-layout-core(
	$gap: $gap,
	$cols: $cols,
	$cols-fr: $cols-fr,
	$cols-gap: $cols-gap,
	$rows: $rows,
	$rows-fr: $rows-fr,
	$rows-gap: $rows-gap,
	$justify-items: $justify-items,
	$justify-content: $justify-content,
	$align-items: $align-items,
	$align-content: $align-content,
	$place-items: $place-items,
	$place-content: $place-content,
	$template: $template,
	$template-areas: $template-areas,
	$template-columns: $template-columns,
	$template-rows: $template-rows,
  );
  @if $media {
	@include media($media) {
	  @include grid-layout-core(
		$gap: $gap,
		$cols: $cols,
		$cols-fr: $cols-fr,
		$cols-gap: $cols-gap,
		$rows: $rows,
		$rows-fr: $rows-fr,
		$rows-gap: $rows-gap,
		$justify-items: $justify-items,
		$justify-content: $justify-content,
		$align-items: $align-items,
		$align-content: $align-content,
		$place-items: $place-items,
		$place-content: $place-content,
		$template: $template,
		$template-areas: $template-areas,
		$template-columns: $template-columns,
		$template-rows: $template-rows
	  );
	}
  }
}
/*** Parent ***/
@mixin grid-template-columns($grid-template-columns) {
  grid-template-columns: $grid-template-columns;
}
@mixin grid-template-rows($grid-template-rows) {
  grid-template-rows: $grid-template-rows;
}
@mixin grid-template-areas($grid-template-areas) {
  grid-template-areas: $grid-template-areas;
}
// @mixin grid-template($grid-template-areas, $grid-template-columns, $grid-template-rows) {
// }
/*** Children ***/
@mixin grid-column-start($grid-column-start) {
  grid-column-start: $grid-column-start;
}
@mixin grid-column-end($grid-column-end) {
  grid-column-end: $grid-column-end;
}
@mixin grid-column($grid-column) {
  grid-column: $grid-column;
}
@mixin grid-row($grid-row) {
  grid-row: $grid-row;
}
@mixin grid-row-start($grid-row-start) {
  grid-row-start: $grid-row-start;
}
@mixin grid-row-end($grid-row-end) {
  grid-row-end: $grid-row-end;
}
@mixin grid-area($grid-area) {
  grid-area: $grid-area;
}
@mixin grid-column-gap($grid-column-gap) {
  grid-column-gap: $grid-column-gap;
}
@mixin grid-row-gap($grid-row-gap) {
  grid-row-gap: $grid-row-gap;
}
@mixin grid-gap($grid-gap) {
  grid-gap: $grid-gap;
}
@mixin  grid(
  $template-columns: null,
  $template-rows: null,
  $template-areas: null,
  $template: null,
  $column-start: null,
  $column-end: null,
  $column: null,
  $row-start: null,
  $row-end: null,
  $row: null,
  $area: null,
  $column-gap: null,
  $row-gap: null,
  $gap: null,
  $justify-items: null,
  $justify-content: null,
  $align-items: null,
  $align-content: null,
  $place-items: null,
  $place-content: null
){
  display: grid;
  grid-template-columns: $template-columns;
  grid-template-rows: $template-rows;
  grid-template-areas: $template-areas;
  grid-template: $template;
  grid-column-start: $column-start;
  grid-column-end: $column-end;
  grid-column: $column;
  grid-row-start: $row-start;
  grid-row-end: $row-end;
  grid-row: $row;
  grid-column-gap: $column-gap;
  grid-row-gap: $row-gap;
  grid-gap: $gap;
  justify-content: $justify-content;
  justify-items: $justify-items;
  align-content: $align-content;
  align-items: $align-items;
  place-content: $place-content;
  place-items: $place-items;
}
@mixin hide(
  $media: null
) {
  @if $media {
	@include media($media) {
	  display: none !important;
	  opacity: 0 !important;
	  pointer-events: none !important;
	}
  } @else {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
  }
}
@mixin hover-highlight($highlightedClassname) {
	@media all and (min-width: 1025px) {
		& {
			pointer-events: none;
			&:hover #{$highlightedClassname} {
				pointer-events: all;
				opacity: 0.75;
			}
		}
		#{$highlightedClassname} {
			pointer-events: all;
			transition: opacity var(--time-1) ease-out;
			&:hover {
				opacity: 1;
			}
		}
	}
}
@mixin margin-top($margin-top) {
  margin-top: $margin-top;
}
@mixin margin-right($margin-right) {
  margin-right: $margin-right;
}
@mixin margin-bottom($margin-bottom) {
  margin-bottom: $margin-bottom;
}
@mixin margin-left($margin-left) {
  margin-left: $margin-left;
}
@mixin margin-x($margin-x) {
  margin-left: $margin-x;
  margin-right: $margin-x;
}
@mixin margin-y($margin-y) {
  margin-top: $margin-y;
  margin-bottom: $margin-y;
}
@mixin margin(
  $margin: null,
  $top: null,
  $right: null,
  $bottom: null,
  $left: null,
  $x: null,
  $y: null,
  $important: null,
  $first: null,
  $first-top: null,
  $first-right: null,
  $first-bottom: null,
  $first-left: null,
  $first-y: null,
  $first-x: null,
  $last: null,
  $last-child: null,
  $last-of-type: null,
  $last-top: null,
  $last-right: null,
  $last-bottom: null,
  $last-left: null,
  $last-y: null,
  $last-x: null,
  $nth-child-order: null,
  $nth-child-value: null
) {
  // Single Property
  @if $margin {
	margin: $margin;
  }
  @if $top and $right == null and $bottom == null and $left == null and $x == null and $y == null {
	@if $important {
	  margin-top: $top !important;
	} @else {
	  margin-top: $top;
	}
  }
  @if $right and $bottom == null and $left == null and $top == null and $x == null and $y == null {
	@if $important {
	  margin-right: $right !important;
	} @else {
	  margin-right: $right;
	}
  }
  @if $bottom and $left == null and $top == null and $right == null and $x == null and $y == null {
	@if $important {
	  margin-bottom: $bottom !important;
	} @else {
	  margin-bottom: $bottom;
	}
  }
  @if $left and $top == null and $right == null and $bottom == null and $x == null and $y == null {
	@if $important {
	  margin-left: $left !important;
	} @else {
	  margin-left: $left;
	}
  }
  // Two Properties
  @if $top and $right and $left == null and $bottom == null and $y == null and $x == null {
	@if $important {
	  margin: $top $right 0 0!important;
	} @else {
	  margin: $top $right 0 0;
	}
  }
  @if $top and $bottom and $left == null and $right == null and $y == null and $x == null {
	@if $important {
	  margin: $top 0 $bottom 0 !important;
	} @else {
	  margin: $top 0 $bottom 0;
	}
  }
  @if $top and $left  and $bottom == null and $right == null and $y == null and $x == null {
	@if $important {
	  margin: $top 0 0 $left !important;
	} @else {
	  margin: $top 0 0 $left;
	}
  }
  @if $left and $right and $top == null and $bottom == null and $y == null and $x == null {
	@if $important {
	  margin: 0 $right 0 $left !important;
	} @else {
	  margin: 0 $right 0 $left;
	}
  }
  @if $left and $bottom  and $top == null and $right == null and $y == null and $x == null {
	@if $important {
	  margin: 0 0 $bottom $left !important;
	} @else {
	  margin: 0 0 $bottom $left;
	}
  }
  @if $right and $bottom and $left == null and $top == null and $y == null and $x == null {
	@if $important {
	  margin: 0 $right $bottom 0 !important;
	} @else {
	  margin: 0 $right $bottom 0;
	}
  }
  // Three Properties
  @if $top and $bottom and $right and $left == null {
	@if $important {
	  margin: 0 $right $bottom $left !important;
	} @else {
	  margin: 0 $right $bottom $left;
	}
  }
  @if $top and $bottom and $left and $right == null {
	@if $important {
	  margin: $top 0 $bottom $left !important;
	} @else {
	  margin: $top 0 $bottom $left;
	}
  }
  @if $top and $left and $right and $bottom == null {
	@if $important {
	  margin: $top $right 0 $left !important;
	} @else {
	  margin: $top $right 0 $left;
	}
  }
  @if $bottom and $left and $right and $top == null {
	@if $important {
	  margin: 0 $right $bottom $left !important;
	} @else {
	  margin: 0 $right $bottom $left;
	}
  }
  @if $y  and $right and $left and $x == null {
	@if $important {
	  margin: $y $right $y $left !important;
	} @else {
	  margin: $y $right $y $left;
	}
  }
  @if $x  and $top and $bottom and $y == null {
	@if $important {
	  margin: $top $x $bottom $x !important;
	} @else {
	  margin: $top $x $bottom $x;
	}
  }
  // Four Properties
  @if $top and $right and $bottom and $left and $x == null and $y == null {
	@if $important {
	  margin: $top $right $bottom $left !important;
	} @else {
	  margin: $top $right $bottom $left;
	}
  }
  // Axis Properties
  @if $x and $y == null and $top == null and $bottom == null {
	@if $important {
	  margin: 0 $x !important;
	} @else {
	  margin: 0 $x;
	}
  }
  @if $y and $x == null and $right == null and $left == null {
	@if $important {
	  margin: $y 0!important;
	} @else {
	  margin: $y 0
	}
  }
  @if $x and $y {
	@if $important {
	  margin: $y $x $y $x !important;
	} @else {
	  margin: $y $x $y $x;
	}
  }
  @if $x and $top and $bottom == null {
	@if $important {
	  margin: $top $x 0 $x !important;
	} @else {
	  margin: $top $x 0 $x;
	}
  }
  @if $x and $bottom and $top == null {
	@if $important {
	  margin: 0 $x $bottom $x !important;
	} @else {
	  margin: 0 $x $bottom $x;
	}
  }
  @if $y and $right and $left == null {
	@if $important {
	  margin: $y $right $y 0 !important;
	} @else {
	  margin: $y $right $y 0;
	}
  }
  @if $y and $left and $right == null {
	@if $important {
	  margin: $y 0 $y $left !important;
	} @else {
	  margin: $y 0 $y $left;
	}
  }
  @if $first {
	&:first-child,
	&:first-of-type {
	  margin: $first;
	}
  }
  @if $first-top {
	&:first-child,
	&:first-of-type {
	  margin-top: $first-top;
	}
  }
  @if $first-right {
	&:first-child,
	&:first-of-type {
	  margin-right: $first-right;
	}
  }
  @if $first-bottom {
	&:first-child,
	&:first-of-type {
	  margin-bottom: $first-bottom;
	}
  }
  @if $first-left {
	&:first-child,
	&:first-of-type {
	  margin-left: $first-left;
	}
  }
  @if $first-y {
	&:first-child,
	&:first-of-type {
	  margin: $first-y 0;
	}
  }
  @if $first-x {
	&:first-child,
	&:first-of-type {
	  margin: 0 $first-x;
	}
  }
  @if $last {
	&:last-child,
	&:last-of-type {
	  margin: $last;
	}
  }
  @if $last-child {
	&:last-child {
	  margin: $last;
	}
  }
  @if $last-of-type {
	&:last-of-type {
	  margin: $last;
	}
  }
  @if $last-top {
	&:last-child,
	&:last-of-type {
	  margin-top: $last-top;
	}
  }
  @if $last-right {
	&:last-child,
	&:last-of-type {
	  margin-right: $last-right;
	}
  }
  @if $last-bottom {
	&:last-child,
	&:last-of-type {
	  margin-bottom: $last-bottom;
	}
  }
  @if $last-left {
	&:last-child,
	&:last-of-type {
	  margin-left: $last-left;
	}
  }
  @if $last-y {
	&:last-child,
	&:last-of-type {
	  margin: $last-y 0;
	}
  }
  @if $last-x {
	&:last-child,
	&:last-of-type {
	  margin: 0 $last-x;
	}
  }
  @if $nth-child-value {
	&:nth-child(#{$nth-child-order}) {
	  margin: $nth-child-value;
	}
  }
}
@mixin outline-width($outline-width) {
  outline-width: $outline-width;
}
@mixin outline-style($outline-style) {
  outline-style: $outline-style;
}
@mixin outline-color($outline-color) {
  outline-color: $outline-color;
}
@mixin outline-offset($outline-offset) {
  outline-offset: $outline-offset;
}
@mixin outline($outline-width: null, $outline-style: null, $outline-color: null, $outline-offset: null) {
  outline: $outline-width $outline-style $outline-color;
  outline-offset: $outline-offset;
}
@mixin overflow-carousel(
  $viewport-classname: null,
  $viewport-width: 100%,
  $viewport-padding: null,
  $slide-classname: null,
  $slide-width: null,
  $slide-height: null,
  $gap: 0,
  $overflow-overlay-width: null,
  $overflow-overlay-background: null,
  $pagination-enabled: false,
  $snap: false
) {
  #{$viewport-classname} {
	width: $viewport-width;
	@if $gap and $viewport-padding == 0 {
	  padding-left: $gap;
	}
	padding-left: $viewport-padding;
	display: flex;
	flex-direction: row !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;
	&::-webkit-scrollbar {
	  display: none;
	}
	@if $snap == true {
	  overscroll-behavior: contain;
	  scroll-snap-type: x mandatory;
	  -ms-overflow-style: none;
	  @if $viewport-padding {
		scroll-padding: 0 $viewport-padding 0 $viewport-padding;
	  }
	}
  }
  @if $overflow-overlay-width or $overflow-overlay-background {
	position: relative;
	#{$viewport-classname}::after {
	  content: "";
	  position: absolute;
	  top: 0;
	  right: 0;
	  height: 100%;
	  width: $overflow-overlay-width;
	  background: $overflow-overlay-background;
	  pointer-events: none;
	}
  }
  #{$slide-classname} {
	flex-shrink: 0;
	scroll-snap-align: start;
	position: relative;
	float: left;
	margin-right: $gap !important;
	width: $slide-width;
	height: $slide-height;
	&:last-of-type {
	  &::after {
		content: "";
		position: absolute;
		left: 100%;
		top: 0;
		height: 100%;
		width: $viewport-padding;
	  }
	}
  }
  @if $pagination-enabled {
	#{$pagination-classname} {
	  position: absolute;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  text-align: center;
	  &-list,
	  &-item {
		display: inline-block;
	  }
	  &-button {
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		background-color: #333;
		background-clip: content-box;
		border: 0.25rem solid transparent;
		border-radius: 50%;
		font-size: 0;
		transition: transform 0.1s;
	  }
	}
  }
}
@mixin overflow($x: null, $y: null, $overscroll-behavior: contain, $scroll-behavior: smooth) {
  overflow-x: $x;
  overflow-y: $y;
  scroll-behavior: $scroll-behavior;
  overscroll-behavior: $overscroll-behavior;
  -webkit-overflow-scrolling: touch;
}
@mixin padding-top($padding-top) {
  padding-top: $padding-top;
}
@mixin padding-right($padding-right) {
  padding-right: $padding-right;
}
@mixin padding-bottom($padding-bottom) {
  padding-bottom: $padding-bottom;
}
@mixin padding-left($padding-left) {
  padding-left: $padding-left;
}
@mixin padding-x($padding-x) {
  padding-left: $padding-x;
  padding-right: $padding-x;
}
@mixin padding-y($padding-y) {
  padding-top: $padding-y;
  padding-bottom: $padding-y;
}
@mixin padding(
  $padding: null,
  $top: null,
  $right: null,
  $bottom: null,
  $left: null,
  $x: null,
  $y: null,
  $important: null,
  $first: null,
  $first-top: null,
  $first-right: null,
  $first-bottom: null,
  $first-left: null,
  $first-y: null,
  $first-x: null,
  $last: null,
  $last-top: null,
  $last-right: null,
  $last-bottom: null,
  $last-left: null,
  $last-y: null,
  $last-x: null
) {
  // Single Property
  @if $padding {
	padding: $padding;
  }
  @if $top and $right == null and $bottom == null and $left == null and $x == null and $y == null {
	@if $important {
	  padding-top: $top !important;
	} @else {
	  padding-top: $top;
	}
  }
  @if $right and $bottom == null and $left == null and $top == null and $x == null and $y == null {
	@if $important {
	  padding-right: $right !important;
	} @else {
	  padding-right: $right;
	}
  }
  @if $bottom and $left == null and $top == null and $right == null and $x == null and $y == null {
	@if $important {
	  padding-bottom: $bottom !important;
	} @else {
	  padding-bottom: $bottom;
	}
  }
  @if $left and $top == null and $right == null and $bottom == null and $x == null and $y == null {
	@if $important {
	  padding-left: $left !important;
	} @else {
	  padding-left: $left;
	}
  }
  // Two Properties
  @if $top and $right and $left == null and $bottom == null and $y == null and $x == null {
	@if $important {
	  padding: $top $right 0 0!important;
	} @else {
	  padding: $top $right 0 0;
	}
  }
  @if $top and $bottom and $left == null and $right == null and $y == null and $x == null {
	@if $important {
	  padding: $top 0 $bottom 0 !important;
	} @else {
	  padding: $top 0 $bottom 0;
	}
  }
  @if $top and $left  and $bottom == null and $right == null and $y == null and $x == null {
	@if $important {
	  padding: $top 0 0 $left !important;
	} @else {
	  padding: $top 0 0 $left;
	}
  }
  @if $left and $right and $top == null and $bottom == null and $y == null and $x == null {
	@if $important {
	  padding: 0 $right 0 $left !important;
	} @else {
	  padding: 0 $right 0 $left;
	}
  }
  @if $left and $bottom  and $top == null and $right == null and $y == null and $x == null {
	@if $important {
	  padding: 0 0 $bottom $left !important;
	} @else {
	  padding: 0 0 $bottom $left;
	}
  }
  @if $right and $bottom and $left == null and $top == null and $y == null and $x == null {
	@if $important {
	  padding: 0 $right $bottom 0 !important;
	} @else {
	  padding: 0 $right $bottom 0;
	}
  }
  // Three Properties
  @if $top and $bottom and $right and $left == null {
	@if $important {
	  padding: 0 $right $bottom $left !important;
	} @else {
	  padding: 0 $right $bottom $left;
	}
  }
  @if $top and $bottom and $left and $right == null {
	@if $important {
	  padding: $top 0 $bottom $left !important;
	} @else {
	  padding: $top 0 $bottom $left;
	}
  }
  @if $top and $left and $right and $bottom == null {
	@if $important {
	  padding: $top $right 0 $left !important;
	} @else {
	  padding: $top $right 0 $left;
	}
  }
  @if $bottom and $left and $right and $top == null {
	@if $important {
	  padding: 0 $right $bottom $left !important;
	} @else {
	  padding: 0 $right $bottom $left;
	}
  }
  @if $y  and $right and $left and $x == null {
	@if $important {
	  padding: $y $right $y $left !important;
	} @else {
	  padding: $y $right $y $left;
	}
  }
  @if $x  and $top and $bottom and $y == null {
	@if $important {
	  padding: $top $x $bottom $x !important;
	} @else {
	  padding: $top $x $bottom $x;
	}
  }
  // Four Properties
  @if $top and $right and $bottom and $left and $x == null and $y == null {
	@if $important {
	  padding: $top $right $bottom $left !important;
	} @else {
	  padding: $top $right $bottom $left;
	}
  }
  // Axis Properties
  @if $x and $y == null and $top == null and $bottom == null {
	@if $important {
	  padding: 0 $x !important;
	} @else {
	  padding: 0 $x;
	}
  }
  @if $y and $x == null and $right == null and $left == null {
	@if $important {
	  padding: $y 0!important;
	} @else {
	  padding: $y 0
	}
  }
  @if $x and $y {
	@if $important {
	  padding: $y $x $y $x !important;
	} @else {
	  padding: $y $x $y $x;
	}
  }
  @if $x and $top and $bottom == null {
	@if $important {
	  padding: $top $x 0 $x !important;
	} @else {
	  padding: $top $x 0 $x;
	}
  }
  @if $x and $bottom and $top == null {
	@if $important {
	  padding: 0 $x $bottom $x !important;
	} @else {
	  padding: 0 $x $bottom $x;
	}
  }
  @if $y and $right and $left == null {
	@if $important {
	  padding: $y $right $y 0 !important;
	} @else {
	  padding: $y $right $y 0;
	}
  }
  @if $y and $left and $right == null {
	@if $important {
	  padding: $y 0 $y $left !important;
	} @else {
	  padding: $y 0 $y $left;
	}
  }
  @if $first {
	&:first-child,
	&:first-of-type {
	  padding: $first;
	}
  }
  @if $first-top {
	&:first-child,
	&:first-of-type {
	  padding-top: $first-top;
	}
  }
  @if $first-right {
	&:first-child,
	&:first-of-type {
	  padding-right: $first-right;
	}
  }
  @if $first-bottom {
	&:first-child,
	&:first-of-type {
	  padding-bottom: $first-bottom;
	}
  }
  @if $first-left {
	&:first-child,
	&:first-of-type {
	  padding-left: $first-left;
	}
  }
  @if $first-y {
	&:first-child,
	&:first-of-type {
	  padding: $first-y 0;
	}
  }
  @if $first-x {
	&:first-child,
	&:first-of-type {
	  padding: 0 $first-x;
	}
  }
  @if $last {
	&:last-child,
	&:last-of-type {
	  padding: $last;
	}
  }
  @if $last-top {
	&:last-child,
	&:last-of-type {
	  padding-top: $last-top;
	}
  }
  @if $last-right {
	&:last-child,
	&:last-of-type {
	  padding-right: $last-right;
	}
  }
  @if $last-bottom {
	&:last-child,
	&:last-of-type {
	  padding-bottom: $last-bottom;
	}
  }
  @if $last-left {
	&:last-child,
	&:last-of-type {
	  padding-left: $last-left;
	}
  }
  @if $last-y {
	&:last-child,
	&:last-of-type {
	  padding: $last-y 0;
	}
  }
  @if $last-x {
	&:last-child,
	&:last-of-type {
	  padding: 0 $last-x;
	}
  }
}
@mixin perspective($perspective, $perspective-origin-x, $perspective-origin-y, $perspective-transform: null) {
  perspective: $perspective;
  perspective-origin: $perspective-origin-x $perspective-origin-y;
  > div {
	transform: $perspective-transform;
  }
}
@mixin position(
  $position: null,
  $top: null,
  $right: null,
  $bottom: null,
  $left: null,
  $transform: null,
  $z-index: null
) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  transform: $transform;
  z-index: $z-index;
}
@mixin scroll-behavior($scroll-behavior) {
  scroll-behavior: $scroll-behavior;
}
@mixin scroll-margin-top($scroll-margin-top) {
  scroll-margin-top: $scroll-margin-top;
}
@mixin scroll-margin-right($scroll-margin-right) {
  scroll-margin-right: $scroll-margin-right;
}
@mixin scroll-margin-bottom($scroll-margin-bottom) {
  scroll-margin-bottom: $scroll-margin-bottom;
}
@mixin scroll-margin-left($scroll-margin-left) {
  scroll-margin-left: $scroll-margin-left;
}
@mixin scroll-margin(
  $margin-top: null,
  $margin-right: null,
  $margin-bottom: null,
  $margin-left: null
) {
  scroll-margin:
	$scroll-margin-top
	$scroll-margin-right
	$scroll-margin-bottom
	$scroll-margin-left;
}
@mixin scroll-padding-top($scroll-padding-top) {
  scroll-padding-top: $scroll-padding-top;
}
@mixin scroll-padding-right($scroll-padding-right) {
  scroll-padding-right: $scroll-padding-right;
}
@mixin scroll-padding-bottom($scroll-padding-bottom) {
  scroll-padding-bottom: $scroll-padding-bottom;
}
@mixin scroll-padding-left($scroll-padding-left) {
  scroll-padding-left: $scroll-padding-left;
}
@mixin scroll-padding(
  $padding-top: null,
  $padding-right: null,
  $padding-bottom: null,
  $padding-left: null
) {
  scroll-padding:
	$scroll-padding-top
	$scroll-padding-right
	$scroll-padding-bottom
	$scroll-padding-top;
}
@mixin scroll-snap-align($scroll-snap-align) {
  scroll-snap-align: $scroll-snap-align;
}
@mixin scroll-snap-stop($scroll-snap-stop) {
  scroll-snap-stop: $scroll-snap-stop;
}
@mixin scroll-snap-type($scroll-snap-type) {
  scroll-snap-type: $scroll-snap-type;
}
@mixin scroll-snap(
  $align: null,
  $stop: null,
  $type: null
) {
  scroll-snap-align: $lign;
  scroll-snap-stop: $stop;
  scroll-snap-type: $type;
}
@mixin scroll(
  $margin-top: null,
  $margin-right: null,
  $margin-bottom: null,
  $margin-left: null,
  $padding-top: null,
  $padding-right: null,
  $padding-bottom: null,
  $padding-left: null,
  $align: null,
  $stop: null,
  $type: null
) {
}
@mixin size(
  $size: null,
  $min: null,
  $max: null,
  $y: null,
  $min-y: null,
  $max-y: null,
  $x: null,
  $min-x: null,
  $max-x: null
) {
  @if $size {
	width: $size;
	height: $size;
  }
  @if $size == '100v' or $size == 100v {
	width: 100vw;
	height: 100vh;
  }
  @if $min {
	min-width: $min;
	min-height: $min;
  }
  @if $min == '100v' or $min == 100v {
	min-width: 100vw;
	min-height: 100vh;
  }
  @if $max {
	max-width: $max;
	max-height: $max;
  }
  @if $max == '100v' or $max == 100v {
	max-width: 100vw;
	max-height: 100vh;
  }
  @if $y {
	height: $y;
  }
  @if $min-y {
	min-height: $min-y;
  }
  @if $max-y {
	max-height: $max-y;
  }
  @if $x {
	width: $x;
  }
  @if $min-x {
	min-width: $min-x;
  }
  @if $max-x {
	max-width: $max-x;
  }
}
@mixin slider-carousel(
  $base-classname,
  $viewport-classname,
  $item-classname,
  $navigation-classname,
  $pagination-classname,
  $pagination-list-classname,
  $pagination-item-classname,
  $pagination-input-classname,
  $wrapper-height,
  $wrapper-width,
  $wrapper-max-height: null,
  $wrapper-max-width: null,
  $gap: null,
  $viewport-position: absolute,
  $viewport-top: 0,
  $viewport-right: 0,
  $viewport-bottom: 0,
  $viewport-left: 0,
  $viewport-width: 100%,
  $viewport-height: auto,
  $viewport-max-width: null,
  $viewport-max-height: null,
  $viewport-direction: row,
  $viewport-counter: null,
  $item-size: null,
  $item-width: null,
  $item-height: null,
  $item-max-width: null,
  $item-max-height: null,
  $item-direction: 'ltr',
  $item-flex: null,
  $item-counter: false,
  $visible-items: 1,
  $navigation-enabled: false,
  $pagination-enabled: false
) {
  box-sizing: border-box;
  scrollbar-color: transparent transparent;
  scrollbar-width: 0px;
  position: relative;
  height: $wrapper-height;
  width: $wrapper-width;
  &, > #{$item-classname} {
	list-style: none !important;
  }
  #{$viewport-classname} {
	@if $viewport-position {
	  position: $viewport-position;
	  top: $viewport-top;
	  right: $viewport-right;
	  bottom: $viewport-bottom;
	  left: $viewport-left;
	}
	@if $viewport-counter {
	  counter-reset: item;
	}
	@include media('>md') {
	  pointer-events: none;
	}
	width: $viewport-width;
	height: $viewport-height;
	max-width: $viewport-max-width;
	max-height: $viewport-max-height;
	@include flex($direction: $viewport-direction);
	@include overflow($x: scroll);
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
	&::-webkit-scrollbar {
	  display: none;
	}
  }
  #{$item-classname} {
	position: relative;
	width: $item-width;
	height: $item-height;
	max-width: $item-max-width;
	max-height: $item-max-height;
	overflow: hidden;
	@include size($item-size);
	flex: $item-flex;
	flex-shrink: 0;
	scroll-snap-align: start;
	flex: 0 0 calc(100% / #{$visible-items});
	@if $item-direction == 'ltr' {
	  float: left;
	  margin: 0 $gap 0 0;
	}
	@if $item-counter {
	  counter-increment: item;
	}
	@if $item-direction == 'rtl' {
	  float: right;
	  margin: 0 0 0 $gap;
	}
  }
  #{$navigation-classname} {
	position: absolute;
	top: 0;
	left: 0;
	@include size(100%);
	scroll-snap-align: center;
	pointer-events: none;
  }
  @if $navigation-enabled {
	#{$base-classname}__prev,
	#{$base-classname}__next {
	  pointer-events: all;
	  position: absolute;
	  top: 0;
	  top: 50%;
	  width: 4rem;
	  height: 4rem;
	  transform: translateY(-50%);
	  outline: 0;
	  &--disabled {
		cursor: not-allowed;
		opacity: .3;
	  }
	}
	#{$base-classname}__prev {
	  left: 0;
	}
	#{$base-classname}__next {
	  right: 0;
	}
  }
  @if $pagination-enabled {
	#{$pagination-classname} {
	  position: absolute;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  text-align: center;
	}
	#{$pagination-list-classname},
	#{$pagination-item-classname} {
	  display: inline-block;
	}
	#{$pagination-input-classname} {
	  display: inline-block;
	  width: 1.5rem;
	  height: 1.5rem;
	  background-color: #333;
	  background-clip: content-box;
	  border: 0.25rem solid transparent;
	  border-radius: 50%;
	  font-size: 0;
	  transition: transform 0.1s;
	  &:checked {
		background-color: #fff;
	  }
	}
  }
}
@mixin transition-property($transition-property) {
  transition-property: $transition-property;
}
@mixin transition-duration($transition-duration) {
  transition-duration: $transition-duration;
}
@mixin transition-timing-function($transition-timing-function) {
  transition-timing-function: $transition-timing-function;
}
@mixin transition-delay($transition-delay) {
  transition-delay: $transition-delay;
}
@mixin transition(
  $property: null,
  $duration: null,
  $timing-function: null,
  $delay: null
){
  transition: $property $duration $timing-function $delay;
}
@mixin truncate($lines){
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lines;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
}