@font-face {
  font-family: "myriad-pro";
  src: url("../fonts/myriad-pro.eot");
  src: url("../fonts/myriad-pro.eot") format("embedded-opentype"),
    url("../fonts/myriad-pro.woff2") format("woff2"),
    url("../fonts/myriad-pro.woff") format("woff"),
    url("../fonts/myriad-pro.ttf") format("truetype"),
    url("../fonts/myriad-pro.svg#myriad-pro") format("svg");
}

body {
  color: $body-color;
  @include myriad(500, $body-font-size);

  @include media-breakpoint-up(md) {
    @include myriad(500, 16px);
  }
}

p {
  font-size: $body-font-size;
  line-height: 1.25em;
  &.small {
    font-size: $body-font-size - 2;
    &--sm {
      @include media-breakpoint-up(sm) {
        font-size: $body-font-size;
      }
    }
  }
}

a:hover,
a:active,
a:focus {
  outline: none;
}

.x-small {
  font-size: 75%;
  line-height: 1.2;
}

h1,
.h1 {
  @include myriad(500, 30px);
}
h2,
.h2 {
  @include myriad(500, 28px);
}
h3,
.h3 {
  @include myriad(500, 24px);
}
h4,
.h4 {
  @include myriad(500, 20px);
}
h5,
.h5 {
  @include myriad(500, 20px);
}
h6,
.h6 {
  @include myriad(500, 20px);
}

/* Small devices (tablets, 768px and up) */
@include media-breakpoint-up(sm) {
  h1,
  .h1 {
    @include myriad(500, 38px);
  }
  h2,
  .h2 {
    @include myriad(500, 32px);
  }
  h3,
  .h3 {
    @include myriad(500, 28px);
  }
  h4,
  .h4 {
    @include myriad(500, 24px);
  }
  h5,
  .h5 {
    @include myriad(500, 22px);
  }
  h6,
  .h6 {
    @include myriad(500, 22px);
  }
}

/* Medium devices (desktops, 992px and up) */
@include media-breakpoint-up(md) {
  h1,
  .h1 {
    @include myriad(500, 44px);
  }
  h2,
  .h2 {
    @include myriad(500, 36px);
  }
  h3,
  .h3 {
    @include myriad(500, 30px);
  }
  h4,
  .h4 {
    @include myriad(500, 24px);
  }
  h5,
  .h5 {
    @include myriad(500, 22px);
  }
  h6,
  .h6 {
    @include myriad(500, 22px);
  }
}

/* Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(lg) {
  h1,
  .h1 {
    @include myriad(500, 50px);
  }
  h2,
  .h2 {
    @include myriad(500, 42px);
  }
  h3,
  .h3 {
    @include myriad(500, 36px);
  }
  h4,
  .h4 {
    @include myriad(500, 30px);
  }
  h5,
  .h5 {
    @include myriad(500, 28px);
  }
  h6,
  .h6 {
    @include myriad(500, 26px);
  }
}

// for multiline ellipsis
.ellip {
  display: block;
  height: 100%;
  position: relative;
  overflow: hidden;

  &-line {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 100%;
    position: relative;
    overflow: hidden;
  }
}
