/*------------------------------------*\
    $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-category__title {
	font-size: 2.4rem!important;
	text-transform: uppercase;
	background: rgba(255,255,255,.5);
	border: 2px dotted #1EAEF7;
	padding: 6px;
	margin: 24px 0;
}