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
		{
			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: 18px;

			color: green;
		}

		#bullets_pocket_types
		{
			margin-top: 15px;
			margin-bottom: 15px;
		}

		#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%;
		}

		.product_title
		{
			font-size: 18px;

			text-decoration: underline;

			/* margin-bottom: 10px; */
		}

		.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 */
		}

		#text_mounting_opt
		{
			margin-right: 2px;
		}

		#text_mounting_opt ol
		{
			font-size: 19px;
		}

		#mounting_box
		{
			margin-top: 15px;

			border: 1px dashed orange;
		}

		.content_flex
		{
			display: flex;
			flex-wrap: wrap;

			margin-bottom: 10px;

			padding: 5px;

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

		.content_flex > div
		{
			width: 550px;  /* stops the text blocks to the left ... using up more than 50% the width and therefore making the images smaller */

			flex-grow: 1;
		}

		.example
		{
			color: blue;
		}

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

		* {
			box-sizing: border-box;
		}

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

					/* border: 1px solid pink; */

					margin: 0;

					text-align: center;

					margin: auto /* centers image */
				}

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

					text-align: center;
					/* font-style: italic; */

					margin-top: 3px;

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

				.image_block_A
				{
					display: flex;
					flex-wrap: wrap;

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

					/* border: 1px dashed blue; */

					margin-top: 10px;

					padding: 10px;
				}

				.image_block_A > div
				{
					width: 275px; /* 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;

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

				#block_1_A
				{
					flex-grow: 1;

					padding-bottom: 3px;
					margin-bottom: 5px;

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

				#block_1_B
				{
					flex-grow: 1.3;

					padding-bottom: 2px;
					margin-bottom: 5px;

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

				.image_block_A figure
				{
					/* Required For Edge! ... whereas Chrome & FF simply (by default) don't allow the figure itself to expand outside the "image_block" */
					/* ----------------- */
					/* max-width: 50%; */ /* Important! "img max-width: 100%" ... below is required also ... else the image expands outside the figure */

					/* Note: because these 2 images are diferent ratios ... it actually resizes better without this restriction ... but Only!
					/* in Chrome & FF ... set like this which is no doubt a safe bet for other browsers ... the images reveal their different */
					/* height when the window width becomes a certain amount narrower */

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

				.image_block_A img
				{
					max-width: 100%;
					max-height: 500px;
				}

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

				.image_block_B
				{
					display: flex;
					flex-wrap: wrap;

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

					/* border: 1px solid green; */

					margin-top: 10px;
					margin-bottom: 10px;

					padding: 10px;
				}

				.image_block_B > div /* this is instead of the old "figure" method below ... figures are now in their own DIVs which allows them to flex */
				{
					width: 175px;

					margin-bottom: 7px;

					flex-grow: 1;
				}

				.image_block_B figure
				{
					/* Required For Edge! ... whereas Chrome & FF simply (by default) don't allow the figure itself to expand outside the "image_block" */
					/* ----------------- */
					/* max-width: 19.5%; */ /* Important! "img max-width: 100%" ... below is required also ... else the image expands outside the figure */

									/* width: 100px; */ /* For Mobile! ... this is increased as usual further down */

									/* flex-grow: 1; */ /* WHT ISN'T GROW WORKING ????????????????????????????????????????????? */

					/* Note: the above: "max-width" is set slightly less than 5 (20%) figures instead of using the now commented margin below */
					/* which now makes Edge work the same as Chrome & FF */
					/* ------------------------------------------------- */
					/* margin: 0 5px 0 5px; */ /* top .. right .. bottom .. left */
				}

				.image_block_B img
				{
					max-width: 100%;
				}

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

				.image_block_C
				{
					display: flex;

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

					/* border: 1px solid green; */

					margin-top: 10px;
					padding: 10px;
				}

				.image_block_C > div /* this is instead of the old "figure" method below ... figures are now in their own DIVs which allows them to flex */
				{
					width: 100px; /* Neat! Trick! ... simply set the image way too small here ... which is then free to "flex-grow" as desired as below */

					/* flex-grow: 1; */ /* now setting independently as done below ... "block_1_C" & "block_1_D" */
				}

				#block_1_C
				{
					flex-grow: 1;
				}

				#block_1_D
				{
					flex-grow: 1;
				}

				.image_block_C figure
				{
					/* Note: the above: "max-width" is set slightly less than 2 (50%) figures instead of using the now commented margin below */
					/* which now makes Edge work the same as Chrome & FF */
					/* ------------------------------------------------- */
					/* max-width: 49%; */ /* Important! "img max-width: 100%" ... below is required also ... else the image expands outside the figure */

					/* margin: 0 3px 0 3px; */ /* top .. right .. bottom .. left */
				}

				.image_block_C img
				{
					max-width: 100%;

					/* max-height: 350px; */  /* keeps the two quite small images the same size */

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

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

				.image_block_D
				{
					display: grid;
					justify-content: space-evenly; /* THIS is only effective when using: "auto" ... Not! "1fr" */

					grid-template-columns: auto;
						/* grid-template-columns: 1fr 1fr; */

					grid-gap: 30px;

					/* border: 1px solid blue; */

					margin-top: 10px;
					padding: 10px;
				}

				.image_block_D img
				{
					max-width: 100%;

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

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

				.image_block_E
				{
					display: flex;

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

					/* border: 1px solid green; */

					margin-top: 10px;
					padding: 10px;
				}

				.image_block_E img
				{
					max-width: 100%;

					/* max-height: 475px; */

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

				/* 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_block_A, .image_block_B, .image_block_C, .image_block_D, .image_block_E
					{
						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%;
			}
		}

			.grid-container
			{
				position: relative;

				width: 95%;

				margin: 0 auto;

				display: grid;

				/* grid-template-columns: auto; */ /* Make the grid smaller than the container */
				grid-template-columns: 1fr 1fr;

				justify-content: space-evenly; /* THIS! is most likely ineffective when using "fr" instead of "auto" */
											   /* see homepage ... where you're having to use "auto" to be able to use: "justify-content" */
				grid-gap: 10px;

				background-color: #d2e2ef;

				padding: 10px;
			}

			.grid-container > div
			{
				background-color: rgba(255, 255, 255, 0.8);
				text-align: center;
				padding: 20px 10px;
									font-size: 1em;
				border: 1px solid red;

				transition: 0.1s;
			}

			.grid-container img
			{
				padding: 5%;
				/* border: 1px solid green; */

				/* Stops image making parent DIV larger ... becomes effective only when natural image size is larger than calculated via CSS */
				max-width: 100%;
			}

			/* Great article ... https://webplatform.github.io/docs/tutorials/understanding-css-units/ */
			/* xxxxxxxxxxxx */
			@media only screen and (min-width: 600px)
			{
				/* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */

				/* Absolutely Magic! ... "fr" locks the width to the proportion of available space ... Always! Based on the Number! of "fr"s stated in */
				/* "grid-template-columns:" as below ... similar (if not exactly the same) as Flex's "Grow" */

				/* The cool! thing is that even when an element is removed using JS ... the remaining elements width-proportion doesn't change */
				/* E.G. 1fr / (1fr 1fr 1fr 1fr) = 20% ... and if you remove say 2 elements ... the remaining 3 still have a width of 20% */

				/* "auto" on the other hand as was used before ... expands the remaining elements to fill 100% of the available space */
				/* after any elements have been removed */

				.grid-container_mobile
				{
					/* grid-template-columns: auto; */
					grid-template-columns: 1fr 1.04fr 1.4fr;
				}
			}

			@media only screen and (min-width: 768px) {
				.grid-container_mobile {
					/* grid-template-columns: auto auto; */
					grid-template-columns: 1fr 1.04fr 1.4fr;
				}
			}

			@media only screen and (min-width: 992px) {
				.grid-container_mobile {
					/* grid-template-columns: auto auto auto; */
					grid-template-columns: 1fr 1.04fr 1.4fr;
				}
			}

			@media only screen and (min-width: 1200px) {
				.grid-container_mobile {
					/* grid-template-columns: auto auto auto auto; */
					grid-template-columns: 1fr 1.04fr 1.4fr;
				}
			}

			@media only screen and (min-width: 1350px) { /* Bootstrap's highest is ... 1200px ... according to the above link */
				.grid-container_mobile {
					/* grid-template-columns: auto auto auto auto auto; */
					/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
					grid-template-columns: 1fr 1.04fr 1.4fr;
				}
			}

			@media only screen and (min-width: 1600px) { /* Adjust the screen width at a separate break point here */
				.grid-container_mobile {
					width: 70%;
				}
			}