body
		{
			font-size: 100%; /* browser default = 1.0em = 16px ... all other text on homepage is EM ... 100% means full browser text size 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: 1.9em;
			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 10px 2%; /* top .. right .. bottom .. left */
			color: #CE660F;
		}

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

			font-size: 20px;
			color: green;
		}

		#Illustrations_header
		{
			margin-top: 15px;
		}

		#Illustrations_paragraph /* only 1 paragraph within this text block ... so needs bottom margin rule above to be overridden here */
		{
			margin-top: 0;
			margin-bottom: 0;

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

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

		#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: 15px;
		}

		#nav_block /* messy! id here just to override css further down */
		{
			padding-top: 50px;
			border: 1px solid green;
		}

		.nav_link
		{
			font-size: 18px;
			margin-bottom: 35px;
		}

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

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

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

		p
		{
			/* margin-top: 0; */
			/* margin-bottom: 7px; */
      /* border: 1px dashed green; */
		}
    #paragraph_3, #paragraph_5, #paragraph_7, #paragraph_9, #paragraph_11, #paragraph_13, #paragraph_15, #paragraph_17, #paragraph_19
		{
			margin-top: 5px;
			margin-bottom: 5px;
      /* border: 1px dashed green; */
		}
    #paragraph_4, #paragraph_6, #paragraph_8, #paragraph_10, #paragraph_12, #paragraph_14, #paragraph_16, #paragraph_18, #paragraph_20
		{
			margin-top: 0;
			margin-bottom: 15px;
      /* border: 1px dashed green; */
		}

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

		.image_location	{
			max-height: 670px;

      position: absolute;

      width: 100%;
      height: 100%;

      top: 0;
      left: 0;
		}

    .iframe_div	{
      position: relative;
      width: 50%;
      /* border: 2px solid green; */

      margin-top: 10px;
      /* padding-top: 56.25%; */
      padding-top: 28.125%; /* 1/2 the above percentage height of 16x9 simply because this DIV's width is 50% of its parent */
    }

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

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

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

      margin: 0;
      text-align: center;
      margin: auto /* centers image */

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

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

      text-align: center;
      margin-top: 1px;
      margin-bottom: 2px;

      color: #1d00ac;

      /* 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: 0 10px 0 10px; /* top .. right .. bottom .. left */
    }

    .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" */
      padding: 1px;
        /* border: 1px solid green; */
    }

    .block_1_A
    {
      flex-grow: 1;

      padding-bottom: 3px;
      margin: 5px;
      margin-top: 0;
      border: 1px solid green;
    }

    .block_1_B
    {
      flex-grow: 1;

      padding-bottom: 2px;
      margin: 5px;
      margin-top: 0;
      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 different 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;
    }

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

    /* 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
      {
        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%;
			}
		}

    * {
      box-sizing: border-box;
    }