/************************* Reset ****************************************************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}


html {
  	box-sizing: border-box;
	font-size: 16px;
	scroll-behavior: smooth;
}


*,
*:before,
*:after {
  box-sizing: inherit;
}


body {
	width: 100%;
	margin: 0 auto;

	font-family: 'Inter', Helvetica, sans-serif;

}


a {
	text-decoration: none;
	color: inherit;

	font-family: 'Inter', Helvetica, sans-serif;

	/*** font-family: 'Roboto', Helvetica, sans-serif; ***/
}


a:hover {
	font-weight: bold; 
	text-decoration: none;
	transition: ease-in .1s;
}


* {
	outline: 0px solid orange;
}



/************************* Text Styling****************************************************************************************************************************/

h1 	{ font-weight: normal;	line-height: 1.4; }
h2 	{ font-weight: normal;	line-height: 1.4; }  
h3 	{ font-weight: normal;	line-height: 1.4; }  
h4 	{ font-weight: normal;	line-height: 1.4; }
h5 	{ font-weight: normal;	line-height: 1.4; }  
h6	{ font-weight: normal;	line-height: 1.4; }


.fs-477	{ font-size: 4.77rem; }
.fs-381	{ font-size: 3.81rem; }
.fs-305	{ font-size: 3.05rem; }
.fs-280	{ font-size: 2.80rem; }
.fs-244	{ font-size: 2.44rem; }
.fs-195	{ font-size: 1.95rem; }
.fs-156	{ font-size: 1.56rem; }
.fs-125	{ font-size: 1.25rem; }
.fs-100	{ font-size: 1.10rem; }
.fs-080	{ font-size: 0.80rem; }
.fs-064	{ font-size: 0.64rem; }
.fs-051	{ font-size: 0.51rem; }
.fs-045	{ font-size: 0.45rem; }


.fs-095 { font-size: 0.95rem; }
.fs-090 { font-size: 0.90rem; }
.fs-085	{ font-size: 0.85rem; }
.fs-075 { font-size: 0.75rem; }
.fs-070 { font-size: 0.70rem; }
.fs-065 { font-size: 0.65rem; }
.fs-060 { font-size: 0.60rem; }

p 	{ font-size: 1.00rem;	font-weight: normal;	line-height: 1.4; }
	


/************************ Special Styling ***********************************************************************************************************************/

.align-lft 		{ text-align: left; }

.align-ctr 		{ text-align: center; } 

.align-rgt 		{ text-align: right; }

.textjustify		{ text-align: justify; text-justify: inter-word; }

.space-letters		{ letter-spacing: .1em; }
		
.normal			{ font-weight:normal; }

.semibold 		{ font-weight: 600; }

.bold, b, strong 	{ font-weight: 700; }

.uppercase		{ text-transform: uppercase; }

.wrap			{ word-wrap: break-word; }

.vertical-full 		{ min-height: 100vh; }

.vertical-banner	{ min-height: 600px; }

.anchor-top:target 	{ padding-top: 3.6rem; }

.anchor-bottom		{ padding-bottom: 6rem; }

.bottom 		{ margin: auto auto 0 auto; }	/* keep item at bottom of cell */



/************************ Paddings  ****************************************************************************************************************************/

.pad-top-quarter-rem 	{padding-top: .25rem;}
.pad-top-half-rem 	{padding-top: .5rem;}
.pad-top-one-rem 	{padding-top: 1rem;}
.pad-top-two-rem 	{padding-top: 2rem;}
.pad-top-three-rem 	{padding-top: 3rem;}
.pad-top-four-rem 	{padding-top: 4rem;}
.pad-top-five-rem 	{padding-top: 5rem;}
.pad-top-six-rem 	{padding-top: 6rem;}
.pad-top-seven-rem 	{padding-top: 7rem;}
.pad-top-eight-rem	{padding-top: 8rem;}
.pad-top-nine-rem 	{padding-top: 9rem;}
.pad-top-ten-rem	{padding-top: 10rem;}

.pad-bottom-quarter-rem {padding-bottom: .25rem;}
.pad-bottom-half-rem 	{padding-bottom: .5rem;}
.pad-bottom-one-rem 	{padding-bottom: 1rem;}
.pad-bottom-two-rem 	{padding-bottom: 2rem;}
.pad-bottom-three-rem 	{padding-bottom: 3rem;}
.pad-bottom-four-rem 	{padding-bottom: 4rem;}
.pad-bottom-five-rem 	{padding-bottom: 5rem;}
.pad-bottom-six-rem 	{padding-bottom: 6rem;}
.pad-bottom-seven-rem 	{padding-bottom: 7rem;}
.pad-bottom-eight-rem	{padding-bottom: 8rem;}
.pad-bottom-nine-rem 	{padding-bottom: 9rem;}
.pad-bottom-ten-rem	{padding-bottom: 10rem;}


/************************ Font Colors ************************************************************************************************************************/

.font-black 		{color: #000000;}

.font-white 		{color: #ffffff;}
.font-greylight1	{color: #F9F9F9;}
.font-greylight2	{color: #F2F2F2;}
.font-greylight3 	{color: #eaeaea;}
.font-greylight4 	{color: #E2E2E2;}
.font-greylight5 	{color: #d2d2d2;}

.font-greylight		{color: #a6a6a6;}
.font-grey 		{color: #808080;}
.font-greymedium 	{color: #606060;}
.font-greydark 		{color: #404040;}

.font-blackblue		{color: #242e39;}
.font-blackcharcoal	{color: #303030;}
.font-blackdark	 	{color: #252525;}
.font-black 		{color: #000000;}

.font-red		{color: #ff0000;}
.font-orange		{color: #ffa500;}
.font-yellow 		{color: #ffff00;}
.font-green		{color: #00b300;}
.font-blue		{color: #0000ff;}
.font-purple 		{color: #6600FF;}

.font-redmedium		{color: #ff0066;}
.font-redmagenta	{color: #CB4082;}
.font-orangemedium	{color: #FFD700;}
.font-yellowmedium	{color: #ffff66;}
.font-yellowlime	{color: #bfff00;}
.font-greenmedium	{color: #57E964;}
.font-greenbutton	{color: #4CAF50;}
.font-bluedark 		{color: #000066;}
.font-blueroyal		{color: #4169e1;}
.font-purpleroyal	{color: #7A40CC;}

.font-redbright		{color: #e74587;}
.font-orangebright	{color: #ea7427;}
.font-yellowbright	{color: #f5d247;}
.font-greenbright	{color: #39ff14;}
.font-aquabright	{color: #80e9fd;}
.font-bluebright	{color: #3c73e7;}
.font-purplebright	{color: #9333EA;}

.font-redpastel		{color: #ffb3ba;}
.font-orangepastel 	{color: #ffdfba;}
.font-yellowpastel	{color: #ffffba;}
.font-greenpastel	{color: #baffc9;}
.font-bluepastel	{color: #bae1ff;}
.font-purplepastel	{color: #e0d6ff;}

.font-redpale		{color: #EED4D9;}
.font-orangepale 	{color: #FFEC9f;}
.font-yellowpale	{color: #fffacd;}
.font-greenpale 	{color: #d5ffd5;}
.font-bluepale 		{color: #d9e8f6;}
.font-purplepale  	{color: #e9d5f6;}

.font-sf-redpaleviolet	{color: #eb7092;}
.font-sf-orangelight	{color: #F1B434;}
.font-sf-orangedark	{color: #ED8B00;}
.font-sf-coral		{color: #ff9a3c;}
.font-sf-yellowlight	{color: #FBDB65;}
.font-sf-yellowdark	{color: #FFC72C;}
.font-sf-greenlight	{color: #74C799;}
.font-sf-greendark	{color: #2A7955;}
.font-sf-olivedrab  	{color: #5bb12e;}
.font-sf-teallight	{color: #64CCC9;}
.font-sf-tealdark	{color: #00B2A9;}
.font-sf-aquamarine 	{color: #53b6b4;}
.font-sf-bluelight	{color: #92C1E9;}
.font-sf-bluedark	{color: #418FDE;}
.font-sf-purplelight 	{color: #A77BCA;}
.font-sf-purpledark 	{color: #963CBD;}


/************************ Backgrounds **********************************************************************************************************************/


.bg-white 		{background-color: #ffffff;}
.bg-greylight1		{background-color: #F9F9F9;}
.bg-greylight2		{background-color: #F2F2F2;}
.bg-greylight3 		{background-color: #eaeaea;}
.bg-greylight4 		{background-color: #E2E2E2;}
.bg-greylight5 		{background-color: #d2d2d2;}

.bg-greylight		{background-color: #a6a6a6;}
.bg-grey 		{background-color: #808080;}
.bg-greymedium 		{background-color: #606060;}
.bg-greydark 		{background-color: #404040;}

.bg-blackblue		{background-color: #242e39;}
.bg-blackcharcoal	{background-color: #303030;}
.bg-blackdark	 	{background-color: #252525;}
.bg-black 		{background-color: #000000;}

.bg-red			{background-color: #ff0000;}
.bg-orange		{background-color: #ffa500;}
.bg-yellow 		{background-color: #ffff00;}
.bg-green		{background-color: #00b300;}
.bg-blue		{background-color: #0000ff;}
.bg-purple 		{background-color: #6600FF;}

.bg-redmedium		{background-color: #ff0066;}
.bg-redmagenta		{background-color: #CB4082;}
.bg-orangemedium	{background-color: #FFD700;}
.bg-yellowmedium	{background-color: #fff000;}
.bg-greenlime		{background-color: #b1e794;}
.bg-greenmedium		{background-color: #5dc277;}
.bg-greenbutton		{background-color: #4CAF50;}
.bg-blueroyal		{background-color: #4169e1;}
.bg-bluedark 		{background-color: #000066;}
.bg-purpleroyal		{background-color: #7A40CC;}

.bg-redbright		{background-color: #e74587;}
.bg-orangebright	{background-color: #ea7427;}
.bg-yellowbright	{background-color: #f5d247;}
.bg-greenbright		{background-color: #69d92a;}
.bg-aquabright		{background-color: #80e9fd;}
.bg-bluebright		{background-color: #3c73e7;}
.bg-purplebright	{background-color: #9333EA;}

.bg-redpastel		{background-color: #ffb3ba;}
.bg-orangepastel 	{background-color: #ffdfba;}
.bg-yellowpastel	{background-color: #ffffba;}
.bg-greenpastel		{background-color: #baffc9;}
.bg-bluepastel		{background-color: #bae1ff;}
.bg-purplepastel	{background-color: #e0d6ff;}

.bg-redpale		{background-color: #EED4D9;}
.bg-orangepale		{background-color: #fae9c0;}
.bg-orangepale2		{background-color: #ffdc9d;}
.bg-orangepale3		{background-color: #f7dc98;}
.bg-yellowpale	 	{background-color: #fffacd;}
.bg-greenpale 		{background-color: #d5ffd5;}
.bg-bluepale 		{background-color: #d9e8f6;}
.bg-purplepale  	{background-color: #d9d5f6}

.bg-sf-redpaleviolet	{background-color: #eb7092;}
.bg-sf-orangelight	{background-color: #F1B434;}
.bg-sf-orangedark	{background-color: #ED8B00;}
.bg-sf-coral		{background-color: #ff9a3c;}
.bg-sf-yellowlight	{background-color: #FBDB65;}
.bg-sf-yellowdark	{background-color: #FFC72C;}
.bg-sf-greenlight	{background-color: #74C799;}
.bg-sf-greendark	{background-color: #2A7955;}
.bg-sf-olivedrab  	{background-color: #5bb12e;}
.bg-sf-teallight	{background-color: #64CCC9;}
.bg-sf-tealdark		{background-color: #00B2A9;}
.bg-sf-aquamarine 	{background-color: #53b6b4;}
.bg-sf-bluelight	{background-color: #92C1E9;}
.bg-sf-bluedark		{background-color: #418FDE;}
.bg-sf-purplelight 	{background-color: #A77BCA;}
.bg-sf-purpledark 	{background-color: #963CBD;}


.bg-cover 		{background-size: cover; background-position: center; background-repeat: no-repeat;}

.bg-fixed 		{background-attachment: fixed;}


/************************ Widths *****************************************************************************************************************/

.width-1800	{width: 1800px;}
.width-1780	{width: 1780px;}
.width-1640	{width: 1640px;}
.width-1440	{width: 1440px;}
.width-1280	{width: 1280px;}
.width-1040	{width: 1040px;}
.width-960	{width: 960px;}
.width-864	{width: 864px;}
.width-800	{width: 800px;}
.width-760	{width: 760px;}
.width-720	{width: 720px;}
.width-640	{width: 640px;}
.width-596	{width: 596px;}
.width-480	{width: 480px;}
.width-448	{width: 448px;}
.width-444	{width: 444px;}
.width-440	{width: 440px;}
.width-436	{width: 436px;}
.width-400	{width: 400px;}
.width-380 	{width: 380px;}   
.width-360 	{width: 360px;} 
.width-340 	{width: 340px;} 
.width-300	{width: 300px;}
.width-280	{width: 280px;}
.width-240	{width: 240px;}
.width-200	{width: 200px;}
.width-160	{width: 160px;}
.width-140	{width: 140px;}
.width-120	{width: 120px;}
.width-100	{width: 100px;}
.width-80	{width: 80px;}
.width-60	{width: 60px;}
.width-40	{width: 40px;}
.width-36	{width: 36px;}
.width-24	{width: 24px;}
.width-20	{width: 20px;}


.width-100-percent {width: 100%;}


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

/********************* Flex Width Buttons **************************************************************************************************************/


button.flex-outline-black {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #303030;   
    background-color: transparent;
    color: #303030;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-outline-black { 
  	border: 2px solid #303030;
	background-color: #303030;
	color: white; 
}


button.flex-outline-white {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid white;   
    background-color: transparent;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-outline-white { 
  	border: 2px solid white;
	background-color: white;
	color: black; 
}


button.flex-black {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #303030;
    background-color: #303030;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-black {
    border: 2px solid #303030;
    background-color: white; 
    color: #303030;
}


button.flex-grey {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #606060;
    background-color: #606060;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-grey {
  	border: 2px #606060;
	background-color: white; 
	color: #606060; 
}


button.flex-white {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid white;
    background-color: white;
    color: #303030;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-white {
    border: 2px solid white;
    background-color: #303030; 
    color: white; 
}


button.flex-red {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #CB4082;
    background-color: #CB4082;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-red {
    border: 2px solid #CB4082;
    background-color: white; 
    color: #CB4082;
}


button.flex-orange {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #f99235;
    background-color: #f99235;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-orange {
    border: 2px solid #f99235;
    background-color: white; 
    color: #f99235;
}


button.flex-yellow {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #fff767;
    background-color: #fff767;
    color: #404040;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-yellow {
  	border: 2px solid #fff767;
	background-color: white; 
	color: #404040; 
}


button.flex-green {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #4CAF50;
    background-color: #4CAF50;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-green {
    border: 2px solid #4CAF50;
    background-color: white; 
    color: #4CAF50;
}


button.flex-blue {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #4169e1;
    background-color: #4169e1;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-blue {
    border: 2px solid #4169e1;
    background-color: white; 
    color: #4169e1;
}


button.flex-purple {
    padding: .5rem .4rem;
    margin: 0 auto;
    cursor: pointer;
    font-size: 0.90rem;
    font-weight: bold;
    border-radius: .3em;

    border: 2px solid #7A40CC;
    background-color: #7A40CC;
    color: white;
    display: inline-block; /* Allows the button to resize based on content */
    white-space: nowrap; /* Ensures text doesn't wrap */
}

button:hover.flex-purple {
    border: 2px solid #7A40CC;
    background-color: white; 
    color: #7A40CC;
}


/********************* Header Navigation Menu Buttons **************************************************************************************************************/

button.nav-outline-black {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;   
	background-color: transparent;
  	color: #303030;
}

button:hover.nav-outline-black { 
  	border: 2px solid #303030;
	background-color: #303030;
	color: white; 
}


button.nav-outline-white {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;   
	background-color: transparent;
  	color: white;
}

button:hover.nav-outline-white { 
  	border: 2px solid white;
	background-color: white;
	color: #303030; 
}


button.nav-black {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;
	background-color: #303030;
  	color: white;

}

button:hover.nav-black {
  	border: 2px solid #303030;
	background-color: white; 
	color: #303030; 
}


button.nav-grey {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #606060;
	background-color: #606060;
  	color: white;

}

button:hover.nav-grey {
  	border: 2px solid #606060;
	background-color: white; 
	color: #606060; 
}


button.nav-white {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;
	background-color: white;
  	color: #303030;

}

button:hover.nav-white {
  	border: 2px solid white;
	background-color: #303030; 
	color: white; 
}


button.nav-red {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #CB4082;
	background-color: #CB4082;
  	color: white;

}

button:hover.nav-red {
  	border: 2px solid #CB4082;
	background-color: white; 
	color: #CB4082; 
}


button.nav-orange {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #f99235;
	background-color: #f99235;
  	color: white;

}

button:hover.nav-orange {
  	border: 2px solid #f99235;
	background-color: white; 
	color: #f99235; 
}


button.nav-yellow {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #fff767;
	background-color: #fff767;
  	color: #404040;

}

button:hover.nav-yellow {
  	border: 2px solid #fff767;
	background-color: white; 
	color: #404040; 
}


button.nav-green {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4CAF50;
	background-color: #4CAF50;
  	color: white;

}

button:hover.nav-green {
  	border: 2px solid #4CAF50;
	background-color: white; 
	color: #4CAF50; 
}


button.nav-blue {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4169e1;
	background-color: #4169e1;
  	color: white;

}

button:hover.nav-blue {
  	border: 2px solid #4169e1;
	background-color: white; 
	color: #4169e1; 
}


button.nav-purple {
 	padding: .2rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 6rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #7A40CC;
	background-color: #7A40CC;
  	color: white;

}

button:hover.nav-purple {
  	border: 2px solid #7A40CC;
	background-color: white; 
	color: #7A40CC; 
}


/********************* Full Size Buttons **************************************************************************************************************/

button.outline-black {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;   
	background-color: transparent;
  	color: #303030;
}

button:hover.outline-black { 
	border: 2px solid #303030;   
	background-color: #303030;
	color: white; 
}


button.outline-white {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;   
	background-color: transparent;
  	color: white;
}

button:hover.outline-white { 
  	border: 2px solid white;
	background-color: white;
	color: #303030; 
}


button.solid-black {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;
	background-color: #303030;
  	color: white;

}

button:hover.solid-black {
  	border: 2px solid #303030;
	background-color: white; 
	color: #303030; 
}


button.solid-grey {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #606060;
	background-color: #606060;
  	color: white;

}

button:hover.solid-grey {
  	border: 2px solid #606060;
	background-color: white; 
	color: #606060; 
}


button.solid-white {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;
	background-color: white;
  	color: #303030;

}

button:hover.solid-white {
  	border: 2px solid white;
	background-color: #303030; 
	color: white; 
}

	
button.solid-red {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #CB4082;
	background-color: #CB4082;
  	color: white;

}

button:hover.solid-red {
  	border: 2px solid #CB4082;
	background-color: white; 
	color: #CB4082; 
}


button.solid-orange {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #f99235;
	background-color: #f99235;
  	color: white;

}

button:hover.solid-orange {
  	border: 2px solid #f99235; 
	background-color: white; 
	color: #f99235; 
}


button.solid-yellow {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #fff767;
	background-color: #fff767;
  	color: #404040;

}

button:hover.solid-yellow {
  	border: 2px solid #fff767;
	background-color: white; 
	color: #404040; 
}


button.solid-green {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4CAF50;
	background-color: #4CAF50;
  	color: white;

}

button:hover.solid-green {
  	border: 2px solid #4CAF50;
	background-color: white; 
	color: #4CAF50; 
}


button.outline-green {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4CAF50;   
	background-color: transparent;
  	color: #4CAF50;
}

button:hover.outline-green { 
	border: 2px solid #4CAF50;   
	background-color: white;
	color: #4CAF50; 
}


button.solid-blue {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4169e1;
	background-color: #4169e1;
  	color: white;

}

button:hover.solid-blue {
  	border: 2px solid #4169e1;
	background-color: white; 
	color: #4169e1; 
}


button.solid-purple {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .95rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #7A40CC;
	background-color: #7A40CC;
  	color: white;

}

button:hover.solid-purple {
  	border: 2px solid #7A40CC;
	background-color: white; 
	color: #7A40CC; 
}


/********************* Small Size Buttons **************************************************************************************************************/

button.outline-black-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;   
	background-color: transparent;
  	color: #303030;
}

button:hover.outline-black-small { 
	border: 2px solid #303030;   
	background-color: #303030;
	color: white; 
}


button.outline-white-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;   
	background-color: transparent;
  	color: white;
}

button:hover.outline-white-small { 
  	border: 2px solid white;
	background-color: white;
	color: #303030; 
}


button.solid-black-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;
	background-color: #303030;
  	color: white;

}

button:hover.solid-black-small {
  	border: 2px solid #303030;
	background-color: white; 
	color: #303030; 
}


button.solid-grey-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #606060;
	background-color: #606060;
  	color: white;

}

button:hover.solid-grey-small {
  	border: 2px solid #606060;
	background-color: white; 
	color: #606060; 
}


button.solid-white-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;
	background-color: white;
  	color: #303030;

}

button:hover.solid-white-small {
  	border: 2px solid white;
	background-color: #303030; 
	color: white; 
}


button.solid-red-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #CB4082;
	background-color: #CB4082;
  	color: white;

}

button:hover.solid-red-small {
  	border: 2px solid #CB4082;
	background-color: white; 
	color: #CB4082; 
}


button.solid-orange-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #f99235;
	background-color: #f99235;
  	color: white;

}

button:hover.solid-orange-small {
  	border: 2px solid #f99235;
	background-color: white; 
	color: #f99235; 
}


button.solid-yellow-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #fff767;
	background-color: #fff767;
  	color: #404040;

}

button:hover.solid-yellow-small {
  	border: 2px solid #fff767;
	background-color: white; 
	color: #404040; 
}


button.solid-green-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4CAF50;
	background-color: #4CAF50;
  	color: white;

}

button:hover.solid-green-small {
  	border: 2px solid #4CAF50;
	background-color: white; 
	color: #4CAF50; 
}


button.solid-blue-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4169e1;
	background-color: #4169e1;
  	color: white;

}

button:hover.solid-blue-small {
  	border: 2px solid #4169e1;
	background-color: white; 
	color: #4169e1; 
}


button.solid-purple-small {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #7A40CC;
	background-color: #7A40CC;
  	color: white;

}

button:hover.solid-purple-small {
  	border: 2px solid #7A40CC;
	background-color: white; 
	color: #7A40CC; 
}


/********************* Small Size Wrapping Buttons **************************************************************************************************************/

button.outline-black-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;   
	background-color: transparent;
  	color: #303030;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.outline-black-small-wrap { 
	border: 2px solid #303030;   
	background-color: #303030;
	color: white; 
}


button.outline-white-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;   
	background-color: transparent;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.outline-white-small-wrap { 
  	border: 2px solid white;
	background-color: white;
	color: #303030; 
}


button.solid-black-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;
	background-color: #303030;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-black-small-wrap {
  	border: 2px solid #303030;
	background-color: white; 
	color: #303030; 
}


button.solid-grey-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #606060;
	background-color: #606060;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-grey-small-wrap {
  	border: 2px solid #606060;
	background-color: white; 
	color: #606060; 
}


button.solid-white-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid white;
	background-color: white;
  	color: #303030;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-white-small-wrap {
  	border: 2px solid white;
	background-color: #303030; 
	color: white; 
}


button.solid-red-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #CB4082;
	background-color: #CB4082;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-red-small-wrap {
  	border: 2px solid #CB4082;
	background-color: white; 
	color: #CB4082; 
}


button.solid-orange-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #f99235;
	background-color: #f99235;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-orange-small-wrap {
  	border: 2px solid #f99235;
	background-color: white; 
	color: #f99235; 
}


button.solid-yellow-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #fff767;
	background-color: #fff767;
  	color: #404040;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-yellow-small-wrap {
  	border: 2px solid #fff767;
	background-color: white; 
	color: #404040; 
}


button.solid-green-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4CAF50;
	background-color: #4CAF50;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-green-small-wrap {
  	border: 2px solid #4CAF50;
	background-color: white; 
	color: #4CAF50; 
}


button.solid-blue-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4169e1;
	background-color: #4169e1;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-blue-small-wrap {
  	border: 2px solid #4169e1;
	background-color: white; 
	color: #4169e1; 
}


button.solid-purple-small-wrap {
    	padding: .24rem .1rem; 
    	margin: 0 auto;
    	cursor: pointer;
    	width: 4.2rem;
    	font-size: .68rem; 
    	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #7A40CC;
	background-color: #7A40CC;
  	color: white;
    	line-height: 1; /* Tighten line height for two lines */
    	white-space: normal; /* Allow text to wrap */
}

button:hover.solid-purple-small-wrap {
  	border: 2px solid #7A40CC;
	background-color: white; 
	color: #7A40CC; 
}


/************************ Images *****************************************************************************************************************************/

.container-constant-aspect-ratio {
  	position: relative;
  	width: 100%;
  	height: 0;
  	padding-bottom: calc(9/16 * 100%);

}


.container-constant-aspect-ratio-square {
  	position: relative;
  	width: 100%;
  	height: 0;
  	padding-bottom: 100%;
}


.image-constant-aspect-ratio {
  	position: absolute;
  	height: 100%;
	width: 100%;
	object-fit: cover;
}


.video-banner {
   	position: fixed; 
	top: 0;
	margin: 0 auto;
    	width: 100%; 
  	object-fit: cover;

	/* height: 500px; */
	height: 100vh;

	z-index: -999;
}


.logo-image-width {
	width: 280px;
}


.logo-image-width-180 {
	width: 180px;
}


img {			/***********  For google charts  **************/
  max-width: 100%;
}


/************************ Overlays **********************************************************************************************************************/

.overlay-video {
  	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
  	width: 100%;
	margin: 0 auto;

	background-color: darkblue;
 	opacity: 0.40;

	/* height: 500px; */
	height: 100vh;

	z-index: -999;
}


/***********************************************************************************************************************************************************/
/************************ Tables ***************************************************************************************************************************/


.table-container {
	width: 100%;
	margin: 0 auto;
 	padding-left: 2rem;
	padding-right: 2rem;
}


.scroll-horizontal {		/* enables the table scroll side to side with scroll bar at base of table and matching table width */
	width: 100%;
	padding: 0rem 0rem;		
	margin: 0 auto;
	overflow-y: auto;
	_overflow: auto;
}


.scroll-vertical {
	display: block; 
	overflow-x: auto;
}


.table-highlight-row tr:hover td {
	background-color: #E2E2E2;
}


.table-highlight-cell a:hover {
	background-color: #E2E2E2;
}


table {
	table-layout: fixed;  
	width: 100%;  
	margin: 0 auto;
	border-spacing: 5px;
    	padding: 0rem 0rem;

	font-family: 'Roboto', Helvetica, sans-serif;

	/* position: relative; */
}

table th, td {
  	border: 1px solid #dddddd;
	color: black;
	vertical-align: center;
	padding: .2rem .2rem;
    	margin: 0;
}


th {
  	position: sticky;
  	top: 0;

  	background: #ffffff;

	word-wrap: normal;

	vertical-align: bottom;
}



.cell-4		{ width: 4%;  }
.cell-6 	{ width: 6%;  }
.cell-8		{ width: 8%;  }
.cell-10 	{ width: 10%; }
.cell-12 	{ width: 12%; }
.cell-15	{ width: 15%; }
.cell-20 	{ width: 20%; }
.cell-25	{ width: 25%; }
.cell-30 	{ width: 30%; }
.cell-40 	{ width: 40%; }
.cell-50 	{ width: 50%; }
.cell-60 	{ width: 60%; }
.cell-70 	{ width: 70%; }
.cell-80 	{ width: 80%; }
.cell-90 	{ width: 90%; }


.table-input {
	width: 100%;
	font-family: inherit;
	font-size: inherit;
}


.field-format	{
  	border: 1px solid #dddddd;
	color: black;
	vertical-align: center;
	padding: .2rem .2rem;
    	margin: 0;
	display: inline-block;  /* to enable setting width of labels */
}



/************************ Simple Input **************************************************************************************************************/
/************************ Field ***************************************************************************************************************************/

.simple-input-field {
  	display: flex;
    	flex-direction: column;
    	align-items: left;
}


.simple-input-field label {
  	margin: 0rem 0rem 0rem 0rem;
}


.simple-input-field input {
  	margin: .5rem 0rem 1rem 0rem;
 	padding: .4rem;
  	border: .4rem solid #a6a6a6;"
}


.simple-input-field input:focus {
	background: white;
}



/************************ Responsive Text Area************************************************************************************************************/
/************************ Form ***************************************************************************************************************************/


.textarea-responsive-container {
	width: 100%;
	margin: 0 auto;
}


.textarea-responsive-input {
	float: left;
	width: 100%;
	outline: none;
	resize: none;

	font-size: .90rem;
	font-weight: normal;
	font-family: Roboto, sans-serif;

  	/* resize: none; */

	padding: .4rem;
    	margin: .5rem 0;

	border: .4rem solid #a6a6a6;
}


.textarea-responsive-input:focus {
	background: white;
}



/************************ Basic **************************************************************************************************************************/
/************************ Form ***************************************************************************************************************************/


.basic-form {
	margin: 0 auto;
	text-align: center;
 	padding: 0rem 0rem;	
	width: 100%;
}


label.basic-form {
	display: block;
	text-align: left;
	font-size: .90rem;
}


input.basic-form  {
  	display: inline-block;
  	width: 100%;
	text-align: left;
 	padding: .5rem 1rem;
  	margin: .50rem 0rem 1rem 0rem;

  	border: 1px solid #ccc;
	font-size: .90rem;
}


.basic-form-submit {
	width: 100%;
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #303030;
	background-color: #303030;
  	color: white;
}


.basic-form-submit-footer {
 	padding: .5rem .2rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 7rem;
	font-size: .90rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4CAF50;
	background-color: #4CAF50;
  	color: white;
}


.basic-form-submit-footer:hover {
  	border: 2px solid #4CAF50;
	background-color: white; 
	color: #4CAF50; 
}


.basic-form-submit-footer-small {
 	padding: .5rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .80rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #4CAF50;
	background-color: #4CAF50;
  	color: white;

}

.basic-form-submit-footer-small:hover {
  	border: 2px solid #4CAF50;
	background-color: white; 
	color: #4CAF50; 
}


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

.basic-form-submit-footer-small-yellow {
 	padding: .4rem .1rem;
 	margin: 0 auto;
  	cursor: pointer;
  	width: 4.2rem;
	font-size: .75rem;
	font-weight: bold;
	border-radius: .3em;

  	border: 2px solid #fff767;
	background-color: #fff767;
  	color: #404040;
 	line-height: 1.4; //* Make height consistent with regular small buttons */
}

.basic-form-submit-footer-small-yellow:hover {
  	border: 2px solid #fff767;
	background-color: white; 
	color: #404040; 
}


.basic-form-message-container {
	height: 2.4rem;
	background-color: transparent;
}


/************************ Loginsys **************************************************************************************************************************/
/************************ Form ***************************************************************************************************************************/

.login-form {
	margin: 0 auto;
	text-align: center;
 	padding: 0rem 0rem;	
	width: 100%;
}


label.login {
	display: block;
	text-align: left;
	font-size: .95rem;
}


/* input[type=text], input[type=password] {  */

input.login {
  	display: inline-block;
  	width: 100%;
 	padding: .5rem 1rem;
  	margin: .25rem 0rem 1rem 0rem;

  	border: 1px solid #ccc;
	font-size: .95rem;
}


.container-login-messages {
	height: 2.4rem;
	background-color: transparent;
}


.message-success {	
	color: green;
	text-align: left;

	font-size: .95rem;
}


.message-error {	
	color: red;
	text-align: left;

	font-size: .95rem;
}


.login-text {
	line-height: 1.4;
	font-size: .95rem;
	color: lightgrey;
	text-align: center;
}



/************************ Loginsys Buttons *****************************************************************************************************************/

button.login {
 	padding: 1rem 1rem;
 	margin: 0rem;
  	border: none;
  	cursor: pointer;
  	width: 100%;
	font-size: .95rem;
	font-weight: bold;
  	color: white;
}


button:hover.login {
  	opacity: 0.8;
}


.button-color-login {
  	background-color: #4CAF50;
}


.button-color-signup {
  	background-color: #0047BB;
}


.button-color-password {
  	background-color: #CB4082;
}


.button-color-close {
  	background-color: black;
}  


/************************ Navigation Menu with Hamburger ****************************************************************************************************************/


.logo {
	float: left;
	display: flex;
	flex-direction: row; 
	align-items: center;
	height: 100%;
  	z-index: 100;
	/* font-size: 1.2rem; */	/* size of logo text will determines the height of the navbar */
}


.logo-desktop-hidden {			/*** Need this duplicate to reference in media query to make hidden */
	float: left;
	display: flex;
	flex-direction: row; 
	align-items: center;
	height: 100%;
  	z-index: 100;
	/* font-size: 1.2rem; */	/* size of logo text will determines the height of the navbar */
}


.hamburger-top {
	position: fixed;		/* use when hamburger placed at the top of screen */
	right: 2rem;
/*	background-color: blackdark; */
	cursor: pointer;
}


.hamburger-bottom {			/* use when hamburger placed at bottom of screen */
	position: fixed;
/*	background-color: blackdark; */
	cursor: pointer;
}


.hamburger-top .line {			/* use when hamburger placed at the top of screen */
	width: 24px;
	height: 4px;
/*	background-color: white;  */
	margin: 4px;
	border-radius: 2px;
	transition: all .3s ease-in-out;
}


.hamburger-bottom .line {		/* use when hamburger placed at bottom of screen */
	width: 24px;
	height: 4px;
/*	background-color: white;  */
	margin: 4px;
	border-radius: 2px;
	transition: all .3s ease-in-out;
}


.hamburger-top:focus ~ nav {		/* makes drop down appear when hamburger button is clicked */
  	max-height: 999px;
}


.hamburger-top:focus {			/* makes hamburger icon invisible when selected and drop down menu shown */
	opacity: 0;
  	transition: .5s;	
}


.hamburger-bottom:focus ~ nav {		/* makes drop down appear when hamburger button is clicked */
  	max-height: 999px;
}


.hamburger-bottom:focus {		/* makes hamburger icon invisible when selected and drop down menu shown */
	opacity: 0;
  	transition: .5s;	
}



nav {
 	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
/*	background-color: blackdark;  */

	display: flex;
	flex-direction: column;	
	justify-content: center;
	align-items: center;

  	top: 100%;

  	max-height: 0;			/* keeps drop down hidden until hamburger button clicked */		
  	overflow: hidden;		/* extends the drop down background to the left */
  	transition: .5s;		/* slows appearance and disappearance of drop down */
}


nav a {
  	text-decoration: none;
  	/* color: white; */
  	/* font-size: 1rem; */
}


nav a:hover {
 	font-weight: bold;
	text-decoration: none;
  	transition: ease-in .1s;
}


.navitem {				/* styling of drop down menu */
	margin: 1.5rem 0rem 1rem 0rem;
  	padding: 0;			
  	/* color: white; */		/* font color of menu item labels */
}


.close a {				/* style close menu selection for drop down menu */
	color: #CB4082;
	font-weight: bold;
	cursor: pointer;
}




/************************ Header *********************************************************************************************************************/


.header-logo {				/*** Maybe not needed using class logo instead */
	position: fixed;
	top: 0;
  	width: 100%;
	margin: 0 auto;
	padding: .6rem 2rem;

  	z-index: 400;

	display: flex;
	justify-content: center;           
	align-items: center;
}



/******* Use this if using top hamburger ******************/

.header-nav {

	display: flex;			/*** Added - might contribute to centered desktop header */
	flex-direction: column; 	/*** Added - might contribute to centered desktop header */	
	justify-content: center;   	/*** Added - might contribute to centered desktop header */    
	align-items: flex-start;	/*** Added - might contribute to centered desktop header */

	position: fixed;
	top: 0;
  	width: 100%;
	margin: 0 auto;
	padding: .6rem 2rem;

  	z-index: 999;
}


/******* Use this if only using bottom hamburger ******************/

/* .header-nav {  */
/* 	display: none;  */
/* }   */



/********************* Containers **************************************************************************************************************************/

.section-flex {				
	display: flex;
	flex-direction: column; 
	justify-content: center; 	/* to vertically center contents */
	align-items: center; 		/* to horizontally center contents */
	padding: 0;			/* internal padding */
	margin: 0 auto;
	width: 100%;

	z-index: 300;			/* to cover section banner */
	position: relative;		/* to cover section banner */
} 



.container-flex {			/* full vertical for large screens, and enables cell-flex to expand to height of cell with most content or full vertical, whichever is less */
	display: flex; 	
	flex-direction: column;		/* for mobile first */
	justify-content: center; 	/* to vertically center cells within container-flex */
	align-items: center;		/* to horizontally center cells within container-flex */

	padding: 2rem 2rem;		
	margin: 0 auto;
	width: 100%;
}


.container-flex-no-padding {	
	display: flex; 	
	flex-direction: column;		/* for mobile first */
	justify-content: center; 	/* to vertically center cells within container-flex */
	align-items: center;		/* to horizontally center cells within container-flex */

	padding: 0;		
	margin: 0 auto;
	width: 100%;
}

.container-flex-no-padding-sides {	
	display: flex; 	
	flex-direction: column;		/* for mobile first */
	justify-content: center; 	/* to vertically center cells within container-flex */
	align-items: center;		/* to horizontally center cells within container-flex */

	padding: 2rem 0rem;		
	margin: 0 auto;
	width: 100%;
}


.container-flex-no-padding-top {	
	display: flex; 	
	flex-direction: column;		/* for mobile first */
	justify-content: flex-start;	/* start placing content at top of cell */
	align-items: center;		/* to horizontally center cells within container-flex */

	padding: 0;		
	margin: 0 auto;
	width: 100%;
}

.container-flex-no-padding-bottom {	
	display: flex; 	
	flex-direction: column;		/* for mobile first */
	justify-content: center;	/* to vertically center cells within container-flex */
	align-items: center;		/* to horizontally center cells within container-flex */

	padding: 2rem 0rem 0rem 0rem;		
	margin: 0 auto;
	width: 100%;
}





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


.cell-flex-single {			/* at desktop width is 42rem, at phone width width adjusts to content with 2 rem padding */
	display: flex;
	flex-direction: column;	
	justify-content: center; 	/* to vertically center content within cell */
	align-items: center;		/* to horizontally center content within cell */

	padding: 2rem 2rem;		/* internal padding */
	margin:  0 auto;		/* left and right margins set to auto to expand to as needed to accomodate content */

	position: relative; 		/* To enable text to show on top of video */
}	


.cell-flex {				/* media query for large screens sets all cells in a row to height of cell with most content */
	display: flex;
	flex-direction: column;	
	justify-content: flex-start;	/* start placing content at top of cell */
	align-items: center;		/* to horizontally center content within cell */

	padding: 2rem 2rem;		/* internal padding */
	margin:  1rem 0rem; 		/* puts space on top and bottom of cells  */  /* left and right margins set to zero - width set with other css classes */

	/* width: 100%; */
}


.cell-flex-no-margin {
	display: flex;
	flex-direction: column;	
	justify-content: center;	/* to vertically center content within cell */
	align-items: center;		/* to horizontally center content within cell */

	padding: 2rem 2rem;		/* internal padding */
	margin:  0 auto; 

	width: 100%; 
} 


.cell-flex-no-margin-no-padding {
	display: flex;
	flex-direction: column;	
	justify-content: center;	/* to vertically center content within cell */
	align-items: center;		/* to horizontally center content within cell */

	padding: 0;			
	margin:  0 auto; 

	width: 100%; 
} 



/************************ Footer ***************************************************************************************************************************/

footer {
	position: relative;		/* to cover section banner */
	z-index: 300;			/* to cover section banner */

	width: 100%;
	margin: 0 auto;
	padding: 0;
}


.footer-fixed {
	position: fixed;
	z-index: 400; 
	bottom: 0;
	left: 0;
}


.footer-flex {
  	display: flex;
  	flex-wrap: nowrap;
	justify-content: center; 	/* to vertically center content within cell */
	align-items: center;		/* to horizontally center content within cell */


	/* width: 60%;  */
	margin: 0 auto;
	padding: .5rem 0rem;
}


.footer-nav {
	position: fixed;
	z-index: 400; 
	bottom: 0;
	left: 0;

	display: flex;
	justify-content: center;           
	align-items: center;

	width: 100%;
	margin: 0 auto;
	padding: 1.5rem 0rem;

}


.footer-close {
	position: fixed;
	z-index: 400; 
	bottom: 0;
	left: 0;

	display: flex;
	justify-content: center;           
	align-items: center;

	width: 100%;
	margin: 0 auto;
	padding: .8em 0rem;

}


.social-icon { 
	max-width: 50%;
	height: auto;
}


.copyright {
	padding: 0 0 0 0;
	width: 60%;
	margin: 0 auto;
	text-align: center;
}




/************************ Roofs ******************************************************************************************************************/
/*************************************************************************************************************************************************/


/*************** Roofs - Large - Left ******************************************************************************************************************/

.roof-lg-lft-base {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid #ffffff;
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-white {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(255, 255, 255, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-lightgrey {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(211, 211, 211, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-grey {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(128, 128, 128, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-darkgrey {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(169, 169, 169, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-black {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(0, 0, 0, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-purple {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(153, 102, 255, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-blue {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(0, 115, 230, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-aqua {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(23, 227, 226, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-green {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(0, 217, 36, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-yellow {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(255, 205, 72, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-orange {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(239, 167, 46, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-red {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(246, 71, 136, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-lft-pink {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(255, 107, 231, 0.64);
    border-right: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}


/*************** Roofs - Large - Right ******************************************************************************************************************/

.roof-lg-rgt-base {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid #ffffff;
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-white {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(255, 255, 255, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-lightgrey {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(211, 211, 211, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-grey {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(128, 128, 128, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-darkgrey {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(169, 169, 169, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-black {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(0, 0, 0, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-purple {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(153, 102, 255, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-blue {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(0, 115, 230, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-aqua {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(23, 227, 226, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-green {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(0, 217, 36, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-yellow {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(255, 205, 72, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-orange {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(239, 167, 46, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-red {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(246, 71, 136, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-lg-rgt-pink {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(255, 107, 231, 0.64);
    border-left: 96vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}


/*************** Roofs - Short - Left ******************************************************************************************************************/

.roof-st-lft-base {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid #ffffff;
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-white {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(255, 255, 255, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-lightgrey {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(211, 211, 211, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-grey {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(128, 128, 128, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-darkgrey {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(169, 169, 169, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}
.roof-st-lft-black {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(0, 0, 0, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-purple {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(153, 102, 255, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-blue {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(0, 115, 230, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-aqua {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(23, 227, 226, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-green {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(0, 217, 36, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-yellow {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(255, 205, 72, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-orange {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(239, 167, 46, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-red {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(246, 71, 136, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-lft-pink {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid rgba(255, 107, 231, 0.64);
    border-right: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

/*************** Roofs - Short - Right ******************************************************************************************************************/

.roof-st-rgt-base {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid #ffffff;
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-white {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(255, 255, 255, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-lightgrey {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(211, 211, 211, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-grey {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(128, 128, 128, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-darkgrey {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(169, 169, 169, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-black {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(0, 0, 0, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-purple {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(153, 102, 255, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-blue {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(0, 115, 230, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-aqua {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(23, 227, 226, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-green {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(0, 217, 36, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-yellow {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(255, 205, 72, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-orange {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(239, 167, 46, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}

.roof-st-rgt-red {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(246, 71, 136, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}


.roof-st-rgt-pink {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 100px solid rgba(255, 107, 231, 0.64);
    border-left: 50vw solid transparent;
    margin-top: 2rem;
    z-index: 1;
}


/************************ Mosiac ******************************************************************************************************************/

.container-mosaic {
	display: flex;
	flex-direction: column;
	justify-content: center;

	margin: 0 auto;
	padding: 2rem 1rem;
	min-height: 100vh;

	z-index: 300;			/* to cover section banner */
	position: relative;		/* to cover section banner */
}


.image-mosaic {
  	display: block;
  	-o-object-fit: cover;
     	object-fit: cover;
  	height: 100%;
  	width: 100%; 
}


ul.mosaic {
	display: grid;
  	grid-template-columns: 1fr;
}


li.mosaic {
  	list-style-type: none;
   	position: relative; 
	padding: 1rem;
}


li.mosaic:focus {
  	border: 10px solid white; 
}





/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/
/********************* Media Queries **********************************************************************************************************************************/


@media (min-width: 0px) {

	.width-2-col {
		width: 100%;
	}
	
	.width-3-col {
		width: 100%;
	}

	.width-4-col {
		width: 100%;
	}


	.left-order {
        	order: 2;
    	}

    	.right-order {
        	order: 1;
    	}

}


@media (min-width: 768px) {


	/****************************  Mosiac *************************************************************************************************************************/

	ul.mosaic {
		display: grid;
  		grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  		grid-auto-rows: 14rem;
  		grid-auto-flow: dense;
  		grid-gap: 1rem;
	}


	li.mosaic {
		padding: 0rem;
	}


	li.small-square {
  		grid-row: span 1;
  		grid-column: span 1; 
	}


	li.square {
  		grid-row: span 2;
  		grid-column: span 2; 
	}


	li.horizontal {
  		grid-row: span 1;
  		grid-column: span 2; 
	}


	li.vertical {
  		grid-row: span 2; 
 		grid-column: span 1; 
	}


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


	.cell-flex-single {
		width: 42rem;
	}	


	.width-2-col {
		width: 34rem;
	}


	.width-3-col {
		width: 25rem;
	}


	.width-4-col {
		width: 25%;
	}

	
}


@media (min-width: 992px) {            /************** 992px ***************/


	/****************************  Logo Desktop Hidden *********************************************************************************************************************/

	.logo-desktop-hidden {
    		display: none;
	}


	/****************************  Navigation Menu *************************************************************************************************************************/

	.header-nav {
		display: flex;
		flex-direction: row; 			/*** Added - might contribute to centered desktop header */
		justify-content: space-between;       	/*** Use center to center nav items, use space-bwteen to place logo on left and nav items on right */   
		align-items: center;	

		position: fixed;
		top: 0;
  		width: 100%;
		margin: 0 auto;
		padding: .6em 2em;

  		z-index: 400;
	}

	
	.hamburger-top {
    		display: none;
  	}


	.hamburger-bottom {
    		display: none;
  	}


	nav {
		position: relative;
		width: auto;			/* changed for desktop view */
		margin: 0; 			/* changed for desktop view */
		padding: 0em 0em;
		background-color: transparent;

		display: flex;
		flex-direction: row;		/* changed for desktop view */
		justify-content: space-evenly;	/* changed for desktop view */
		align-items: center;

		max-height:  none;		/* changed for desktop view */
  		overflow: visible;		/* changed for desktop view */
	}

	.navitem {
		margin: 0em 2em;
	}

	.close {				/* make the close menu option invisible at desktop view */
		display: none;
	}


	.anchor-bottom {
		padding-bottom: 1rem;
	}


	.footer-nav {
		display: none;
	}


}


@media (min-width: 1280px) {            /************** 1280px ***************/


	.section-flex {
		/* min-height: 100vh; */ 	/* outer-most container set to at least full height for desktop display */
	}


	.container-flex {			
		flex-direction: row;		/* switch to row orientation for desktop display */
		justify-content: space-evenly;	/* items are distributed with equal spacing between all items and edge */
	}


	.container-flex-no-padding {			
		flex-direction: row;		/* switch to row orientation for desktop display */
		justify-content: space-evenly;	/* items are distributed with equal spacing between all items and edge */
	}


	.container-flex-no-padding-sides {			
		flex-direction: row;		/* switch to row orientation for desktop display */
		justify-content: space-evenly;	/* items are distributed with equal spacing between all items and edge */
	}


	.container-flex-no-padding-top {			
		flex-direction: row;		/* switch to row orientation for desktop display */
		justify-content: space-evenly;	/* items are distributed with equal spacing between all items and edge */
		align-items: flex-start;	/* align items along the top */
	}


	.container-flex-no-padding-bottom {			
		flex-direction: row;		/* switch to row orientation for desktop display */
		justify-content: space-evenly;	/* items are distributed with equal spacing between all items and edge */
	}


	.cell-flex {
		align-self: stretch;		/* make all cells the same height as the tallest cell */
	}


	.cell-flex-single {
		align-self: stretch;		/* make all cells the same height as the tallest cell */
	}


	.cell-flex-no-margin {
		align-self: stretch;		/* make all cells the same height as the tallest cell */
	}


	.cell-flex-no-margin-no-padding  {
		align-self: stretch;		/* make all cells the same height as the tallest cell */
	}



	.left-order {
        	order: 1;
    	}


    	.right-order {
        	order: 2;
    	}

}


/************************ End CSS *************************************************************************************************************************************/