// https://s3-us-west-2.amazonaws.com/s.cdpn.io/702340/1.scss
  // CODEPEN: MIXINS  SCSS
  //
  // Defines all of the mixins used in all _partials scss.
  //
  // @copyright   Copyright (c) 2020
  // @version     3.6
//

// VARS
$font-tight:                  "PT Sans Narrow";
$font-h1:                     "Muli";
$font-content:                "Montserrat";
$font-demo-head:              "Oswald";
$weight-500:                  500;
$line-height-gr:              1.618;
$spacing--015em:              -.015em;
$size-base:                   1rem;
$size-1250rem:                1.250rem; // 20px
$size-2x:                     2rem;     // 32px
$size-25x:                    2.500rem; // 40px
$size-touch:                  3.125rem; // 50px
$size-legible:               43.750rem; // 700px
$colors-black-trans:          rgba(0, 0, 0, .3);
$colors-black-semi-trans:     rgba(0, 0, 0, .7);
$base-blue:                   #0083B0;
$base-blue-dark:              darken( $base-blue, 10% );
$cb-vert:                     cubic-bezier(0.17, 0.04, 0.03, 0.94);
$cb-smooth:                   cubic-bezier(.25,.8,.25,1);
////////////////////////////////// BEGIN ALIGNMENT //////////////////////////////////
// JUSTIFY
// ITEMS
@mixin justify-items($value: center) {
  -webkit-justify-items: $value;
  justify-items: $value;
}
// SELF
@mixin justify-self($value: center) {
  -webkit-justify-self: $value;
  justify-self: $value;
}
// CONTENT
@mixin justify-content($value: center) {
  -webkit-justify-content: $value;
  justify-content: $value;
  @if $value == 'flex-start' {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
  }
  @else if $value == 'flex-end' {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
  }
  @else {}
}

// ALIGN
// ITEMS
@mixin align-items($value: center) {
  -webkit-align-items: $value;
  align-items: $value;
  @if $value == 'flex-start' {
    -webkit-box-align: start;
    -ms-flex-align: start;
  }
  @else if $value == 'flex-end' {
    -webkit-box-align: end;
    -ms-flex-align: end;
  }
  @else if $value == 'stretch' {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
  }
  @else {}
  
}
// SELF
@mixin align-self($value: center) {
  -webkit-align-self: $value;
  align-self: $value;
  @if $value == 'flex-start' {
    -ms-flex-item-align:start;
  }
  @else if $value == 'flex-end' {
    -ms-flex-item-align:end;
  }
  @else if $value == 'stretch' {
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
  }
  @else {}
}
// CONTENT
@mixin align-content($value: center) {
  -webkit-align-content: $value;
  align-content: $value;
  @if $value == 'flex-start' {
    -ms-flex-line-pack:start;
  }
  @else if $value == 'flex-end' {
    -ms-flex-line-pack:end;
  }
  @else if $value == 'stretch' {
    -ms-flex-line-pack: stretch;
  }
  @else {}
}
////////////////////////////////// END ALIGNMENT //////////////////////////////

////////////////////////////////// ANIMATION //////////////////////////////////
@mixin animation($values...){
  -webkit-animation: $values;
  animation: $values;
}

////////////////////////////////// PSEUDO //////////////////////////////////
@mixin pseudo($display: block, $pos: absolute, $content: ''){
  content: $content;
  display: $display;
  position: $pos;
}

////////////////////////////////// BEGIN SPACING //////////////////////////////////
@mixin margin-center($tb: 0, $lr: auto) {
  margin: $tb $lr;
}

// MARGIN ALL
@mixin margin-all($t, $r, $b, $l) {
  @if $t {
    margin-top: $t;
  }
  @if $r {
    margin-right: $r;
  }
  @if $b {
    margin-bottom: $b;
  }
  @if $l {
    margin-left: $l;
  }
}

// PADDING ALL
@mixin padding-all($t, $r, $b, $l) {
  @if $t {
    padding-top: $t;
  }
  @if $r {
    padding-right: $r;
  }
  @if $b {
    padding-bottom: $b;
  }
  @if $l {
    padding-left: $l;
  }
}

////////////////////////////////// END SPACING ///////////////////////////////




////////////////////////////////// FILTERS //////////////////////////////////

// See:           https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
// Usage:
  //              grayscale      ex: filter: grayscale(100%);
  //              sepia          ex: filter: sepia(100%);
  //              saturate       ex: filter: saturate(0%);
  //              hue-rotate     ex: filter: hue-rotate(45deg);
  //              invert         ex: filter: invert(100%);
  //              brightness     ex: filter: brightness(15%);
  //              contrast       ex: filter: contrast(200%);
  //              blur           ex: filter: blur(2px);
  //              drop-shadow    ex: filter: drop-shadow( -5px -5px 5px #000 );

@mixin filter($filter-type,$filter-amount) {
  -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
  filter: $filter-type+unquote('(#{$filter-amount})');
}

////////////////////////////////// BEGIN GRID //////////////////////////////////
// GRID
@mixin grid {
  display:-ms-grid;
  display: grid;
}
%grid { @include grid; }

// INLINE GRID
@mixin inline-grid {
  display:-ms-inline-grid;
  display: inline-grid;
}
%inline-grid { @include inline-grid; }

// GRID TEMPLATE COLUMNS
@mixin grid-template-columns($columns...) {
  -ms-grid-columns: $columns;
  grid-template-columns: $columns;
}
@mixin gtc($columns: false) { @include grid-template-columns($columns); }

// GRID TEMPLATE ROWS
@mixin grid-template-rows($rows...) {
  -ms-grid-rows: $rows;
  grid-template-rows: $rows;
}
@mixin gtr($rows: false) { @include grid-template-rows($rows); }

// GRID ROW SPAN
// Usage: @include grid-row-span(1);
@mixin grid-row-span ($col-end) {
  -ms-grid-row-span: $col-end;;
  grid-row-end: span $col-end;;
}

// GRID COLUMN SPAN
// Usage: @include grid-column-span(1);
@mixin grid-column-span ($col-end) {
  -ms-grid-column-span: $col-end;
  grid-column-end: span $col-end;
}

// GRID ROW S/E
// Usage: @include grid-row-se(1, 2);
@mixin grid-row-se ($row-start, $row-end) {
  -ms-grid-row: $row-start;
  -ms-grid-row-span: $row-end - $row-start;
  grid-row: #{$row-start}/#{$row-end};
}
// GRID COLUMN S/E
// Usage: @include grid-column-se(1, 3);
@mixin grid-column-se ($col-start, $col-end) {
  -ms-grid-column: $col-start;
  -ms-grid-column-span: $col-end - $col-start;
  grid-column: #{$col-start}/#{$col-end};
}

$span2: 2;
@mixin grid-col-se ($col-start, $col-end) {
  -ms-grid-column: $col-start;
  -ms-grid-column-span: $span2;
  grid-column: #{$col-start}/#{$span2};
}

@function add-unit-to-value($value){
	@return if($value != 0, $value, 0);
}

@function increment-by-2($i){
	@return add-unit-to-value(0 + (($i * 2) + 1));
}

@for $i from 0 to 3 {
	.u-gc-span#{$i} {
	  @include grid-col-se(increment-by-2($i), 2);
	}
}

// GRID CHILD
// Usage: @include grid-child(1,2,1,2);
@mixin grid-child ($col-start, $col-end, $row-start, $row-end) {
  -ms-grid-column: $col-start;
  -ms-grid-column-span: $col-end - $col-start;
  -ms-grid-row: $row-start;
  -ms-grid-row-span: $row-end - $row-start;
  grid-column: #{$col-start}/#{$col-end};
  grid-row: #{$row-start}/#{$row-end};
}
////////////////////////////////// END GRID //////////////////////////////////


///////////////////////////////// BEGIN FLEX ////////////////////////////////


@mixin flexbox {
  display: -webkit-flex;
  display: flex;
}
%flexbox { @include flexbox; }

// INLINE FLEX
@mixin inline-flex {
  display: -webkit-inline-flex;
  display: inline-flex;
}
%inline-flex { @include inline-flex; }

// FLEX GROW
@mixin flex-grow($value) {
  -webkit-flex-grow: $value;
  flex-grow: $value;
}

// FLEX SHRINK
@mixin flex-shrink($value) {
  -webkit-flex-shrink: $value;
  flex-shrink: $value;
}

// FLEX DIRECTION
@mixin flex-direction($value) {
  -webkit-flex-direction: $value;
  flex-direction: $value;
}
// Shorter version:
//%flex-direction { @include flex-direction; }

// FLEX FLOW
@mixin flex-flow($values: (row nowrap)) {
  -webkit-flex-flow: $values;
  flex-flow: $values;
}
%flex-flow { @include flex-flow; }

// FLEX WRAP
@mixin flex-wrap($value: wrap) {
  -webkit-flex-wrap: $value;
  flex-wrap: $value;
}
%flex-wrap { @include flex-wrap; }

// FLEX BASIS
@mixin flex-basis($value: 100%) {
  -webkit-flex-basis: $value;
  flex-basis: $value;
}
%flex-basis { @include flex-basis; }

// FLEX
@mixin flex($grow: 1, $shrink: null, $basis: null) {
  -webkit-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}
%flex { @include flex; }


///////////////////// PLACEHOLDERS ///////////////////////
// identical width and height values mixin
@mixin sameSize($width, $height: $width) {
  width: $width;
  height: $height;
}

%width-height-100 {
  width:100%;
  height:100%;
}

%width-height-100px {
  width:100px;
  height:100px;
}

%width-height-6250rem { // 100px
  width:6.250rem;
  height:6.250rem;
}

%width-height-50px {
  width:50px;
  height:50px;
}

%width-height-3125rem { // 50px
  width:3.125rem;
  height:3.125rem;
}
%flexbase-faic {
  @include flexbox;
  @include align-items(center);
}
%flexbase-row-ffnw {
  @include flexbox;
  @include flex-flow(row nowrap);
}
%flexbase-row-ffw {
  @include flexbox;
  @include flex-flow(row wrap);
}

%flexbase-row-fd {
  @include flexbox;
  @include flex-direction(row);
}

%flexbase-col-ffnw {
  @include flexbox;
  @include flex-flow(column nowrap);
}

%flexbase-col-ffw {
  @include flexbox;
  @include flex-flow(column wrap);
}

%flexbase-col-fd {
  @include flexbox;
  @include flex-direction(column);
}
////////////////////////////////// END FLEX //////////////////////////////////


////////////////////////////////// BEGIN FONT //////////////////////////////////

// FONT FACE
@mixin font-face($fam1, $path, $fam2: null, $weight: normal, $style: normal, $source: false, $unicode: false ) {
  @font-face {
    font-family: $fam1;
    font-weight: $weight;
    font-style: $style;
    unicode-range: $unicode;

    @if $source == true {
      src: local('#{$fam1}'), local('#{$fam2}'),
           url('#{$path}.woff2')              format('woff2'),
           url('#{$path}.woff')               format('woff');
      @if $unicode == true {
        unicode-range: U+0020-007D;
      }
    }
  }
}

//  PX TO REM CONVERSION FONT SIZE / SPACING
// Usage:          @include font-size(14px)
// Define default font size
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

@mixin margin-size($size) {
  margin: $size;
  margin: calculateRem($size);
}

// FLUID FONT SIZE

// See:           https://codepen.io/finstah/pen/MBELEQ
// Usage:         @include poly-fluid-sizing('font-size', (576px: 22px, 768px: 24px, 992px: 34px));
// Author:        Jake Wilson <jake.e.wilson@gmail.com>
@mixin poly-fluid-sizing($property, $map) {
  // Get the number of provided breakpoints
  $length: length(map-keys($map));

  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error "poly-fluid-sizing() $map requires at least values"
  }

  // Sort the map by viewport width (key)
  $map: map-sort($map);
  $keys: map-keys($map);

  // Minimum size
  #{$property}: map-get($map, nth($keys,1));

  // Interpolated size through breakpoints
  @for $i from 1 through ($length - 1) {
    @media (min-width:nth($keys,$i)) {
      #{$property}: linear-interpolation((nth($keys,$i): map-get($map, nth($keys,$i)), nth($keys,($i+1)): map-get($map, nth($keys,($i + 1)))));
    }
  }

  // Maxmimum size
  @media (min-width:nth($keys,$length)) {
    #{$property}: map-get($map, nth($keys,$length));
  }
}

/// linear-interpolation
/// Calculate the definition of a line between two points
/// @param $map - A SASS map of viewport widths and size value pairs
/// @returns A linear equation as a calc() function
/// @example
///   font-size: linear-interpolation((320px: 18px, 768px: 26px));
/// @author Jake Wilson <jake.e.wilson@gmail.com>
@function linear-interpolation($map) {
  $keys: map-keys($map);
  @if (length($keys) != 2) {
    @error "linear-interpolation() $map must be exactly 2 values";
  }
  // The slope
  $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1));

  // The y-intercept
  $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);

  // Determine if the sign should be positive or negative
  $sign: "+";
  @if ($b < 0) {
    $sign: "-";
    $b: abs($b);
  }

  @return calc(#{$m*100}vw #{$sign} #{$b});
}

/// list-sort
/// Sort a SASS list
/// @param $list - A SASS list
/// @returns A sorted SASS list
/// @requires function list-remove
/// @author Jake Wilson <jake.e.wilson@gmail.com>
@function list-sort($list) {
  $sortedlist: ();
  @while length($list) > 0 {
    $value: nth($list,1);
    @each $item in $list {
      @if $item < $value {
        $value: $item;
      }
    }
    $sortedlist: append($sortedlist, $value, 'space');
    $list: list-remove($list, index($list, $value));
  }
  @return $sortedlist;
}

/// map-sort
/// Sort map by keys
/// @param $map - A SASS map
/// @returns A SASS map sorted by keys
/// @requires function list-sort
/// @author Jake Wilson <jake.e.wilson@gmail.com>
@function map-sort($map) {
  $keys: list-sort(map-keys($map));
  $sortedMap: ();
  @each $key in $keys {
    $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  }
  @return $sortedMap;
}

/// list-remove
/// Remove an item from a list
/// @param $list - A SASS list
/// @param $index - The list index to remove
/// @returns A SASS list
/// @author Jake Wilson <jake.e.wilson@gmail.com>
@function list-remove($list, $index) {
  $newList: ();
  @for $i from 1 through length($list) {
    @if $i != $index {
      $newList: append($newList, nth($list,$i), 'space');
    }
  }
  @return $newList;
}

// FONT FEATURE SETTINGS
@mixin font-feature-settings($values...) {
  @each $var in $values {
    -webkit-font-feature-settings: #{$var};
    font-feature-settings: #{$var};
  }
}

// FONT LIGATURES
@mixin font-ligatures() {
  -ms-font-feature-settings: "liga";
  -webkit-font-variant-ligatures: common-ligatures;
  font-variant-ligatures: common-ligatures;

  @supports not ((-webkit-font-variant-ligatures: common-ligatures) or (font-variant-ligatures: common-ligatures)) {
      -webkit-font-feature-settings: "liga", "liga", "clig";
      font-feature-settings: "liga", "liga", "clig";
  }
}

// FONT SMOOTHING
// See:           https://maximilianhoffmann.com/posts/better-font-rendering-on-osx
// usage:         .elem {@include font-smoothing(off);}
@mixin font-smoothing($value: on) {
  @if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

// WORD WRAP
@mixin word-wrap($value: break-word) {
  -ms-word-wrap: $value;
  word-wrap: $value;
}
////////////////////////////////// END FONT //////////////////////////////////

////////////////////////////////// BEGIN TRANSFORM //////////////////////////////////
// TRANSFORM
@mixin transform($values...) {
  -webkit-transform: $values;
  transform: $values;
}

// OPACITY
@mixin opacity($values) {
  @include transform(opacity($values));
}

// ROTATE
@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

// SCALE
@mixin scale($scale) {
  @include transform(scale($scale));
}

// TRANSLATE
@mixin translate ($x, $y) {
  @include transform(translate($x, $y));
}

// ORIGIN
@mixin transform-origin($values...) {
  @each $var in $values {
    -webkit-transform-origin: #{$var};
    transform-origin: #{$var};
  }
}

// WILL-CHANGE
@mixin will-change($wc: will-change, $tz: translateZ(0)){
  will-change: $wc;
  transform: $tz;
}
////////////////////////////////// END TRANSFORM //////////////////////////////////

// https://gist.github.com/y-spreen/8e1b4e51d2e90a298ee0041577250410
// usage: @include transition(prop1, prop2, ..., 0.5s cubic-bezier(0.16, 0.85, 0.45, 1));
//  usage: @include simple_transition(prop 0.5s cubic-bezier(0.16, 0.85, 0.45, 1));
@function remove-nth($list, $index) {
  $result: null;

  @if type-of($index) != number {
    @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
  } @else if $index == 0 {
    @warn "List index 0 must be a non-zero integer for `remove-nth`.";
  } @else if abs($index) > length($list) {
    @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
  } @else {
    $result: ();
    $index: if($index < 0, length($list) + $index + 1, $index);

    @for $i from 1 through length($list) {
      @if $i != $index {
        $result: append($result, nth($list, $i));
      }
    }
  }

  @return $result;
}

@mixin simple_transition($value) {
  -webkit-transition: $value;
  transition: $value;
}

@mixin transition($args...) {
  $type: nth($args, length($args));
  $props: remove-nth($args, length($args));
  $result: ();

  @for $i from 1 through length($props) {
    $prop: nth($props, $i);
    $result: append($result, $prop);
    $result: append($result, $type);
    @if $i != length($props) {
      $result: append($result, unquote($string: ","));
    }
  }
  
  @include simple_transition($result);
}
////////////////////////////////// BEGIN TRANSITION NO WORKY 1.18.19 //////////////////////////////////
// TRANSITION
// See:           https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab#file-transitions-scss
// Usage:         @include transition(width, height 0.3s ease-in-out);

// Pass in any number of transitions
@mixin transition($transitions...) {
  $unfoldedTransitions: ();
  @each $transition in $transitions {
    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
  }

  -webkit-transition: $unfoldedTransitions;
  transition: $unfoldedTransitions;
}

@function unfoldTransition ($transition) {
  // Default values
  $property: all;
  $duration: .2s;
  $easing: null; // Browser default is ease, which is what we want
  $delay: null; // Browser default is 0, which is what we want
  $defaultProperties: ($property, $duration, $easing, $delay);

  // Grab transition properties if they exist
  $unfoldedTransition: ();
  @for $i from 1 through length($defaultProperties) {
    $p: null;
    @if $i <= length($transition) {
      $p: nth($transition, $i)
    } @else {
      $p: nth($defaultProperties, $i)
    }
    $unfoldedTransition: append($unfoldedTransition, $p);
  }
  @return $unfoldedTransition;
}

// PROPERTY
@mixin transition-property($values) {
  -webkit-transition-property: $values;
  transition-property: $values;
}

// DURATION
@mixin transition-duration($values) {
  -webkit-transition-duration: $values;
  transition-duration: $values;
}

// TIMING
@mixin transition-timing-function($values) {
  -webkit-transition-timing-function: $values;
  transition-timing-function: $values;
}

// DELAY
@mixin transition-delay($values) {
  -webkit-transition-delay: $values;
  transition-delay: $values;
}
////////////////////////////////// END TRANSITION //////////////////////////////////

////////////////////////////////// POSITIONING //////////////////////////////////

@mixin position($p, $t, $r, $b, $l) {
  @if $p  {
    position: $p;
  }
  @if $t {
    top: $t;
  }
  @if $r {
    right: $r;
  }
  @if $b {
    bottom: $b;
  }
  @if $l {
    left: $l;
  }
}
// ABSOLUTE MIDDLE
// See:           https://gist.github.com/brz0/108439ce8d21c6d41ab2f33b03d55d48#file-sass-mixin-absolute-middle-scss
// Usage:         .foo { @include center(both); };
%vcenter {@include transform(translateY(-50%));}
%hcenter {@include transform(translateX(-50%));}
%bcenter {@include transform(translate(-50%, -50%));}

@mixin center($position) {
  position: absolute;

  @if $position == 'vertical' {
    top: 50%;
    @extend %vcenter;
  }
  @else if $position == 'horizontal' {
    left: 50%;
    @extend %hcenter;
  }
  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    @extend %bcenter;
  }
}

// GPU ACCELERATION
@mixin hardware($backface: true, $perspective: 1000) {
  @if $backface {
    backface-visibility: hidden;
  }
  perspective: $perspective;
}

// BACKGROUND SIZE
@mixin background-size($values...) {
	-webkit-background-size: $values;
  background-size: $values;
}
////////////////////////////////// BEGIN GRADIENTS //////////////////////////////////

@mixin bgrad1($start-color, $end-color, $orientation) {
  background: $start-color;

  @if $orientation == 'vertical' {
    background: -webkit-linear-gradient(top, $start-color $end-color);
    background: linear-gradient(to bottom, $start-color $end-color);
  } @else if $orientation == 'horizontal' {
    background: -webkit-linear-gradient(top left, $start-color $end-color);
    background: linear-gradient(to bottom right, $start-color $end-color);
  } @else {
    background: -webkit-radial-gradient(center bottom, ellipse cover, $start-color $end-color);
    background: radial-gradient(ellipse cover at center bottom, $start-color $end-color);
  }
}

// Usage:         @include bgrad1(red, black, 'vertical');
@mixin bgrad2($type, $start-color, $start-position, $end-color, $end-position) {
  background: $start-color;

  @if $type == 'linear' {
    background: -webkit-linear-gradient($start-color $start-position, $end-color $end-position);
    background: linear-gradient($start-color $start-position, $end-color $end-position);
  }
  @else if $type == 'radial' {
    background: -webkit-radial-gradient(circle, $start-color $start-position, $end-color $end-position);
    background: radial-gradient(circle, $start-color $start-position, $end-color $end-position);
  }
}

////////////////////////////////// END GRADIENTS //////////////////////////////////

////////////////////////////////// BEGIN PLACEHOLDER //////////////////////////////////
@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}
////////////////////////////////// END PLACEHOLDER //////////////////////////////////

// TOUCH ACTION
@mixin touch-action($value){
  -ms-touch-action: $value;
  touch-action: $value;
  -webkit-tap-highlight-color: transparent;  
}

// USER SELECT
@mixin user-select($value: none) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}
%user-select{@include user-select};
// APPEARANCE
@mixin appearance ($value) {
  -webkit-appearance: $value;
  -moz-appearance: $value;
  appearance: $value;
}

// See:           https://stackoverflow.com/users/6174458/spencer
// Usage:         .elem{shadow(6));
@mixin shadow($dp: 1) {
  @if $dp == 0 { box-shadow: none; }
  @else {
    $blur: if($dp == 1, 3, $dp * 2);
    $amba: ($dp + 11) / 100;
    $diry: $dp - floor($dp / 4);
    $dirb: floor(($dp + 5) / 2);
    $dira: (24 - (round($dp / 10))) / 100;
    box-shadow: 0px #{$dp + 'px'} #{$blur + 'px'} rgba(0, 0, 0, $amba), 0px #{$diry + 'px'} #{$dirb + 'px'} rgba(0, 0, 0, $dira);
  }
}
///////////////////////////// BEGIN MEDIA QUERIES /////////////////////////
// See:   https://glennmccomb.com/articles/useful-sass-scss-media-query-mixins-for-bootstrap/

$breakpoints: (
  xs: 576px,
  sm: 768px,
  md: 992px,
  lg: 1200px,
  xl: 1600px
);

//  RESPOND ABOVE (MIN-WIDTH)
//  Usage:        @include respond-above(sm) {}

@mixin respond-above($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map-get($breakpoints, $breakpoint);
    @media (min-width: $breakpoint-value) {
      @content;
    }
  }
  @else {
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

//  RESPOND BELOW (MAX-WIDTH)
//  Usage:        @include respond-below(sm) {}

@mixin respond-below($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map-get($breakpoints, $breakpoint);
    @media (max-width: ($breakpoint-value - 1)) {
      @content;
    }
  }
  @else {
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

//  RESPOND BETWEEN
//  Usage:        @include respond-between(sm, md) {}

@mixin respond-between($lower, $upper) {
  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
    $lower-breakpoint: map-get($breakpoints, $lower);
    $upper-breakpoint: map-get($breakpoints, $upper);

    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  }
  @else {
    @if (map-has-key($breakpoints, $lower) == false) {
      @warn 'Your lower breakpoint was invalid: #{$lower}.';
    }
    @if (map-has-key($breakpoints, $upper) == false) {
      @warn 'Your upper breakpoint was invalid: #{$upper}.';
    }
  }
}
///////////////////////////// END MEDIA QUERIES //////////////////////////////



/// LATEST 6.25.19 /////

@mixin position($p, $t, $r, $b, $l) {
  @if $p  { position: $p; }
  @if ($t != '') { top: $t; }
  @if ($r != '') { right: $r; }
  @if ($b != '') { bottom: $b; }
  @if ($l != ''){ left: $l; }
}
// FLEXBOX
@mixin df($properties) {
  @if $properties == 'flex' {
    display: -webkit-flex;
    display: flex;
  } @else if $properties == 'inline-flex' {
    display: -webkit-inline-flex;
    display: inline-flex;
  }
}

// FLEX DIRECTION
@mixin fdir($value: column) {
  -webkit-flex-direction: $value;
  flex-direction: $value;
}
// ALIGN CONTENT
@mixin acont($value: center) {
  -webkit-align-items: $value;
  align-items: $value;
}
// ALIGN ITEMS
@mixin aitems($value: center) {
  -webkit-align-items: $value;
  align-items: $value;
}
// ALIGN SELF
@mixin aself($value: center) {
  -webkit-align-self: $value;
  align-self: $value;
}
// TRANSFORM
@mixin transform($values...) {
  -webkit-transform: $values;
  transform: $values;
}
// TRANSFORM ORIGIN
@mixin transform-origin($values...) {
  @each $var in $values {
    -webkit-transform-origin: #{$var};
    transform-origin: #{$var};
  }
}
// TRANSITION
@mixin transition($transitions...) {
  $unfoldedTransitions: ();
  @each $transition in $transitions {
    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
  }

  -webkit-transition: $unfoldedTransitions;
  transition: $unfoldedTransitions;
}
@function unfoldTransition ($transition) {
  // Default values
  $property: all;
  $duration: .2s;
  $easing: null; // Browser default is ease, which is what we want
  $delay: null; // Browser default is 0, which is what we want
  $defaultProperties: ($property, $duration, $easing, $delay);

  // Grab transition properties if they exist
  $unfoldedTransition: ();
  @for $i from 1 through length($defaultProperties) {
    $p: null;
    @if $i <= length($transition) {
      $p: nth($transition, $i)
    } @else {
      $p: nth($defaultProperties, $i)
    }
    $unfoldedTransition: append($unfoldedTransition, $p);
  }
  @return $unfoldedTransition;
}


// BASE STYLES
@mixin headingsMuli($ff:$font-h1, $fw:500) {
  font-family: $ff;
  font-weight: $fw;
}
// CONTENT STYLES
@mixin h1-white($fs: 2.82rem, $fw:700) {
  font-size: $fs;
  font-weight: $fw;
}

// BASE RESPONSIVE TYPE
// Modular Scale located here: https://www.modularscale.com/?1,1140,12&em&1.3 

@mixin baseTypeSettings {
  body {
    font-size: calc(12px + 0.35vw);
    line-height: calc(12px + 1.05vw)
  }
  h1 {
    font-size: 1.912em;
    line-height: calc(18px + 1.8vw)
  }

  h2 {
    font-size: 1.616em;
    line-height: calc(18px + 1vw)
  }

  h3 {
    font-size: 1.471em;
    line-height: calc(18px + 0.7vw)
  }
  h1, h2, h3 {
    margin: calc(12px + 1.05vw) 0
  }
}


// SPACING (MARGIN and PADDING)
// Usage: @include space(padding, all, $large);
$xs : 5px;
$small : 10px;
$medium : 16px;
$large : 20px;

@mixin space($type:margin, $direction:all, $amount:$medium){
  @if $type == padding {
    @if $direction == all {
      padding: $amount;
    }     
    @else if $direction == top {
      padding-top:$amount
    } 
    @else if $direction == left {
      padding-left:$amount
    } 
    @else if $direction == right {
      padding-right:$amount
    } 
    @else if $direction == bottom {
      padding-bottom:$amount
    }
    @else if $direction == x {
      padding-left:$amount;
      padding-right: $amount;
    } 
    @else if $direction == y {
      padding-top:$amount;
      padding-bottom: $amount;
    } 
  } // $type = padding 
  @else {
    @if $direction == all {
      margin: $amount;
    }     
    @else if $direction == top {
      margin-top:$amount
    } 
    @else if $direction == left {
      margin-left:$amount
    } 
    @else if $direction == right {
      margin-right:$amount
    } 
    @else if $direction == bottom {
      margin-bottom:$amount
    } 
    @else if $direction == x {
      margin-left:$amount;
      margin-right: $amount;
    } 
    @else if $direction == y {
      margin-top:$amount;
      margin-bottom: $amount;
    }     
  }
}






/*
 * Spacing helpers for consistent margin and padding on elements. Uses rems (not px!)
 *
 * With the current default settings, generates classes like:
 * .mts = margin-top: 0.5rem
 * .phl = padding-left: 2rem; padding-right: 2rem; // h = horizontal = left/right
 *
 * Inspired by:
 * https://github.com/mrmrs/css-spacing
 * https://getbootstrap.com/docs/4.0/utilities/spacing/
 * https://github.com/jgthms/bulma/issues/451#issuecomment-331758839
 */
$sizeUnit: px;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '';
$allKey: 'a';
$verticalKey: 'v';
$horizontalKey: 'h';
$positions: (
  t: 'top',
  r: 'right',
  b: 'bottom',
  l: 'left',
);
$sizes: (
  n: 0,
  xxs: 5,
  xs: 10,
  d: 16,
  m: 20,
  l: 30,
  xl: 40,
  xxl: 50,
);

/*
// Defaults for bootstrap-style, see: https://getbootstrap.com/docs/4.0/utilities/spacing/
$separator: '-';
$allKey: '';
$verticalKey: 'y';
$horizontalKey: 'x';
// Bootstrap uses different size steps:
$sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 4,
  auto: 'auto',
);
*/

@function size-value($value) {
  @if $value == 0 { @return $value; }

  @if $value == 'auto' { @return $value; }

  @return #{$value}#{$sizeUnit};
}

@each $sizeKey, $sizeValue in $sizes {

  // "all" (top-right-bottom-left)
  .#{$marginKey}#{$allKey}#{$separator}#{$sizeKey} {
    margin: size-value($sizeValue);
  }

  .#{$paddingKey}#{$allKey}#{$separator}#{$sizeKey} {
    padding: size-value($sizeValue);
  }

  // vertical (top-bottom)
  .#{$marginKey}#{$verticalKey}#{$separator}#{$sizeKey} {
    margin-top: size-value($sizeValue);
    margin-bottom: size-value($sizeValue);
  }

  .#{$paddingKey}#{$verticalKey}#{$separator}#{$sizeKey} {
    padding-top: size-value($sizeValue);
    padding-bottom: size-value($sizeValue);
  }

  // horizontal (left-right)
  .#{$marginKey}#{$horizontalKey}#{$separator}#{$sizeKey} {
    margin-left: size-value($sizeValue);
    margin-right: size-value($sizeValue);
  }

  .#{$paddingKey}#{$horizontalKey}#{$separator}#{$sizeKey} {
    padding-left: size-value($sizeValue);
    padding-right: size-value($sizeValue);
  }

  // each of top,right,bottom,left:
  @each $posKey, $posValue in $positions {
    .#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
      margin-#{$posValue}: size-value($sizeValue);
    }

    .#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
      padding-#{$posValue}: size-value($sizeValue);
    }
  }
}

// PLACEHOLDERS
%headingsMuli { @include headingsMuli; }
%h1-white { @include h1-white; }
%group-wrap--col { @include flexbox(); @include fdir(); }
%group-wrap--row { @include flexbox(); @include fdir(row); }
%group-wrap--col__center { @include flexbox(); @include fdir(); @include aitems(); }


// ALIGN PLACEHOLDERS
%group-align--stretch { @include acont(stretch); @include aitems(stretch); }