/*
	Note:
	font-size: large, larger, x-large, etc ... that's all relative to the browsers font settings
	font-size: [X]rem .... that's relative to the font size of root
	font-size: [X]em .... that's relative to the font size of the parent container

*/

/* Global defaults */
.sf-skin,
body,
body.sf-skin {
	font-weight: 400;
	font-family: 'Poppins' !important;


	line-height: 166%;
	font-size: 20px;

	color: rgba(0,0,0,.5);
}





.sf-skin p,
.sf-skin ul,
.sf-skin li,
p,
p.sf-skin,
ul,
ul.sf-skin,
li,
li.sf-skin {
	font-weight: 400;
	/* font-family: 'Poppins' !important; */


	font-family: 'Noto Serif' !important;
	line-height: 166%;
	font-size: 20px;

	color: rgba(0,0,0,.5);

	font-family: 'Poppins' !important;
}

/*
em {
	font-family: 'Noto Serif' !important;
	font-style: italic;
}
*/


.sf-skin .sf-fancy-text {
	font-family: 'Noto Serif' !important;
}


.sf-skin .sf-italic-fancy-text {
	font-family: 'Noto Serif' !important;
	font-style: italic;
}

p.sf-fancy-text,
p.sf-italic-fancy-text {
	line-height: 155%;
}

p {
	padding-bottom: 0;
}

/* Global inverted defaults */
/* Don't think the following is true or made sense ... */
/* Note: We do not apply these global invert defaults on bare elements, meaning elements
without a class, which is different than how it's applied to the default skin of sf-skin.  */

.sf-inverted-skin,
body.sf-inverted-skin,
p.sf-inverted-skin,
ul.sf-inverted-skin,
li.sf-inverted-skin {
	font-weight: 400;
	font-family: 'Noto Serif' !important;

	font-family: 'Poppins' !important;



	line-height: 166%;
	font-size: 20px;

	color: rgba(255,255,255,.5);


}


.sf-skin p,
p {
	margin-top: 29px;
}


.sf-skin p + p, .sf-skin address + address {
    margin-top: 29px;
}



address {
	margin-top: 15px !important;
}

a {
	color: #005bcd !important;

	color: rgba(0,0,0,.5) !important;
}



h1,
h1.sf-inverted-skin,
h1.sf-skin,
.sf-inverted-skin h1,
.sf-skin h1,
h2,
h2.sf-inverted-skin,
h2.sf-skin,
.sf-inverted-skin h2,
.sf-skin h2,
h3,
h3.sf-inverted-skin,
h3.sf-skin,
.sf-inverted-skin h3,
.sf-skin h3,
h4,
h4.sf-inverted-skin,
h4.sf-skin,
.sf-inverted-skin h4,
.sf-skin h4 {
	font-family: 'Poppins' !important;
	font-weight: 600;
}

/*
h3 {
	font-weight: 600 !important;
}
*/



/* # Headings component */
/* 	## Shared properties between both skins */
/* 		### Heading sizes */
			/* #### Default size */
				.sf-skin h1,
				.sf-inverted-skin h1 {

					font-size: 66px;
					margin-top: 66px !important;
					line-height: 115%;
				}
				.sf-skin h2,
				.sf-inverted-skin h2 {
					font-size: 39px;
					margin-top: 55px !important;
					line-height: 140%;
				}
				.sf-skin h3,
				.sf-inverted-skin h3 {
					font-size: 24px;
					margin-top: 55px !important;
					line-height: 150%;
				}

			/* #### Small sizes */
			/* Note: These aren't written in the form of a modifier because they are not modifying another class */
				h1.sf-small-heading {
					/*
					font-size: 24px;
					margin-top: 60px;
					line-height: 120%;
					*/
				}
				h2.sf-small-heading {
					/*
					font-size: 18px;
					margin-top: 28px;
					line-height: 140%;
					*/
				}
				h3.sf-small-heading {
					/*
					font-size: 16px;
					margin-top: 24px;
					line-height: 160%;
					*/
				}


/* 	## Default skin */
	/* Notes: These styles allow you to use the default spitfire skin, and also
	give you a way to override the inverted skin in case you are nested inside of the inverted skin.
	Override the inverted skin by using the h1.sf-skin, h2.sf-skin, etc. */
		h1.sf-skin,
		h2.sf-skin,
		h3.sf-skin,
		h4.sf-skin,
		h5.sf-skin,
		h6.sf-skin,
		.sf-skin h1,
		.sf-skin h2,
		.sf-skin h3,
		.sf-skin h4,
		.sf-skin h5,
		.sf-skin h6 {

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

			margin: 0;
			padding: 0;

			color: rgba(0,0,0,.86);
		}


/* 	## Inverted skin */
/* 	Note: Just like the styles above, these style give you a way to use the inverted skin,
	and also give you a way to override the default spitfire skin if need be. */
		h1.sf-inverted-skin,
		h2.sf-inverted-skin,
		h3.sf-inverted-skin,
		h4.sf-inverted-skin,
		h5.sf-inverted-skin,
		h6.sf-inverted-skin,
		.sf-inverted-skin h1,
		.sf-inverted-skin h2,
		.sf-inverted-skin h3,
		.sf-inverted-skin h4,
		.sf-inverted-skin h5,
		.sf-inverted-skin h6 {

			margin: 0;
			padding: 0;

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




/* # Sub Headings component */
h1 small.sf-sub-heading {
	font-size: 53px;
	font-weight: 500;
	color: rgba(0,0,0,.6);
}
h2 small.sf-sub-heading {
	font-size: 32px;
	font-weight: 500;
	color: rgba(0,0,0,.6);
}
h3 small.sf-sub-heading {
	font-size: 20px;
	font-weight: 500;
	color: rgba(0,0,0,.6);
}


/* ******************* */



/* # Display Headings component */

	/*

	# ***** TURN BLACK TEXT TO WHITE ****
		// These following two ways will turn "sf-display-heading-1" into white text, by
		   way of adding a "sf-inverted-skin" class.

		Way 1:
		.sf-inverted-skin .sf-display-heading-1
			- When nested inside of the "sf-inverted-skin", it becomes white

		Way 2:
		.sf-inverted-skin.sf-display-heading-1 ( like: class="sf-inverted-skin sf-display-heading-1")
			- When coupled with the class "sf-inverted-skin" it becomes white


	# ***** CREATE WHITE TEXT ****
		// And another way of creating white text is by applying the class that was created
		as a direct way to generate white text, ie. "sf-inverted-display-heading"

		Use this class in the following ways:
		Way 1:
			//
			- If this h1 is nested inside of an elemement with the class "sf-skin", applying
			this class will override the black text and will make it white.

			- If this h1 is neither nested inside of sf-skin or inside of sf-inverted-skin, then
			applying this class will make the text white.

			<h1 class="sf-inverted-display-heading">Here is a heading with white text</h1>


	# ***** TURN WHITE TEXT TO BLACK ****

		If we are nested inside of a .sf-inverted-skin, and we want to how our display
		heading show up black, we do the following:

		// In here the h1 is white
		<body class="sf-inverted-skin">
			<h1 class="sf-display-heading-1">
				My Heading Here
			</h1>

		// To make it black do one of two things:
		1:
		<body class="sf-inverted-skin">
			<h1 class="sf-skin sf-display-heading-1">	<----- And the "sf-skin" class to the h1 to override the style from the parent sf-inverted-skin.
				My Heading Here
			</h1>

		2:
		<body class="sf-inverted-skin">
			<div class="sf-skin">		<----- Nest the heading inside of another element, and give that element the class "sf-skin", thus overriding the sf-inverted-skin.
				<h1 class="sf-display-heading-1">
					My Heading Here
				</h1>
			</div>

	*/


	/* ## Shared Properties */
	/* Notes: Shared properties of both Display Headings and Inverted Display Headings */

		/* ### Sizes of Display Headings */

			/* #### Default sizes */
				.sf-display-heading-1,
				.sf-inverted-display-heading-1,
				h1.sf-display-heading-1,
				h1.sf-inverted-display-heading-1 {

					font-size: 105px !important;
					margin-top: 73px !important;
					line-height: 125% !important;


					font-weight: 200 !important;
				}



				.sf-display-heading-2,
				.sf-inverted-display-heading-2,
				h2.sf-display-heading-2,
				h2.sf-inverted-display-heading-2 {
					font-size: 63px !important;
					margin-top: 45px !important;
					line-height: 130% !important;


					font-weight: 200 !important;
				}


				.sf-display-heading-3,
				.sf-inverted-display-heading-3
				h3.sf-display-heading-3,
				h3.sf-inverted-display-heading-3 {
					font-size: 39px !important;
					margin-top: 31px !important;
					line-height: 120% !important;


					font-weight: 200 !important;
				}


			/* #### Size Modifiers: Small  */
				.sf-display-heading-1--small,
				.sf-inverted-display-heading-1--small {
					/*
					font-size: 24px;
					*/
				}
				.sf-display-heading-2--small,
				.sf-inverted-display-heading-2--small {
					/*
					font-size: 18px;
					*/
				}
				.sf-display-heading-3--small,
				.sf-inverted-display-heading-3--small {
					/*
					font-size: 16px;
					*/
				}


	/* ## Display Headings */
		/* Notes: These styles here are used to create black text from scratch, or
		to turn white inverted text into black text, by ways of overriding */
		.sf-skin .sf-display-heading-1,
		.sf-skin .sf-display-heading-2,
		.sf-skin .sf-display-heading-3,
		.sf-skin.sf-display-heading-1,
		.sf-skin.sf-display-heading-2,
		.sf-skin.sf-display-heading-3,
		.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,.86);
		}


	/* ## Inverted Display Headings */
		/* Notes: Theses styles are used for creating white text, and for turning
		black text into white text */
		.sf-inverted-skin .sf-display-heading-1,
		.sf-inverted-skin .sf-display-heading-2,
		.sf-inverted-skin .sf-display-heading-3,
		.sf-inverted-skin.sf-display-heading-1,
		.sf-inverted-skin.sf-display-heading-2,
		.sf-inverted-skin.sf-display-heading-3,
		.sf-inverted-display-heading-1,
		.sf-inverted-display-heading-2,
		.sf-inverted-display-heading-3 {

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

			margin: 0;
			padding: 0;

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


/* Note: This modification of the paragraphs should probably go in the paragrath compoent code.
	It's the paragraph's responsibility to modify itself when it's in a various contexts  */
/* ## Paragraphs nested under headings */
	.sf-display-heading-1 + p,
	.sf-inverted-display-heading-1 + p {
		/*
		margin-top: 8px;
		*/
	}

	.sf-display-heading-2 + p,
	.sf-inverted-display-heading-2 + p {
		/*
		margin-top: 12px;
		*/
	}

	.sf-display-heading-3 + p,
	.sf-inverted-display-heading-3 + p {
		/*
		margin-top: 16px;
		*/
	}


/* ************************************ */



/* # Lead Text styles .... this hasn't been reworked, but I think it still does the job for now */
/* # Lead text */
	/* ## Default lead text */
		.sf-skin .sf-lead-text,
		.sf-lead-text {
			/* Specify the font family. Commented out for the moment */
			/* font-family: "Raleway-Medium"; */

			/*
			font-size: 21px;
			line-height: 167% !important;


			margin-top: 21px;
			*/
			color: rgba(0,0,0,.5) !important;

			font-weight: 300 !important;
			font-family: 'Poppins' !important;
			line-height: 155% !important;

			font-size: 32px !important;

			margin-top: 0 !important;
		}



	/* ## Inverted lead text */
		.sf-inverted-lead-text {
			/* Specify the font family. Commented out for the moment */
			/* font-family: "Raleway-Medium"; */


			/*
			font-size: 21px;
			line-height: 150%;

			margin-top: 21px;

			color: rgba(255,255,255,1);
			*/






		}

	@media (max-width: 769px) {
		.sf-lead-text,
		.sf-inverted-lead-text {

			/*

			font-size: 1rem;


			margin-top: 2rem !important;

			*/
		}
	}

	/* ## Sizes - Lead text */
		/* ### Small lead text */
			/* Note: Hmm.... not sure why we did it this way at first.
				Let's try it a simplier way.
			*/
			/*
			.sf-lead-text.sf-lead-text--small,
			.sf-inverted-lead-text.sf-inverted-lead-text--small {
				font-size: 18px;
				line-height: 160%;
			}
			*/

			.sf-lead-text--small,
			.sf-inverted-lead-text--small {
				/*
				font-size: 18px;
				line-height: 160%;

				*/
			}



.sf-muted-text {
	color: rgba(0,0,0,.5) !important;
}



/* This following code needs to be added into the Spitfire CSS grid component code */


.sf-clear:before,
.sf-clear:after,
.sf-dl-horizontal dd:before,
.sf-dl-horizontal dd:after,
.sf-container:before,
.sf-container:after,
.sf-container-fluid:before,
.sf-container-fluid:after,
.sf-row:before,
.sf-row:after,
.sf-form-horizontal .sf-form-group:before,
.sf-form-horizontal .sf-form-group:after,
.sf-btn-toolbar:before,
.sf-btn-toolbar:after,
.sf-btn-group-vertical > .sf-btn-group:before,
.sf-btn-group-vertical > .sf-btn-group:after,
.sf-nav:before,
.sf-nav:after,
.sf-navbar:before,
.sf-navbar:after,
.sf-navbar-header:before,
.sf-navbar-header:after,
.sf-navbar-collapse:before,
.sf-navbar-collapse:after,
.sf-pager:before,
.sf-pager:after,
.sf-panel-body:before,
.sf-panel-body:after,
.sf-modal-header:before,
.sf-modal-header:after,
.sf-modal-footer:before,
.sf-modal-footer:after {
	display: table;
	content: " ";
}