/*********************************
 * TEXT STYLES
 *********************************/

.eyebrow,
p.eyebrow,
h2.eyebrow,
.paragraph--view-mode-full h2.eyebrow {
  display: inline-block;
  margin: 0 0 20px 0;
  padding: 4px 10px;
  background-color: #060606;
  color: #68d2f2;
  text-transform: uppercase;
  font-family: roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 2px;
  text-align: inherit;
}
@media (min-width: 1220px) {
  .eyebrow,
  p.eyebrow,
  h2.eyebrow,
  .paragraph--view-mode-full h2.eyebrow {
    padding: 4px 16px;
    font-size: 20px !important;
  }
}

p.big-text,
p.big-text-sans {
  font-family: mrs-eaves-xl-serif, serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 20px;
}
p.big-text-sans {
  font-family: roboto, sans-serif;
  font-weight: 300;
    font-size: 24px;
}
@media (min-width: 1220px) {
  p.big-text {
    font-size: 34px;
  }
  p.big-text-sans {
    font-size: 28px;
  }
}

p.intro-text {
  position: relative;
  font-weight: 500;
  text-align: center;
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
  color: #019de0;
}
p.intro-text:after {
  content: '';
  position: absolute;
  width: 140px;
  height: 2px;
  left: 50%;
  bottom: 0;
  transform: translateX(-70px);
  background-color: #019de0;
}

h2.center-heading {
  text-align: center !important;
}

p.footnote {
  font-size: 80%;
}

/*********************************
 * LINKS
 *********************************/

/* "See more" links. */
a.more-link,
.more-link a,
button.more-link {
  display: inline-block;
  text-transform: uppercase;
  font-family: roboto, sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 16px;
  color: #000;
  padding-right: 18px;
  background: transparent url(../../images/arrow-right-blue.svg) right center no-repeat;
  background-size: 12px 12px;
  text-decoration: none;
  letter-spacing: 2px;
  cursor: pointer;
}
a.more-link.more-link--white,
.more-link--white a,
button.more-link--white {
  color: #fff;
}

  a.more-link:hover,
  a.more-link:focus,
  .more-link a:hover,
  .more-link a:focus,
  button.more-link:hover,
  button.more-link:focus {
    color: #019ddf;
  }

/* Back links. */
.more-link.more-link--back {
  text-align: left;
}
a.more-link.more-link--back,
.more-link.more-link--back a {
  padding-right: 0;
  padding-left: 18px;
  background: transparent url(../../images/arrow-left-blue.svg) left center no-repeat;
  background-size: 12px 12px;
  text-align: left;
}

/* Down links. */
a.more-link.more-link--down,
.more-link.more-link--down a,
button.more-link.more-link--down {
  background-image: url(../../images/arrow-down-blue.svg);
}
button.more-link.more-link--down.active {
  background-image: url(../../images/arrow-up-blue.svg);
}

/* Boxed lnks. */
.more-link.more-link--boxed {
  text-align: left;
}

a.more-link.more-link--boxed,
.more-link.more-link--boxed a {
  text-align: left;
  display: inline-block;
  border: 2px #060606 solid;
  padding: 4px 14px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 16px;
  color: #060606;
  background: none;
}

  a.more-link.more-link--boxed:hover,
  a.more-link.more-link--boxed:focus,
  .more-link.more-link--boxed a:hover,
  .more-link.more-link--boxed a:focus {
    border-color: #019ddf;
    background-color: #019ddf;
  }

/* Plus link. */
a.more-link.more-link--plus,
.more-link--plus a {
  background-image: none;
  padding-right: 0;
}
  a.more-link.more-link--plus:after,
  .more-link--plus a:after {
    display: inline-block;
    content: '+';
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    color: #019ddf;
    margin-left: 7px;
  }


/**
 * LINKS - ACTION LINK
 * Available to editors in CKEditor.
 */

a.action-link,
.ck-editor a.action-link {
  font-family: roboto, sans-serif;
  font-weight: 700;
  color: #060606;
  background: transparent url(../../images/arrow-right-blue.svg) right center no-repeat;
  display: inline;
  padding: 0 18px 0 0;
  background-size: 12px 12px;
}
a.action-link:hover,
a.action-link:focus {
  color: #019ddf;
}

/**
 * LINKS - OVER LINK
 * Link that covers an entire content card, teaser, or nested paragraph.
 */
.over-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.over-link.over-link--border:hover,
.over-link.over-link--border:focus {
  border: 3px #019de0 solid;
}
.content--color-blue .over-link.over-link--border:hover,
.content--color-blue .over-link.over-link--border:focus {
  border: 3px #019de0 solid;
}
.content--color-bluedark .over-link.over-link--border:hover,
.content--color-bluedark .over-link.over-link--border:focus {
  border: 3px #0f369b solid;
}
.content--color-orange .over-link.over-link--border:hover,
.content--color-orange .over-link.over-link--border:focus {
  border: 3px #eb3f21 solid;
}
.content--color-purple .over-link.over-link--border:hover,
.content--color-purple .over-link.over-link--border:focus {
  border: 3px #6f2be4 solid;
}

/**************************
 * EMBEDDED ENTITIES
 ************************/

/* Image embedded in CKEditor. */
div.embedded-entity {
  margin-bottom: 1.5em;
}
  .field div.embedded-entity:last-child {
    margin-bottom: 0;
  }

div.embedded-entity.align-center > .media {
  text-align: center;
}

/**************************
 * GLOSSARY TERMS & DEFINITIONS
 ************************/

/* The glossify class is used within CKEditor. */
/* The glossify-tooltip-tip class is used when the term is rendered. */
.glossify,
.glossify-tooltip-tip {
  border-bottom: dotted 1px #060606;
}
.glossify-tooltip-tip {
  cursor: help;
}

.tippy-box[data-theme~='glossify'] {
  background-color: #68d2f2;
  padding: 0.85em;
  color: #060606;
  font-size: 0.85em;
  border-radius: 0;
  min-width: 160px;
  max-width: 300px;
  box-shadow: 0 5px 5px 0 rgba(0,0,0,0.4);
}
.tippy-box[data-theme~='glossify'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #68d2f2;
}
.tippy-box[data-theme~='glossify'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #68d2f2;
}
.tippy-box[data-theme~='glossify'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: #68d2f2;
}
.tippy-box[data-theme~='glossify'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: #68d2f2;
}