@mixin box-shadow($top, $left, $blur, $color){
  -webkit-box-shadow: $top $left $blur $color ;
  -moz-box-shadow: $top $left $blur $color ;
  box-shadow: $top $left $blur $color ;
}


@mixin columns($count: 2, $gap: 0) {
  column-count: $count;
  column-gap: $gap;
}

@mixin transition($property: all, $duration: .4s, $easing: ease-in-out) {
  transition: $property $duration $easing;
}

@mixin center($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  } @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

@function strip-units($value) {
  @return ($value / ($value * 0 + 1));
}

@function rem($pxval) {
  @if not unitless($pxval) {
    $pxval: strip-units($pxval);
  }
  $base: $font-base;
  @if not unitless($base) {
    $base: strip-units($base);
  }
  @return ($pxval / $base) * 1rem;
}

@mixin boxGrid($columnNumber, $spacingPercent, $checker:true) {
  $contentPercent: 100%;
  $sideMargin: ($spacingPercent/2);
  $marginInt: strip-units($sideMargin);
  margin: #{0} -#{$sideMargin};
  width: $contentPercent + $spacingPercent;
  @if($checker) {
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
    @include transition();
  }
  > * {
    width: ($contentPercent/$columnNumber) - $spacingPercent;
    margin: 0 #{$sideMargin} ($marginInt + ($marginInt / $columnNumber) * rem(1))
  }
}

@mixin plus($width, $thickness, $color) {
  &:before, &:after {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 20px;
    background: $color;
    @include transition();
  }
  &:after {
    width: $width+px;
    height: $thickness+px;
  }
  &:before {
    height: $width+px;
    width: $thickness+px;
  }
  &.opened {
    &:after {
      transform: translate(-50%, -50%) rotate(180deg);
    }
    &:before {
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }
}

//SCSS Triangle
@mixin triangle ($width:12px, $height:10px, $cl:#000, $direction: top) {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  @if $direction == top {
    border-top: 0;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-bottom: $height solid $cl;
    top: -$height;
    left: 50%;
    transform: translateX(-50%);
  } @else if $direction == right {
    border-right: 0;
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
    border-left: $height solid $cl;
    right: -$height;
    top: 50%;
    transform: translateY(-50%);
  } @else if $direction == bottom {
    border-bottom: 0;
    border-left: $width solid transparent;
    border-right: $width solid transparent;
    border-top: $height solid $cl;
    bottom: -$height;
    left: 50%;
    transform: translateX(-50%);
  } @else {
    border-left: 0;
    border-top: $width solid transparent;
    border-bottom: $width solid transparent;
    border-right: $height solid $cl;
    left: -$height;
    top: 50%;
    transform: translateY(-50%);
  }
}

@mixin last-p {
  p:last-child {padding-bottom: 0}
}

@mixin left-right-margin {
  &:first-of-type {
    margin-left: 0;
  }
  &:last-of-type {
    margin-right: 0;
  }
}

@mixin left-right-padding {
  &:first-of-type {
    padding-left: 0;
  }
  &:last-of-type {
    padding-right: 0;
  }
}

@mixin hover {
  @media screen and (min-width: 1025px) {
    &:hover { @content }
  }
}

@mixin flex {
  display: flex;
  justify-content: space-between;
}

@mixin respond($breakpoint) {
  @media (min-width: $breakpoint + px) {
    @content;
  }
}

@mixin respond_max($breakpoint) {
  @media (max-width: $breakpoint + px) {
    @content;
  }
}

@mixin respond-points($min, $max) {
  @media (min-width: $min + px) and (max-width: $max + px) {
    @content;
  }
}

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}