/* 
The "flex-direction: row;" stacks the flex items horizontally (from left to right).
The "flex-direction: column;" stacks the flex items vertically (from top to bottom).
Resize the browser window to see that the direction changes when the 
screen size is 800px wide or smaller.
------ 2 panels ----- 2 colums -------------

*/
.gray-75{background-color: #333333; } /*  25% very dark shade of gray */
.color-white{background-color: white; } /* white */

* {box-sizing: border-box;}

.spread{padding-left:5px; padding-right:5px}

/*-- ------ define style for inside the flex boxes  ----------------- */
/*  -----  Page Headers - will be on every web page on the site -----------------------------------------------------  */
/*  -----  Contains the page title and a naviagtion link on the left for large dropdown menu ---------------  */

.header-nav-title-ham{font-size:25px; cursor: pointer;  color:white;}   /* ------Set the style of the hambuger icon---------------------------------------------------- */

.header-title-boxflex-container {
		display: flex;
		flex-direction: row;
		font-family: "Copperplate Gothic", Tahoma, Arial;
		 color: white;
		font-size: 30px;
		vertical-align: middle;
		text-align: center;
		
		background-color: #ab9678; 
		height:70px;
		border-top: 4px solid black;
		border-bottom: 4px solid black;
		flex-wrap: wrap;
}

.header-title-boxflex-left {padding-top:2.5px;width: 50%;height:47px;	margin-top:0;vertical-align: middle;text-align: left;}
.header-title-boxflex-right {padding: 3px; width: 50%; height:47px;}

/*  Used for Page Heading Text*/
.header-toptitle-left-flex {padding-top:2.5px; margin-top:0; margin-left:10px; vertical-align: middle; text-align: left;}
.header-toptitle-right-flex{padding-top:2.5px; margin-top:0; vertical-align: middle; text-align: right;}

/* ---------------------------------------------------------- */
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 800px) { .header-page-flex-container { flex-direction: column; }
}