@function rem($px, $base: $base_font_size) {
  @return ($px / $base) * 1rem;
}

@function em($px, $base: $base_font_size) {
  @return ($px / $base) * 1em;
}

@mixin display-flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin display-inline-flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}
@mixin flex-wrap($wrap:nowrap) {
  -webkit-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

@mixin flex-direction($direction:row) {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

@mixin justify-content($justify-content:flex-start) {
  -webkit-justify-content: $justify-content;
  -moz-justify-content: $justify-content;
  -ms-justify-content: $justify-content;
  justify-content: $justify-content;
}

@mixin align-content($align-content:flex-start) {
  -webkit-align-content: $align-content;
  -moz-align-content: $align-content;
  -ms-align-content: $align-content;
  align-content: $align-content;
}

@mixin align-items($align-items:flex-start) {
  -webkit-align-items: $align-items;
  -moz-align-items: $align-items;
  -ms-align-items: $align-items;
  align-items: $align-items;
}

@mixin align-self($align-self:auto) {
  -webkit-align-self: $align-self;
  -moz-align-self: $align-self;
  -ms-align-self: $align-self;
  align-self: $align-self;
}

@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}

@mixin transform-origin ($origin) {
  moz-transform-origin: $origin;
  -o-transform-origin: $origin;
  -ms-transform-origin: $origin;
  -webkit-transform-origin: $origin;
  transform-origin: $origin;
}