/*------------------------------------*\
    #font-family Akrobat
\*------------------------------------*/
@font-face {
  font-family: 'Akrobat-Regular';
  src: local('Akrobat Regular'),
  local('Akrobat-Regular'),
  url('#{$font-path}/Akrobat-Regular.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akrobat-Thin';
  src: local('Akrobat Thin'),
  local('Akrobat-Thin'),
  url('#{$font-path}/Akrobat-Thin.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-Thin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akrobat-ExtraBold';
  src: local('Akrobat ExtraBold'),
  local('Akrobat-ExtraBold'),
  url('#{$font-path}/Akrobat-ExtraBold.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-ExtraBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akrobat-ExtraLight';
  src: local('Akrobat ExtraLight'),
  local('Akrobat-ExtraLight'),
  url('#{$font-path}/Akrobat-ExtraLight.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-ExtraLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akrobat-Light';
  src: local('Akrobat Light'),
  local('Akrobat-Light'),
  url('#{$font-path}/Akrobat-Light.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akrobat-Bold';
  src: local('Akrobat Bold'),
  local('Akrobat-Bold'),
  url('#{$font-path}/Akrobat-Bold.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akrobat-Black';
  src: local('Akrobat Black'),
  local('Akrobat-Black'),
  url('#{$font-path}/Akrobat-Black.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-Black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akrobat-SemiBold';
  src: local('Akrobat SemiBold'),
  local('Akrobat-SemiBold'),
  url('#{$font-path}/Akrobat-SemiBold.woff2') format('woff2'),
  url('#{$font-path}/Akrobat-SemiBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/*------------------------------------*\
    #font-family Ico: Porvenir
\*------------------------------------*/

@font-face {
  font-family: '#{$ico-font-family}';
  src: url('#{$font-path}/#{$ico-font-family}.eot?owmbll');
  src: url('#{$font-path}/#{$ico-font-family}.eot?owmbll#iefix') format('embedded-opentype'),
  url('#{$font-path}/#{$ico-font-family}.ttf?owmbll') format('truetype'),
  url('#{$font-path}/#{$ico-font-family}.woff?owmbll') format('woff'),
  url('#{$font-path}/#{$ico-font-family}.svg?owmbll##{$ico-font-family}') format('svg');
  font-weight: normal;
  font-style: normal;
}
.i-,
[class^="i-"],
[class*=" i-"] {
  &:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: $ico-font-family !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  &:after {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: '#{$ico-font-family}' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
/**
 * @icon .i-search
 * @markup
 *  <span class="i-search"></span>
 */
.i-search {
  &:before {
    content: $i-search;
  }
}
/**
 * @icon .i-data
 * @markup
 *  <span class="i-data"></span>
 */

.i-data {
  &:before {
    content: $i-data;
  }
}
/**
 * @icon .i-edit
 * @markup
 *  <span class="i-edit"></span>
 */
.i-edit {
  &:before {
    content: $i-edit;
  }
}
/**
 * @icon .i-plus
 * @markup
 *  <span class="i-plus"></span>
 */
.i-plus {
  &:before {
    content: $i-plus;
  }
}
/**
 * @icon .i-x
 * @markup
 *  <span class="i-x"></span>
 */
.i-x {
  &:before {
    content: $i-x;
  }
}
/**
 * @icon .i-check
 * @markup
 *  <span class="i-check"></span>
 */
.i-check {
  &:before {
    content: $i-check;
  }
}
/**
 * @icon .i-triangle
 * @markup
 *  <span class="i-triangle"></span>
 */
.i-triangle {
  &:before {
    content: $i-triangle;
  }
}
/**
 * @icon .i-arrow-up
 * @markup
 *  <span class="i-arrow-up"></span>
 */
.i-arrow-up {
  &:before {
    content: $i-arrow-up;
  }
}
/**
 * @icon .i-arrow-down
 * @markup
 *  <span class="i-arrow-down"></span>
 */
.i-arrow-down {
  &:before {
    content: $i-arrow-down;
  }
}
/**
 * @icon .i-arrow-up-down
 * @markup
 *  <span class="i-arrow-up-down"></span>
 */
.i-arrow-up-down {
  &:before {
    content: $i-arrow-up-down;
  }
}
/**
 * @icon .i-calendar
 * @markup
 *  <span class="i-calendar"></span>
 */
.i-calendar {
  &:before {
    content: $i-calendar;
  }
}
/**
 * @icon .i-id-card
 * @markup
 *  <span class="i-id-card"></span>
 */
.i-id-card {
  &:before {
    content: $i-id-card;
  }
}
/**
 * @icon .i-notes
 * @markup
 *  <span class="i-notes"></span>
 */
.i-notes {
  &:before {
    content: $i-notes;
  }
}
/**
 * @icon .i-pdf
 * @markup
 *  <span class="i-pdf"></span>
 */
.i-pdf {
  &:before {
    content: $i-pdf;
  }
}

/**
 * @icon .i-minus
 * @markup
 *  <span class="i-minus"></span>
 */
.i-minus {
  &:before {
    content: $i-minus;
  }
}

/**
 * @icon .i-alert
 * @markup
 *  <span class="i-alert"></span>
 */
.i-alert {
  &:before {
    content: $i-alert;
  }
}