p, span, a {
  text-decoration: none;
}

p, h1, h2, h3, h4, h5, a, span {
  font-family: 'Muli', sans-serif;
}

.vibbio-link {
  color: $turquoise;
  font-size: 13px;

  &:hover,
  &:focus {
    color: $turquoise;
    text-decoration: underline;
  }

  &:active {
    color: $anthracite;
  }

  &.dark-background {
    color: $anthracite;
    text-decoration: underline;
    &:hover,
    &:focus {
      color: $petroleum;
      text-decoration: underline;
    }

    &:active {
      color: $dark_petroleum;
    }
  }
}

.email-link {
  border-bottom: 2px solid $turquoise;
  text-decoration: none;

  &:hover,
  &:focus {
    color: $turquoise;
    text-decoration: underline;
  }

  &:active {
    color: $anthracite;
    text-decoration: underline;
  }

}

.center-text {
  text-align: center;
}

.browse-inline-link {
  border-bottom: 1px solid $anthracite;
}

$fontSizeHeading1: 30;
$fontSizeHeading2: 22;
$fontSizeHeading3: 18;
$fontSizeHeading4: 16;
$fontSizeHeading5: 14;
$fontSizeNormalPlus: 16;
$fontSizeSmall: 11;

$lineHeightHeading1: (40 / $fontSizeHeading1);
$lineHeightHeading2: (32 / $fontSizeHeading2);
$lineHeightHeading3: (28 / $fontSizeHeading3);
$lineHeightHeading4: (18 / $fontSizeHeading4);
$lineHeightHeading5: (16 / $fontSizeHeading5);
$lineHeightNormalPlus: (24 / $fontSizeNormalPlus);
$lineHeightSmall: (11 / $fontSizeSmall);

// Headings
.heading {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;

  &.heading-1 {
    font-size: ($fontSizeHeading1 * 1px);
    line-height: $lineHeightHeading1
  }

  &.heading-2 {
    font-size: ($fontSizeHeading2 * 1px);
    line-height: $lineHeightHeading2;
  }

  &.heading-3 {
    font-size: ($fontSizeHeading3 * 1px);
    line-height: $lineHeightHeading3;
  }

  &.heading-4 {
    font-size: ($fontSizeHeading4 * 1px);
    line-height: $lineHeightHeading4;
  }

  &.heading-5 {
    font-size: ($fontSizeHeading5 * 1px);
    line-height: $lineHeightHeading5;
  }
}

// Small text
.small-text {
  font-size: ($fontSizeSmall * 1px);
  line-height: $lineHeightSmall;
}

// Normal plus text
.normal-plus-text {
  font-size: ($fontSizeNormalPlus * 1px);
  line-height: $lineHeightNormalPlus;
}

// Font weights
.font-weight-normal {  font-weight: 400;  }
.font-weight-bold {  font-weight: 600;  }
.font-weight-extra_bold {  font-weight: 700;  }

// Text colors

.turquoise-text p,
.turquoise-text span,
.turquoise-text a,
.turquoise-text {
  @include turquoise-color;
}
.petroleum-text p,
.petroleum-text span,
.petroleum-text a,
.petroleum-text {
  @include petroleum-color;
}
.dark_petroleum-text p,
.dark_petroleum-text span,
.dark_petroleum-text a,
.dark_petroleum-text {
  @include dark_petroleum-color;
}

.anthracite-text p,
.anthracite-text span,
.anthracite-text a,
.anthracite-text {
  @include anthracite-color;
}

.dark_anthracite-text p,
.dark_anthracite-text span,
.dark_anthracite-text a,
.dark_anthracite-text {
  @include dark_anthracite-color;
}

.white-text p,
.white-text span,
.white-text a,
.white-text {
  @include white-color;
}


// Text transforms:
.text-transform-uppercase { text-transform: uppercase; }
.text-transform- { text-transform: none; }