/*
J.W. MacConnell
7:02 PM 5/14/2020
2:07 PM 4/2/2019
10:00 AM 3/29/2019
8:42 PM 3/28/2019
12:31 PM 3/27/2019
*/

/********************************************************************************
*                               Desktop Site CSS
********************************************************************************/

	/* 10 px/vw based on 1000 px transition fixed to variable */


/********************************************************************************
                             Entire Page Related
********************************************************************************/

	html { background-color: black; }

	body {
		max-width: 1000px;
		min-height: 1100px; /* non vw browsers */
		min-height: calc(300px + 78vw);
		max-height: 5000px;
		margin: auto;
		margin-top: 10px;
		padding-top: 0px;
		padding-left: 5px;
		padding-right: 5px;

		color: #333333;  /* text color Set = Gray color */
		background-color: #ffffcc;  /* #040244; 040244 044402 */

	}

	div.master-div {
		font-family: arial, sans-serif;
		font-weight: bold;
		line-height: 1.5;
		font-size: 13px;
		text-align: left;
	}

/* Use these styles if the screen is less than max-width */
@media screen and (max-width: 1000px) {
	div.master-div {
		font-size: 1.2vw;
		padding-left: 0.5vw;
		padding-right: 0.5vw;

		min-height: calc(300px + 78vw);
	}
}

	img.menu-img {
		width: 100%;
		margin-top: 5px;
	}


/********************************************************************************
                           Drop-Down Menu Related
********************************************************************************/


	ul.menu-ul {
		list-style-type: none;
		margin: -10px 0 0 0;
		padding: 0;
		overflow: hidden;
		background-color: green;
	}

	li.menu-li {
		float: left;
		overflow: auto;
	}

	li.menu-li a, .dropbtn {
		display: inline-block;
		color: white;
		background-color: inherit;
		text-align: center;
		padding: 5px 12px 5px 12px;
		text-decoration: none;
		/* top margin of entire menu bar */
		margin-top: 5px;
	}

/* Use these styles if the screen is less than max-width */
@media screen and (max-width: 1000px) {
	li.menu-li a, .dropbtn {
		padding: 5px 0.9vw 0.5vw 0.9vw;
	}
}

	li.menu-li a:hover, .dropdown:hover .dropbtn {
		background-color: #cc0000;
	}

	li.dropdown {
		display: inline-block;
		float:left;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: white;
		/* minimum drop-down width */
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

/* Use these styles if the screen is less than max-width */
@media screen and (max-width: 1000px) {
	.dropdown-content {
		min-width: 16vw;
	}
}

	.dropdown-content a {
		color: black;
		background-color: inherit;
		/* drop-down padding top right */
		padding: 5px 16px;
		text-decoration: none;
		display: block;
		text-align: left;
	}

/* Use these styles if the screen is less than max-width */
@media screen and (max-width: 1000px) {
	.dropdown-content a {
		padding: 0.5vw 1.6vw;
	}
}

	.dropdown-content a:hover {background-color: pink;}

	.dropdown:hover .dropdown-content {
		display: block;
	}

/********************************************************************************
                          End Drop-Down Menu Related
********************************************************************************/


/********************************************************************************
                          Non Drop-Down Menu Related
********************************************************************************/


	div.page-div {
		font-family: verdana, arial, sans-serif;

		font-weight: normal;
		line-height: 1.5;
		font-size: 16px;
		text-align: left;
	}

/* Use these styles if the screen is less than max-width */
@media screen and (max-width: 600px) {
	div.page-div {
		font-size: 2.67vw;
	}
}


/********************************************************************************
                      Various Page Size Settings (Fixed)

  NOTE: these values serve as init values for some of the variable values below

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

	div.page_width_500 {
	text-align: left;
	max-width: 500px;
	margin: auto;
	}

	div.page_width_700 {
	text-align: left;
	max-width: 700px;
	margin: auto;
	}

	div.page_width_900 {
	text-align: left;
	max-width: 900px;
	margin: auto;
	}

	div.page_width_1000 {
	text-align: left;
	max-width: 1000px;
	margin: auto;
	}

	div.page_width_1200 {
	text-align:left;
	max-width: 1200px;
	margin: auto;
	}

/********************************************************************************
                     Various Page Size Settings (VARIABLE)

             Use these styles if the screen is less than max-width
             (the display changes size here, so uses vw dimensions)

   WARNING: each variable value below must have a fixed init value in
            the fixed section above.

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

/* Use these styles if the screen is less than max-width
   (the display changes size here, so uses vw dimensions) */

@media screen and (max-width: 1000px) {

	div.page_width_500 {
	max-width: calc(250px + 24.38vw);
	}

	div.page_width_700 {
	max-width: calc(250px + 43.88vw);
	}

	div.page_width_900 {
	max-width: calc(250px + 63.38vw);
	}

	div.page_width_1000 {
	max-width: calc(250px + 73.13vw);
	}

	div.page_width_1200 {
	max-width: calc(250px + 92.63vw);
	}
}

/********************************************************************************
                                  List Related
********************************************************************************/

	ul.none-ul {
  	list-style: none; /* Remove default bullets */
	font-family: arial, sans-serif;
	}

	ul.disc {
	list-style-type: disc;
	font-family: arial, sans-serif;
	}

	ul.circle {
	list-style-type: circle;
	}

	ul.square {
	list-style-type: square;
	}

	li.font-li {
	font-family: arial, sans-serif;
	font-size: 16px;
	}

	/* TOP MARGIN: use to separate <li> etc. sections */
	.sec_space {
	margin-top: 8px;
	}

	/* TOP MARGIN: use on the first <li> in a ul */
	.margin_1st_item {
	margin-top: 0px;
	}

	.ul_margin-lt_0 {
		margin-left: 0px;
		padding-left: 0px;
	}

	.ul_margin-lt {
		margin-left: 40px;
		padding-left: 0px;
	}

	.ul_margin-lt_2 {
		margin-left: 30px;
		padding-left: 0px;

	}

/* Use these styles if the screen is less than max-width
   (the display changes size here, so uses vw dimensions) */

@media screen and (max-width: 1000px) {
	.ul_margin-lt {
		margin-left: 4vw;
	}

	.ul_margin-lt_2 {
		margin-left: 3vw;
		padding-left: 0;

	}

}

/* Use these styles if the screen is portrait mode and less than max-width */
@media screen and (orientation: portrait) and (max-width: 550px) {

	.ul_margin-lt {
		margin-left: 4vw;
	}

	.ul_margin-lt_2 {
		margin-left: 5.5vw;
		padding-left: 0;

	}
}

/********************************************************************************
*                         Font, Font Size, Font Weights
********************************************************************************/

	.arial {font-family: arial, sans-serif; }

	.arial_black {font-family: "arial black", sans-serif; }

	.times {font-family: "Times New Roman", Times, serif; }

	.verdana {font-family: verdana, arial, sans-serif; }


	.bold {font-weight: bold; }

	.normal {font-weight: normal;	}

	.font_10px {font-size: 10px; }

	.font_12px {font-size: 12px; }

	.font_14px {font-size: 14px; }

	.font_16px {font-size: 16px; }

	.font_18px {font-size: 18px;}

	.font_20px {font-size: 20px; }

	.font_24px {font-size: 24px; }

	.font_30px {font-size: 30px; }

	.font_big {font-size: 30px; }

	.font-button_phone {font-size: 10px; }

/* Use these styles if the screen is less than max-width
   (the display changes size here, so uses vw dimensions) */

@media screen and (max-width: 750px) {

	.font_10px {font-size: 1.33vw; }

	.font_12px {font-size: 1.6vw; }

	.font_14px {font-size: 1.87vw; }

	.font_16px {font-size: 2.13vw; }

	.font_18px {font-size: 2.4vw;}

	.font_20px {font-size: 2.67vw; }

	.font_24px {font-size: 3.2vw; }

	.font_30px {font-size: 4vw; }

	.font_big {font-size: 4vw; }
}


/********************************************************************************
*                             Alignment, line spacing
********************************************************************************/

	.left {text-align: left; }

	.center {text-align: center; }

	.right {text-align: right; }

	.line_space-1 { line-height: 1; }
	.line_space-1d2 { line-height: 1.2; }
	.line_space-1d5 { line-height: 1.5; }
	.line_space-2 { line-height: 2.0; }
	.line_space-3 { line-height: 3.0; }

/********************************************************************************
                                Heading Related
********************************************************************************/

	h1 {
	text-align: center;
	margin-top: 10px;
	font-size: 2.5em;
	}

	h2 {
	text-align: left;
	font-size: 32px;
	font-family:  arial, sans-serif;
	font-weight: bold;
 	margin-left: 0px;
	}

	h3 {
	text-align: left;
	font-family: arial, sans-serif;
	font-size: 16px;
	margin-left: 0px;
	}

	h4 {
	text-align: left;
	font-family: arial, sans-serif;
	font-size: 16px;
	margin-left: 0px;
	}

	h5 {
	text-align: left;
	font-family: arial, sans-serif;
	font-size: 16px;
	margin-left: 0px;
	}

/********************************************************************************
                                2 Column Related
********************************************************************************/

	div.left_col {
		float: left;
		width: 60%;
	}

	div.right_col {
		float: right;
		width: 30%;
	}

	/* Clear floats after the columns */
	.clr_floats:after {
		content: "";
		display: table;
		clear: both;
	}


/********************************************************************************
*                         Phone Optimized Site Button Related
********************************************************************************/

	/* ****************** Make Phone page announcement visible only when size is small ******************/

	.fone_msg {

		/* button off if screen is large */
		display: none;
	}

		/* Use these styles if the screen is less than max-width
		   (the display appears here, is gone above) */

		/* button on if screen is small */
		@media screen and (max-width: 500px) {
			.fone_msg {
				display: block;
			}
		}


	/* ****************** Make Phone page announcement visible only when size is small *******************/


	/* ****************** special button Links ******************/

	.link_button a:link {
	color: black;
	background-color: #eee;
	text-decoration: none;
	border-style: solid;
	border-width: 4px;
	border-color: #ccd #777 #777 #ccd;
	text-decoration:none;
	}

	.link_button a:visited {
	color: black;
	background-color: #eee;
	text-decoration: none;
	border-style: solid;
	border-width: 4px;
	border-color: #ccd #777 #777 #ccd;
	text-decoration:none;
	}

	.link_button a:hover {
	color: black;
	background-color: #eee;
	text-decoration: none;
	border-style: solid;
	border-width: 4px;
	border-color: #ccd #777 #777 #ccd;
	text-decoration:none;
	}

	.margin-button_phone {
		margin-top: 20px;
	}

	/* ****************** end button Links ******************/

/********************************************************************************
*                                 Color Styles
********************************************************************************/

	hr.hr-header_color {
	border: 1px solid green;
	background-color: inherit;
	}

	.color_highlight {
	color: #dd0000;
	background-color: inherit;
	}

	.black {
	color: black;
	background-color: inherit;
	}

	.green {
	color: green;
	background-color: inherit;
	}

	.gray {
	color: #333333;
	background-color: inherit;
	}

	.red {
	color: #dd0000;
	background-color: inherit;
	}

	.white {
	color: white;
	background-color: inherit;
	}

	.bg-gray {
	background-color: gray;
	}

	.bg-lt_gray {
	background-color: #ddd;
	}

/********************************************************************************
*                               Link color Styles
********************************************************************************/

	/* Normal Links ******************/
	.link_color a:link {
	color: #0000aa;
	background-color: inherit;
	}

	.link_color a:visited {
	color: #7d007d;
	background-color: inherit;
	}

	.link_color a:hover {
	color: #cc0000;
	background-color: inherit;
	}