﻿/* TYPOGRAPHY
------------------------------------------------------------------------*/
body {
  font-family: "Montserrat";
  font-family: var(--bomb-sans-serif);
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: #0060E1;
  color: var(--bomb-blue);
}

h1, h2, h3, h4, h5, h6,
[class*="text-h"] {
  font-family: var(--bomb-display);
  letter-spacing: -1px;
  font-weight: normal;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures, contextual;
  -moz-font-feature-settings: "kern", "liga", "clig", "calt";
  -ms-font-feature-settings: "kern", "liga", "clig", "alt";
  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
  font-feature-settings: "kern", "liga", "clig", "calt";
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 1rem 0;
}

h1, .text-h1 {
  font-size: 3.5rem;
}

h2, .text-h2 {
  font-size: 3.25rem;
}

h3, .text-h3 {
  font-size: 3rem;
}

h4, .text-h4 {
  font-size: 2.75rem;
}

h5, .text-h5 {
  font-size: 2.5rem;
}

h6, .text-h6 {
  font-size: 2rem;
}

@media screen and (min-width: 1040px) {
  h1, .text-h1 {
    font-size: 7.5rem;
  }

  h2, .text-h2 {
    font-size: 4.5rem;
  }

  h3, .text-h3 {
    font-size: 4rem;
  }

  h4, .text-h4 {
    font-size: 3.5rem;
  }
}

p {
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0 0 1rem 0;
}

.text-sm {
  font-size: 1rem !important;
}

.text-md {
  font-size: 2rem !important;
}

a {
  color: #0060E1;
  color: var(--bomb-blue);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.link-list {
  display: flex;
  flex-direction: column;
}

.link-list.horizontal {
  flex-direction: row;
}

.link-list a {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.text-red {
  color: #fd0e24 !important;
  color: var(--bomb-red) !important;
}

.text-blue {
  color: #0060E1 !important;
  color: var(--bomb-blue) !important;
}

.text-blue-light {
  color: #9EDAFD !important;
  color: var(--bomb-blue-light) !important;
}

.text-yellow {
  color: #fffa5f !important;
  color: var(--bomb-yellow) !important;
}

.text-pink {
  color: #feb0e8 !important;
  color: var(--bomb-pink) !important;
}

.text-orange {
  color: #f6931d !important;
  color: var(--bomb-orange) !important;
}

.text-beige {
  color: #e4b374 !important;
  color: var(--bomb-beige) !important;
}

.text-gray {
  color: #3d3d3d !important;
  color: var(--bomb-gray) !important;
}

.text-display     {
  font-family: var(--bomb-display);
}

.text-sans-serif  {
  font-family: "Montserrat";
  font-family: var(--bomb-sans-serif);
}

.text-uppercase   { text-transform: uppercase !important;}

.text-normalcase, .product-list {
    text-transform: none !important;
    font-family: var(--bomb-display-normalcase) !important;
    display: inline-block !important;
}
.text-center      { text-align: center;}
.text-lightweight { font-weight: 100;}

.text-label {
  font-family: var(--bomb-display);
  font-size: 1.7rem;
  text-transform: uppercase;
  margin: 0;
}

h1 .text-label {
  display: block;
}

.text-label[class*='bg'] {
  z-index: 1;
  display: inline-flex;
  color: #fff;
  line-height: 1;
  padding: 5px 18px 5px 10px;
  margin-bottom: 1rem;
  font-size: 3rem;
  clip-path: polygon(0% 0, 100% 0%, 90% 100%, 0 100%);
}

.text-or {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fd0e24;
  color: var(--bomb-red);
}

@media screen and (min-width: 1040px) {
  .text-or ~ .col:first-of-type {
    padding-right: 2rem;
  }

  .text-or ~ .col:last-of-type {
    padding-left: 2rem;
  }
}

.bg-red h1,
.bg-red h2,
.bg-red h3,
.bg-red h4,
.bg-red h5,
.bg-red h6,
.bg-red p,
.bg-blue h1,
.bg-blue h2,
.bg-blue h3,
.bg-blue h4,
.bg-blue h5,
.bg-blue h6,
.bg-blue p {
  color: #fff;
}

.bg-blue-light h1,
.bg-blue-light h2,
.bg-blue-light h3,
.bg-blue-light h4,
.bg-blue-light h5,
.bg-blue-light h6,
.bg-blue-light p,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6,
.bg-white p {
  color: #0060E1;
  color: var(--bomb-blue);
}