/*


	Note: This file started from the headings.css file. We essentially just
	added the word "display" before every instance of the word "heading"

	*******

	Note: In here, we're modifying the heading color by a means of mixing in
	two different approaches. It's to be determined which will make most
	sense in the long run.

	- Way 1: via the sf-inverted-skin
	- Way 2: via what we are calling a knockout mode, and having specific
		classes created for those knockout modes.

		For example, the following two approaches produce a heading
		with the same color:

			Approach 1:
			.sf-inverted-heading {
				color: rgba(255,255,255,1);
			}


			Approach 2:
			.sf-inverted-skin h1,
			.sf-inverted-skin h2,
			.sf-inverted-skin h3,
			.sf-inverted-skin h4,
			.sf-inverted-skin h5,
			.sf-inverted-skin h6 {
				color: rgba(255,255,255,1);

			}

*/


/* # Headings */
.sf-display-heading-1,
.sf-display-heading-2,
.sf-display-heading-3 {

	/* Specify the font family. Commented out for the moment */
	/* font-family: "Raleway-ExtraBold"; */

	margin: 0;
	padding: 0;

	color: rgba(0,0,0,1);
}




.sf-inverted-skin .sf-display-heading-1,
.sf-inverted-skin .sf-display-heading-2,
.sf-inverted-skin .sf-display-heading-3 {

	margin: 0;
	padding: 0;

	color: rgba(255,255,255,1);
}


	/* ## Heading knockout mode */
		/* ### Positive headings */

		/* ### Negative headings */
		.sf-inverted-display-heading {
			color: rgba(255,255,255,1);
		}

	/* ## Heading sizes */
		/* ### Default size */
		.sf-skin .sf-display-heading-1 {
			font-size: 48px;
			margin-top: 72px;
			line-height: 105%;
		}
		.sf-skin .sf-display-heading-2 {
			font-size: 28px;
			margin-top: 60px;
			line-height: 110%;
		}
		.sf-skin .sf-display-heading-3 {
			font-size: 18px;
			margin-top: 28px;
			line-height: 120%;
		}

		/* ### Small size */
		.sf-small-display-heading {
			/* Specify the font family. Commented out for the moment */
			/* font-family: "Raleway-SemiBold" !important; */
		}

		h1.sf-small-display-heading {
			font-size: 24px;
			margin-top: 60px;
			line-height: 120%;
		}
		h2.sf-small-display-heading {
			font-size: 18px;
			margin-top: 28px;
			line-height: 140%;
		}
		h3.sf-small-display-heading {
			font-size: 16px;
			margin-top: 24px;
			line-height: 160%;
		}

	/* ## Paragraphs nested under headings */
	.sf-skin .sf-display-heading-1 + p {
		margin-top: 8px;
	}
	.sf-skin .sf-display-heading-2 + p {
		margin-top: 12px;
	}
	.sf-skin .sf-display-heading-3 + p {
		margin-top: 16px;
	}