body {
   font-size: 100%;
   font-family: arial; /* oops... gets overridden in: navbar_middle_mega.css?version=25 */
   margin: 0;
}

p {
   font-size: 100%;
   font-family: arial; /* oops... fix for the above getting overridden */
}

h1
{
   font-family: Arial;
   font-size: 32px;
   font-style: italic;
   margin-left: 25px;
   color: #cc5002;

   margin-top: 14px;
   margin-bottom: 5px;
   /* border: 1px solid, rgb(33, 213, 237); */
}

h2
{
   font-family: Arial;
   font-size: 26px;
   font-style: italic;
   margin-left: 35px;
   margin-bottom: 0;
   margin-top: 9px;
   color: #000293;
}
.h2_paragraph_text {
   margin-left: 15px;
   margin-top: 12px;
   margin-bottom: 15px;
}

h3
{
   font-size: 18px;
   margin-top: 15px;
   margin-left: 10px;
   margin-bottom: 0;
   color: rgb(0, 64, 0);
}

#intro_container
{
   padding-top: 9px;
   margin-bottom: 5px;
   border: 1px solid, transparent;
   background-color: rgb(22, 192, 0, 0.02);
   /* border: 1px dashed, rgb(22, 192, 0); */
}

#intro_container p
{
   font-family: Arial;
   margin: 0 35px 10px 15px; /* top .. right .. bottom .. left */
}

#intro_container p:first-of-type /* there's also: first-child */
{
   margin-bottom: 15px;
}

figure /* figure has a default margin, so if you don't specify one, it'll still have one */
{
   margin: 0 17px 20px 17px; /* top .. right .. bottom .. left */
   padding: 2px 7px 2px 7px;
   /* border: 1px solid, rgb(33, 213, 237); */
}

/* there's also object-fit: https://www.w3schools.com/css/css3_object-fit.asp */
.figure_body_container
{
   display: flex;
	flex-wrap: wrap;
   column-gap: 20px;
   padding: 5px;
   /* border: 1px dashed, rgb(191, 0, 146); */
}

.figure_body_container > div
{
   width: 500px; /* the width at which flex wrap occurs */
   flex-grow: 1;
   /* border: 1px dashed, rgb(22, 192, 0); */
}

.figure_body_container img
{
   max-width: 100%;
   cursor: zoom-in;
   object-fit: scale-down; /* resize to fit inside containing division but don't become larger than the image's intrinsic size... comes into play when clicking an image to zoom via JS zoom and image is smaller than browser's (not monitor don't forget) size https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
}

figcaption {
  font-size: 0.9em;
  text-align: center;
  font-style: italic;
  color: #555;
  margin-top: 8px;
  margin-bottom: 8px;
}

.image_div_parent
{
   text-align: center;
   /* border: 1px solid, rgb(64, 0, 212); */
}

.image_div
{
   display: flex;
   align-items: center; /* keeps the image at the centre of the height of its division*/
   justify-content: center; /* keeps image at centre horizontally */
   border: 1px dashed, rgb(22, 192, 0);
}

.figure_image_title {
   font-family: Arial;
   font-size: 22px;
   font-weight: bold;
   margin-bottom: 7px;
   color: #006786;
}

.figure_text
{
   font-family: Arial;
   padding-left: 15px;
   padding-right: 25px;
   /* border: 1px dashed, rgb(198, 228, 0); */
   margin-top: 50px; /* Desired spacing BEFORE wrap */
}

.figure_text.wrapped /* See JS function "detectWrapForPairs()" */
{
   margin-top: 0; /* Remove spacing AFTER wrap */
}

.figure_text p
{
   margin-top: 5px;
   margin-bottom: 25px;
   /* border: 1px dashed, rgb(198, 228, 0); */
}

.figure_text p:last-child /* there's also: last-of-type */
{
   margin-bottom: 0; /* when page is narrow thereby causing figure_text to wrap onto the next line, this stops the figcaption from being pushed too far below the last paragraph */
}

/* from ChatGPT */
ul.figure_bullet_points {
  list-style: none;       /* Remove bullets */
  padding-left: 0;        /* Remove default left padding */
  margin: 0;              /* Adjust spacing if needed */
}
ul.figure_bullet_points li {
  line-height: normal; /* you can increase this if you like */
}
ul.figure_bullet_points li strong {
  display: block;
  font-family: Arial;
  font-size: 1.17em;      /* default h3 size */
  font-weight: bold;
  margin-left: 12px;
  margin-bottom: 5px;
  margin-top: 20px;
  color: rgb(1, 75, 1);
}



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

			font-size: 19px;
			color: #151A9D;
		}

		#gtm_logo
		{
			width: 97%;
			position: relative;
			margin: 7px auto 10px auto; /* top .. right .. bottom .. left */
		}

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

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

		.page_description_content
		{
			width: 95%;
			margin: 0 auto 0 auto; /* top .. right .. bottom .. left */
			border: 1px solid green;
			padding: 7px 5px 5px 5px;
		}

		p
      {
			margin-bottom: 10px;
		}




/* ...................................... BREADCRUMBS - Start ........................................ */

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

ol.breadcrumb {
   width: 95%;

   padding: 10px 16px;
   list-style: none;
   background-color: #eee;
   border: 1px solid green;
   margin: 2px auto 2px auto; /* top .. right .. bottom .. left */
}
ol.breadcrumb li {
   display: inline;
   /* font-size: 18px; */ /* commented 06-06-2024 */
}
ol.breadcrumb li+li:before {
   padding: 8px;
   color: black;
   content: "\00BB"; /* ">>" character ... (Link 1 ... from above) https://www.w3schools.com/cssref/css_entities.asp */
}
ol.breadcrumb li a {
   color: #0275d8;
   text-decoration: none;
}
ol.breadcrumb li a:hover {
   color: #F29445;
   text-decoration: underline;
}
ol.breadcrumb li.fixed_text {
   color: #74730E;
}

/* ...................................... BREADCRUMBS - End .......................................... */





      /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
		@media only screen and (min-width: 1600px)
		{
			/* #gtm_logo, #product_cat_block, #navbar_top_inner, .page_description_content, #footer_inner */
         #gtm_logo, #navbar_top_inner, .page_description_content, #footer_inner, ol.breadcrumb
			{
            /* 2025 July: I'm pretty sure that neither ".product_cat_block" Nor "navbar_product_cat.css" exist anymore */
            /* ------------------------------------------------------------------------------------------------------- */
				/* .product_cat_block ... is in ... navbar_product_cat.css ... which is set to different width for ... product_detail_page.css */
				width: 70%;
			}
		}