* {
			box-sizing: border-box;
		}
		body {
			font-family: Arial;
			margin: 0;
		}

		#gtm_logo {
			width: 95%;
			margin: 7px auto 10px auto; /* top .. right .. bottom .. left */
/* border: 1px solid green; */
		}





		/* ....... Main columns */ /* ... DON'T FORGET You can use ... WORD-WRAP! ... https://www.w3schools.com/cssref/css3_pr_word-wrap.asp */

		#prod_detail_container {
			 position: relative;
			 width: 95%;
			 /* margin: 50px auto 10px auto; */ /* top .. right .. bottom .. left */
       margin: 0 auto 10px auto; /* top .. right .. bottom .. left */
			 padding: 2px;
			 border: 1px solid green;

			 z-index: 40;
		}
		#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%;
		}
		 @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, #prod_detail_container, #product_cat_block, #navbar_top_inner, #footer_inner {
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... home_page.css */
				width: 70%;
			}
		}

/* Breadcrumbs --- START --- */

			/* (Link 2) https://www.w3schools.com/howto/howto_css_breadcrumbs.asp */
			/* (Link 1) https://www.w3schools.com/cssref/css_entities.asp */

		ul.breadcrumb {
			padding: 10px 16px;
			list-style: none;
      background-color: #f8f7f7;
			border: 1px solid green;
			margin: 5px auto 6px auto; /* top .. right .. bottom .. left */
		}
		ul.breadcrumb li {
			display: inline;
			font-size: 18px;
		}
		ul.breadcrumb li+li:before {
			padding: 8px;
			color: black;
			content: "\00BB"; /* ">>" character ... (Link 1 ... from above) https://www.w3schools.com/cssref/css_entities.asp */
		}
		ul.breadcrumb li a {
      color: #016dcc;
			text-decoration: none;
		}
		ul.breadcrumb li a:hover {
			color: #F29445;
			text-decoration: underline;
		}
		ul.breadcrumb li#fixed_text {
      color: #6c6a0e;
		}

/* Breadcrumbs --- END --- */

    .prod_detail_row, .row_inner { /* .............. https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_justify-content */
			display: -webkit-flex; /* Safari */
			-webkit-justify-content: center; /* Safari 6.1+ */

			display: flex;
			flex-wrap: wrap;
			justify-content: centre;

      padding: 5px;

			/* border: 1px solid red; */
      /* margin-bottom: 5px; */
		}
		.row_inner { /* ............. Overrides .checkout_row above */
			/* border: none; */
			padding: 5px;
			flex-wrap: nowrap;
		}
		.spacer_1 {
      min-width: 2.4%;
      /* border: 1px dashed red; */
			margin: 0 5px;
		}
		.spacer_2 {
      min-width: 1.7%;
      /* border: 1px dashed red; */
			margin-left: 5px;
		}
    .zoom_spacer {
      min-width: 2.5%;
      /* border: 1px solid red; */
      margin-right: 5px;
    }
		.prod_detail_col {
			padding: 5px;
			border: 1px solid blue;
			/* width: 50%; */ /* 100% produces same result ... if commented then the images determine the left column to be much larger than the right column */
			margin: 3px;
      margin-bottom: 0;

			width: 510px;
			flex-grow: 1;

      overflow-x: auto;
		}
    .prod_detail_title {
      padding: 5px;
      margin: 0 0 7px 0; /* top .. right .. bottom .. left */

      /* border: 1px dotted blue; */

      text-align: center;
      text-decoration: underline;
    }
h1 {
			color: #3916A2;

			font-size: 24px;
			font-family: arial;
			font-weight: bold;

			margin: 0;
		}

		h3.LED_Heading
		{
			margin-left: 15px;
			color: green;
		}

    #prod_description_container	{
      padding: 3px;
      border: 1px solid green;
    }
      p:first-of-type {
				margin-top: 6px;
			}
			p:last-of-type {
				margin-bottom: 6px;
			}
      p {
				margin: 10px;
			}
      .description_text {
        line-height: 120%;
      }
      #prod_description_heading_div {
				padding: 4px 13px 4px 13px; /* top .. right .. bottom .. left */
				margin-bottom: 3px;

      /* border: 1px solid blue; */
      }
      h2#prod_description_heading {
        font-size: 20px;
        text-decoration: underline;
        color: #017b05;
				margin: 0;
			}
      #prod_description_text {
				font-size: 16px;
				font-family: arial;

				padding: 3px;
        /* border: 1px solid orange; */
			}
      #prod_description_text li {
				color: #CE7403;
        margin-bottom: 15px;
				line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
			}
      #prod_description_text li span {
				color: black;
				line-height: 1.75;  /* list-style: none; */ /* gets rid of bullet points */
			}

/* Product Image & Thumbnails --- START --- */

		.product_thumbnail {
			border: 1px solid black;
			padding: 5px;
			width: 20%;
			z-index: 35; /* 35 & 40 ... "product_thumbnail" = child of = "row_inner" ... "Z" is simply relative to: parent container */

      min-height: 175px; /* 2024 thumbnail scrollbar... in JS (see JS notes) you've added: "my_image.complete" and "my_image.onload", because without them... */
                     /* product_thumbnail could load with 0 height if JS computed it before "myimage" had finished loading. Therefore this acted as a... */
      overflow-y: auto;  /* backup by keeping the height at a reasonable minimum value. However, I've decided to leave this min-height: 175px enabled anyway */
		}
		.thumbnail_box {
      /* border: 1px solid blue; */ /* Reduces image with by 1px ... which scales height accordingly ... resulting in white region at bottom of image = All Normal! */
			padding: 2px;
			margin-bottom: 10px;
		}
		.thumbnail_box img {
			width: 100%; /* sets (restricts) the image to its container size ... else it's massive and covers the screen */
			opacity: 1.0;
			transition: 0.5s ease;
		}
    .thumbnail_box img:hover { /* scaling or border requires stacking contexts */
								   /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
								   /* https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate */
			opacity: 0.75;
			/* border: 1px solid red; */
			-ms-transform: scale(1.02); /* IE 9 */
			-webkit-transform: scale(1.02); /* Safari prior 9.0 */
			transform: scale(1.02); /* Standard syntax */ /* https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate */
		}
		.img-zoom-container {
			position: relative;
      width: 80%;
			z-index: 40; /* 35 & 40 ... "img-zoom-container" = child of = "row_inner" ... "Z" is simply relative to: parent container */
		}
		.img-zoom-container img {
			/* border-radius: 8px; */
      max-width: 100%;

			-ms-transform: scale(1.0); /* IE 9 */
			-webkit-transform: scale(1.0); /* Safari 3-8 */
			transform: scale(1.0);
			transition: .5s ease;
		}

/* Product Image & Thumbnails --- END --- */

		.options_container {
			padding: 10px;
			border: 1px solid gray;
			margin-bottom: 15px;
		}
		.dropdown_container {
			margin-bottom: 5px;
		}
		select {
  /* display: inline-block... Not needed... window.getComputedStyle(size, null).getPropertyValue("display") reports: "[object HTMLSelectElement]" */
			width: 100%;
			padding: 7px 15px;
			margin: 8px 0;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 15px;
		}
    .dropdown_heading { /* dropdown headings are now being replaced with labels, therefore delete this line of CSS eventually */
			text-decoration: underline;
		}
    label {
      text-decoration: underline;
    }
		.table_container {
			padding: 10px;
  /* border: 1px solid gray; */
			overflow-x: auto; /* Not really required because flex responsiveness already moves column to next row down */

			transition: 0.5s;
		}
    #proportional_discount_div {
      /* border: 1px solid gray; */
      margin: 0 0 20px 0; /* top .. right .. bottom .. left */
      text-align: center;
    }
    #discount_message_span {
      color: green;
    }
		table#prod_detail_tbl {
			width:100%;
      font-size: 11px; /* changed to 13px for larger than 700px wide viewport in @media further down */
			font-family: Arial;
			margin-bottom: 17px;
		}

		.price_per_sheet_heading
		{
			text-decoration: underline;
		}

		.price_per_sheet, .price_per_sheet_heading /* this is only for ... "translucent-backlit-film.php" */
		{
			color: green;
			font-size: 14px;
			font-weight: bold;
		}

		table#prod_detail_tbl, table#prod_detail_tbl th, table#prod_detail_tbl td {
			border: 1px solid gray;
			border-collapse: collapse;
		}
		table#prod_detail_tbl th, table#prod_detail_tbl td {
      padding: 5px 5px 5px 5px; /* changed for larger than 700px wide viewport in @media further down */
			text-align: left;
		}
		.main_heading {
			color: #8B008B;
			font-size: 15px;
			font-style: italic;
			text-decoration: underline;
			margin: 0;
		}
		.data_title {
			color: #336BB1;
			font-size: 13px;
			text-decoration: underline;
			margin: 0;
		}
		table#prod_detail_tbl tr:nth-child(1) td {
			background-color: #F5F5F5;
		}
		table#prod_detail_tbl tr:nth-child(1n + 2) td {
			background-color: #FEFEFD;
		}
    table#prod_detail_tbl tr:nth-child(1n + 2) th {
      background-color: #FDFDFE;
    }
    table#prod_detail_tbl tr:nth-child(7) td {
      background-color: #F5F5F5;
    }
		.qty_price_div {
			margin: 0 auto 20px 20px; /* top .. right .. bottom .. left */
		}
		#enter_qty, #product_code {
			color: green;
			font-style: none;
			text-decoration: none;
		}
		#item_price_span, #item_price {
			color: #C93E3E;
			font-size: 19px;
			font-style: italic;
      /*font-weight: bold;*/
			text-decoration: underline;
		}
		#item_price_span { margin-left: 10px; }

		.submit_button { /* https://www.w3schools.com/howto/howto_css_animate_buttons.asp */
			width: 100%;
			border: 1px solid gray;
			border-radius: 4px;
      /* background-color: #4CAF50; */
      background-color: #39843d;

      margin-bottom: 15px;

			color: #FFFFFF;
			text-align: center;
      font-size: 19px;
			padding: 10px;

			transition: all 0.5s;
			cursor: pointer;
		}
		.submit_button:hover {
			background-color: #d88838;
		}
		.submit_button span {
			cursor: pointer;
			display: inline-block; /* somehow corrects vertical alignment discrepancy of ">>" character */
			position: relative;
			transition: padding-right 0.5s; /* transition all ... to also slowly change colour*/
		}
		.submit_button:hover span {
			padding-right: 25px; /* Magic!: moves "Submit" text left ... padding does effect document flow ... even when position is: absolute ... */
		}
		.submit_button span::after {
			content: '\00bb';
			position: absolute; /* like for zoom-image ... this stops this! element from effecting the document flow ... so keeps "Submit" text in the middle */
			opacity: 0;					/* But! see how padding below ... does its Magic! */
			top: 0;
			right: -20px; /* offsets ">>" character to the right side of span ... "+" = to the left ... "-" = to the right ... a bit strange */
			transition: right 0.5s; /* transition all ... to also slowly change colour*/
		}
		.submit_button:hover span::after {
			opacity: 1;
			right: 0; /* moves ">>" character left */
		}
		.info_link_container {
      padding: 5px 25px 5px 25px; /* top .. right .. bottom .. left */

			/*padding: 5px;*/
      /* border: 1px solid blue; */
			/* width: 50%; */ /* 100% produces same result ... if commented then the images determine the left column to be much larger than the right column */
      margin: 0 10px 0 10px; /* top .. right .. bottom .. left */

			width: 250px;
			flex-grow: 1;
		}
		.info_link_button {
			width: 100%;
			background-color: #436595;
			color: white;
			padding: 14px 20px;
			margin: 8px 0;
      border: 3px solid #16d0d0;
			border-radius: 4px;
			cursor: pointer;
			font-size: 24px;
      /* box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green; */
			transition: 0.5s;
		}
		.info_link_button:hover {
			background-color: #d07316;
		}
.button_category_text {
  color: #ffffba;
}

    /* Responsive @media CSS */

@media only screen and (min-width: 700px)	{
  table#prod_detail_tbl {
    font-size: 13px;
  }
  table#prod_detail_tbl th, table#prod_detail_tbl td {
    padding: 7px 5px 7px 10px; /* top .. right .. bottom .. left */
  }
}


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

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

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

		.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;
		}

		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_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;
			}
		}