/*------------------------------------*\
    $PATTERN LAB-SPECIFIC STYLES
\*------------------------------------*/
/**
 * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
 * This is helpful for displaying demo styles for grids, animations, color swatches, etc
 * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
 * These styles will not be your production CSS.
 */
.demo-animate {
  background: #ddd;
  padding: 1em;
  margin-bottom: 1em;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
}

.sg-label {
  font-size: 90%;
  line-height: 1;
}

.sg-fonts p {
  margin-bottom: 0.3em;
}

.pl-c-main .pl-c-category__title {
  background: rgba(255, 255, 255, 0.5);
  border: 2px dotted #008FD6;
  font-size: 2.4rem !important;
  padding: 6px 6px 4px;
  margin: 24px 0;
  text-transform: uppercase;
}
.pl-c-main .pl-c-category__title-link {
  border-bottom-color: transparent;
}
.pl-c-main .pl-c-category__title-link:focus, .pl-c-main .pl-c-category__title-link:hover {
  border-bottom-color: #0062BA;
}
.pl-c-main .pl-c-pattern__title {
  font-family: "DIN-Bold";
  font-size: 1.4rem !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}
.pl-c-main .pl-c-pattern__title-link {
  border-bottom-color: transparent;
}
.pl-c-main .pl-c-pattern__title-link:focus, .pl-c-main .pl-c-pattern__title-link:hover {
  border-bottom-color: #0062BA;
}

/*# sourceMappingURL=styleguide-specific.css.map */