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

		/* ................................. Slideshow Banner ... Using radio buttons */

		img {
			vertical-align: middle;
		}

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



		figure
		{
			margin: 0;

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


		/* Slideshow container */
		.slideshow-container {
			position: relative;
			width: 95%;
			margin: 0 auto;

			z-index: 40;
		}

		.mySlides {
			position: relative;
			display: none;
			border: 1px solid blue;
		}

		/* Banner text container */
		.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;
		}

		/* Banner text */
		.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;

			animation-direction: reverse;
		}



		ul.breadcrumb
		{
			width: 95%; /* in other files ... the width isn't set here ... because breadcrumbs lives within some other DIV */

			padding: 10px 16px;

			list-style: none;
			background-color: #eee;

			border: 1px solid green;
			margin: 5px auto 6px auto; /* top .. right .. bottom .. left */
		}
		ul.breadcrumb li
		{
			display: inline;

			font-size: 15px;
		}
		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: #0275d8;
			text-decoration: none;
		}
		ul.breadcrumb li a:hover
		{
			color: #F29445;
			text-decoration: underline;
		}
		ul.breadcrumb li#fixed_text
		{
			color: #74730E;
		}




		@media only screen and (min-width: 1200px)
		{
			ul.breadcrumb li
			{
				font-size: 18px;
			}

			.scroll_text
			{
				font-size: 16px;
			}
		}




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

		h1
		{
			color: #CE660F;

			margin: 0;

			margin-left: 15px;
		}

		#top_text
		{
			position: relative;

			width: 95%;

			margin: 0 auto;

			padding: 15px;
			padding-bottom: 5px;

			font-family: arial;

			line-height: 1.3;

			border: 1px solid green;

			/* background-color: #EFF0C0; */
		}

		.dot_padding {
			position: relative;
			width: 95%;
			margin: 0 auto;
			padding: 5px;

			background-color: #EFF0C0;

			z-index: 40;
		}

		.dot {
			cursor: pointer;
			height: 15px;
			width: 15px;
			margin: 0 2px;
			background-color: #bbb;
			border-radius: 50%;
			display: inline-block;
			transition: background-color 0.6s ease;
		}

		.active, .dot:hover {
			background-color: #717171;
		}

		/* Fading animation */
		.fade {
			-webkit-animation-name: fade;
			-webkit-animation-duration: 1.5s;
			animation-name: fade;
			animation-duration: 1.5s;
		}

		@-webkit-keyframes fade {
			from {opacity: .4}
			to {opacity: 1}
		}

		@keyframes fade {
			from {opacity: .4}
			to {opacity: 1}
		}

		/* On smaller screens, decrease text size */
		@media only screen and (max-width: 300px) {
			.prev, .next, .text {font-size: 0.69em}
		}

		@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, .slideshow-container, .dot_padding, #product_cat_block, #navbar_top_inner, ul.breadcrumb, #footer_inner, #top_text
			{
				/* .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 */
			}
		}

		/* Next & previous buttons */
		.prev, .next
		{
			cursor: pointer;
			position: absolute;

			top: 62%;
			width: auto;

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

			color: green;

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

			transition: 0.6s ease;
			border-radius: 0 3px 3px 0;
			user-select: none;
		}

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

		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes mymove {
			from {left: -1150px;}
			to {left: 1150px;}
		}

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

		/* Number text (1/3 etc) */ /* Banner numbers here are not used ... and are commented in the HTML */

		/* .numbertext {
			color: #385435;
			font-size: 12px;
			font-weight: 600;
			font-style: italic;
			padding: 8px 12px;
			position: absolute;
			top: 0;
		} */

		/* ................................. Slideshow Radio Button Control */