/* Global Vars _________________________________________________________________________________*/
:root {
	--primary-site-color: #233a6d;
	--primary-site-font: 'Work Sans', sans-serif;

	--header-height: 126px;
	--main-title-font: 'Darker Grotesque', sans-serif;
	--main-title-left-margin: 110px;

	--nav-bar-font: 'Work Sans', sans-serif;
	--nav-bar-font-color: #00458B;
	--nav-bar-unselected-item-color: #a0a4c2;
	--nav-bar-item-spacing: 25px;
	--nav-bar-home-services-extraspacing: 5px;
	--nav-bar-left-margin: 5px;
	--nav-bar-right-margin: 40px;

	--main-image-text-left-margin: 110px;
	--main-image-text-font: var(--primary-site-font);
	--main-image-text-mobile-font-size: 11vw;

	--mobile-min-supported-width: 310px;
	--mobile-nav-top-margin: 0px;
	--mobile-menuitem-background-color: none;
	--mobile-menuitem-margin-top: 15px;
	--mobile-menuitem-margin-right: 45px;
	--mobile-menuitem-font-size: 34px;


	--products-content-column-width: 600px;

	font-size:15px;
	text-align:middle;
}

/* Utilities and Global Elemental Definitions */

B   {font-weight: bold;}
A   {
	color:var(--nav-bar-font-color);
	text-decoration: none;
}
A:hover {
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.formopen,
.formclose  {height:1px; font-size:1px; line-height:1px;}



/* Header definitions _________________________________________________________________________________*/


.header {
	display: table;
	height: var(--header-height);
	width:100%;
}

.main-title {
	display: table-cell;
	/*vertical-align:middle;*/
	padding-top: 30px;
	padding-left: var(--main-title-left-margin);

	font-family: var(--main-title-font);
	font-size: 2.90rem;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--primary-site-color);
	white-space:nowrap;
}


.navbar-container {
	display: table-cell;
	width:100%;
	text-align: right;
	padding-top: 6px;
	vertical-align:middle;
	z-index: 9999;
}

#topnavmenu {
	margin-left:var(--nav-bar-left-margin);
	margin-right:var(--nav-bar-right-margin);
	/*  The <ul> of the top nav has a default 40px left padding. Set this to 0 so top nav has more space between it And the title. */
	padding-left: 0px;
}
#bottomnavmenu {
	margin-left: 6px;
	padding-left: 0px;
}

.navbar ul { }
.navbar li {
	font-family: var(--nav-bar-font);
	letter-spacing: 3px;
	font-size: 1.4rem;
	display: inline;
}
.navbar a {
	text-decoration: none;
	color: var(--nav-bar-font-color);
/*		border-bottom-width: 1px;
	border-bottom-style: solid;		*/
}

.navbar a:hover {
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}



.navbar-menuitem {
	margin-left:var(--nav-bar-item-spacing);
	font-weight: 300;
}
.navbar-unselected {
	color: var(--nav-bar-unselected-item-color);
	font-weight: 300;
}
/*  The services top nav should have a little extra spacing with the home button */
.navbar-services {
	margin-left: calc(var(--nav-bar-item-spacing) + var(--nav-bar-home-services-extraspacing));
}


.main-image-container {
	position: relative;
	margin-top: 0px;
	width:100%;
}
.main-image {
	width: 100%;
}
.main-image-text {
	position: absolute;
	top:36%;
	margin-left: var(--main-image-text-left-margin);

	font-size: 5.0vw;
	font-family: var(--main-image-text-font);
	font-weight: 200;
	letter-spacing: 0;
	color: #ffffff;
}
/* override the top value */
.main-image-text-home {
	top:41%;
}
#main-image-text-goodsoftware {
	white-space: nowrap;
}


/* Mobile Header definitions _________________________________________________________________________________*/

.header-mobile {
	display: none;
	width:100%;
	margin-top: 65px;
	position:relative; /* really, only setting this so the nested div's (main-title-mobile) can do absolute position and float (absolute positioned elements
												position themselves relative to the closest ancestor that has their positioning element defined. */
}
.header-mobile-home {
/* If this is the home page, we want the header image to pushed up, covering the entire screen (removing the white header area).
  Push this main image up by overriding the margin-top value in the .header-mobile. */
	margin-top: 0px;
	/* the mobile home header (and image) should almost fill the entire screen vertically. 
		 TODO - In the future leave a gap at bottom for the navbar, so user doesn't have to scroll as much to find the text. Looks like this has to be done
		 in js, because browsers have a bottom nav bar that isn't included in calculating the viewport height (vh). But js has window.innerHeight */
	height: 98.0vh;  
	overflow: hidden;  		/* Cut off the header image if it runs past the header-mobile-home div */
/*	background-color: black; */
}
.main-title-mobile {
	display: block;
	position: absolute;
	top: 7vw;
	padding-left: var(--main-title-left-margin);
	margin-right:40px;

	line-height: 1.0;

	color: #ffffff;
	font-family: var(--main-title-font);
	font-size: 10.0vw;
	font-weight: 500;
	letter-spacing: 1px;
	white-space: normal; /* word wrap turned ON */
}
.main-image-mobile {
	width: 100%;
}

.main-image-text-mobile {
	display: block;
	position: absolute;
	bottom: 8vw;
	margin-left: var(--main-image-text-left-margin);

	font-size: var(--main-image-text-mobile-font-size);
	font-family: var(--main-image-text-font);
	font-weight: 200;
	letter-spacing: 0;
	color: #ffffff;
}
/* if this is the home page, then add the 'main-image-text-mobile-home' to override the top value */
.main-image-text-mobile-home {
	top: 40vh;
}


.slicknav_menu {
	display:none;
	position: absolute;
	z-index:999;
	float: right;
  text-align: right;
	width: 100%;
	top:0px;
	background-color: transparent;
	margin-top: var(--mobile-nav-top-margin);

  font-size: 26px;
	font-family: var(--primary-site-font);

}
.slicknav_menu ul {
    background-color: white;
}
.slicknav_menu li a {
	margin-top: var(--mobile-menuitem-margin-top);
	margin-right: var(--mobile-menuitem-margin-right);

	background: var(--mobile-menuitem-background-color);
	font-size: var(--mobile-menuitem-font-size);
	color: var(--primary-site-color);
/*  color: #de4a1e; */
}
.slicknav_menu li a:hover {
	text-decoration: none;
	border-bottom-width: 0px;
	border-bottom-style: none;
}

/* Main Body definitions _________________________________________________________________________________*/

.main-body {text-align: center; }

/* The main content areas for the pages. Eventhough this are currently empty, don't delete them. They are used below in the media queries */
.content-area {
	margin: 0 auto;
}
.content-area-std {
	width: 500px;
	padding-left: 120px;
}
.content-area-home {
	padding-left: 169px;
}

.blurb-title-box {
	margin-top: 53px;
	margin-bottom: 0px;
	width: 450px;

	font-family: var(--main-image-text-font);
	font-size: 53px;
	font-weight: 200;
	letter-spacing: 0;
	color: #000000;
}
.blurb-subtitle-box {
	margin-top: 40px;
	margin-bottom: 0px;
	font-style: italic;
	font-size: 33px;
}
.blurb-subtitle-box-moreTopSpace { }

/* include .blurb-title-box first! */
.blurb-title-box-our-products {
	margin-top: 100px;
}
.title-our-products-text { margin-left: 40px; }

/* include .blurb-title-box first! */
.blurb-title-box-product-title-wide {
	width: var(--products-content-column-width);
	margin-left: -60px;
	margin-top: 100px;
	font-style: italic;
	font-weight: 300;
	font-size: 49px;
}
.products-title-unconventionalthinking-website-left-margin {
	margin-left: 180px;
}

.blurb-text-box {
	margin-top: 30px;
	margin-bottom: 0px;
	margin-left: 14px;
	width: 450px;

	font-family: var(--main-title-font);
	font-size: 42px;
	font-weight: 300;
	letter-spacing: 0;
	color: #000000;
}
.blurb-text-smallfont {
  font-size: 25px;
	margin-top: 8px;
}

.blurb-text-lotsOfText { }
.blurb-text-lotsAndLotsOfText { }
.blurb-text-product-first-paragraph {
	margin-top: 3px;
}

/* add blank vertical space to last textbox, so scroll extends a little farther */
.blurb-text-box-last {
	margin-bottom: 100px;
}

.logo-image-box {
	margin-top: 60px;
	text-align: center;
	/* As you can see with text-align, the images are centered in the div. But, push them a little to the left */
	margin-left: -40px;
	width: 500px;
}

.logo-ms-img { width: 470px; }
.logo-gm-img { width: 200px; }

.logo-image-box-large {
	margin-top: 60px;
	text-align: center;
	/* As you can see with text-align, the images are centered in the div. But, push them a little to the left */
	margin-left: -60px;
	width: var(--products-content-column-width);
}
.logo-hierarchy-img { width: 560px; }
.logo-hierarchy-img-a:hover {
	text-decoration: none;
	border-bottom-width: 0px;
	border-bottom-style: none;
}


/*  Footer ________________________________________________________________________________________________*/
.footer-area {
	width: 700px;
	padding-left: 90px;
	margin-bottom: 160px;
}
.footer-area-home { padding-left: 140px; }
.footer-area-services {  }
.footer-area-products { padding-left: 110px; }
.footer-area-people { padding-left: 115px; }
.footer-area-contact { padding-left: 40px; }

.footer-mobile-area {
	display: none;
	width: 400px;
	/* this is the the paddding left of footer for desktop/tablet. For cell, its 120 px */
	padding-left: 160px;
	margin-bottom: 200px;
}
.footer-mobile-area-home { }
.footer-mobile-area-services {
	/* the services' mobile next-page link should be shifted a little to the the left. */
	padding-left: 130px;
}
.footer-mobile-area-products { }
.footer-mobile-area-people { }
.footer-mobile-area-contact { }


.bottom-nav-container {
	margin-top: 50px;
}

.bottom-nav-mobile-container {
	margin-top: 20px;
	margin-bottom: 0px;
}
.bottom-nav-mobile-divider {
	width: 280px;
	margin-left: 12px;
	margin-right: 0px;
	margin-top: 0px;
	border: none;
	height: 1px;
	background-color: black;
	opacity: 1.0;
}
.bottom-mobile-nextpage {
	margin-top: 25px;
	margin-left: 33px;
}
.bottom-mobile-nextpage-home { padding-left: 28px; }
.bottom-mobile-nextpage-services {  }
.bottom-mobile-nextpage-products {  }
.bottom-mobile-nextpage-people { padding-left: 42px; }
.bottom-mobile-nextpage-contact {  }

.bottom-mobile-nextpage-link {
	font-family: var(--nav-bar-font);
	letter-spacing: 3px;
	font-size: 25px;
	text-decoration: none;
}

/*  Media Queries used to modify page at different browser sizes  ________________________________________*/

/* Around this size, the top nav needs to collapse a little otherwise it'll wrap */
@media screen and (max-width: 1190px) {
	:root {
		--main-title-left-margin: 50px;
		--nav-bar-item-spacing: 12px;
		--nav-bar-home-services-extraspacing: 3px;
		--nav-bar-left-margin: 0px;
	}
	#bottomnavmenu {
		margin-left: 60px;  /* the menu items have collapsed, push the menu towards the center */
	}

}

/* When screens are tablets */
@media screen and (max-width: 1055px) {
	:root {
		/* change the left margin for the title and the image float text */
		--main-title-left-margin: 18px;
		--nav-bar-right-margin: 18px;
		--main-title-right-margin: 18px;
	}

	#topnavmenu {
		padding-left: 0px; /* Padding left is already set to 0, but just in case, it's set again here too */
	}

}

/*  top nav is about to wrap, change to mobile menu */
@media screen and (max-width: 998px) {

	/*  Show the hamburger menu: 1) hide the top and bottom navmenus, 2) show slicknav 3) show the bottom mobile next page link */
	#topnavmenu, .footer-area  {
		display: none;
	}
	.slicknav_menu {
		display: block;
	}
	.footer-mobile-area {
		display: block;
	}

	/* The unselected nav item does not pickup slicknav formatting. Add it yourself! */
	.navbar-unselected {
		font-size: var(--mobile-menuitem-font-size);
/*		color: grey; */
		color: var(--nav-bar-unselected-item-color);

		/* The margin and padding is taken from slicknav's computed values (using debugger) */
		margin: var(--mobile-menuitem-margin-top) var(--mobile-menuitem-margin-right) 2px 12px;
		padding: 5px 10px;
	}


	:root {
		/* Shift the logo back to the right a little (it is shifted to the left as the browser width shrinks. But when the mobile menu
			pops up, the logo looks like it's pasted to the left side). */
		 --main-title-left-margin: 30px;
	}


}



/* When screens are cellphones */
@media screen and (max-width: 812px) {
	:root {
		/* change the left margin for the title and the image float text */
		--main-title-left-margin: 30px;
		--main-image-text-left-margin: 25px;
		/* In web layout, there is a little extra spacing between the home and services links. Remove when showing cell menu.
		   Because otherwise, this little extra is taken out of the left side of the services menu button */
		--nav-bar-home-services-extraspacing: 0px;
	}


	/*  Hide the desktop header, show the mobile header */
	.header-and-image-desktop {
		display: none;
	}
	.header-mobile {
		display: block;
	}

	/* IMPORTANT - the smallest screen we'll support is the iphone 5, which is 320px.
	   So shrink the widths of the blurbs. */
	.content-area-std {
		width: var(--mobile-min-supported-width);
		padding-left: 0px;
	}

	.blurb-text-box {
		margin-top: 30px;
		/* subtract the margin left of the text box, which should be 14px*/
    width: calc(var(--mobile-min-supported-width) - 14px);
    font-size: 33px;
	}
	/* The paragraphs with lots of text are a little wider, need a smaller font than the regular blurb-text-box */
	.blurb-text-lotsOfText { font-size: 30px; }
	/* The paragraphs with even more text per line, need even smaller font. */
	.blurb-text-lotsAndLotsOfText { font-size: 28px; }

	.blurb-title-box {
    margin-top: 65px;
    width: var(--mobile-min-supported-width);
    font-size: 33px;
	}
	.blurb-title-box-home-first {
		margin-top: 20px; /* the default margin of 65px is too big, since we want content to be closer to home image so people notice it */
	}	
	.logo-image-box {
    margin-top: 60px;
    margin-left: 0px;
    width: var(--mobile-min-supported-width);
	}
	.logo-ms-img { width: 300px; }
	.logo-gm-img { width: 200px; }
	.logo-image-box-large {
    margin-top: 60px;
    margin-left: 0px;
    width: var(--mobile-min-supported-width);
	}
	.logo-hierarchy-img { width: 300px; }


	.blurb-subtitle-box {
		/* this is the min width of mobile items minus its left margin */
		width: calc(var(--mobile-min-supported-width) - 3px);
		font-size: 27px;
		margin-top: 23px;
		margin-left: 3px;
	}
	.blurb-subtitle-box-moreTopSpace {
    margin-top: 53px;
	}
	.blurb-text-smallfont {
    margin-top: 9px;
		font-size: 24px;
	}


	/* Product page specific settings */
	.products-title-unconventionalthinking-website-left-margin {
  	margin-left: 80px;
	}
	.blurb-title-box-product-title-wide {
		/* this is the min width of mobile items minus its left margin */
		width: calc(var(--mobile-min-supported-width) - 4px);
		font-size: 26px;
		margin-left: 4px;
	}
	.title-our-products-text { margin-left: 48px; }


	/*  Footer settings */
	.footer-mobile-area {
		/* Change the footer width to mobile and its paddding  */
    width: var(--mobile-min-supported-width);
		padding-left: 0px;
	}

}

/* When screens are cellphones AND LANDSCAPE, then this @media query is an add on to the previous one, meaning for a
	cellphone in landscape mode, *both* these queries should run. */
@media screen and (max-width: 812px)  and (orientation: landscape) {
	/* override the top value */
	.main-title-mobile {
		top: 1vw;
	}
	/* override the top value, and font size */
	.main-image-text-mobile {
		top: 50vh;
		font-size: 8vw;
	}
	/* this class is for the home page version of the mobile text */
	.main-image-text-mobile-home {
		top: 50vh;
		font-size: 8vw;
	}
	.blurb-title-box-home-first {
		margin-top: 40px; /* the default margin of 65px is too big, since we want content to be closer to home image so people notice it (but
												 not as close as when is portrait mode). */
	}	

}