@charset "utf-8";
/* CSS Document */

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

/* 								site-wide.css									 */

/* 		PRIMARY PURPOSES: 

		1. 	Separate styling from positioning of page elements
		2. 	Remove duplicate styling
		3.  Store page structures (header, footer, page layouts) that are used
	        throughout the site. 

		REMEMBER: 

		1. 	Elements that are made up of a greater number of styles should be
			towards the top in order to allow you to overwrite their styles
			with styling options that come after - if needed. 


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


/*///////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////    PAGE STRUCTURE     //////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/


	body {
		background-color: #F5F6F1;
		position: relative;
	}


/* HEADER AND FOOTER STYLING ARE AT THE BOTTOM */ 



/*///////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////    FORM FIELDS     /////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/


/*//////////////////////////////////*/
/*/////  DEFAULT FORM STYLE    /////*/
/*//////////////////////////////////*/


/* FORM FIELD STYLING (will cascade to form fields)  */

	/* hand cursor over submit button */
	input[type="submit"] {
		cursor: pointer;
	}

	/* glow on focus */
	input[type="text"]:focus, textarea:focus, select:focus, input[type="checkbox"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="password"]:focus {
		outline: none;
		border-color: #96CA2D;
		box-shadow: 0 0 5px #96CA2D;
	}
	
	/* placeholder color */
	input[type="text"]::placeholder, 
	input[type="email"]::placeholder,
	input[type="password"]::placeholder,
	textarea::placeholder,
	select::placeholder {
		color: #BCBEC0;
	}

	/* font and border styling */
	input[type="text"], textarea, input[type="checkbox"], input[type="radio"], input[type="email"], input[type="password"], select {
		/* Default font and border */
		font-family: "freight-sans-pro", sans-serif;
		font-size: 17px;
		box-sizing: border-box;
		border: 1px solid #C8C7BB;
		border-radius: 5px;
}


/* DEFAULT FORM FIELD        (cascading styles from above) */

	input[type="text"], input[type="email"], input[type="password"] {
		padding: .5em .75em; 
	}		

/* DEFAULT TEXTAREA        (cascading styles from above)  */  

	textarea {
		height: 5.5em;
		padding: .75em; 
	}	

/* DEFAULT DROPDOWN       (cascading styles from above)  */  

	select {
		padding: .5em;
	}	

/* DEFAULT CHECKBOX      (cascading styles from above)  */  

	input[type="checkbox"] {
		transform: scale(1.5);
	}	

/* DEFAULT RADIO BUTTON      (cascading styles from above)  */  

	input[type="radio"] {
		transform: scale(1.5);
	}

/* DEFAULT SUBMIT BUTTON     (no cascading)  */  

	input[type="submit"] {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 17px;
		color: white;
		background-color: #96CA2D;
		text-transform: uppercase;
		padding: .5em 1.5em;
		border: white;
		border-radius: .3em;
	}


/*//////////////////////////////////*/
/*/////  STYLE A FORM STYLE    /////*/  
/*//////////////////////////////////*/

/*  
NOTES:  
1. You'll need to add class="frm-stylea" to the form boxes 
2. Because it wasn't working for standard text boxes, it was 
necessary to make the selector look like input[type="text"].frm-stylea
otherwise, many of the properties weren't getting overwritten. 
3. The style is a square style that blends into the background. 
*/


	/* Form Field Box Styling */
	input[type="text"].frm-stylea, select.frm-stylea, textarea.frm-stylea, input[type="email"].frm-stylea {
		border: 1px solid #C8C7BB;
		background-color: #F5F6F1;
		border-radius: 0px;
		padding: 4px;
	}

	/* Form Field "Focus" Styling */
	input[type="text"].frm-stylea:focus, textarea.frm-stylea:focus, select.frm-stylea:focus, input[type="checkbox"].frm-stylea:focus, input[type="radio"].frm-stylea:focus, input[type="submit"].frm-stylea:focus {
		outline: none;
		border-color: #96CA2D;
		box-shadow: 0 0 5px #96CA2D;
		background-color: white;
	}



/*//////////////////////////////////*/
/*/////  GENERIC FORM STYLES   /////*/  
/*//////////////////////////////////*/

/* .checkbox-md */

input[type="checkbox"].checkbox-md {
		transform: scale(1);
	}


/*//////////////////////////////////*/
/*/////       FORM ERRORS      /////*/
/*//////////////////////////////////*/

.field-error {
	font-family: "freight-sans-pro", sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #E85C41;
	padding: 5px 5px 8px 5px;
}

.field-error-indicator {
	border-color: #E85C41 !important;
}

.error-message-color {
	color: #E85C41 !important;
}


/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////         BUTTONS       /////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

/* buttons a, b and c use the green, red and blue of the site */

	.button-a {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: white;
		background-color: #96CA2D;
		text-transform: uppercase;
		padding: 1em 2em;
		border-radius: .3em;
	}

	.button-b {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: white;
		background-color: #67C3ED;
		text-transform: uppercase;
		padding: 1em 2em;
		border-radius: .3em;
	}

	.button-c {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: white;
		background-color: #E85C41;
		text-transform: uppercase;
		padding: 1em 2em;
		border-radius: .3em;
	}

/* buttons 0, 1, 2, and 3 use the site background colors - 0 is for no/inherited color */

	.button-0 {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 16px;
		background-color: inherit;
		color: black;
		text-transform: uppercase;
		padding: 1em 2em;
		border-radius: .3em;	
		border: 1px solid #C8C7BB;
	}


	.button-1 {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: black;
		background-color: #F5F6F1;
		text-transform: uppercase;
		padding: 1em 2em;
		border-radius: .3em;	
		border: 1px solid #C8C7BB;
	}

	.button-2 {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: black;
		background-color: #F0F1EC;
		text-transform: uppercase;
		padding: 1em 2em;
		border-radius: .3em;	
		border: 1px solid #C8C7BB;
	}

	.button-3 {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 16px;
		color: black;
		background-color: #C8C7BB;
		text-transform: uppercase;
		padding: 1em 2em;
		border-radius: .3em;	
		border: 1px solid #C8C7BB;
	}


/* SIGN-IN LOGIN MY PROFILE BUTTONS*/

	.button-header-signup {
		box-sizing: border-box;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 18px;
		border-radius: 5px 0 0 5px;
		color: white;
		width: 120px;
		height: 35px;
		background: #96CA2D;
		cursor: pointer;
		outline: none;
		border: none;
	}

	.button-header-signup:hover {
		color: black;
	}

	.button-header-login {
		box-sizing: border-box;
		margin-left: -4px;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 18px;
		border-radius: 0 5px 5px 0;
		color: #555555;
		width: 70px;
		height: 35px;
		border: solid 2px #96CA2D;
		outline: none;
		background: white;
		cursor: pointer;
	}

	.button-header-login:hover {
		text-transform: uppercase;
	}

	.button-header-loggedin {
		box-sizing: border-box;
		background: #96CA2D;
		color: white;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 18px;
		text-transform: uppercase;
		border-radius: 2px;
		width: 180px;
		height: 35px;
		border: none;
		cursor: pointer;
		outline: none;
	}



/*///////////////////////////////////////////////////////////////////////////////*/
/*////////////////////        POP-UPS AND WARNINGS       ////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/



	/* full screen background */
	.opaque {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow-y: auto;
		background-color: rgba(15,15,15,0.85);
		z-index: 5;
	}



/*///////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////   ICONS    //////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/



/*//////////////////////////////////*/
/*//     RANDOM ICON CLASSES      //*/    
/*//////////////////////////////////*/	   

	.gray-icon {
		/* Lighten the plus sign */
		opacity: .3;
	}

	.left-arrow {
		transform: rotate(180deg); /* used to flip the right html arrow ➤ */ 
	}


	.down-arrow {
		position: relative; 
		top: .1em; 
		display: inline-block; 
		transform: rotate(90deg); /* used to flip the right html arrow ➤ */ 
	}

	.up-arrow {
		position: relative; 
		bottom: .2em;
		display: inline-block; 
		transform: rotate(270deg); /* used to flip the right html arrow ➤ */ 
	}


/*//////////////////////////////////*/
/*/////   SOCIAL MEDIA ICONS   /////*/
/*//////////////////////////////////*/


/* SOCIAL MEDIA ICONS - BRAND COLORS */

	.copylink {
		background-image: url(../images/social/copy-link-white.svg);
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #808080;
		cursor: pointer;
	}

    .copylink-copied {
		background-image: url(../images/social/copy-link-white.svg);
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #808080;
		border-radius: 10px;
		cursor: pointer;
	}

	.facebook {
		background-image: url(../images/social/fb-white.svg); 
		background-size: 65%;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #4a67a0;
		cursor: pointer;
	}

	.instagram {
		background-image: url(../images/social/instagram-white.svg); 
		background-size: 65%;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #d21e75;
		cursor: pointer;
	}

	.pinterest {
		background-image: url(../images/social/pinterest-white.svg); 
		background-size: 55%;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #c92228;
		cursor: pointer;
	}

	.twitter {
		background-image: url(../images/social/twitter-white.svg); 
		background-size: 45%;
		background-repeat: no-repeat;
		background-position: center;
		background-color: #4eb4d9;
		cursor: pointer;
	}



/* SOCIAL MEDIA ICON SIZING (MUST BE PLACED AFTER ABOVE ICONS FOR CASCADING) */

	.sm-photos {  /* sm stands for social media */
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 2px;	
		background-color: #808080;
	}

	.sm-blog {	/* sm stands for social media */
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 2px;
	}

	.lg-photo-sm-icons {
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 2px;
	}

	.sm-blog {
		display: inline-block;
		width: 40px;
		height: 40px;
		margin: 2px;
	}




/*///////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////    LOGOS   //////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

	.logo-header {
		background-image: url(../images/logos/kitchens-com-logo-black.svg);
		background-size: cover;
		background-repeat: no-repeat;
		height: 29px;
		width: 269px;
	}

	.logo-footer {
		display: inline-block;
		background-image: url(../images/logos/kitchens-com-logo-white.svg);
		background-size: cover;
		background-repeat: no-repeat;
		height: 27px;
		width: 210px;
	}



/*///////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////  ELEMENT STYLING  ///////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/


/*//////////////////////////////////*/
/*/////  COLORS   -  (STYLES)  /////*/
/*//////////////////////////////////*/

	/* letters are for the red, green and blue on the site */

	.color-a { color: #96CA2D; }
	.color-b { color: #67C3ED; }
	.color-c { color: #E85C41; }
	.color-3 { color: white; }

/*//////////////////////////////////*/
/*//  BACKGROUNDS   -  (STYLES)  ///*/
/*//////////////////////////////////*/

	/* letters are for the red, green and blue on the site */ 
	/* number are for the brown and white backgrounds      */

	.background-a { background-color: #96CA2D; }
	.background-b { background-color: #67C3ED; }
	.background-c { background-color: #E85C41; }
	.background-1 { background-color: #F5F6F1; }
	.background-2 { background-color: #F0F1EC; }
	.background-3 { background-color: white; }


/*//////////////////////////////////*/
/*//    BORDERS   -  (STYLES)    ///*/
/*//////////////////////////////////*/

	.border-x { border: 1px solid #C8C7BB; }


/*//////////////////////////////////*/
/*////  UNDERLINE   -  (STYLES)  ///*/
/*//////////////////////////////////*/

	.underline-a {
		text-decoration: none;
		border-bottom: 3px solid #96CA2D;
	}


/*/////////////////////////////////////////*/
/*//   HORIZONTAL RULE   -  (STYLES)    ///*/
/*/////////////////////////////////////////*/

	.hr-x {
		border: 0;
		height: 1px;
		color: #C8C7BB;
	}

	/* Gradient transparent - color - transparent */

	.hr-face {
		border: 0;
		height: 1px;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	}


/*//////////////////////////////////*/
/*/ CORNER ROUNDING   -  (STYLES)  /*/
/*//////////////////////////////////*/

	.round-sm { border-radius: 1em; }
	.round-md { border-radius: 1.5em; }
	.round-lg { border-radius: 2em; }


/*//////////////////////////////////*/
/*/      PADDING  -  (STYLES)      /*/
/*//////////////////////////////////*/

	.padding-sm { padding: 1em; }
	.padding-md { padding: 1.5em; }
	.padding-lg { padding: 2em; }








/*///////////////////////////////////////////////////////////////////////////////*/
/*////////////////////   CATEGORY BASED FONT STYLING     ////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

/*		Use category-based font styling for items that have a definitive
/*      style that will be used over and over again.  Some examples include
/*      navigation, form labels, and page headings and sub-headings


/* PAGE HEADINGS */

	.page-heading {
		font-family: lato, sans-serif;
		font-weight: 600;
		font-size: 34px; 
	}

	.page-heading2 {
		font-family: lato, sans-serif;
		font-weight: 600;
		font-size: 26px; 
	}

	.page-subheading {
		font-family: lato, sans-serif;
		font-weight: 600;
		font-size: 21px; 
	}

/* PAGE FOOTER */
	.footer-nav {
		font-family: lato, sans-serif;
		font-weight: 600;
		font-size: 14px; 
		color: white; 
	}

/* PHOTOS */

	.photo-credit {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 14px; 
		text-shadow: 0 0 2px white; }

	.photo-description { 
		/* The description under the large photos */
		font-size: 15px; 
		line-height: 1.4em; }


/* NOTICES */

	.notice-sm { 
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 14px; 
	}

	.notice-md { 
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 16px; 
	}

	.notice-lg { 
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 17px; 
	}


/* LINKS */

	.link {
		font-family: inherit;
		font-weight: 600;
		font-size: inherit;
	}

/* LABELS */

	.label-xs { 
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 15px; 
	}

	.label-sm { 
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 17px; 
	}

	.label-md { 
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 18px; 
	}

	.label-lg { 
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 21px; 
	}


/* NAVIGATION */

	/* Navigation fonts have been put within the Page Structure section above */

/* PHOTO THUMBNAILS */

	.thumbnail-title {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 21px; 
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.thumbnail-project-name {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 15px; 
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;		
	}


/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////   SITE FONTS   /////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

/* h-xxs to h-xxl */

	.h-xxs, .h-xs, .h-sm, .h-md, .h-lg, .h-xl, .h-xxl {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
	}

	.h-xxs { font-size: 15px; }
	.h-xs { font-size: 16px; }
	.h-sm { font-size: 17px; }
	.h-md { font-size: 18px; }
	.h-lg { font-size: 21px; }
	.h-xl { font-size: 24px; }
	.h-xxl { font-size: 34px; }

/* h1-h6 */

	h1, h2, h3, h4, h5, h6 {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
	}

	h6 { font-size: 16px; }
	h5 { font-size: 17px; }
	h4 { font-size: 18px; }
	h3 { font-size: 21px; }
	h2 { font-size: 24px; }
	h1 { font-size: 34px; }

/* p-xxs to p-xxl */

	.p-xxs, .p-xs, .p-sm, .p-md, .p-lg, .p-xl, .p-xxl {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
	}

	.p-xxs { font-size: 15px; line-height: 1.4em; }
	.p-xs { font-size: 16px; line-height: 1.4em; }
	.p-sm { font-size: 17px; line-height: 1.4em; }
	.p-md { font-size: 18px; line-height: 1.4em; }
	.p-lg { font-size: 21px; line-height: 1.4em; }
	.p-xl { font-size: 24px; line-height: 1.4em; }
	.p-xxl { font-size: 34px; line-height: 1.4em; }

/* t-xxs to t-xxl */

	.t-xxs, .t-xs, .t-sm, .t-md, .t-lg, .t-xl, .txxl {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
	}

	.t-xxs { font-size: 15px; }
	.t-xs { font-size: 16px; }
	.t-sm { font-size: 17px; }
	.t-md { font-size: 18px; }
	.t-lg { font-size: 21px; }
	.t-xl { font-size: 24px; }
	.t-xxl { font-size: 34px; }



/*///////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////   BASIC FONT STYLES  /////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/


/* SECONDARY FONT (LATO) */

	.f2 { font-family: lato, sans-serif; }  /* This changes the font styling to Lato */
	
/* HTML DEFAULTS */

	strong { font-weight: 600; }
	em { font-style: italic; }

/* CLASSES */

	.b { font-weight: 600; }   
	.u { text-transform: uppercase; }   
	.bu {
		/* bold and uppercase together */
		font-weight: 600;
		text-transform: uppercase;
	}
	.em { font-style: italic; }
	.shrink { font-size: .75em; } /* Used to shrink text such as with "(optional)" */



/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////    ACTIONS (ie. CURSORS)     //////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

	.cursor-hand {
		cursor: pointer; 
	}


/*///////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////    HEADER STYLING    /////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/


/* POSITIONING */ 

	#header {
		width: inherit;
		background-color: #FFFFFF;
	}

	#header-box {
		display: block;
		max-width: 1278px;
		min-width: 1150px;
		padding: 0 30px 0 30px;
		height: 94px;
		margin: auto;
	}

	#logo-header-box {
		/* The actual logo can be found in another section below */
		display: inline-block;
		background-color: #FFFFFF;
		border: 0px;
		padding: 31px 0px 31px 0px;
	}

	#header-box nav {
		display: inline-block;
		background-color: #FFFFFF;
		padding: 28px 0 27px 0;
		float: right; 
	}


/* FONTS AND SELECTION STYLING */

	.nav-header-selected {
		padding-bottom: 2px;
		border-bottom: 2px solid #96CA2D;	
	}
	.spacer-header {
		display: inline-block;
		padding: 0px 35px;
	}

	.nav-header {
		display: inline-block;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 18px; 	
	}

	.nav-header a {
		color: black;
		text-decoration: none;
	}


/*//////////////////////////////////*/
/*//////     SUB-HEADING2    ///////*/
/*//////////////////////////////////*/

/* BACKGROUND */
	#subhead2 { 
		width: inherit;
		background-color: #F0F1EC;
	}

/* BOX FOR SUBHEAD CONTENT */
	#subhead2-box {
		display: flex;
		justify-content: space-between;
		margin: auto;
		width: 1200px;
		height: 94px;
	}

/* BOX FOR PAGE TITLE ("MY PROFILE") AND DROPDOWN */
	#page-heading2-box {
		display: flex;
		align-items: center;
		border: 0px;
		padding: 31px 0px 31px 0px;
	}


/* SPACING BETWEEN PAGE HEADING ('MY PROFILE') AND DROPDOWN */
	#page-heading2-box h1:first-of-type {
		display: flex;
		align-items: center;
		height: 40px;
		padding-right: 40px;
		margin-right: 40px;
		border-right: 2px solid #96CA2D;
	}


/* DROPDOWN STYLING */ 
	.profile-swap {
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 600;
		font-size: 23px; 
		border: 1px solid #C8C7BB;
		border-radius: 0px;
		background-color: #F0F1EC;
		width: 325px;
		padding: 2px 0 2px 10px;
	}

/* SUB NAVIGATION COMBINED HEIGHT OF ICONS AND TEXT */
	#subhead2-box nav ul {
		/* this aligns the navigation icons and text */
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		height: 50px;
		width: 90px;
		margin-left: 10px;
	}

/* SUB NAVIGATION TEXT */
	#subhead2-box nav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

/* NAVIGATION TEXT */
	.nav-subhead2 {
		color: #808285;
		display: inline-block;
		font-family: "freight-sans-pro", sans-serif;
		font-weight: 400;
		font-size: 15px; 	
	}





/*///////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////    FOOTER STYLING    /////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

/* FOOTER POSITIONING ELEMENTS */

footer {
	margin-top: 100px;
	background-color: #000000;
	width: 100%;
	height: 140px;
}

.box-footer {
	width: 1000px;
	height: 80px;
	padding-top: 60px;
	margin: auto;
}

.box-logo-footer {
	display: inline-block;
	height: 40px;
	vertical-align: bottom;
	padding-left: 65px;
}

.box-footer-nav {
	display: inline-block;
	height: 35px; 
	padding-top: 5px;
}

.footer-nav {
	display: inline-block;
}

.spacer-footer {
	display: inline-block;
	padding: 0px 25px;
}


/* -------------------------------------------------------------------------------*/

/* 								page-specific.css							      */

/* 		PRIMARY PURPOSE: To position elements. 


/* 		APPROACH:  

				1. Create an overall page layout
				2. Layout sections
				3. Name sections
				4. Use section names with html selectors to nudge

		

/* -------------------------------------------------------------------------------*/




/*///////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////   OBJECTS  //////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/


/*//////////////////////////////////*/
/*////  BUTTONS   -  (OBJECTS)  ////*/     /* for more elaborate styles */
/*//////////////////////////////////*/	   /* common buttons are in site-wide.css */





/*//////////////////////////////////*/
/*////  PHOTOS   -  (OBJECTS)  /////*/		/* for sizing photos and images */
/*//////////////////////////////////*/





/*//////////////////////////////////*/
/* PARAGRAPH SPACING  -  (OBJECTS)  */		/* primarily for line width */
/*//////////////////////////////////*/






/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////   POSITIONING  ////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/




/*//////////////////////////////////*/
/*  PAGE LAYOUT   -  (POSITIONING)  */
/*//////////////////////////////////*/






/*//////////////////////////////////*/
/* SECTION LAYOUT  -  (POSITIONING) */
/*//////////////////////////////////*/







/*///////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////   MOBILE MEDIA QUERY  //////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/