body
		{
			font-size: 100%; /* browser default = 1.0em = 16px ... all other text on homepage is EM ... 100% means full browser text size whis is changeable by user */

			font-family: Verdana, sans-serif; /* as stated here: https://www.w3schools.com/css/css_font.asp */

			margin: 0;
		}

		h1.section_header
		{
			font-size: 27px;

			color: #BD2D0C;
		}

		h1.section_header, h3.section_header, h4.section_header
		{
			margin: 5px auto 10px 2%; /* top .. right .. bottom .. left */

			font-style: italic;
		}

		h1.section_header
		{
			margin-left: 1.5%;

			font-style: italic;
		}

		h2.section_header
		{
			margin: 5px auto 0 2%; /* top .. right .. bottom .. left */
		}

		h2.section_header
		{
			font-size: 23px;

			color: #CE660F;
		}

		h3.section_header
		{
			margin-top: 15px;
			margin-left: 20px;
			margin-bottom: 7px;

			font-size: 22px;

			color: green;
		}

		h4.section_header
		{
			margin-left: 20px;
			/* margin-bottom: 7px; */

			font-size: 19px;

			color: #151A9D;
		}



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

			.image_link_url
			{
				margin-left: 20px;

				font-size: 22px;
			}

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

			.one_image, .three_images
			{
				margin-left: 20px;
				margin-top: 10px;

				/* border: 1px dashed blue; */
			}

			.one_image img, .three_images img
			{
				max-width: 100%;
			}

			figure.single_image
			{
				display: table; /* https://stackoverflow.com/questions/28394007/figcaption-no-wider-than-the-image */

				/* border: 1px solid pink; */

				margin: 0px;
				padding: 2px;

				text-align: center;

				margin: auto /* centers image */
			}

			figcaption.single_image
			{
				display: table-caption; /* https://stackoverflow.com/questions/28394007/figcaption-no-wider-than-the-image */
				caption-side: bottom;

				text-align: center;

				color: purple;

				font-size: 19px;
				font-style: italic;
				font-weight: bold;

				margin-top: 3px;

				/* border: 1px dotted blue; */
			}

			/* ------------------- Flex Sections ------------------- */

			.image_flex_1
			{
				display: flex;

				flex-wrap: wrap;

					/* justify-content: space-evenly; */ /* Does NOT! work in EDGE ... See link above */
				justify-content: space-evenly;

				margin-top: 5px;

				padding: 5px 10px 5px 10px; /* top .. right .. bottom .. left */

				/* border: 1px solid green; */
			}

			.image_flex_1 > div
			{
				width: 300px; /* use width here ... not max-width */

				/* flex-grow: 1; */ /* now setting independently as done below ... "block_1_A" & "block_1_B" */

				margin: 1px;

				padding: 1px;
			}

			.image_flex_1 img
			{
				max-width: 100%;

				/* max-height: 575px; */
			}

			#block_1_A
			{
				flex-grow: 0.25;

				border: 1px dashed orange;

				padding-bottom: 10px;
			}

			#block_1_B
			{
				flex-grow: 0.65;

				border: 1px dashed orange;

				padding-bottom: 10px;
			}

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


		#gtm_logo
		{
			position: relative;

			display: flex;

			justify-content: space-between;

			width: 95%;

			margin: 7px auto 10px auto; /* top .. right .. bottom .. left */
		}

		#gtm_logo img
		{
			max-width: 65%;
		}

		#product_cat_block /* width commented in ... navbar_middle_mega.css ... because it is controlled here */
		{
			width: 95%;
		}

		#navbar_top_inner /* width commented in ... navbar_top_fixed.css ... because it is controlled here */
		{
			width: 95%;
		}

		#nav_block /* messy! id here just to override css further down */
		{
			padding: 5px;

			margin: 10px;

			border: 1px dashed pink;
		}

		.nav_link
		{
			font-size: 18px;

			margin-bottom: 9px;
		}

		.page_description_content
		{
			width: 95%;

			margin: 0 auto 0 auto; /* top .. right .. bottom .. left */

			border: 1px solid green;

			padding: 7px 5px 5px 5px;
		}

		.text_block
		{
			font-size: 17px;
			line-height: 150%;

			font-family: arial;

			/* border: 1px solid blue; */

			margin-top: 10px;

			padding: 5px 15px 5px 15px; /* top .. right .. bottom .. left */
		}

		p
		{
			margin: 0;
			margin-bottom: 10px;
		}

		.text_block p:first-of-type
		{
			margin-top: 10px;
		}

		.text_block p:last-of-type
		{
			margin-bottom: 0;
		}

		.text_block h3:first-of-type
		{
			margin-top: 0;
		}

		.text_block ul
		{
			margin: 0;

			margin-left: 15px;

			/* border: 1px dashed green; */
		}

		.text_block li
		{
			color: #CE7403;
			/* margin: 0; */

			line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
		}

		.text_block li span
		{
			color: black;
			line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
		}

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

		/* Flex doesn't work correctly in EDGE ... even Now! 20-10-2019 ... https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15947692/ */

		/* @supports (-ms-accelerator: true) ... Edge only ... does Not! work ... this is also commented about in above link */

		/* @supports (-ms-ime-align: auto) ... Edge only: https://stackoverflow.com/questions/32940965/how-to-target-microsoft-edge-with-css */

		/* alternative way ... https://stackoverflow.com/questions/54882531/how-to-detect-partial-support-for-space-evenly-in-edge */

		@supports (-ms-ime-align: auto)
		{
			.image_flex_1
			{
				justify-content: space-around;
			}
		}

		@media only screen and (min-width: 1600px)
		{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */

			#gtm_logo, #product_cat_block, #navbar_top_inner, .page_description_content, #footer_inner
			{
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... product_detail_page.css */

				width: 70%;
			}
		}