// example pxtoem(14, 16);
@function pxtoem($target, $context){
  @return ($target/$context)+0em;
}
// Convert em to px
@function emtopx($target, $context){
  @return ($target*$context)+0px;
}

@mixin opacity ($value) {
  $IEValue: $value*100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
  //
  // prefixes removed in latest bootstrap4
  //

  //-moz-opacity: $value;
  //-khtml-opacity: $value;

  opacity: $value;
}


@mixin filter ($bgColor, $color, $bgOpacity) {
  color: $color;
  &::before {
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: absolute;
    background: rgba($bgColor, $bgOpacity);
  }
}

@mixin border($color, $strokeWidth, $sides ) {
  @if ( $sides == '' ) {
    border: $color $strokeWidth solid;
  }
  @else {
    @each $side in $sides {
               @if ($side == 'top' or
                    $side == 'right' or
                    $side == 'bottom' or
                    $side == 'left') {

                    border-#{$side}: $color $strokeWidth solid;
                }
            }
        }

}

@mixin bg-gradient-t2b($start-colour, $end-colour) {
    background-color: $start-colour;
    background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour));
    background-image: -webkit-linear-gradient(to top, $start-colour, $end-colour);
    background-image:    -moz-linear-gradient(to top, $start-colour, $end-colour);
    background-image:     -ms-linear-gradient(to top, $start-colour, $end-colour);
    background-image:      -o-linear-gradient(to top, $start-colour, $end-colour);
    background-image:         linear-gradient(to top, $start-colour, $end-colour);
    filter:            progid:DXImageTransform.Microsoft.gradient(start-colourStr='#{$start-colour}', end-colourStr='#{$end-colour}');
}

@mixin bg-gradient-t2b_fade($start-colour, $end-colour) {
    background: -moz-linear-gradient(to top, rgba($start-colour, 0) 0%, rgba($end-colour, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba($start-colour, 0)), color-stop(100%,rgba($end-colour, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(to top, rgba($start-colour, 0) 0%, rgba($end-colour, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(to top, rgba($start-colour, 0) 0%, rgba($end-colour, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(to top, rgba($start-colour, 0) 0%, rgba($end-colour, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba($start-colour, 0) 0%, rgba($end-colour, 1) 100%); /* W3C */
}

@mixin border-top-radius($radius) {
   border-top-right-radius: $radius;
   border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
   border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
}

@mixin border-radius($top, $left, $bottom, $right) {
    border-top-left-radius: $top;
    border-top-right-radius: $left;
    border-bottom-right-radius:$bottom;
    border-bottom-left-radius:$right;
}

@mixin box-shadow($top, $left, $blur, $color, $inset: false, $spread_radius: false ) {
  $params : $top $left $blur;

  @if $spread_radius {
    $params : $params $spread_radius;
  }
  @if $inset {
    $params : inset $params;
  }

  $params : $params $color;

  //prefixes removed in latest b4
  //-webkit-box-shadow: $params;
  //-moz-box-shadow: $params;
  box-shadow: $params;
}

@mixin box-shadow_none( $important: false ) {
  $params : none;

  @if ( 'important' == $important ) {
    $params : $params !important;
  }

  //prefixes removed in latest b4
  //-webkit-box-shadow: $params;
  //-moz-box-shadow: $params;
  box-shadow: $params;
}


//reset box model mixin
@mixin box-sizing($box-model) {
  //prefixes removed in latest b4
  //-webkit-box-sizing: $box-model; // Safari <= 5
  //   -moz-box-sizing: $box-model; // Firefox <= 19
    box-sizing: $box-model;
}

//clearfix mixin
@mixin clearfix() {
  *zoom:1;

  &:before,
  &:after {
      content:"";
      display:table;
  }

  &:after {
      clear:both;
  }
}


// Use this to hide from both screenreaders and browsers: h5bp.com/u
// Mostly used to eliminate elements when scaling down in media queries
@mixin hidden() {
    display: none !important;
    visibility: hidden;
}

//vendor transitions mixins
// Usage:   @include transition(width, height 0.3s ease-in-out);
@mixin transition($transitions...) {
  $unfoldedTransitions: ();
  @each $transition in $transitions {
    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
  }

  //for normal transitions following prefixes have been removed in b4
  //-webkit-transition: $unfoldedTransitions;
  //-o-transition : $unfoldedTransitions;
  transition: $unfoldedTransitions;
}

@function unfoldTransition ($transition) {
  // Default values
  $property: all;
  $duration: if( 'none' == $transition, null, .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;
}

@mixin transition-transform( $params) {
  transition: -ms-transform $params;
  transition: -webkit-transform $params;
  transition: transform $params;
}

@mixin transform ($transforms) {
  //prefixes removed in latest b4
  //-moz-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}

@mixin transform-style ($transforms-style) {
  //prefixes removed in latest b4
  //-moz-transform-style: $transforms-style;
  -webkit-transform-style: $transforms-style;
  transform-style: $transforms-style;
}

@mixin transform-origin ($transforms-origin) {
  //prefixes removed in latest b4
  //-moz-transform-origin: $transforms-origin;
  -webkit-transform-origin: $transforms-origin;
  transform-origin: $transforms-origin;
}

@mixin perspective ($perspective ) {
  //prefixes removed in latest b4
  //-moz-perspective: $perspective;
  -webkit-perspective: $perspective;
          perspective: $perspective;
}


@mixin backface-visibility ($arguments) {
  //prefixes removed in latest b4
  //-moz-backface-visibility: $arguments;
  // -ms-backface-visibility: $arguments;
  //  -o-backface-visibility: $arguments;
  -webkit-backface-visibility: $arguments;
          backface-visibility: $arguments;
}

@mixin czr__responsive-wrapper( $width, $height ) {
  &::before {
    padding-top: percentage( $height / $width );
  }
}

// Taken from bootstrap

@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}


@mixin _assert-starts-at-zero($map) {
  $values: map-values($map);
  $first-value: nth($values, 1);
  @if $first-value != 0 {
    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
  }
}

// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

// Name of the next breakpoint, or null for the last breakpoint.
//
//    >> breakpoint-next(sm)
//    md
//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    md
//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
//    md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $n: index($breakpoint-names, $name);
  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

// 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);
}

// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.1.
//
//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    767px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
}

// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    ""  (Returns a blank string)
//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

// 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;
  }
}

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  @include media-breakpoint-up($lower, $breakpoints) {
    @include media-breakpoint-down($upper, $breakpoints) {
      @content;
    }
  }
}

// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
  @include media-breakpoint-between($name, $name, $breakpoints) {
    @content;
  }
}

//hover focus bp based
@mixin hover {
  // TODO: re-enable along with mq4-hover-shim
//  @if $enable-hover-media-query {
//    // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
//    // Currently shimmed by https://github.com/twbs/mq4-hover-shim
//    @media (hover: hover) {
//      &:hover { @content }
//    }
//  }
//  @else {
    &:hover { @content }
//  }
}

@mixin hover-focus {
  @if $enable-hover-media-query {
    &:focus { @content }
    @include hover { @content }
  }
  @else {
    &:focus,
    &:hover {
      @content
    }
  }
}

@mixin plain-hover-focus {
  @if $enable-hover-media-query {
    &,
    &:focus {
      @content
    }
    @include hover { @content }
  }
  @else {
    &,
    &:focus,
    &:hover {
      @content
    }
  }
}

@mixin hover-focus-active {
  @if $enable-hover-media-query {
    &:focus,
    &:active {
      @content
    }
    @include hover { @content }
  }
  @else {
    &:focus,
    &:active,
    &:hover {
      @content
    }
  }
}

// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
}
//end taken from bootstrap

// Custom mixins

//RTL offset-* classes
//inspired by the bootstrap offset-* class generator, used to make offset-* classes rtl compliant
@mixin make-col-offset-rtl($size, $columns: $grid-columns) {
  $num: $size / $columns;
  margin-right: if($num == 0, 0, percentage($num));
  margin-left: auto;
}


@mixin make-grid-offsets-rtl($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
  @each $breakpoint in map-keys($breakpoints) {

    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      // `$columns - 1` because offsetting by the width of an entire row isn't possible
      @for $i from 0 through ($columns - 1) {
        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
          .offset#{$infix}-#{$i} {
            @include make-col-offset-rtl($i, $columns);
          }
        }//end @if
      }//end @for
    }//end @include
  }//end @each
}




@mixin czr-valign() {
  @include transform( translate(0, 50%) );
  //@include transform( translate3d(0, 50%, 0) );
  & .czr-valign-child {
    @include transform( translate(0, -50%) );
    //@include transform( translate3d(0, -50%, 0) );
  }
}

@mixin czr-talign() {
  @include transform( translate(0, -50%) );
  //@include transform( translate3d(0, -50%, 0) );
  top: 50%;
  position: absolute;
}


@mixin v-divider ($mp, $color, $side, $active:0) {
  position: relative;
  padding-#{$side}: $mp;
  &:before {
      content:" ";
      position:absolute;
      top:0;
      height:100%;
      bottom:0;
      // #{$side} : -$mp;
      left:0;
      background: $color;
      @if $active == 0 { width: 0; }
      @else { width: 1px } ;
      // border-#{$side}: 1px solid $color;
  }
}

@mixin underlined_border ($color, $height) {
  .no-thumb & {
      position: relative;
      display: inline;
      border-bottom: $height solid transparent;
      @include transition(all, 0.3s ease);
  }
  .hover.no-thumb & {
      border-color: $color;
  }
}

@mixin underlined_simple ($color, $height) {
  position: relative;
  &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: $height;
      bottom: $height/2;
      left: 0;
      visibility: visible;
      background-color: $color;
      @include transform( scaleX(1) );
   }
}

@mixin underlined ($color, $height) {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: $height;
    bottom: $height/2;
    left: 0;
    background-color: $color;
    visibility: hidden;
    @include transform( translate3d(0,0,0) scaleX(0) );
    @include transition( all 0.3s ease 0s );
  }
  &:hover {
    @include underlined_highlight_before($color);
  }
}
@mixin underlined_highlight_before ($color) {
  &::before {
    background-color: $color;
    visibility: visible;
    @include transform( translate3d(0,0,0) scaleX(1) );
  }
}


@mixin underlined_highlight_before_nocolor () {
  &::before {
    visibility: visible;
    @include transform( translate3d(0,0,0) scaleX(1) );
  }
}

@mixin underlined_nocolor ( $height ) {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: $height;
    bottom: $height/2;
    left: 0;
    visibility: hidden;
    @include transform( translate3d(0,0,0) scaleX(0) );
    @include transition( all 0.3s ease 0s );
  }
  &:hover {
    @include underlined_highlight_before_nocolor () ;
  }
}
@mixin underlined_nocolor_no_hover ( $height ) {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: $height;
    bottom: $height/2;
    left: 0;
    visibility: hidden;
    @include transform( translate3d(0,0,0) scaleX(0) );
    @include transition( all 0.3s ease 0s );
  }
}

@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



@mixin border_b_t() {
  position: relative;
  &::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 1px;
    top:0;
    left:0;
    background: $grey-light;
  }
}

@mixin centered {
  @extend .centered;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@mixin vertical-align() {
  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: .1px;
  }
}

@mixin display-flex() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@mixin flex-wrap() {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
@mixin flex-nowrap() {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

@mixin flex-grow() {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

@mixin flex-basis_0() {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
}

@mixin flex-basis_auto() {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
}

@mixin flex-align-self-stretch( $important: false ) {
  @if ( 'important' == $important ) {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
  }
  @else {
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }
}

@mixin flex-align-self-center( $important: false ) {
  @if ( 'important' == $important ) {
    -ms-flex-item-align: center !important;
    align-self: center !important;
  }
  @else {
    -ms-flex-item-align: center;
    align-self: center;
  }
}

@mixin flex-align-self-start( $important: false ) {
  @if ( 'important' == $important ) {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
  }
  @else {
    -ms-flex-item-align: start;
    align-self: flex-start;
  }
}

@mixin flex-align-self-end( $important: false ) {
  @if ( 'important' == $important ) {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
  }
  @else {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

@mixin flex-align-items-center( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  @else {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@mixin flex-align-items-start( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
  @else {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

@mixin flex-align-items-end( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
  }
  @else {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
}


@mixin flex-column( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  @else {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@mixin flex-row( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
  }
  @else {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}


@mixin flex-row-reverse( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
  }
  @else {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
}

@mixin flex-justify-content-center( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-pack: center !important;
       -ms-flex-pack: center !important;
     justify-content: center !important;
  }
  @else {
     -webkit-box-pack: center;
        -ms-flex-pack: center;
      justify-content: center;
  }
}

@mixin flex-justify-content-between( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-pack: justify !important;
       -ms-flex-pack: justify !important;
     justify-content: space-between !important;
  }
  @else {
     -webkit-box-pack: justify;
        -ms-flex-pack: justify;
      justify-content: space-between;
  }
}


@mixin flex-justify-content-start( $important: false ) {
  @if ( 'important' == $important ) {
    -webkit-box-pack: start !important;
       -ms-flex-pack: start !important;
     justify-content: flex-start !important;
  }
  @else {
     -webkit-box-pack: start;
        -ms-flex-pack: start;
      justify-content: flex-start;
  }
}