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

		p
		{
			margin: 0;

			/* border: 1px solid grey; */

			padding: 2px;
		}

		.home_page_link
		{
			color: blue;
		}

		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: 20px;

			color: #CE660F;
		}

		h3.section_header
		{
			font-size: 18px;

			color: green;
		}

		.home_page_content
		{
			width: 100%;

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

			border: 1px solid orange;

			padding: 0 5px 5px 5px;
		}

		.text_block_1, .text_block_2, .text_block_3, .text_block_4
		{
			font-size: 13px;
			line-height: 150%;

			font-family: arial;

			/* border: 1px solid blue; */

			margin-top: 10px;

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

		.text_block_2 > p:first-child
		{
			margin-bottom: 10px;
		}

		.screen_print_text /* THIS IS A QUICK FIX */
		{
			/* padding-top: 0; */
			padding-bottom: 0;
		}

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

			/* border: 1px solid pink; */

			margin: 2px;
			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-style: italic;
			font-weight: bold;

			margin-top: 3px;

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

		figure.banner_figures_captions
		{
			margin: 0;

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

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

			/* border: 1px solid pink; */

			padding: 2px;

			margin: 0;
		}

		figcaption.figures_image_blocks
		{
			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 green; */

			padding: 0;
		}

		#estate_agent_4_images
		{
			color: purple;

			font-size: 17px;

			font-weight: bold;

			margin-bottom: 12px;

			/* padding: 0; */

			/* border: 1px solid 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: 475px;
		}

		#block_1_A
		{
			flex-grow: 1;
		}

		#block_1_B
		{
			flex-grow: 1.5;
		}

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

		.image_flex_2
		{
			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: 10px;

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

		.image_flex_2 > div
		{
			width: 175px; /* use width here ... not max-width */

			flex-grow: 1;
		}

		.image_flex_2 img
		{
			max-width: 100%;

			max-height: 650px;
		}

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

		/* 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, .image_flex_2
			{
				justify-content: space-around;
			}
		}

		/* ------------------- Grid Sections ------------------- */

		* {
			box-sizing: border-box;
		}

		img
		{
			vertical-align: middle; /* is this actually needed ??? ... Might! affect banner scrolling images */
		}

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

		.image_grid_1
		{
			display: grid;

			justify-content: space-around; /* THIS is only effective when using: "auto" ... Not! "1fr" */

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

			/* the issue below happens for narrow window or screens ... when the elements occupy 2 rows */
			/* --------------------- */
			/* grid gap was causing a vertical overflow ... but here's the solution 1st answer "Michael B" https://stackoverflow.com/questions/48214281/why-does-grid-gap-cause-an-overflow */

			grid-template-columns: 0.49fr 0.49fr;
				/* grid-template-rows: 0.149fr 0.149fr; */

			grid-gap: 0.02fr; /* 20px; */ /* see "grid-row & column gap" for using them separately ... https://www.w3schools.com/cssref/pr_grid-gap.asp */

			/* However! */
			/* -------- */
			/* grid-row-gap: 0.5%; (or px) */ /* see note above ... This Again Causes Overflow ... BUT it seems you Cannot! use "fr" for Rows! so it's easier to simply accept having zero row gap ... then at least the caption margin is properly controllable */

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

			margin-top: 5px;

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

		.image_grid_1 img
		{
			max-width: 100%;
			/* max-height: 475px; */

			/* max-height: 15%; */

			/* height: 100px; */

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

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

		.image_grid_2
		{
			display: grid;

			justify-content: space-around;

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

			grid-gap: 1%;

			margin-top: 10px;

			padding: 10px;

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

		.image_grid_2 img
		{
			max-width: 100%;
			max-height: 475px;

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

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

		.image_grid_3
		{
			display: grid;

			justify-content: space-around;

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

			grid-gap: 1%;

			margin-top: 10px;

			padding: 10px;

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

		.image_grid_3 img
		{
			max-width: 100%;
			max-height: 475px;

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

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

		#gtm_logo
		{
			width: 97%;

			position: relative;

			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: 100%;
		}

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

		#slide_divs_container
		{
			width: 100%;

			border: 1px solid green;

			overflow: hidden;

			position: relative;

			margin: 0 auto;

			z-index: 40;
		}

		/* @keyframes banner_animation
		{
			100% { transform: translateX(1500px) };
		} */

		.slide_div
		{
			position: absolute;

			/* animation: banner_animation 3.0s; */ /* infinite; */

			/* animation-iteration-count: 1; */

			/* animation-fill-mode: forwards; */

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

		.text_container
		{
			overflow: hidden; /* required ... else the: scrolling text is still visible when past the sides of the bar */

			text-align: center;
			background-color: #376281;
		}

		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes mymove
		{
			from {left: -1150px;} /* not used anymore ... so is now commented below within "scroll_text" */
			to {left: 1150px;}
		}

		/* Standard syntax */
		@keyframes mymove
		{
			from {left: -1150px;}
			to {left: 1150px;}
		}

		.scroll_text
		{
			position: relative; /* required for ... webkit-animation */

			color: #ccc4ad;

			font-size: 9px;

			padding: 8px 12px;

			text-align: center;

			/* -webkit-animation: mymove 5s infinite; */ /* Safari 4.0 - 8.0 */
			/* animation: mymove 12s linear infinite; */
		}

		#dot_block
		{
			border: 1px solid orange;
		}

		.dot_padding
		{
			width: 100%;

			display: flex;
			justify-content: center;

			position: relative;

			margin: 0 auto;
			padding: 5px;

			background-color: #EFF0C0;

			/* border: 1px solid orange; */

			z-index: 40;
		}

		.dot
		{
			cursor: pointer;

			height: 15px;
			width: 15px;

			margin: 0 4px;

			margin-top: 3px;

			background-color: #B6BAB9;

			/* border: 1px solid orange; */

			border-radius: 50%;

			transition: background-color 0.75s ease;
		}

		.dot:hover
		{
			background-color: #E3B067;
		}

		.active
		{
			background-color: #0A956E
		}

		.control_slider
		{
			/* -webkit-appearance: none; */

			width: 100px;
			height: 13px;

			/* direction: rtl; */
		}

		#speed_indicator
		{
			margin-right: 10px;

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

		/* @keyframes indicator
		{
			0% { background-position: 0 0; }

			100% { background-position: -300px 0; }
		} */

		#duration_indicator
		{
			border: 1px solid blue;

			background: linear-gradient(125deg, #BB988C, #ffffff, #8CBB92);

			/* animation: indicator 2s ease infinite; */

			/* background: linear-gradient(90deg, #f90 var(--pos, 0%), #444 0) 50%/ 5em;

			animation: blinds .85s ease-in-out infinite alternate; */
		}

		.play_banner, .pause_banner
		{
			cursor: pointer;

			font-size: 11px;

			margin-left: 15px;
			margin-right: 15px;

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

			color: white;
			background-color: green;

			/* border: 1px solid orange; */ /* border-radius: 50%; */

			transition: background-color 0.6s ease;
		}

		.pause_banner
		{
			background-color: #C15A58;
		}

		.play_banner:hover
		{
			color: black;
			background-color: #DDF9F2; /* light green */
		}

		.pause_banner:hover
		{
			color: black;
			background-color: #F0D0D7; /* light red */
		}

		/* Fading animation */

		/*@-webkit-keyframes fade_in {
			from {opacity: 0.2}
			to {opacity: 1}
		}*/

		@keyframes fade_in
		{
			from { opacity: 0.2 }
			to { opacity: 1 }
		}

		.fade_in
		{
			/*-webkit-animation-name: fade_in;
			-webkit-animation-duration: 3.0s;*/

			animation-name: fade_in;
			animation-duration: 0.5s;
		}

		@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, #slide_divs_container, .dot_padding, #product_cat_block, #navbar_top_inner, .home_page_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%;
			}

			#gtm_logo
			{
				/*margin-top: 50px;*/ /* when top navbar = fixed this is needed ... but mobile = relative so initially set to: 0 further up */
			}
		}

		#prev, #next
		{
			cursor: pointer;
			position: absolute;

			top: 60%;

			width: auto;

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

			color: #006622;

			font-weight: bold;
			font-size: 1.12em;

			transition: 0.6s ease;
			border-radius: 0 3px 3px 0;

			user-select: none;

			z-index: 5;
		}

		/* Position the "next button" to the right */

		#next
		{
			right: 0;
			border-radius: 3px 0 0 3px;
		}

		/* On hover, add a black background color with a little bit see-through */

		#prev:hover, #next:hover
		{
			background-color: rgba(145, 100, 70, 0.55);
		}

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

		@media only screen and (min-width: 1200px)
		{
			.scroll_text
			{
				font-size: 16px;
			}
			.text_block_1, .text_block_2, .text_block_3, .text_block_4
			{
				font-size: 17px;
			}
		}

		@media only screen and (min-width: 600px) /* screens 600px or wider */
		{
			.image_grid_1
			{
				/* grid gap was causing a vertical overflow ... but here's the solution 1st answer "Michael B" https://stackoverflow.com/questions/48214281/why-does-grid-gap-cause-an-overflow */

				grid-template-columns: 0.245fr 0.245fr 0.245fr 0.245fr;
				/* grid-template-rows: none; */

				grid-gap: 0.02fr;
			}
			figcaption.figures_image_blocks, figcaption.single_image
			{
				margin-top: 1px;
			}
		}