@mixin font-mixin( $font-weight, $font-size, $font-line-height, $font-family ) {
	font: $font-weight $font-size + 0px $font-family;
	font: $font-weight $font-size/10 + 0rem $font-family;
	line-height: $font-line-height;
}

@mixin font-size-mixin( $font-size ) {
	font-size: $font-size + 0px;
	font-size: $font-size/10 + 0rem;
}
@mixin font-line-height-mixin( $line-height ) {
	line-height: $line-height + 0px;
	line-height: $line-height/10 + 0rem;
}
@mixin clearlist {
	margin: 0;
	padding: 0;
	list-style: none;
	li {
		margin: 0;
		&:before {
			content: "";
			margin: 0;
			background: none;
		}
	}
}
@mixin vertical-align($position: absolute) {
	position: $position;
	top: 50%;
	transform: translateY(-50%);
	@media (max-width: $screen-xs-max) {
		position: relative;
		transform: none;
		top: auto;
	}
}

.videoWrapper { position: relative; padding-bottom: 53.35%;/* 16:9 */ padding-bottom: 48.15%; padding-top: 25px; height: 0;/* margin-bottom: 25px;*/ } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

/// Convert angle
/// @author Chris Eppstein
/// @param {Number} $value - Value to convert
/// @param {String} $unit - Unit to convert to
/// @return {Number} Converted angle
@function convert-angle($value, $unit) {
  $convertable-units: deg grad turn rad;
  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
    @return $value
             / nth($conversion-factors, index($convertable-units, unit($value)))
             * nth($conversion-factors, index($convertable-units, $unit));
  }

  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
}

/// Test if `$value` is an angle
/// @param {*} $value - Value to test
/// @return {Bool}
@function is-direction($value) {
  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));

  @return $is-direction or $is-angle;
}

/// Convert a direction to legacy syntax
/// @param {Keyword | Angle} $value - Value to convert
/// @require {function} is-direction
/// @require {function} convert-angle
@function legacy-direction($value) {
  @if is-direction($value) == false {
    @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
  }

  $conversion-map: (
    to top          : bottom,
    to top right    : bottom left,
    to right top    : left bottom,
    to right        : left,
    to bottom right : top left,
    to right bottom : left top,
    to bottom       : top,
    to bottom left  : top right,
    to left bottom  : right top,
    to left         : right,
    to left top     : right bottom,
    to top left     : bottom right
  );

  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }

  @return 90deg - convert-angle($value, 'deg');
}

/// Mixin printing a linear-gradient
/// as well as a plain color fallback
/// and the `-webkit-` prefixed declaration
/// @access public
/// @param {String | List | Angle} $direction - Linear gradient direction
/// @param {Arglist} $color-stops - List of color-stops composing the gradient
@mixin linear-gradient($direction, $color-stops...) {
  @if is-direction($direction) == false {
    $color-stops: ($direction, $color-stops);
    $direction: 180deg;
  }

  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	iframe, object, embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
/* Tests
.test-1 { @include linear-gradient(#31B7D7, #EDAC7D); }
.test-2 { @include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); }
.test-3 { @include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); }
*/

// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----

@function get-item($list, $current, $offset:0) {
    $result-position: ($current + $offset) % length($list);
    @if $result-position == 0 {
        $result-position: length($list);
    }
    @return nth($list, $result-position);
}

@mixin arrow($direction, $color, $size) {
    display: inline-block;
    width: 0;
    height: 0;

    $directions: top, right, bottom, left;
    @for $i from 1 through length($directions) {
        @if nth($directions, $i) == $direction {
            border-#{get-item($directions, $i, -1)}: $size solid transparent;
            border-#{get-item($directions, $i, 1)}: $size solid transparent;
            border-#{get-item($directions, $i, 2)}: $size solid $color;
        }
    }
}

//Testing arrow mixin
.arrow-up {
    @include arrow(top, black, 10px);
}

// Arrows
@mixin arrow_angle {
	content: '';
	border: 2px solid transparent;
	display: block;
	width: 8px;
	height: 8px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;

	transform: rotate( -45deg );
}
@mixin arrow_angle_prev {
	border-right: none;
	border-bottom: none;
	left: 20px;
}
@mixin arrow_angle_next {
	border-top: none;
	border-left: none;
	right: 20px;
}



// helper mixin
@mixin hamburger_tint($color: #000, $tint_text: false, $labelselector: '+ label') {
	#{$labelselector} {
	i, &::before, &::after {
		background-color: $color;
	}
	@if $tint_text {
		span {
		color: $color;
		}
	}
	}
}

// main mixin
@mixin hamburger($width: 32px, $thickness: 3px, $gap: 7px, $color: #000, $background: transparent, $tint_text: false, $radius: 0, $radius_background: 0, $anim: 0.25s, $labelselector: '+ label', $padding: 0, $text: 'right', $style: false) {
	$height: ($thickness*3) + ($gap*2);
	@if $background != transparent and $padding == 0 {
	$padding: round(($thickness + $gap) / 1.5);
	}
	display: none;
	#{$labelselector} {
	user-select: none;
	position: relative;
	display: inline-block;
	width: $width;
	height: $height;
	box-sizing: content-box;
	border: $padding solid transparent;
	z-index: 1050;
	line-height: $height;
	white-space: nowrap;
	background: $background;
	border-radius: $radius_background;
	margin: 0;
	span {
		display: inline-block;
		position: absolute;
		left: 100%;
		margin-top: 1px;
		transition: color $anim;
		margin-left: $padding;
		@if $text == false {
		display: none;
		}
		@else if $text == 'left' {
		left: auto;
		right: 100%;
		margin-left: 0;
		margin-right: $padding;
		}
		&::before, &::after {
		content: '';
		display: inline-block;
		min-width: 10px;
		width: $width*0.2;
		}
	}
	i, &::before, &::after {
		position: absolute;
		left: 0;
		display: block;
		will-change: transform, background-color;
		width: $width;
		height: $thickness;
		border-radius: $radius;
		transition: transform $anim, background-color $anim;
		backface-visibility: hidden;
		outline: 1px solid transparent; // Firefox jagged animation fix
	}
	i {
		top: $thickness + $gap;
		// hide text
		font-size: 0;
		color: transparent;
		line-height: 0;
		@if $style == 'align-left' {
		max-width: $width * 0.75;
		transform-origin: 66% center;
		} @else if $style == 'align-right' {
		max-width: $width * 0.75;
		margin-left: $width * 0.25;
		transform-origin: 33% center;
		}
	}
	&::before, &::after {
		content: '';
	}
	&::before {
		top: 0;
	}
	&::after {
		bottom: 0;
	}
	&:hover {
		cursor: pointer;
	}
	}
	.menu-active &,
	&:checked {
	@if $anim != -1 {
		#{$labelselector} {
		i {
			transform: scaleX(0.001);
		}
		&::before {
			transform: translateY($gap + $thickness) rotate(45deg);
		}
		&::after {
			transform: translateY(-($gap + $thickness)) rotate(-45deg);
		}
		}
	}
	}
	@include hamburger_tint($color, $tint_text, $labelselector);
}

// Usage

#toggle-defaults {
	@include hamburger();
}

#toggle-custom-size {
	@include hamburger($width: 50px, $thickness: 1px, $gap: 16px);
}

#toggle-custom-animation {
	@include hamburger($anim: cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.33s);
}

#toggle-tint {
	@include hamburger($color: crimson, $tint_text: true);
	.menu-active &,
	&:checked {
	@include hamburger_tint($color: darkgrey, $tint_text: true);
	&:hover {
		@include hamburger_tint($color: blue, $tint_text: true);
	}
	}
	&:hover {
	@include hamburger_tint($color: green, $tint_text: true);
	}
}

#toggle-radius {
	@include hamburger($width: 40px, $thickness: 6px, $color: coral, $radius: 6px);
}

#toggle-padding {
	@include hamburger($width: 24px, $thickness: 2px, $gap: 5px, $padding: 24px);
	&:hover {
	@include hamburger_tint(orange);
	}
}

#toggle-text-on-left {
	@include hamburger($text: left, $style: 'align-right');
}

#toggle-text-on-right {
	@include hamburger($text: right, $style: 'align-left');
}

#toggle-solid-background {
	@include hamburger($background: #FF6347, $width: 17px, $thickness: 3px, $gap: 4px, $padding: 12px, $color: white, $radius_background: 50%);
}

#toggle-noanim {
	@include hamburger($anim: -1);
}

#toggle-above-dark-background {
	@include hamburger($color: white);
	.menu-active &,
	&:checked {
	@include hamburger_tint($color: #293134, $tint_text: true);
	}
}


// Arrows
@mixin custom_arrow
{
	content: '';
	border: 2px solid transparent;
	display: block;
	width: 8px;
	height: 8px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;

	transform: rotate( -45deg );
}
@mixin custom_arrow_prev
{
	border-right: none;
	border-bottom: none;
	// left: $mm_listitemIndent + 3;
	left: 23px;
}
@mixin custom_arrow_next
{
	border-top: none;
	border-left: none;
	// right: $mm_listitemIndent + 3;
	right: 23px;
}